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

1.什么是Mock

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

官网地址

2.Mock优点

3.Mock的使用

npm install mockjs
const Mock = require("mockjs");

4.Mock语法规范

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

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

   'name|rule': valu
   

   1. 数据占位符定义规范（Data Placeholder Definition，DPD） 占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中 javascript @占位符 @占位符(参数 [, 参数])

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模拟的数据

const Mock = require("mockjs");
const data = {
  id: "@guid",
  name: "@cname",
};
Mock.mock("/api/test", "post", data);
module.exports = Mock;

1. 在main.js中导入

require("./mock/index")

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

axios.post("/api/test").then(res=>{
    console.log(res);
})

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

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

   MOCK=true
   

   1. 定义接口路由前，判断当前MOCK环境变量是否为true javascript process.env.MOCK && require("./mock/index")