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 Boot应用中的实现过程

分布式锁在Spring Boot应用中的实现过程

《分布式锁在SpringBoot应用中的实现过程》文章介绍在SpringBoot中通过自定义Lock注解、LockAspect切面和RedisLockUtils工具类实现分布式锁,确保多实例并发操作... 目录Lock注解LockASPect切面RedisLockUtils工具类总结在现代微服务架构中，分布
阅读更多...
Java使用Thumbnailator库实现图片处理与压缩功能

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的
阅读更多...
Python使用Tenacity一行代码实现自动重试详解

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门：一行代码实现优雅重试精细控制：让重试按我
阅读更多...
Redis客户端连接机制的实现方案

Redis客户端连接机制的实现方案

《Redis客户端连接机制的实现方案》本文主要介绍了Redis客户端连接机制的实现方案,包括事件驱动模型、非阻塞I/O处理、连接池应用及配置优化,具有一定的参考价值,感兴趣的可以了解一下... 目录1. Redis连接模型概述2. 连接建立过程详解2.1 连php接初始化流程2.2 关键配置参数3. 最大连
阅读更多...
Python实现网格交易策略的过程

Python实现网格交易策略的过程

《Python实现网格交易策略的过程》本文讲解Python网格交易策略,利用ccxt获取加密货币数据及backtrader回测,通过设定网格节点,低买高卖获利,适合震荡行情,下面跟我一起看看我们的第一... 网格交易是一种经典的量化交易策略，其核心思想是在价格上下预设多个“网格”，当价格触发特定网格时执行买
阅读更多...
python设置环境变量路径实现过程

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法：临时设置（Windows用`set`,Linux/macOS用`export`）、永久设置（系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量（适用于当前会话）永久设置环境变量（Windows系统
阅读更多...
python运用requests模拟浏览器发送请求过程

python运用requests模拟浏览器发送请求过程

《python运用requests模拟浏览器发送请求过程》模拟浏览器请求可选用requests处理静态内容,selenium应对动态页面,playwright支持高级自动化,设置代理和超时参数,根据需... 目录使用requests库模拟浏览器请求使用selenium自动化浏览器操作使用playwright
阅读更多...
SpringBoot监控API请求耗时的6中解决解决方案

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi
阅读更多...
Python对接支付宝支付之使用AliPay实现的详细操作指南

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali
阅读更多...
Spring Security 单点登录与自动登录机制的实现原理

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录（SSO）与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录（SSO）1.2 自动登录（Remember Me）二、代码分析三、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2