前端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：

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中设置的属性优先级高于在响应内容中设置的属性。