Mock JS
最近在做一个平台报表分析系统的前端界面，就是用一堆图表来展示什么点击量啊、在线人数啊、用户构成等等数据，然而后端还没开始实现调用这些数据的功能接口，于是只能用假数据了。
一开始是用的本地json文件来模拟数据，虽然图表效果出来了，但是不够灵活，看着就很假，于是心血来潮，想试着用一下以前不知道在哪听来的mock.js。
下面开始进入正题，
🚗 安装mock.js
npm i mockjs -s
首先通过npm在项目中安装mockjs
🚗 创建mock文件夹
- 在src(随便哪都可以 看个人习惯 我觉得根目录比较方便 )创建mock文件夹，文件夹下创建index.js
// index.js
import Mock from "mockjs"
const chartData = () => {
// mock随机数据
const Random = Mock.Random;
let data= [];
for (let i = 0; i < 10; i++) {
let newData = {
title: Random.csentence(10, 25), // 随机生成长度为10-25的标题
region: Random.region(), // 随机生成地区
author: Random.cname(), // 随机生成名字
date: Random.date() + ' ' + Random.time() // 随机生成年月日 + 时间
}
data.push(newData)
}
return data
}
// Mock.mock(url,method,chartData) 三个参数对应 api地址、请求方式、数据源
Mock.mock("/getData",'get',getData)
// 上面这句代码的作用是拦截要请求的地址，从而使用本地的数据
// 要模拟多个接口的话，写多个数据源。每个调用一次Mock.mock()就可以了
🚗 在main.js中引入mock
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import echarts from 'echarts'
import Axios from 'axios'
require('./mock')
Vue.prototype.$echarts = echarts
Vue.prototype.$http = Axios
Vue.config.productionTip = false;
Vue.use(echarts)
new Vue({
router,
render: h => h(App),
}).$mount('#app');
🚗 ok,还差一步就大功告成啦，现在可以在页面中写请求数据的函数了
created() {
this.getData();
},
methods: {
getData() {
this.$http.get("/getData")
.then(res => {
console.log(res);
});
}
}
🚗 结果：
response
🚗 注意
- get请求有带参数时，请把接口url写为正则匹配，否则匹配不到就报错
例如：
Mock.mock("/\/getList/","get",{name:'Loli',age: "12"} )
🚗 使用过后，才能体验到Mock.js是多么的方便，前端同学想要数据接口，再也不用看后端的脸色了，我们自己制造接口😂
其实国内有个叫easy-mock基于mockjs的，比上面我写的方法要简单很多，而且是在线接口，但是那个网站太慢了，试着用了一次就放弃了
网友评论