Vue 中使用Mock.js生成模拟数据

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 getData= () => {
   // 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的，比上面我写的方法要简单很多，而且是在线接口，但是那个网站太慢了，试着用了一次就放弃了

最后编辑于：2022.07.05 14:06:46