前端to后台，使用Mock.js模拟数据

发表于 | 分类于 | 阅读次数

前后端分离是目前主流的团队开发方式，有效的隔离不同技术领域开发人员的依赖，包括开发进度上的依赖和代码文件上的依赖。而做到这一点，全靠一个规则：依赖接口而不依赖实现

web领域前后端分离，通常都会选择基于http+json的方式，在进入代码编写之前，团队会定义好所有依赖的接口，前后端开发人员遵照接口文档各自完成自己的工作，完美！

当然也有一些例外，比如有一类人叫做全栈工程师，这类人就无需考虑太多，前后一手包了，交流什么都不用，直接就撸出一个产品给你了

言归正传，在开发进度不一致的情况下，前端的ui做好了，后端接口还没能提供数据给到前端这边测试，这时候，前端都会自己写模拟数据填充

模拟数据

新建静态文件模拟

例如，获取一个列表的数据，创建一个list.json的文件

1
2
3
4
5
6
7
8
[	
	{
        "title": "XXX",
        "desc": "XXX",
        ...
    },
    ...
 ]

获取数据

1
2
3
4
5
$.ajax({
  url: 'xxx/list.json'
}).done(function(data){
	
});

要切入正式环境，需要手动修改url为接口地址

当前js文件模拟

1
2
3
4
5
6
7
8
9
10
var data = [];
for (var i = 0; i < 10 ; i ++) {
	data.push({
		title:'title'+i,
		desc:i,
	});
}
console.log(data);

用循环生成列表的数据，但数据的随机性不高，想要应对多种样式的ui需要加一些复杂的判断去生成不同类型数据

模拟数据假想

我们都是比较懒的，想要一劳永逸，能少改就不改，上面的两种数据模拟方式，要是比较复杂的系统，改起来当真是要命，铺垫了这么久，看看我们的主角Mock.js

Mock.js

生成随机数据，拦截 Ajax 请求，这是官网原话

主要功能

  • 前后端分离 —- 让前端攻城师独立于后端进行开发
  • 增加单元测试的真实性 —- 通过随机数据，模拟各种场景
  • 开发无侵入 —- 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据
  • 数据类型丰富 —- 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
  • 用法简单 —- 符合直觉的接口
  • 方便扩展 —- 支持支持扩展更多数据类型，支持自定义函数和正则

完全符合我们的懒，开发无侵入

实践

引入mock.js

1
<script src="http://mockjs.com/dist/mock.js"></script>

新建一个mockServer.js

1
2
3
4
5
6
7
8
9
10
Mock.mock(zqApi.getArticleList, 'get', {
	'data|10': [{
		'title': '@title',
		'desc': '@cparagraph(2)',
		'imageUrl': "@dataImage('200x100', 'Hello Mock.js!')",
		'comment|10-1000': 1000,
		'visiter|100-1000': 1000,
		'type|1': true
	}]
});

获取数据

1
2
3
4
5
zqHttp.get(zqApi.getArticleList, {}, function(data) {
	//do something
}, function(error) {	
	mui.toast(error.description)
})

模拟数据：



切入正式环境时，将mockServer.js删除，如下，真实数据：



一个小工具，可以节省了很多时间，可以不用受到后台接口数据的牵制，不过有一个大前提，开工之前

必须订好接口文档，双方对着接口文档开发！
必须订好接口文档，双方对着接口文档开发！
必须订好接口文档，双方对着接口文档开发！

重要事情说三遍，无数次体会到接口数据模拟完之后，接口一出，字段全改了，偶尔几个蒙对就好像中了彩票一样兴奋

mock github
mock 语法参考此链接