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

最新推荐文章于 2024-05-26 22:51:51 发布
最新推荐文章于 2024-05-26 22:51:51 发布
阅读量4.1k 收藏 6
点赞数 2
分类专栏： # SAPUI5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stone0823/article/details/72910930
版权

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
                },
                // success
                function(oData, oRequest) {
                    sap.m.MessageToast.show("Employee updated Successfully");
                    oEmployeeModel.refresh(true);
                },
                // error
                function(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.json
    var 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
                },
                // success
                function(oData, oRequest) {
                    sap.m.MessageToast.show("Employee Created Successfully");
                    oEmployeeModel.refresh(true);
                },
                // error
                function(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
                },
                // success
                function(oData, oRequest) {
                    sap.m.MessageToast.show("Employee deleted Successfully");
                    window.location.reload(true);
                },
                // error
                function(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 employee

	return Controller.extend("zui5_odata_http_request.controller.App", {

		onInit: function() {
			oEmployeeModel = this.getOwnerComponent().getModel();

			// get service url from manifest.json
			var config = this.getOwnerComponent().getManifest();
			sServiceUrl = config["sap.app"].dataSources.mainService.uri;

			oEmployeeModel.setUseBatch(false);
			this.getView().setModel(oEmployeeModel);

			oEmployeeDialog = this.buildDialog();
		},

		// Build employee dialog
		buildDialog: 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 properties
			oEmployeeDialog.setTitle("Create Employee");
			oView.byId("EmpId").setEditable(true);
			oView.byId("SaveEdit").setVisible(false);
			oView.byId("SaveCreate").setVisible(true);

			// clear values of controls
			oView.byId("EmpId").setValue("");
			oView.byId("EmpName").setValue("");
			oView.byId("EmpAddr").setValue("");

			oView.byId("SaveCreate").attachPress(function() {
				// commit creation
				that.createEmployee();

				// close dialog
				if (oEmployeeDialog) {
					oEmployeeDialog.close();
				}
			});
		},

		onEdit: function() {
			var that = this;
			var oView = this.getView();

			// Set binding
			if (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 dialog
				if (oEmployeeDialog) {
					oEmployeeDialog.close();
				}
			});
		},

		onDelete: function() {
			var that = this;

			if (!sCurrentPath) {
				sap.m.MessageToast.show("Now employee was selected.");
				return;
			}

			// Build dialog
			var 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
						},
						// success
						function(oData, oRequest) {
							sap.m.MessageToast.show("Employee Created Successfully");
							oEmployeeModel.refresh(true);
						},
						// error
						function(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
						},
						// success
						function(oData, oRequest) {
							sap.m.MessageToast.show("Employee updated Successfully");
							oEmployeeModel.refresh(true);
						},
						// error
						function(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
						},
						// success
						function(oData, oRequest) {
							sap.m.MessageToast.show("Employee deleted Successfully");
							window.location.reload(true);
						},
						// error
						function(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

stone0823
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openui5-model-json-crud:一个OpenUI5库，该库扩展了JSONModel以支持CRUD操作
05-07
openui5-model-json-crud 一个OpenUI5库，该库扩展了JSONModel以支持CRUD（创建，读取，更新，删除）操作。 它使用fetch（不是jQuery.ajax）将请求发送到服务器，并使用响应填充JSON模型。 如前所述，OpenUI5 CRUD JSON模型使用访存，因此返回Promises。 演示版 您可以在此处查看现场演示： 项目结构 演示-图书馆的现场演示 dist-分发文件夹，其中包含准备使用的库 src-开发文件夹 测试-库的测试框架 入门 安装 将openui5-model-json-crud安装为npm模块 $ npm install openui5-model-json-crud 配置manifest.json 将库添加到sap.ui5 / dependencies / libs并在manifest.json文件的sap.ui5 / re
OPEN(SAP) UI5 学习入门系列之三：MVC （下） - 视图与控制器
ChampaignWolf的专栏
12-07 831
OPEN(SAP) UI5 学习入门系列之三：MVC （下） - 视图与控制器
OpenUI 可视化 AI：打造令人惊艳的前端设计！
最新发布
程序员小刘
05-26 1696
● 生成一个学生管理查询功能，白色字体，背景蓝色，包含:序号、年龄、性别、分数、操作列显示编辑和删除，用中文展示，提供5条测试数据，Vue实现。● 生成一个学生管理查询功能，白色字体，背景蓝色，包含:序号、年龄、性别、分数、操作列显示编辑和删除，用中文展示，提供5条测试数据，Vue实现。许久未更新, 前端时间在逛github，发现一个挺有的意思项目，通过口语化方式生成前端UI页面，能够直观的看到效果，下面来给大家演示下。● 生成一个蓝色主题，白色字体的导航，使用中文，包含物流信息，vue风格。
crud操作_使用HTTP方法：CRUD操作
cunfen6312的博客
07-28 1376
crud操作 使用HTTP方法：CRUD操作 (Using HTTP Methods: CRUD Operations) Now we will see how to use the HTTP methods to perform the basic crud operations in the registration app. 现在，我们将看到如何使用HTTP方法在注册应用程序中执行基本的...
SAPUI5 (24) - 增删改查之查询数据
王敏的专栏
03-04 4480
CRUD是应用程序的核心。openui5是一个前端的UI库，CRUD是通过oData的服务来完成。openui5提交基于http协议的请求给服务器，其它交给服务器端处理。oData协议是微软公司发起，比web service更轻量级的通讯协议。SAP的Neweaver Gateway 就是SAP以OData形式暴露后端业务数据的一个组件。SAPUI5提供的方便的数据绑定功能，将前端展示组件绑定到后端
API Testing 4 - Http方法-CRUD操作
wumingxiaoyao的博客
05-29 428
先看一个现实的例子： 第一次用微信，需要提交一些基本信息进行注册。注册成功后，你将有一个微信号。那么是谁在为你服务呢？是一个微信API，它负责为你创建Create一个用户账号，并将你提供的信息存到数据库中。 现在你可以用你的微凭证（微信号和密码）登入微信了，登入成功后可以看到属于你的基本信息。那么是谁在为你服务呢？是一个微信API，它负责获取Retrieve你的基本信息。 时间久了，你可能需要更新微信的一些基本信息，比如微信名字。你将老的微信名字更新成一个新的。那么是谁在为你服务？是一个微信API，它负责更
SAP HTTP/HTTPS请求get.post.head等
修电脑的猫的博客
07-20 1851
SAP HTTP,HTTPS
SAP ABAP HTTP POST
u011525922的博客
06-30 611
abap调用外部http发送json
d2-crud-plus:面向配置的crud框架，基于d2-admin的d2-crud,简化d2-crud配置，快速开发crud功能；支持远程数据字典，国际手机号校验，alioss、腾讯云cos、七牛云文件上传、头像裁剪，省市区选择，权限管理，代码生成
08-04
【d2-crud-plus】面向配置的crud编程基于d2-admin 的 d2-crud 的扩展,简化d2-crud配置，快速开发crud功能。fast-crud支持vue3的fast-crud已发布，开发crud更快、更强、更爽。文档地址： 示例地址： / 仓库地址： / ...
spring-boot-04-web-restfulcrud
12-08
《Spring Boot 2.4 RESTful CRUD 实战详解》 在现代Web开发中，Spring Boot以其简洁、高效的特点，已经成为主流框架之一。本教程聚焦于Spring Boot 2.4版本，针对初学者提供一个完整的RESTful CRUD（创建、读取、...
sapui5-app-fiori:一个简单的 SAPUI5 CRUD 应用程序，通过 odata 服务带有 netweaver 后端
06-21
SAPUI5 Fiori 示例应用程序 归功于的让我开始 sap.ui.table 视图 没有 mvc，一切都在 index.html 里面 CRUD 操作一切正常 - 建设中 sap.m 移动视图 主从设计模式 MVC CRUD 操作 模拟服务器 格式化程序
Vue-and-CRUD:Vue中实现CRUD技术
04-04
Vue和CRUD Vue中实现CRUD技术依赖文件的安装说明：使用本地文件使用npm命令：npm i -s vue引导脚本axios monent jquery♡说明：通过script标签约会等项目文件说明
typescript-todo:使用Typescript实现CRUD
03-22
在本项目"typescript-todo"中，我们主要探讨如何利用TypeScript这个强大的静态类型语言来实现CRUD（创建、读取、更新、删除）操作。TypeScript是JavaScript的一个超集，它提供了丰富的类型系统和现代化的编程特性，...
SAP ABAP 发送http 请求实例参考（http post request）
SAP自学之路
11-04 920
本文展示的实例是通过http请求向指定API发送业务数据
用http请求方式调用sap接口，以xml格式数据交换
badi0555的博客
04-18 1233
import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import java.io.OutputStreamWriter;import java.net.HttpURLConnection;import java.net.URL; import org.a...
SAP Http接口——通过RESTful实现
weixin_44911062的博客
04-09 9097
最近接到一个需求，用户希望SAP发布Json格式的http接口，在此感谢万能的朋友以及度娘，划水的时候抽空写了下面的Demo，下面开始展示： 哦对，此接口方式适用于觉得Webservice的XML格式太low太麻烦，又觉得Odata太繁杂的外围系统 tmd。 代码啪啪使劲敲，需求more and more，烦躁>.< 以下，是发布SAP RESTful接口的全过程目录：一.GUI端代码1.定义类 ZCL_RESTFUL_TEST2.Get事件3.Post事件二.GUI端配置TCode：SICF
SAP ABAP HTTP传输服务汇总（持续更新）
Fall_in_Lc的博客
07-11 1241
获取请求方法 GET/POST 获取传输内容 postman => raw 返回传输内容 获取抬头内容 postman => Headers 获取字段内容 postman => Params JSON 解析 XML 解析 结论 以上内容源于馒头日常工作中的记录，如有新内容的添加，将持续更新。点赞收藏关注不迷路...
SAP ABAP调用HTTP接口并用token进行登陆 “1024节日快乐了鸭“
Sunflower
10-24 3170
这个我们用到了工厂,我的个人理解是:我们把两个客户端所建立的连接放到同一个工厂中去,由工厂进行管理,在工厂中的数据是共享的,可以相互使用.
036.crud准备
大保健
02-16 240
实验要求： 1）、RestfulCRUD：CRUD满足Rest风格； URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作     普通CRUD（uri来区分操作）   RestfulCRUD 查询 getEmp emp-GET 添加 addEmp?xxx emp-POST 修改 updateEmp?id=xxx&amp;...
vue-element-admin vue3 有没有crud组件
11-10
根据提供的引用内容，我们可以得知vue-element-admin是一个前端CRUD操作通用框架，它提供了许多组件和方法来帮助开发者快速构建后台管理系统。而vue3是vue.js的下一个主要版本，它在性能和开发体验方面都有所提升。目前，vue-element-admin还没有完全升级到vue3，但是已经有一些vue3的支持。关于vue-element-admin是否有CRUD组件，我们可以通过查看官方文档来得到答案。 根据官方文档，vue-element-admin提供了许多CRUD相关的组件和方法，例如el-table、el-dialog、el-form等。这些组件和方法可以帮助开发者快速构建后台管理系统中的增删改查功能。同时，vue-element-admin还提供了许多其他的组件和方法，例如图表组件、富文本编辑器、权限管理等，可以帮助开发者快速构建一个完整的后台管理系统。 因此，可以得出结论：vue-element-admin提供了许多CRUD相关的组件和方法，可以帮助开发者快速构建后台管理系统中的增删改查功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值