doc/前端/mock/Mock的使用.md

1.什么是Mock

Mock: 一种模拟后端接口的解决方案，能让我们提前调用模拟接口，完成前端开发

官网地址

2.Mock优点

3.Mock的使用

npm install mockjs
var Mock = require('mockjs')
var data = Mock.mock({....})

4.Mock语法规范

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

1. 数据模板定义规范（Data Template Definition，DTD） 数据模板中的每个属性由 3 部分构成：属性名(name)、生成规则(rule)、属性值(value)：

   'name|rule': valu
   

2. 数据占位符定义规范（Data Placeholder Definition，DPD） 占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中

   @占位符
   @占位符(参数 [, 参数])
   

4.2数据模板定义规范

4.2.1属性值是字符串 String

1. 'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
2. 'name|count': string
通过重复 string 生成一个字符串，重复次数等于 count

4.2.2属性值是数字 Numbe

1. 'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型

4.2.3其他类型

@id() : 得到随机的id
@cname(): 随机生成中文名字
@date('yyyy-MM-dd'): 随机生成日期
@paragraph(): 描述
@email(): 邮箱地址

4.3Mock.js基本代码格式

Mock.mock({
id: "@id()",//得到随机的id,对象
username: "@cname()",//随机生成中文名字
date: "@date()",//随机生成日期
description: "@paragraph()",//描述
email: "@email()", //email
'age|18-38': 0
})

5.Mock在Vue中使用

步骤：

1. 定义接口路由，在接口中并返回mock模拟的数据

   module.exports = function (app) { app.use('/api/userinfo', (req, res) => { res.json(obj) })
   

2. 在vue.config.js中配置devServer，在before属性中引入接口路由函数

   module.exports = {
   	devServer: {
   		before: require('./mock/index.js')//引入mock/index.js
   	}
   }
   

3. 使用axios调用该接口，获取数据

6.如何控制Mock接口的开关？

1. 新建.env.development，定义环境变量

   MOCK=true
   

2. 定义接口路由前，判断当前MOCK环境变量是否为true

   module.exports = function (app) {
   	if (process.env.MOCK == 'true') {
   		app.use('/api/userinfo', (req, res) => {
   		res.json(obj)
   	})
   }