前后端分离，如何提升效率？- Mock
2017-12-03 本文已影响274人
亨利何
Mockjs
[嵌牛导读]
在开发阶段，有没有因为后端API搭建迟迟未好，后端数据库无法按时构建，导致你的前端界面无法及时拿到后端数据而苦恼！不存在的，快来看看Mock.js
Mock.js，生成随机数据，拦截Ajax请求
（emmm, 这篇文章和上一篇Ajax遥相呼应）
[嵌牛鼻子]
拦截Ajax请求，随机数据，前后端分离
[嵌牛提问]
-
前端和后端长久依赖紧密连接，你中有我，我中有你，开发过程连接紧密，如何做到前后端分离？
-
Mock如何拦截Ajax请求，模拟后端服务器，让我们“放弃后端”直接开发前端？
[嵌牛正文]
Mock
1. 前后端分离
正如文章开始提到的那样，前端开发需要后端API提供的数据做支撑，毕竟不可能手写后端测试数据，麻烦又浪费时间。前端依赖后端的服务器才可以完成自己的交互逻辑，自己真正意义上的的数据传递。
通过Mockjs，我们可以非常方便的生成随机数据，不管是测试使用的，还是后端服务器必须提供的都可以提供。这样，前后端解耦分离，前端在后端没有提供数据的前提下依然可以开发，甚至超前与后端开发，最后只需要将前端Mockjs Api替换成后端服务器API，即可完成前后端连接，大大提高开发效率。
2. 拦截Ajax，模拟后端服务器
我们使用Mockjs来模拟前端开发中的Ajax数据请求，将原本需要向后端服务器请求数据的Request拦截，使用Mockjs生成所需要的数据，返回给前端。
GET请求
- Ajax
$.ajax({
url: 'http://test.com',
type: 'get',
dataType: 'json'
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
- Mock模拟数据请求响应
var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};
// Mock响应模板
Mock.mock('http://test.com', {
"user|1-3": [{ // 随机生成1到3个数组元素
'name': '@cname', // 中文名称
'id|+1': 88, // 属性值自动加 1，初始值为88
'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
'birthday': '@date("yyyy-MM-dd")', // 日期
'city': '@city(true)', // 中国城市
'color': '@color', // 16进制颜色
'isMale|1': true, // 布尔值
'isFat|1-2': true, // true的概率是1/3
'fromObj|2': obj, // 从obj对象中随机获取2个属性
'fromObj2|1-3': obj, // 从obj对象中随机获取1至3个属性
'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
},{
'gf': '@cname'
}]
});
- 数据响应如下：
{
"user": [
{
"name": "董静",
"id": 88,
"age": 25,
"birthday": "2015-04-01",
"city": "湖南省 怀化市",
"color": "#c0f279",
"isMale": false,
"isFat": false,
"fromObj": {
"dd": "44",
"aa": "11"
},
"fromObj2": {
"bb": "22",
"cc": "33"
},
"brother": "jack",
"sister": "jack",
"friends": [
"jack",
"jim",
"jack",
"jim"
]
},
{
"gf": "田杰"
}
]
}
POST请求
- Ajax
$.ajax({
url: 'http://test.com',
type: 'post',
dataType: 'json',
data: {
account: 888,
pwd: 'abc123'
}
}).done(function(data, status, xhr) {
console.log(JSON.stringify(data, null, 4));
});
- Mock模拟数据请求响应
Mock.mock('http://test.com', function(options) {
console.log(options);
return Mock.mock({
"user|1-3": [{
'name': '@cname',
'id|+1': 88
}
]
});
});
- 数据响应
{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}
{
"user": [
{
"name": "曾明",
"id": 88
}
]
}
3. 生成随机数据
所有的数据生成都是随机生成，不过并不是真正的不按照要求随机生成，而是遵循rule生成数据。
例如
- 人的姓名:
Mock.mock('@cfirst') + Mock.mock('@clast') - 说的话:
Mock.mock('@cword') - url:
Mock.mock('@url') - 地址:
Mock.mock('@province') + Mock.mock('@city') + Mock.mock('@county') - 区域范围:
Mock.mock('@region') - 图片，文章，段落，数组，对象......
END
参考 ：
