Mock.js基本使用

一 简介

项目中后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行开发。为了方便前端代码自测，提高开发效率，可以使用mock.js模拟生成数据进行前后端数据联调

原理：拦截了所有的请求并代理到本地模拟数据，所以 network 中没有发出任何的请求。因为只是模拟数据进行测试，就不必频繁发请求给服务器造成压力

所有的 mock 数据都在 @/src/mock 目录下，它只会拦截 @/src/mock/index.js 文件中拦截的 url。
移除只需要在 @/src/main.js 中移除 import ‘./mock’ 并且删除 @/src/mock 文件夹即可。

二 参考网站

官网：http://mockjs.com
github：https://github.com/nuysoft/Mock/wiki **很详细的mock.js相关知识介绍

三 语法规范
数据模板定义规范（Data Template Definition，DTD）
数据占位符定义规范（Data Placeholder Definition，DPD）

1 数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值–> ‘name|rule’: value
注意：
属性名 和 生成规则 之间用竖线 | 分隔。
a. 生成规则 是可选的。
b. 生成规则 有 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
c. 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
d. 属性值 中可以含有 @占位符。
e. 属性值 还指定了最终值的初始值和类型。

2. 数据占位符定义规范 DPD
   a. 用 @ 来标识其后的字符串是 占位符。
   b. 占位符 引用的是 Mock.Random 中的方法。
   c. 通过 Mock.Random.extend()
   d. 来扩展自定义占位符。
   e. 占位符 也可以引用 数据模板 中的属性。
   f. 占位符 会优先引用 数据模板 中的属性。
   g. 占位符 支持 相对路径 和绝对路径。

vue中使用mock需要先npm安装mock，再引入到main.js中，不然接口会报404
Vue引入mock参考：https://www.cnblogs.com/vae860514/p/8405294.html

三 简单例子

1. npm install mockjs
2. 在文件夹根目录下中创建mock的目录，里面放你要写的mock.js
   
   3.在根目录中的js中引入
   
   4.在mockjs中定义mock数据模板和生成模拟数据

1.mock.js中的数据模板方式：（‘name|rule’: value）–>分别对应： ‘属性名 |生成规则‘ : 属性值
2. Mock.mock( rurl?, rtype?, template|function( options ) ) 根据数据模板生成模拟数据

5.在根目录下创建api文件夹，新建js调接口。我这用的是axios调的，也可以用别的

6.最后就可以使用了，在其他vue文件中引入这个js用api中js配置的名字调接口了

四 另外一个例子(其实和上面例子一样只是多写了一个接口，可以不看第三个直接看这个)

1. 还是一样，在根目录下的mock文件夹中新建你的mockjs文件，可以把同一个模块的模拟接口和数据全部写在同一个文件中，但是我这里是分了两个文件分别写的
   
2. 把第一步的mockjs引入到mock文件夹的index.js中
   
   3.在api中配置好刚模拟的接口信息
   
   4.在自己测试的界面文件中，引入刚刚api中配置的接口进行调用，可以使用你之前配置的模拟数据了
   
   
   5.界面有显示数据就可以了