Mock

最新推荐文章于 2024-11-13 01:18:00 发布

城门口

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量344

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/fckxgjnvkldf/article/details/115717703

版权

本文介绍了Mock.js用于前端开发中模拟数据的使用，包括如何拦截Ajax请求并返回定制的响应数据。通过示例展示了Mock.js的数据模板定义规范，如字符串、数字、布尔值、对象和数组的生成规则。同时，演示了在项目中安装Mock.js和Axios，配置Mock.js入口文件，以及创建JSON响应文件。最后，展示了在Vue组件中使用Axios获取Mock数据的方法。

摘要由CSDN通过智能技术生成

Mock

Mock就是一个假后台

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

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

数据模板定义规范DTD

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

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

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

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

‘name|count’: string

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

属性值是数字 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)。

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

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

‘name|min-max’: object

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

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

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

‘name| 1’: array

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

‘name|min-max’: array

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

‘name|count’: array

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

属性值是函数 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>