mock.js快速入门。不来看你就吃亏了

---

前言

在前后端分离的开发环境中，前端同学需要等待后端同学给出接口及接口文档之后，才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发，前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢？MockJS通过拦截特定的AJAX请求，并生成给定的数据类型的随机数，以此来模拟后端同学提供的接口。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是MockJS？

Mock.js （官网 http://mockjs.com/ ）是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

1,根据数据模板生成模拟数据

2,模拟 Ajax 请求，生成并返回模拟数据

3,基于 HTML 模板生成模拟数据

Mock.js 具有以下特点：

1.前后端分离,让前端攻城师独立于后端进行开发。

2.增加单元测试的真实性

3.通过随机数据，模拟各种场景。

4.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
5.符合直觉的接口

6.数据类型丰富

7.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

8.支持支持扩展更多数据类型，支持自定义函数和正则。

二、 Mock.js安装

npm install mockjs --save
npm install axios --save
//安装axios是为了能模拟后台接口。

在项目下创建 > mock文件夹 >再创建 index.js

在main.js引入mockjs

三、 Mock.js入门案例

需求：模拟一个用户列表，用户三个字段组件：自增ID、姓名

显示效果如下

{
    "list": [
        {
            "id": 1,
            "name": "测试"
        },
        {
            "id": 1,
            "name": "测试"
        },
        {
            "id": 1,
            "name": "测试"
        }
      
    ]
}

四、 Mock.js的语法规范

Mock.js 的语法规范包括两部分：

1.数据模板定义规范（Data Template Definition，DTD）

2.数据占位符定义规范（Data Placeholder Definition，DPD）

1． 数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值

// 属性名 name

// 生成规则 rule

// 属性值 value
‘name|rule’: value

属性名 和 生成规则 之间用竖线 | 分隔。

生成规则 是可选的。
生成规则 有 7 种格式：
‘name|min-max’: value
‘name|count’: value
‘name|min-max.dmin-dmax’: value
‘name|min-max.dcount’: value
‘name|count.dmin-dmax’: value
‘name|count.dcount’: value
‘name|+step’: value

属性值 中可以含有 @占位符。

属性值 还指定了最终值的初始值和类型
例如：

var data = Mock.mock("/users","get",{
    //list是一个数组，包含100个元素
    'list|100':[
        {
            'id':1,
            'name':'测试'
        }
    ]
  })

可见： list 是属性名 中间使用|分隔，数字5是生成规则（表示生成100条数据），后面是json数据。

五、Mock.js案例

常用需求

vue代码展示

效果展示：