SAPUI5 (39) - 直接提交 HTTP 请求实现 CRUD

2024-02-05 13:48
文章标签 实现 http 请求 提交 直接 39 crud sapui5

本文主要是介绍SAPUI5 (39) - 直接提交 HTTP 请求实现 CRUD，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

OpenUI5 作为一种客户端的 UI 技术，自身并不直接与后端的服务器或者数据库交互。客户端只是提交 HTTP request，不管是 OData 的 create / update / delete 等方法，还是单向绑定或双向绑定时的 submitChanges 方法，都是对 HTTP Request 的一种封装。网络上有文章介绍 OpenUI5 中如何提交 HTTP request，或者使用 Ajax call 提交 HTTP request。这些方法对于服务器不提供 OData service 的场合有其实用价值。

本文介绍如何在 OpenUI5 中向后端提交 HTTP Request，实现 CRUD 的方法。代码基于第 38 篇的代码进行修改。

基本上，View 的部分没有变化，主要变化集中在 Controller （App.controller.js 文件）中。

Edit

editEmployee: function() {var oView = this.getView();var oChangedData = {EmpId: oView.byId("EmpId").getValue(),EmpName: oView.byId("EmpName").getValue(),EmpAddr: oView.byId("EmpAddr").getValue()};OData.request({requestUri: sServiceUrl + sCurrentPath.substr(1),method: "GET",headers: {"X-Requested-With": "XMLHttpRequest","Content-Type": "application/atom+xml","DataServiceVersion": "2.0","X-CSRF-Token": "Fetch"}},function(data, response) {var oHeaders = {"x-csrf-token": response.headers["x-csrf-token"],"Accept": "application/json"};OData.request({requestUri: sServiceUrl + sCurrentPath.substr(1),method: "PUT",headers: oHeaders,data: oChangedData},// successfunction(oData, oRequest) {sap.m.MessageToast.show("Employee updated Successfully");oEmployeeModel.refresh(true);},// errorfunction(oError) {sap.m.MessageToast.show("Employee update Failed");});},function(err) {var request = err.request;var response = err.response;sap.m.MessageToast.show("Error in Get -- Request " + request + " Response " + response);});
}

代码说明：

  • 使用 oChangedData 对象表示修改过的数据，一共三个字段。

  • OData.request() 方法提交 HTTP 请求。这里比较 magical 的一点事情，就是 OData model 定义后，就存在全局 (global) 的 OData 对象。

  • serviceUrl 在 onInit 事件中，从 manifest.json 文件获得：

onInit: function() {...// get service url from manifest.jsonvar config = this.getOwnerComponent().getManifest();sServiceUrl = config["sap.app"].dataSources.mainService.uri;...
}

Create

createEmployee: function() {var oView = this.getView();var oNewEntry = {EmpId: oView.byId("EmpId").getValue(),EmpName: oView.byId("EmpName").getValue(),EmpAddr: oView.byId("EmpAddr").getValue()};OData.request({requestUri: sServiceUrl + "EmployeeCollection",method: "GET",headers: {"X-Requested-With": "XMLHttpRequest","Content-Type": "application/atom+xml","DataServiceVersion": "2.0","X-CSRF-Token": "Fetch"}},function(data, response) {var oHeaders = {"x-csrf-token": response.headers["x-csrf-token"],"Accept": "application/json"};OData.request({requestUri: sServiceUrl + "EmployeeCollection",method: "POST",headers: oHeaders,data: oNewEntry},// successfunction(oData, oRequest) {sap.m.MessageToast.show("Employee Created Successfully");oEmployeeModel.refresh(true);},// errorfunction(oError) {sap.m.MessageToast.show("Employee Creation Failed");});},function(err) {var request = err.request;var response = err.response;sap.m.MessageToast.show("Error in Get -- Request " + request + " Response " + response);});
}

Delete

deleteEmployee: function() {var oView = this.getView();var oEntry = {EmpId: oView.byId("EmpId").getValue()};OData.request({requestUri: sServiceUrl + sCurrentPath.substr(1),method: "GET",headers: {"X-Requested-With": "XMLHttpRequest","Content-Type": "application/atom+xml","DataServiceVersion": "2.0","X-CSRF-Token": "Fetch"}},function(data, response) {var oHeaders = {"x-csrf-token": response.headers["x-csrf-token"],"Accept": "application/json"};OData.request({requestUri: sServiceUrl + sCurrentPath.substr(1),method: "DELETE",headers: oHeaders,data: oEntry},// successfunction(oData, oRequest) {sap.m.MessageToast.show("Employee deleted Successfully");window.location.reload(true);},// errorfunction(oError) {sap.m.MessageToast.show("Employee deletion Failed");});},function(err) {var request = err.request;var response = err.response;sap.m.MessageToast.show("Error in Get -- Request " + request + " Response " + response);});
}

Controller 完整代码

以下是 Controller 的完整代码。

sap.ui.define(["sap/ui/core/mvc/Controller"
], function(Controller) {"use strict";var oEmployeeDialog;var oEmployeeModel;var sServiceUrl;var sCurrentPath;var sCurrentEmp; // cureent employeereturn Controller.extend("zui5_odata_http_request.controller.App", {onInit: function() {oEmployeeModel = this.getOwnerComponent().getModel();// get service url from manifest.jsonvar config = this.getOwnerComponent().getManifest();sServiceUrl = config["sap.app"].dataSources.mainService.uri;oEmployeeModel.setUseBatch(false);this.getView().setModel(oEmployeeModel);oEmployeeDialog = this.buildDialog();},// Build employee dialogbuildDialog: function() {var oView = this.getView();var oEmpDialog = oView.byId("employeeDialog");if (!oEmpDialog) {oEmpDialog = sap.ui.xmlfragment(oView.getId(),"zui5_odata_http_request.view.EmployeeDialog");oView.addDependent(oEmpDialog);var oCancelButton = oView.byId("CancelButton");oCancelButton.attachPress(function() {oEmpDialog.close();});}return oEmpDialog;},onCreate: function() {var that = this;var oView = this.getView();oEmployeeDialog.open();// set form propertiesoEmployeeDialog.setTitle("Create Employee");oView.byId("EmpId").setEditable(true);oView.byId("SaveEdit").setVisible(false);oView.byId("SaveCreate").setVisible(true);// clear values of controlsoView.byId("EmpId").setValue("");oView.byId("EmpName").setValue("");oView.byId("EmpAddr").setValue("");oView.byId("SaveCreate").attachPress(function() {// commit creationthat.createEmployee();// close dialogif (oEmployeeDialog) {oEmployeeDialog.close();}});},onEdit: function() {var that = this;var oView = this.getView();// Set bindingif (sCurrentPath) {oEmployeeDialog.bindElement(sCurrentPath);} else {sap.m.MessageToast.show("No employee was selected.");return;}oEmployeeDialog.open();oEmployeeDialog.setTitle("Edit Employee");oView.byId("EmpId").setEditable(false);oView.byId("SaveEdit").setVisible(true);oView.byId("SaveCreate").setVisible(false);oView.byId("SaveEdit").attachPress(function() {that.editEmployee();// close dialogif (oEmployeeDialog) {oEmployeeDialog.close();}});},onDelete: function() {var that = this;if (!sCurrentPath) {sap.m.MessageToast.show("Now employee was selected.");return;}// Build dialogvar oDeleteDialog = new sap.m.Dialog();oDeleteDialog.setTitle("Delete Employee");oDeleteDialog.addContent(new sap.m.Label({text: "Are you sure to delete Employee " + sCurrentEmp + "?"}));oDeleteDialog.addButton(new sap.m.Button({text: "Confirm",press: function() {that.deleteEmployee();oDeleteDialog.close();}}));oDeleteDialog.open();},createEmployee: function() {var oView = this.getView();var oNewEntry = {EmpId: oView.byId("EmpId").getValue(),EmpName: oView.byId("EmpName").getValue(),EmpAddr: oView.byId("EmpAddr").getValue()};OData.request({requestUri: sServiceUrl + "EmployeeCollection",method: "GET",headers: {"X-Requested-With": "XMLHttpRequest","Content-Type": "application/atom+xml","DataServiceVersion": "2.0","X-CSRF-Token": "Fetch"}},function(data, response) {var oHeaders = {"x-csrf-token": response.headers["x-csrf-token"],"Accept": "application/json"};OData.request({requestUri: sServiceUrl + "EmployeeCollection",method: "POST",headers: oHeaders,data: oNewEntry},// successfunction(oData, oRequest) {sap.m.MessageToast.show("Employee Created Successfully");oEmployeeModel.refresh(true);},// errorfunction(oError) {sap.m.MessageToast.show("Employee Creation Failed");});},function(err) {var request = err.request;var response = err.response;sap.m.MessageToast.show("Error in Get -- Request " + request + " Response " + response);});},editEmployee: function() {var oView = this.getView();var oChangedData = {EmpId: oView.byId("EmpId").getValue(),EmpName: oView.byId("EmpName").getValue(),EmpAddr: oView.byId("EmpAddr").getValue()};OData.request({requestUri: sServiceUrl + sCurrentPath.substr(1),method: "GET",headers: {"X-Requested-With": "XMLHttpRequest","Content-Type": "application/atom+xml","DataServiceVersion": "2.0","X-CSRF-Token": "Fetch"}},function(data, response) {var oHeaders = {"x-csrf-token": response.headers["x-csrf-token"],"Accept": "application/json"};OData.request({requestUri: sServiceUrl + sCurrentPath.substr(1),method: "PUT",headers: oHeaders,data: oChangedData},// successfunction(oData, oRequest) {sap.m.MessageToast.show("Employee updated Successfully");oEmployeeModel.refresh(true);},// errorfunction(oError) {sap.m.MessageToast.show("Employee update Failed");});},function(err) {var request = err.request;var response = err.response;sap.m.MessageToast.show("Error in Get -- Request " + request + " Response " + response);});},deleteEmployee: function() {var oView = this.getView();var oEntry = {EmpId: oView.byId("EmpId").getValue()};OData.request({requestUri: sServiceUrl + sCurrentPath.substr(1),method: "GET",headers: {"X-Requested-With": "XMLHttpRequest","Content-Type": "application/atom+xml","DataServiceVersion": "2.0","X-CSRF-Token": "Fetch"}},function(data, response) {var oHeaders = {"x-csrf-token": response.headers["x-csrf-token"],"Accept": "application/json"};OData.request({requestUri: sServiceUrl + sCurrentPath.substr(1),method: "DELETE",headers: oHeaders,data: oEntry},// successfunction(oData, oRequest) {sap.m.MessageToast.show("Employee deleted Successfully");window.location.reload(true);},// errorfunction(oError) {sap.m.MessageToast.show("Employee deletion Failed");});},function(err) {var request = err.request;var response = err.response;sap.m.MessageToast.show("Error in Get -- Request " + request + " Response " + response);});},onItemPress: function(evt) {var context = evt.getSource().getBindingContext();sCurrentPath = context.getPath();sCurrentEmp = context.getProperty("EmpId");}});});

源代码

Github: sap_openui5_practice_projects

参考资料

Simple Exercise on OData and SAP UI5 Application for the basic CRUD Operation

这篇关于SAPUI5 (39) - 直接提交 HTTP 请求实现 CRUD的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/681106。

相关文章

SpringBoot集成redisson实现延时队列教程

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配
阅读更多...
Python的Darts库实现时间序列预测

Python的Darts库实现时间序列预测

《Python的Darts库实现时间序列预测》Darts一个集统计、机器学习与深度学习模型于一体的Python时间序列预测库,本文主要介绍了Python的Darts库实现时间序列预测,感兴趣的可以了解... 目录目录一、什么是 Darts？二、安装与基本配置安装 Darts导入基础模块三、时间序列数据结构与
阅读更多...
Python使用FastAPI实现大文件分片上传与断点续传功能

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现（FastAPI）2.1 运行环境2.2 目录结构建议2.3 serv
阅读更多...
C#实现千万数据秒级导入的代码

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很
阅读更多...
SpringBoot+RustFS 实现文件切片极速上传的实例代码

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot？二、环境准备与部署2.1 安装 RustF
阅读更多...
Nginx部署HTTP/3的实现步骤

Nginx部署HTTP/3的实现步骤

《Nginx部署HTTP/3的实现步骤》本文介绍了在Nginx中部署HTTP/3的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录前提条件第一步：安装必要的依赖库第二步：获取并构建 BoringSSL第三步：获取 Nginx
阅读更多...
MyBatis Plus实现时间字段自动填充的完整方案

MyBatis Plus实现时间字段自动填充的完整方案

《MyBatisPlus实现时间字段自动填充的完整方案》在日常开发中,我们经常需要记录数据的创建时间和更新时间,传统的做法是在每次插入或更新操作时手动设置这些时间字段,这种方式不仅繁琐,还容易遗漏,... 目录前言解决目标技术栈实现步骤1. 实体类注解配置2. 创建元数据处理器3. 服务层代码优化填充机制详
阅读更多...
Python实现Excel批量样式修改器(附完整代码)

Python实现Excel批量样式修改器(附完整代码)

《Python实现Excel批量样式修改器(附完整代码)》这篇文章主要为大家详细介绍了如何使用Python实现一个Excel批量样式修改器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录前言功能特性核心功能界面特性系统要求安装说明使用指南基本操作流程高级功能技术实现核心技术栈关键函
阅读更多...
Java实现字节字符转bcd编码

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码（Binary-Coded Decima
阅读更多...
SpringBoot全局域名替换的实现

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2