美文网首页
SAPUI5 (39) - 直接提交 HTTP 请求实现 CRU

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

作者: Stone0823 | 来源:发表于2017-06-08 10:22 被阅读319次

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

参考资料

相关文章

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

    OpenUI5 作为一种客户端的 UI 技术，自身并不直接与后端的服务器或者数据库交互。客户端只是提交 HTTP ...

  • iOS中Pipelining(管道)技术介绍

    Http Pipelining，中文资料中通常称为管道技术，通过实现多个Http请求一次整体提交来减少Http请求...

  • 表单提交和 AJAX 请求之间的区别

    表单提交,以get请求为例： 提交表单会直接创建一个http请求，向服务器发送请求数据，服务器会响应请求。 htt...

  • Junit测试 - mockMVC

    使用mock工具可以直接模拟http请求，不用直接产生网络的请求环境，简化了测试流程。 MockMvc实现了对Ht...

  • Swift面试题系列二

    5.AFNetworking实现原理 1、提交GET请求和提交POST请求a、创建AFHTTPRequestOpe...

  • HTTP、HTTPS

    HTTP HTTP请求格式image.png 请求方法: 9种GET:向指定的资源发出请求POST:向指定资源提交...

  • UE HTTP协议

    UE4客户端向HTTP服务器请求数据 :采用post方式提交 这里我们http协议的post请求提交方式使用：ap...

  • 阿里P7告诉你SpringBoot如何防止重复提交？

    有两种防止重复提交: 禁用提交按钮 发出请求令牌/ ID： 禁用提交按钮 我们可以在函数调用HTTP请求之前禁用提...

  • Python:网络编程

    在Python中如何实现Http请求？如何实现Scoket连接？以下直接介绍如何使用Python进行网络编程。 G...

  • HTTP上传数据类型

    经常在做表单提交的 时候，是会遇到这种问题的 post表单提交数据类型 HTTP请求信息分为请求行、请求头、请求正...

网友评论

      本文标题：SAPUI5 (39) - 直接提交 HTTP 请求实现 CRU

      本文链接：https://www.haomeiwen.com/subject/sqovfxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|SAPUI5 (39) - 直接提交 HTTP 请求实现 CRU|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！