Open UI5 前端开发框架配套的 Mock Server 工作原理解析

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: Open UI5 前端开发框架配套的 Mock Server 工作原理解析

笔者在公司使用 Open UI5 进行前端应用开发时,与后台的交互,90% 的场合都是消费后台暴露的 OData 服务来完成的。


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


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


换个角度想,其实 Open UI5 自带了一个很容易使用的 Mock Server,可以用来在本地模拟 OData 服务提供者,响应 SAP UI5 应用发起的

OData 请求,并使用预先配置好的测试数据进行回复。


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

281df1838f74234797a836b30c90c0fc_format,png.png


Mock Server 的运行对于 Open UI5 应用来说是完全透明的,Open UI5 应用根本不知道自己发出的请求,到底是被真实的远端服务器响应,还是由 Mock Server 返回。


下面通过实际例子来介绍 Mock Server 的使用步骤。

(1) 在 Table 控制器里,新建一个 OData 模型实例,传入 OData 服务 url:

/here/goes/your/serviceUrl/

该 url 就是我们需要在 Mock Server 里模拟的 OData 服务地址。


(2) 本地工程文件里新建一个 test 文件夹,其内包含下列三个文件:

  • metadata.xml: OData 服务的元数据文件,定义了名为 Products 的 EntitySet,其类型为 Product,后者包含三个字段:
    a. ProductId
    b. Name
    c. Size


image.png


  • Products.json:包含了上图 metadata.xml 文件里定义的名为 Products 的 EntitySet 对应的数据。运行时,Mock Server 会自动到其工作目录查找同名的 .json 文件,读取其内容,返回给 OData 服务的消费者。


  • server.js:


从 sap/ui/core/util/MockServer 导入 Mock Server 的实现,将步骤一里 Open UI5 需要消费的 OData 服务 url,传入 Mock Server 的 rootUri 属性即可。

下图 autoRespondAfter 属性,定义了使用 Mock Server 响应 OData 请求的延时,即 1 秒后返回响应。

三个文件总共行数加起来不到 60行,却提供了一个功能完整的 Mock Server.

(3) 在该 Open UI5 应用的 index.html 里,使用 sap.ui.require 加载本地工程里的 Mock Server 实例,调用其 init 方法,即可启动该服务器。


将笔者上传到 Github 的代码克隆到本地,npm install 之后执行 node local.js:

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

http://localhost:3002/tabledelete


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


(2) OData 模型是服务器端模型,这意味着表格控件根本不知道当前到底有多少条数据需要显示。

因此 Open UI5 表格控件会发送另一条包含 $count 操作的 OData 请求,去查询 Products 总数。

最终在表格控件里显示的条目数,是 $count 操作的结果和 20 两个数字的较小值。20 是 OData 分页的默认尺寸。

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


(3) 现在表格控件已经明确了自己需要显示两条数据,故发起第三个 OData 数据请求,top=2, 意思是向服务器请求第一页的前两条数据。

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


(4) 当使用 Add Row 按钮添加一条新的数据之后,Open UI5 表格控件依次发送下列三条 OData 请求:

删除操作的执行逻辑类似,这里不再赘述。

Open UI5 Mock Server 的一些高级用法,可以通过查询 Mock Server 的帮助文档来获取。


568565c64b568e8ddc96dd39fe252709_format,png.png


例如,假设我们期望针对 Mock Server 返回给调用者的数据,进行一些自定义处理。此时可以在 Mock Server 提供的 attachAfter 钩子函数里编写自定义逻辑:

如上图所示,当 Products.json 文件的数据被 Mock Server 加载,准备返回给 OData 消费者之前,应用开发人员编写的 attachAfter 回调函数触发,将每个产品的 Name 字段值末尾,加上一个句号。

Open UI5 Mock Server 实际上基于著名的开源 Mock 框架 Sinon.js

Sinon 框架的命名,是为了向希腊联军与特洛伊人之间长达十年的战争期间涌现出的英雄战士 Sinon(西农) 致敬,就是下图这位:

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


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

image.png

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


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


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


  • 程序代码调用 API 发送 HTTP 请求后,在 HTTP 请求实际从浏览器发出之前,由拦截器进行预处理
  • 应用程序得到远端的服务器响应后,在交给其回调函数处理之前,由拦截器进行预处理
  • 拦截器对 HTTP 请求的预处理,其类型包括但不局限于:全局错误处理,统一的身份验证机制,或者增添额外的业务逻辑等等。

而 Sinon 的工作场景下,因为真实的 XMLHttpRequest 已经被 FakeXMLHttpRequest 替换了,所以根本就没有真实的 HTTP 请求产生,因此 Chrome 开发者工具 network 标签页内也就根本观察不到任何网络请求。


Open UI5 应用和 Mock Server 之间的交互,纯粹是基于 FakeXMLHttpRequest 在内存中的一问一答而已。


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

相关文章
|
18天前
|
存储 前端开发 JavaScript
前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
本文介绍了JavaScript中作用域的概念,包括全局变量和局部变量的区别,预解析机制(变量提升),以及函数返回值的使用和类型。通过具体示例讲解了变量的作用域、函数的返回值、以及如何通过return关键字从函数中返回数据。
16 1
前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
|
1天前
|
前端开发 JavaScript
💥【exceljs】纯前端如何实现Excel导出下载和上传解析?
本文介绍了用于处理Excel文件的库——ExcelJS,相较于SheetJS,ExcelJS支持更高级的样式自定义且易于使用。表格对比显示,ExcelJS在样式设置、内存效率及流式操作方面更具优势。主要适用于Node.js环境,也支持浏览器端使用。文中详细展示了如何利用ExcelJS实现前端的Excel导出下载和上传解析功能,并提供了示例代码。此外,还提供了在线调试的仓库链接和运行命令,方便读者实践。
|
5天前
|
机器学习/深度学习 前端开发 JavaScript
前端技术探索:从基础到未来趋势的全方位解析
前端技术探索:从基础到未来趋势的全方位解析
17 1
|
16天前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
2月前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
62 0
|
2月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
47 0
|
2月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
27 0
|
2月前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
30 0
|
2月前
|
前端开发 开发者 Apache
揭秘Apache Wicket项目结构:如何打造Web应用的钢铁长城,告别混乱代码!
【8月更文挑战第31天】Apache Wicket凭借其组件化设计深受Java Web开发者青睐。本文详细解析了Wicket项目结构,帮助你构建可维护的大型Web应用。通过示例展示了如何使用Maven管理依赖,并组织页面、组件及业务逻辑,确保代码清晰易懂。Wicket提供的页面继承、组件重用等功能进一步增强了项目的可维护性和扩展性。掌握这些技巧,能够显著提升开发效率,构建更稳定的Web应用。
83 0
|
2月前
|
前端开发 程序员 API
从后端到前端的无缝切换:一名C#程序员如何借助Blazor技术实现全栈开发的梦想——深入解析Blazor框架下的Web应用构建之旅,附带实战代码示例与项目配置技巧揭露
【8月更文挑战第31天】本文通过详细步骤和代码示例,介绍了如何利用 Blazor 构建全栈 Web 应用。从创建新的 Blazor WebAssembly 项目开始,逐步演示了前后端分离的服务架构设计,包括 REST API 的设置及 Blazor 组件的数据展示。通过整合前后端逻辑,C# 开发者能够在统一环境中实现高效且一致的全栈开发。Blazor 的引入不仅简化了 Web 应用开发流程,还为习惯于后端开发的程序员提供了进入前端世界的桥梁。
92 0

推荐镜像

更多