Mock.js入门案例

目录

什么是Mock.js

Mock js入门案例

总结

---

什么是Mock.js

生成随机数据，拦截Ajax请求

官网：http://mockjs.com/

文档：https://github.com/nuysoft/Mock/wiki

在前后端分离的项目中，开发人员依据API文档进行开发。然而前端项目不依赖于后端项目，该如何进行测试呢？

通过模拟数据生成器就可以很好的解决上述问题。

---

Mock js入门案例

1. 首先安装mockJs:

在项目终端输入：

npm install mockjs

2. 在mock文件夹下新建mock-demo.js

const Mock = require('mockjs')
const data = Mock.mock({
    //定义数据生成规则
    //可参考mock官方文档
    'houseResources|3' : [
        {
            'id' : '1',
            'title' : '珠江御景'
        }
    ]
})
//控制台输出格式化data
console.log(JSON.stringify(data,null,2))

3.项目终端运行 

        模块化代码不能通过页面访问，需要通过node运行

注意⚠️：运行前记得保存文件

cd mock
node mock-demo.js

运行结果：

---

总结 mock.js的作用：

1. 前后端分离：让前端工程师独立于后端进行开发；

2.增加单元测试的真实性：通过随机数据，模拟各种场景；

3.开发无侵入：不需要修改代码，就可以拦截Ajax请求，返回模拟的响应数据；

4.方便扩展：支持扩展更多的数据类型，支持自定义函数正则；

mockjs有两种语法规范：

1.数据模版定义规范（DTD）：用于自定义生成的模拟数据，例如随机生成指定区间的数字，重复string生成字符串，针对于对象和数组的自定义 *** 作等。

 https://github.com/nuysoft/Mock/wiki/Syntax-Specification

2.数据占位符定义规范（DPD）：Mock.Random类用于随机生成多种更真实的数据，如日期、图像、文本等。

https://github.com/nuysoft/Mock/wiki/Mock.Random

（具体可以参考官方文档）

后续还会整理一些比较常用的占位符模版定义，持续关注哦～～～