关键词:
引入
mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试。
背景
前后端分离
- 前后端仅仅通过异步接口(AJAX/JSONP)来编程
- 前后端都各自有自己的开发流程,构建工具,测试集合
- 关注点分离,前后端变得相对独立并松耦合
开发流程
- 后台编写和维护接口文档,在 API 变化时更新接口文档
- 后台根据接口文档进行接口开发
- 前端根据接口文档进行开发
- 开发完成后联调和提交测试
面临问题
- 没有统一的文档编写规范,导致文档越来越乱,无法维护和阅读
- 开发中的接口增删改等变动,需要较大的沟通成本
- 对于一个新需求,前端开发的接口调用和自测依赖后台开发完毕
- 将接口的风险后置,耽误项目时间
解决方法
- 接口文档服务器 -- 解决接口文档编辑和维护的问题
- mock 数据 -- 解决前端开发依赖真实后台接口的问题
接口文档服务器
功能
接口编辑功能
-
类型1:根据接口描述语法书写接口,并保存为文本文件,然后使用生成工具生成在线接文档(HTML)
-- 也有一些类似 Markdown 的接口文档编辑器,参见:[There Are Four API Design Editors To Choose From Now][There Are Four API Design Editors To Choose From Now]。
接口查看功能
- 提供友好的接口文档查看功能
用法
- 后台开发人员进行接口文档编写
-- 定义接口路径、接口上传字段、接口返回字段、字段含义、字段类型、字段取值 - 前端开发人员查看接口文档
优点
- 统一管理和维护接口文档
-- 提供了接口导入、接口模块化、接口版本化、可视化编辑等功能 - 接口文档规范,可读性强,减少前后端接口沟通成本
前端 mock 方法回顾
前端开发过程中,使用 mock 数据来模拟接口的返回,对开发的代码进行业务逻辑测试。解决开发过程中对后台接口的依赖。
硬编码数据
将 mock 数据写在代码中。
示例
// $.ajax({
// url: ‘https://cntchen.github.io/userInfo’,
// type: 'GET',
// success: function(dt) {
var dt = {
"isSuccess": true,
"errMsg": "This is error.",
"data": {
"userName": "Cntchen",
"about": "FE"
},
};
if (dt.isSuccess) {
render(dt.data);
} else {
console.log(dt.errMsg);
}
// },
// fail: function() {}
// });
优点
- 可以快速修改测试数据
痛点
- 无法模拟异步的网络请求,无法测试网络异常
- 肮代码,联调前需要做较多改动,增加最终上真实环境的切换成本
-- 添加网络请求,修改接口、添加错误控制逻辑 - 接口文档变化需要手动更新
请求拦截 & mock 数据
hijack(劫持)接口的网络请求,将请求的返回替换为代码中的 mock 数据。
实例
The jQuery Mockjax Plugin provides a simple and extremely flexible interface for mocking or simulating ajax requests and responses
优点
- 可以模拟异步的网络请求
- 可以快速修改测试数据
痛点
- 依赖特定的框架,如
Jquery
- 增加最终上真实环境的切换成本
- 接口文档变换需要手动更新
本地 mock 服务器
将 mock 数据保存为本地文件。在前端调试的构建流中,用 node 开本地 mock 服务器,请求接口指向本地 mock 服务器,本地 mock 服务器 response mock 文件。
mock 文件
.mock
├── userInfo.json
├── userStars.json
├── blogs.json
└── following.json
接口调用
https://github.com/CntChen/userInfo
--> localhost:port/userInfo
优点
- 对代码改动较小,联调测试只需要改动接口 url
- 可以快速修改测试数据
痛点
- json 文件非常多
- 接口文档变化需要手动更新
代理服务器
map local
- 接口请求的返回映射为本地 mock 数据
https://github.com/CntChen/userInfo
-->localPath/userInfo
map remote
rewrite
-
修改接口调用的 request 或 response,添加/删除/修改 HTTP request line/response line/headers/body
-
解决跨域问题
使用 map 后,接口调用的 response 不带 CORS headers,跨域请求在浏览器端会报错。需要重写接口返回的 header,添加 CORS 的字段。
优点
- 前端直接请求真实接口,无需修改代码
- 可以修改接口返回数据
痛点
- 需要处理跨域问题
- 一个变更需要代理服务器进行多处改动,配置效率低下
- 不支持 HTTP method 的区分
-- CORS 的 preflight 请求(OPTION)也会返回数据 - 需要有远程接口或本地 mock 文件,与使用本地 mock 文件相同的痛点
mock 平台
接口文档服务器
使用接口文档服务器来定义接口数据结构
mock服务器
mock 服务器根据接口文档自动生成 mock 数据,实现了接口文档即API
优点
- 接口文档自动生成和更新 mock 数据
- 前端代码联调时改动小
缺点
- 可能存在跨域问题
业界实践
公司实践
没有找到公司级别的框架,除了阿里的 RAP。可能原因:
- 非关键性、开创性技术,没有太多研究价值
- 许多大公司是小团队作战,没有统一的 mock 平台
- 已经有一些稳定的接口,并不存在后台接口没有开发完成的问题
-- 而我们想探究的问题是:前后端同时开发时的 mock
github 开源库
A powerful high-level API design language for web APIs.
一种使用类markdown语法的接口编写语言,使用[json-schema][json-schema]和[mson][mson]作为接口字段描述。有完善的工具链进行接口文件 Edit,Test,Mock,Parse,Converter等。
Swagger是一种 Rest API 的简单但强大的表示方式,标准的,语言无关,这种表示方式不但人可读,而且机器可读。可以作为 Rest API 的交互式文档,也可以作为 Rest API 的形式化的接口描述,生成客户端和服务端的代码。 --[Swagger:Rest API的描述语言][Swagger:Rest API的描述语言]
定义了一套接口文档编写语法,然后可以自动生成接口文档。相关项目: Swagger Editor ,用于编写 API 文档。Swagger UI restful 接口文档在线自动生成与功能测试软件。点击查看Swagger-UI在线示例。
WireMock is a simulator for HTTP-based APIs. Some might consider it a service virtualization tool or a mock server. It supports testing of edge cases and failure modes that the real API won't reliably produce.
商业化方案
其他实践
总结
对于前后端分离开发方式,已经有比较成熟的 mock 平台,主要解决了2个问题:
- 接口文档的编辑和维护
- 接口 mock 数据的自动生成和更新
后记
预研时间比较有限,有一些新的 mock 模式或优秀的 mock 平台没有覆盖到,欢迎补充。
笔者所在公司选用的平台是 RAP,后续会整理一篇 RAP 实践方面的文章。
问题来了:你开发中的 mock 方式是什么?
References
- 图解基于node.js实现前后端分离
http://yalishizhude.github.io/2016/04/19/front-back-separation/
[图解基于node.js实现前后端分离]:http://yalishizhude.github.io/2016/04/19/front-back-separation/
- TestDouble(介绍 mock 相关的概念)
http://martinfowler.com/bliki/TestDouble.html
[mock 相关的概念]:http://martinfowler.com/bliki/TestDouble.html
- There Are Four API Design Editors To Choose From Now
https://apievangelist.com/2014/11/21/there-are-four-api-design-editors-to-choose-from-now/
[There Are Four API Design Editors To Choose From Now]:https://apievangelist.com/2014/11/21/there-are-four-api-design-editors-to-choose-from-now/
- 联调之痛--契约测试
http://www.ituring.com.cn/article/42460
[联调之痛]:http://www.ituring.com.cn/article/42460
- Swagger:Rest API的描述语言
https://zhuanlan.zhihu.com/p/21353795
[Swagger:Rest API的描述语言]:https://zhuanlan.zhihu.com/p/21353795
- Swagger - 前后端分离后的契约
http://www.cnblogs.com/whitewolf/p/4686154.html
[Swagger - 前后端分离后的契约]:http://www.cnblogs.com/whitewolf/p/4686154.html
- Swagger UI教程 API 文档神器 搭配Node使用
http://www.jianshu.com/p/d6626e6bd72c#
[Swagger UI教程 API 文档神器 搭配Node使用]:http://www.jianshu.com/p/d6626e6bd72c#
END
基于rap(mock)实现前后端分离开发(代码片段)
看看RAP的官方定义:什么是RAP?(RigelAPIPlatform) 在前后端分离的开发模式下,我们通常需要定义一份接口文档来规范接口的具体信息。如一个请求的地址、有几个参数、参数名称及类型含义等等。RAP 首先方便团队录入、查... 查看详情
axios+mock.js模拟数据实现前后端分离开发的实例代码
首先就是必须安装axios和mock.jsnpminstallaxios npminstallmockjs1.然后在文档src中新建一个mock.js文件,如图2.在main.js中全局引入axios插件和mock.js文件如图3.在组件中用axios获取mock.js文件4.在mock.jsmockjs的用法可以到官网了解:http://mockjs.c... 查看详情
不懂前后端分离?这篇就够
参考技术A前后端分离前我们的开发协作模式一般是这样的:前端写好静态的HTML页面交付给后端开发。静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可。后端使用模板引擎去套模板,同时内嵌一些后端提供的模板... 查看详情
前后端混合开发模式和前后端分离开发模式
前后端混合开发模式和前后端分离开发模式一、前后端混合开发模式二、前后端分离开发模式 查看详情
vue+mockjs模拟数据,实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发。关于mockjs,官网描述的是1.前后端分离2.不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。3.数据类型丰富4.通过随机数据,模拟各种场景。等等优点。总结... 查看详情
前后端分离开发部署模式
身体出了点小毛病,这周基本在家养病,转文章一篇,以激励学习。在开始讨论这个话题之前我们先来认识一下传统的开发模式。一、传统开发模式相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用... 查看详情
前后端分离方案以及技术选型
参考技术A作者:关开发一.什么是前后端分离?理解前后端分离大概可以从3个方面理解:1.交互形式2.代码组织形式3.开发模式与流程1.1交互形式前后端不分离后端将数据和页面组装、渲染好了之后,向浏览器输出最终的html;浏... 查看详情
浅谈前后端分离。
...传统的web应用开发中,大多数的工作人员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。在前后端不分离的时代... 查看详情
前后端分离模式
...的业务逻辑混合的开发模式,在到由ajax跨域请求来进行前后端的分离的模式,最后到由nodejs来进行前后端的分离,今天就分别站在不同的视角上尽可能的为大家剖析下这几种模式的优缺点。前后端逻辑混合开发模式:这种开发... 查看详情
5_前后端分离
前后端分离属于软件架构的一种。其核心思想是把前端项目(Node.js实现的)和后端项目独立部署到不同的服务器上,前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备... 查看详情
5_前后端分离
前后端分离属于软件架构的一种。其核心思想是把前端项目(Node.js实现的)和后端项目独立部署到不同的服务器上,前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备... 查看详情
前后端分离
开发模式在Web开发模式中,有两种开发模式前后端不分离前后端分离前后端分离优势在前后端不分离模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合... 查看详情
前后端分离
一丶为什么要实现前后端分离:前后端分离有什么好处按照项目开发来说:1.实现前后端分离可以使项目更快的研发完成,2.加快了项目的时间传统开发形式: 前后端分离开发:在开发阶段,当有新的需求时,前后端工程师约定好接... 查看详情
前后端分离开发模式下后端质量的保证——单元测试
概述 在今天,前后端分离已经是首选的一个开发模式。这对于后端团队来说其实是一个好消息,减轻任务并且更专注。在测试方面,就更加依赖于单元测试对于API以及后端业务逻辑的较验。当然单元测试并非在前后端分离流... 查看详情
django开发之前后端分离开发模式(代码片段)
1.什么是前后端分离开发的概念:前端页面运行前端服务器上,负责页面的渲染(静态文件的加载)与跳转后端代码运行在后端服务器上,负责数据的处理(提供数据请求的接口)2.前后端分离开发碰到的问题那就是跨域请求的问题:什么是... 查看详情
springboot+vue+antdesign前后端分离快速开发平台
...ot2.x、MybatisPlus、Vue、AntDesign、MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效... 查看详情
企业快速开发平台springcloud+springboot+mybatis+elementui实现前后端分离
鸿鹄云架构【系统管理平台】采用服务化的组件开发模式,可实现复杂的业务功能。是一个大型企业、分布式、微服务、云架构的JavaEE体系快速研发平台使用当前最流行最先进的开源技术实现服务组件化及管理,真正为... 查看详情
前后端分离及不分离
前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果是由后端控制,由后端渲染页面或重定向,后端需要控制前端的展示,前端与后端的耦合度很,这种应用模式比较适合纯网页应用,但是当后端对接APP时,APP... 查看详情