前言
我记得暑假的时候,浅浅用过Mook返回的数据,但是那个时候,并不是很喜欢学习前端,现在我想继续深入学习前端了,对于前端越来越喜欢了,也愿意不断去探索了,那就做个记录吧,如下是记录我使用 mook 数据的一个过程,以前写 vue 的时候,我写渲染模板的时候,都是将数据都写在 data 对象里面,或者使用本地的json文件来模拟后端返回的数据。
详细使用
为项目安装依赖包
# 安装
npm install mockjs
新建 mock.js 文件
api / mock.js
import Mock from 'mockjs'
import homeApi from './mockServerData/home'
// 定义 mock 请求拦截
// 参数一:接口地址
// 参数二:接口/请求类型 默认 get
// 参数三:数据处理函数
Mock.mock('/api/home/getData', 'get', homeApi.getStatisticalData())
在api文件夹下新建 mockServerDate 文件夹来存放数据处理函数
这样来做的话,将数据处理函数单独封装起来,数据就也模块化管理起来了。
home.js
import Mock from 'mockjs'
const List = []
// 暴露一个对象出去
export default {
getStatisticalData: () => {
// Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
for (let i = 0; i < 7; i++) {
List.push(
Mock.mock({
A: Mock.Random.float(100, 8000, 0, 0),
B: Mock.Random.float(100, 8000, 0, 0),
C: Mock.Random.float(100, 8000, 0, 0),
D: Mock.Random.float(100, 8000, 0, 0),
E: Mock.Random.float(100, 8000, 0, 0),
F: Mock.Random.float(100, 8000, 0, 0)
})
)
}
// 数据将会在这里返回
return {
code: 200,
data: {
List
}
}
}
}
这样就可以模拟生成了一些图表数据,并且将这些数据通过接口返回了:
结语
天气好冷呀