纪念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步骤和工作原理介绍

简介: 这是 Jerry 2021 年的第 63 篇文章,也是汪子熙公众号总共第 340 篇原创文章。
                                                 蜀相
                                                 杜甫
                                          丞相祠堂何处寻,
                                          锦官城外柏森森。
                                          映阶碧草自春色,
                                          隔叶黄鹂空好音。
                                          三顾频烦天下计,
                                          两朝开济老臣心。
                                          出师未捷身先死,
                                          长使英雄泪满襟。

image.pngJerry 前一篇文章 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现,比较了 SAP UI5 表格控件使用 OData 模型和 JSON 模型的实现差异。


SAP UI5 初学者在学习 OData API 使用时,面临的一个问题是:如何找到一些公网可以免费使用的 OData 服务。


Northwind 无疑是极佳的选择之一,但是该服务不支持修改操作。


虽然从理论上讲,我们可以使用按照 Jerry 的这篇文章,SAP Cloud Application Programming 介绍(2021 更新版),采用 SAP Cloud Application Programming 模型(CAP),自行在本地搭建一个支持增删改查的 OData 服务,但是对于学习 SAP UI5 的初学者来说,未免有些大材小用。


其实 SAP UI5 自带了一个很容易使用的 Mock Server,可以用来在本地模拟 OData 服务提供者,响应 SAP UI5 应用发起的 OData 请求,并使用预先配置好的测试数据进行回复。


登录 SAP UI5 官方网站,输入关键字 Mock Server,即可找到其使用文档:

image.pngimage.pngimage.png


将 Jerry 的代码克隆到本地,npm install 之后执行 node local.js:


https://github.com/wangzixi-diablo/ui5-toolset


即可在 Chrome 开发者工具里观察 Mock Server 的运行情况:


http://localhost:3002/tabledelete/?sap-ui-debug=true


(1) SAP UI5 表格控件请求 OData 服务的元数据。Mock Server 接收到该请求,将工作目录下的 metadata.xml 的内容,返回给调用者。


image.png

因为我在 Mock Server 的 Products.json 里只维护了两条数据,故 $count 结果为 2.


(3) 现在表格控件已经明确了自己需要显示两条数据,故发起第三个 OData 数据请求,KaTeX parse error: Expected 'EOF', got '&' at position 7: skip=0&̲top=2, 向服务器请求第一页的前两条数据。


Mock Server 接收到该请求,将 Products.json 里全部两条数据返回给表格控件。

image.png

image.png

为了攻破坚固的特洛伊城,希腊联军中的奥德修斯想出了“木马计”:在木马腹中藏匿士兵,待特洛伊人将木马拽入城后,等到夜深人静时,木马内的士兵一齐涌出,里应外合,拿下特洛伊城。


Sinon 则勇敢地担当了诱使特洛伊人将木马拖进城的艰巨任务。他成功地扮演了一名间谍 (Spy) 的角色,凭借出色的演技使得特洛伊国王坚信,木马对特洛伊城来说,是个“吉祥物”。

image.png

在基于 Sinon 的 SAP UI5 Mock Server 通过 init 方法启动时,会调用 Sinon.useFakeXMLHttpRequest,将 Sinon 伪造的 FakeXMLHttpRequest 实现,替换 Window 全局的 XMLHttpRequest, 完成了偷天换日。


这个替换,一般的 SAP UI5 开发人员如果不对 Sinon 源代码进行单步调试,就不会知情。这个情形有点像昔日希腊联军的士兵们,藏匿在特洛伊木马中,神不知鬼不觉地潜入特洛伊城的场景。

image.png

值得一提的是,Sinon 的工作原理,和 Java 以及 Angular 里的 HTTP Intercept(拦截器)是不同的。在 HTTP 拦截器的工作场景中,HTTP 请求在两个时间点内,可以被框架或者应用开发人员编写的拦截器处理:


程序代码调用 API 发送 HTTP 请求后,在 HTTP 请求实际从浏览器发出之前,由拦截器进行预处理


应用程序得到远端的服务器响应后,在交给其回调函数处理之前,由拦截器进行预处理


拦截器对 HTTP 请求的预处理,其类型包括但不局限于:全局错误处理,统一的身份验证机制,或者增添额外的业务逻辑等等。


而 Sinon 的工作场景下,因为真实的 XMLHttpRequest 已经被 FakeXMLHttpRequest 替换了,所以根本就没有真实的 HTTP 请求产生,因此 Chrome 开发者工具 network 标签页内也就根本观察不到任何网络请求。SAP UI5 应用和 Mock Server 之间的交互,纯粹是基于 FakeXMLHttpRequest 在内存中的一问一答而已。


希望本文能够帮助大家理解 SAP UI5 Mock Server 的使用步骤,工作原理,以及 Mock Server 背后基于的 Sinon 框架的命名由来。

感谢阅读。

相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
2月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
|
2月前
|
XML 前端开发 JavaScript
深入介绍 UI5 框架里 Smart Field 控件的工作原理
深入介绍 UI5 框架里 Smart Field 控件的工作原理
|
21天前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
33 2
|
2月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题