Mock

Mock

Mock就是一个假后台

用于拦截ajax请求，模拟服务器返回数据

实现原理是对XHR对象的拦截，属于js拦截，所以浏览器并没有发出请求
总结：Mock 就是造一些假数据，给前端用，比如请求一个 json 文件，也属于 Mock 的范围，与 Mock.js 本身没有关系

数据模板定义规范DTD

数据模板中的每个属性由3部分构成：属性名、生成规则、属性值：

// 属性名 name
// 生成规则 rule
// 属性值 value
‘name|rule’: value
注意：

属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则有 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
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。
生成规则和示例

1. 属性值是字符串 String
   ‘name|min-max’: string

通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

‘name|count’: string

通过重复 string 生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number
   ‘name| 1’: number

属性值自动加 1，初始值为 number。

‘name|min-max’: number

生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

‘name|min-max.dmin-dmax’: number

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

Mock.mock({
‘number1|1-100.1-10’: 1,
‘number2|123.1-10’: 1,
‘number3|123.3’: 1,
‘number4|123.10’: 1.123
})
// =>
{
“number1”: 12.92,
“number2”: 123.51,
“number3”: 123.777,
“number4”: 123.1231091814
}
3. 属性值是布尔型 Boolean
‘name|1’: boolean

随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

‘name|min-max’: value

随机生成一个布尔值，值为 value 的概率是 min / (min max)，值为 !value 的概率是 max / (min max)。

4. 属性值是对象 Object
   ‘name|count’: object

从属性值 object 中随机选取 count 个属性。

‘name|min-max’: object

从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array
   ‘name|1’: array

从属性值 array 中随机选取 1 个元素，作为最终值。

‘name| 1’: array

从属性值 array 中顺序选取 1 个元素，作为最终值。

‘name|min-max’: array

通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

‘name|count’: array

通过重复属性值 array 生成一个新数组，重复次数为 count。

6. 属性值是函数 Function
   ‘name’: function

执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。

安装mock.js和axios

npm i mockjs -D
npm i axios

配置mock

src目录下创建mock文件夹
moack文件加中新建index.js作为请求的入口文件
mock文件中新建json文件夹，用于存放响应的json文件，文件中创建userInfo.json文件
在index.js编写

// 引入 mock.js
const Mock = require('mockjs')
// Mock.mock 方法有很多重载，可以接受不同的参数
Mock.mock('/user/userInfo', 'get', require('./json/userInfo'))

在userInfo.json编写

{
  "status": 0,
  "data|5": [
    {
      "id|+1":1,
      "userSn": "3785521",
      "username": "不求甚解",
      "age": 25,
      "imgUrl": "https://avatar.csdn.net/8/5/D/3_bocongbo.jpg"
    }
  ],
  "msg": ""

在文件中引入axios

<template>
  <div class="home"></div>
</template>
 
<script>
import axios from 'axios'
export default {
  name: 'Home',
  async created () {
    const res = await axios.get('/user/userInfo')
    console.log(res.data.data)
  }
}
</script>