一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者，可拜上将军也。
前言
我记得暑假的时候，浅浅用过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 } } } }
这样就可以模拟生成了一些图表数据，并且将这些数据通过接口返回了：
结语
天气好冷呀
