前端mock数据详细讲解

在实际的项目研发过程中，我们经常会遇到如下的尴尬场景：

前端开发依赖于后端接口数据，但是后台人员不足或者无法立即到位，前端迟迟不能开工，或者前端小伙子自己参照ui设计图，完成对应的静态页面（没有数据交互），待后台人员到位，再进行二次开发，协助完成接口对接。

1.什么是mock数据？

前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发；

2.mock数据的优势？

A 团队可以并行工作

有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决；测试过程中如果遇到依赖接口没有准备好，同样可以借助Mock；不会出现一个团队等待另一个团队的情况。这样的话，开发自测阶段就可以及早开展，从而发现缺陷的时机也提前了，有利于整个产品质量以及进度的保证。

B 开启TDD模式，即测试驱动开发

单元测试是TDD实现的基石，而TDD经常会碰到协同模块尚未开发完成的情况，但是有了mock，这些一切都不是问题。当接口定义好后，测试人员就可以创建一个Mock，把接口添加到自动化测试环境，提前创建测试。
可以模拟那些无法访问的资源
比如说，你需要调用一个“墙”外的资源来方便自己调试，就可以自己Mock一个。

C 隔离系统

假如我们需要调用一个post请求，为了获得某个响应，来看当前系统是否能正确处理返回的“响应”，但是这个post请求会造成数据库中数据的污染，那么就可以充分利用Mock，构造一个虚拟的post请求，我们给他指定返回就好了

D 可以用来演示

假如我们需要创建一个演示程序，并且做了简单的UI，那么在完全没有开发后端服务的情况下，也可以进行演示。说到演示了，假如你已经做好了一个系统，并且需要给客户进行演示，但是里面有些真实数据并不想让用户看到，那么同样，你可以用Mock接口把这些敏感信息接口全部替换。

E 测试覆盖度

假如有一个接口，有100个不同类型的返回，我们需要测试它在不同返回下，系统是否能够正常响应，但是有些返回在正常情况下基本不会发生，难道你要千方百计地给系统做各种手脚让他返回以便测试吗？比如，我们需要测试在当接口发生500错误的时候，app是否崩溃，别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock，这一切就都好办了，想要什么返回就模拟什么返回，妈妈再也不用担心我的测试覆盖度了

3.mock数据的几种方式？

写在最前面哈，如果你们公司都是后端在做这一块，额，前端就可以省很多事，比如后端给你写好了假数据，写好了假接口，额，你直接拿来用就可以了；但是这样的公司还是少数，而且这样的后端给我来一打，哈哈哈

第一种

直接在页面写死数据，后期等接口来了，再改成动态的; 哈哈哈这是最简单的，也是最笨的，所以小型的项目，不出5个页面的可以解决，或是每个页面的数据很少的可以解决，但是不推荐，后期太麻烦

第二种

在js里直接声明变量，并给变量赋值，在逻辑脚本中使用，并渲染到dom;

第三种

将模拟数据编辑成json数据或者是零碎的js脚本中，通过请求，取回数据，并进行业务逻辑处理，渲染到dom

第四种最理想的

- 前后台在需求分解之后，一起定义好接口api，包含：请求url（项目前缀+具体的接口名称）、请求方式、请求参数、数据响应；

- 前端研发人员根据接口约定，模拟请求返回对应的数据，完成对应的交互；

- 后台人员根据接口约定，完成对应的api，并完成对应的自测；

- 待后台人员交付接口api后，前端人员直接修改接口项目前缀，切换到对应的环境，即可进入项目提测。

教学开始了哦，搬好小板凳

如果你习惯可视化的接口api，可使用rap2，如果比较喜欢编程式的，可使用easy mock。

easy mock

更简单高效的伪造数据easy-mock.com/docs#jie-kou-dai-li正在上传…重新上传取消

1.先注册，注册完有一个演示项目

2.点击右下方蓝色按钮，添加项目

新建一个接口

预览接口

