|
@@ -10,10 +10,9 @@ Mock: 一种模拟后端接口的解决方案,能让我们提前调用模拟
|
|
|
|
|
|
# 3.Mock的使用
|
|
|
|
|
|
-```
|
|
|
+```javascript
|
|
|
npm install mockjs
|
|
|
-var Mock = require('mockjs')
|
|
|
-var data = Mock.mock({....})
|
|
|
+const Mock = require("mockjs");
|
|
|
```
|
|
|
|
|
|
# 4.Mock语法规范
|
|
@@ -22,13 +21,13 @@ var data = Mock.mock({....})
|
|
|
|
|
|
1. 数据模板定义规范(Data Template Definition,DTD)
|
|
|
数据模板中的每个属性由 3 部分构成:属性名(name)、生成规则(rule)、属性值(value):
|
|
|
-```
|
|
|
+```javascript
|
|
|
'name|rule': valu
|
|
|
```
|
|
|
|
|
|
2. 数据占位符定义规范(Data Placeholder Definition,DPD)
|
|
|
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中
|
|
|
-```
|
|
|
+```javascript
|
|
|
@占位符
|
|
|
@占位符(参数 [, 参数])
|
|
|
```
|
|
@@ -36,7 +35,7 @@ var data = Mock.mock({....})
|
|
|
## 4.2数据模板定义规范
|
|
|
|
|
|
### 4.2.1属性值是字符串 String
|
|
|
-```
|
|
|
+```javascript
|
|
|
1. 'name|min-max': string
|
|
|
通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。
|
|
|
2. 'name|count': string
|
|
@@ -44,13 +43,13 @@ var data = Mock.mock({....})
|
|
|
```
|
|
|
|
|
|
### 4.2.2属性值是数字 Numbe
|
|
|
-```
|
|
|
+```javascript
|
|
|
1. 'name|min-max': number
|
|
|
生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型
|
|
|
```
|
|
|
|
|
|
### 4.2.3其他类型
|
|
|
-```
|
|
|
+```javascript
|
|
|
@id() : 得到随机的id
|
|
|
@cname(): 随机生成中文名字
|
|
|
@date('yyyy-MM-dd'): 随机生成日期
|
|
@@ -60,14 +59,14 @@ var data = Mock.mock({....})
|
|
|
|
|
|
## 4.3Mock.js基本代码格式
|
|
|
|
|
|
-```
|
|
|
+```javascript
|
|
|
Mock.mock({
|
|
|
-id: "@id()",//得到随机的id,对象
|
|
|
-username: "@cname()",//随机生成中文名字
|
|
|
-date: "@date()",//随机生成日期
|
|
|
-description: "@paragraph()",//描述
|
|
|
-email: "@email()", //email
|
|
|
-'age|18-38': 0
|
|
|
+ id: "@id()",//得到随机的id,对象
|
|
|
+ username: "@cname()",//随机生成中文名字
|
|
|
+ date: "@date()",//随机生成日期
|
|
|
+ description: "@paragraph()",//描述
|
|
|
+ email: "@email()", //email
|
|
|
+ 'age|18-38': 0
|
|
|
})
|
|
|
```
|
|
|
|
|
@@ -76,36 +75,37 @@ email: "@email()", //email
|
|
|
步骤:
|
|
|
1. 定义接口路由,在接口中并返回mock模拟的数据
|
|
|
|
|
|
-```
|
|
|
-module.exports = function (app) { app.use('/api/userinfo', (req, res) => { res.json(obj) })
|
|
|
+```javascript
|
|
|
+const Mock = require("mockjs");
|
|
|
+const data = {
|
|
|
+ id: "@guid",
|
|
|
+ name: "@cname",
|
|
|
+};
|
|
|
+Mock.mock("/api/test", "post", data);
|
|
|
+module.exports = Mock;
|
|
|
```
|
|
|
|
|
|
-2. 在vue.config.js中配置devServer,在before属性中引入接口路由函数
|
|
|
+2. 在main.js中导入
|
|
|
|
|
|
-```
|
|
|
-module.exports = {
|
|
|
- devServer: {
|
|
|
- before: require('./mock/index.js')//引入mock/index.js
|
|
|
- }
|
|
|
-}
|
|
|
+```javascript
|
|
|
+require("./mock/index")
|
|
|
```
|
|
|
|
|
|
3. 使用axios调用该接口,获取数据
|
|
|
|
|
|
-
|
|
|
+```javascript
|
|
|
+axios.post("/api/test").then(res=>{
|
|
|
+ console.log(res);
|
|
|
+})
|
|
|
+```
|
|
|
|
|
|
# 6.如何控制Mock接口的开关?
|
|
|
|
|
|
1. 新建.env.development,定义环境变量
|
|
|
-```
|
|
|
+```javascript
|
|
|
MOCK=true
|
|
|
```
|
|
|
2. 定义接口路由前,判断当前MOCK环境变量是否为true
|
|
|
-```
|
|
|
-module.exports = function (app) {
|
|
|
- if (process.env.MOCK == 'true') {
|
|
|
- app.use('/api/userinfo', (req, res) => {
|
|
|
- res.json(obj)
|
|
|
- })
|
|
|
-}
|
|
|
+```javascript
|
|
|
+process.env.MOCK && require("./mock/index")
|
|
|
```
|