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。

相关文章

Spring StateMachine实现状态机使用示例详解

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​，用于描述对象在其生命
阅读更多...
Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建
阅读更多...
IntelliJ IDEA2025创建SpringBoot项目的实现步骤

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.
阅读更多...
Linux下删除乱码文件和目录的实现方式

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》：本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录
阅读更多...
SpringBoot+EasyExcel实现自定义复杂样式导入导出

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定，动态列2、动态下拉3、自定义锁定行/列，添加密码4、合并
阅读更多...
mybatis执行insert返回id实现详解

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID：1. ​​useGeneratedKeys+keyProperty（推
阅读更多...
Spring Boot集成Druid实现数据源管理与监控的详细步骤

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控
阅读更多...
Linux在线解压jar包的实现方式

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》：本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u
阅读更多...
c++ 类成员变量默认初始值的实现

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中，如果使用类成员变量时未给定其初始值，那么它将被
阅读更多...
Qt使用QSqlDatabase连接MySQL实现增删改查功能

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2