{"status": "@boolean","msg": function() {return this.status ? "登录成功" : "登录失败"},"code": function() {return this.status ? 200 : 404},"data": {"userId": "@guid","userName": "@cname","email": "@email"}
}

此时，会联想的你肯定会问，你这返回一个data对象，假如我要返回一个10条数据的列表，你咋搞，其实也很简单

{"status": "@boolean","msg": function() {return this.status ? "登录成功" : "登录失败"},"code": function() {return this.status ? 200 : 404},"data|10": [{"userId": "@guid","userName": "@cname","email": "@email"}]
}

现在就可以使用mock好的数据了。

复制其URL到请求中。

完美！！！

rap2

{"status": true,"msg": "登录成功","data": {"userId": "1eEC47De-019b-5cC9-DEDF-c6784BfCB6a2","userName": "夏军"},"code": 200
}

同理，你如果想把data修改成返回10条数据的列表，你只需要修改data的类型、生成规则即可

bug：如果你们像这样，在rap2预览接口的时候，会发现status为true的时候，code不一定为200，msg不一定是登录成功。因为在这个响应配置里面，我们发现status、code、msg压根是没啥关联的。这个问题，我查询了2个小时，还是没有解决，姑且还是先抛出来，有兴趣的小伙伴，可以一起探讨一下。

常用的mock占位

占用符解释

@cname 中文人名

@id 身份证id

@title 中文title

@city 中文城市

@ip ip 地址

@email email

@url url地址

@csentence(1,5) 生成1到5个字的中文句子

@cparagraph 生成中文段落

@string(11) 输出11 个字符长度的字符串

@float(0,10) 0 到 10 的浮点数

@integer(60,70) 60 到 70 之间的整数

@boolean boolean 类型 true,false

