【mockjs】一.为什么使用mockjs；二.mockjs的优点；三.mockjs使用；四.vue2+mockjs实现CRUD

目录

一.为什么使用mockjs

1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查

2.使用json-server模拟，但不能随机生成所需数据

3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

二.mockjs的优点

1.支持前后端分离

2.可随机生成大量的数据

3.用法简单

4.数据类型丰富

5.可扩展数据类型

6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可

三.mockjs使用

1.安装：npm i mockjs

2.mockjs的常规语法：

3.mockjs生成接口的方法：Mock.mock()

四.vue2+mockjs实现CRUD

1.安装axios、mockjs

2.创建mockjs接口配置文件：src/mock/index.js

3.在main.js文件中引入mock接口文件

4.在vue组件中请求mockjs生成的数据 

---

一.为什么使用mockjs

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口。

1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查

2.使用json-server模拟，但不能随机生成所需数据

3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

二.mockjs的优点

1.支持前后端分离

2.可随机生成大量的数据

3.用法简单

4.数据类型丰富

5.可扩展数据类型

6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可

三.mockjs使用

1.安装：npm i mockjs

2.mockjs的常规语法：

"id|1-10":1    //表示给id生成1-10的随机数，初始值为1
"id|+1":1     //表示id的初值为1，并且自增+1
"userName":'@cname'    //'@cname'表示随机的中文名；'@name'表示随机生成英文名
'sex|1': ['男', '女'],   //性别：男/女

"email":'@email'    //'@email'随机邮箱
"city":'@province'    //'@province'表示随机生成省份；'@city'随机生成城市；'@county'随机生成县区；'@city(true)'表示随机生成省份+城市；'@county(true)'随机生成省、市、县；
"birthday":'@datetime'    //'@datetime'：表示随机生成日期、时间
'date': '@datetime()', //随机时间 例如 "1982-12-03 23:27:38"
'img': '@image()',//随机图片，例如："http://dummy