{"base": {"range": "@range(3, 7)",// [3,4,5,6]"string": "@string(7, 20)", //输出7-20个字符长度的字符串"character": "@character('abcde')",//随机从abcde中选一个字母"float": "@float(60, 100)",//60 到 100 的浮点数"integer": "@integer(60, 100)",//60 到 100 的整数"natural": "@natural(60, 100)",//60 到 100 的自然数"boolean": "@boolean" //boolean 类型 true,false},<!--时间类型-->"date": {"date": "@date",//1982-07-20"time": "@time",// 11:21:39"datetime": "@datetime",// 1972-12-16 02:04:24"now": "@now" //当前时间 2018-07-17 18:19:29},<!--图片-->"image": {"image": "@image('200x100', '#50B347', '#FFF', 'EasyMock')" // https://dummyimage.com/200x100/50B347/FFF&text=EasyMock 尺寸 背景 文字颜色 提示信息},<!--颜色系列-->"color": {"color": "@color", //16进制颜色值#79e0f2"hex": "@hex", // #f2e179"rgb": "@rgb", //rgb(189, 121, 242)"rgba": "@rgba",//rgba(189, 121, 242, .7)"hsl": "@hsl" //hsl(136, 82, 71)},<!--文案类-->"text": {"paragraph": "@paragraph(1, 3)",// 随机段落"sentence": "@sentence(3, 5)",// 随机句子"word": "@word(3, 5)",// 随机3-5个字母"title": "@title(3, 5)",// 随机3-5个单词的title"cparagraph": "@cparagraph(1, 3)","csentence": "@csentence(3, 5)","cword": "@cword('零一二三四五六七八九十', 5, 7)","ctitle": "@ctitle(3, 5)"},<!--姓名-->"name": {"first": "@first",//姓"last": "@last",//名"name": "@name",//姓名"cfirst": "@cfirst","clast": "@clast","cname": "@cname"},<!--网站-->"web": {"url": "@url",//url地址"domain": "@domain",//域名"protocol": "@protocol",//协议"tld": "@tld","email": "@email",//邮箱"ip": "@ip"//ip地址},<!--地址-->"address": {"region": "@region",//区域"province": "@province",//省"city": "@city(true)",//市"county": "@county(true)",//区 带true则携带上级"zip": "@zip"},"helper": {"capitalize": "@capitalize('hello')","upper": "@upper('hello')",//全大写单词"lower": "@lower('HELLO')",//全小写单词"pick": "@pick(['a', 'e', 'i', 'o', 'u'])", //随机选择一个字母"shuffle": "@shuffle(['a', 'e', 'i', 'o', 'u'])" //打乱数组顺序},"miscellaneous": {"id": "@id",//身份证id"guid": "@guid",//生成32位的随机id"increment": "@increment(1)"//自增数，阶度为1}
}

mock.js

Mock.js是一个模拟数据生成器，可以让前端独立于后端进行开发。如果你正在开发一个前端页面，可是后台还没有完成供你调用的Api，并且数据格式已经确定，那么你就可以使用Mock.js模拟相关的接口，生成假数据来查看页面效果。Mock.js的功能：生成随机数据，拦截 Ajax 请求。

引入Mock.js：

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

Mock.mock('http://api.com', {"name|3": "ABC",    // 属性值重复3次"age|20-30": 1      // 20~30随机数，1用来确定类型});var xhr = new XMLHttpRequest();xhr.open("get", "http://api.com", true);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}}

现在就可以访问了。

来一个复杂一些的。

        Mock.mock('http://api.com', {"user|2-5": [{                              //2-5组数据'name': '@cname',                       //中文名称'age|1-100': 100,                       //100以内随机整数'birthday': '@date("yyyy-MM-dd")',      //日期'city': '@city(true)'                   //中国城市}]});var xhr = new XMLHttpRequest();xhr.open("get", "http://api.com", true);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}}

返回的数据：

{"user": [{"name": "廖涛","age": 45,"birthday": "1970-10-16","city": "重庆 重庆市"},{"name": "龚勇","age": 88,"birthday": "1984-05-12","city": "河北省 秦皇岛市"},{"name": "文静","age": 84,"birthday": "2016-05-12","city": "云南省 大理白族自治州"},{"name": "史秀英","age": 93,"birthday": "1970-02-25","city": "吉林省 辽源市"}]
}Mock.setup()

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

Mock.setup({timeout: 400
})
Mock.setup({timeout: '200-600'
})

指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400
，表示 400 毫秒后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，
表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

详情请点击

nuysoft/Mockgithub.com/nuysoft/Mock/wiki/Syntax-Specification正在上传…重新上传取消

server-mock

server-mockwww.npmjs.com/package/server-mock正在上传…重新上传取消

实现本地mock服务器的node.js工具。

        var http = require("http");http.createServer(function(req,res) {})

req：包含请求头部的相关信息，如请求方法、请求域名、IP地址、user-agent等等。

res：需要其返回的数据

var http = require("http");
var server = http.createServer(function (req, res) {res.write("hello world");res.end();
})server.listen(8080);

使用node执行上述代码。

我们把req打印出来，看看里面有什么

console.log(req);

这里的这一连串我也看不懂的东西：），也许是相关的组件把。

res.write()就是将括号内的字符串作为响应体返回给浏览器。

    res.setHeader("Content-Type","text/html; charset=gbk");

setHeader方法可用于设置响应头部。
上面代码就指定了响应体的编码方式，以何种方式编码。

var http = require("http");
var server = http.createServer(function (req, res) {
res.setHeader("Content-Type","text/html; charset=gbk");
res.write("hello world");
res.end(); })
server.listen(8080);

再次执行node。

var http = require("http");
var server = http.createServer(function (req, res) {res.setHeader("Content-Type","text/html; charset=gbk");res.write("<h1>test</h1>");res.end();
})server.listen(8080);

比如上面的代码，在浏览器中看到的将会是H1标签的"test"文本，因为"text/html"。
text/css ：CSS样式
application/javascript：JS脚本
....
Content-Type对照表
在setHeader中设置的属性优先级高于在响应内容中设置的属性。