Mock JS
????最近在做一個(gè)平臺(tái)報(bào)表分析系統(tǒng)的前端界面良瞧，就是用一堆圖表來展示什么點(diǎn)擊量啊、在線人數(shù)啊昧谊、用戶構(gòu)成等等數(shù)據(jù)，然而后端還沒開始實(shí)現(xiàn)調(diào)用這些數(shù)據(jù)的功能接口酗捌，于是只能用假數(shù)據(jù)了呢诬。
????一開始是用的本地json文件來模擬數(shù)據(jù)，雖然圖表效果出來了胖缤，但是不夠靈活尚镰，看著就很假，于是心血來潮草姻，想試著用一下以前不知道在哪聽來的mock.js钓猬。
????下面開始進(jìn)入正題，
?? 安裝mock.js
npm i mockjs -s
首先通過npm在項(xiàng)目中安裝mockjs
?? 創(chuàng)建mock文件夾
- 在src(隨便哪都可以 看個(gè)人習(xí)慣 我覺得根目錄比較方便 )創(chuàng)建mock文件夾撩独，文件夾下創(chuàng)建index.js
// index.js
import Mock from "mockjs"
const getData= () => {
// mock隨機(jī)數(shù)據(jù)
const Random = Mock.Random;
let data= [];
for (let i = 0; i < 10; i++) {
let newData = {
title: Random.csentence(10, 25), // 隨機(jī)生成長度為10-25的標(biāo)題
region: Random.region(), // 隨機(jī)生成地區(qū)
author: Random.cname(), // 隨機(jī)生成名字
date: Random.date() + ' ' + Random.time() // 隨機(jī)生成年月日 + 時(shí)間
}
data.push(newData)
}
return data
}
// Mock.mock(url,method,chartData) 三個(gè)參數(shù)對(duì)應(yīng) api地址敞曹、請(qǐng)求方式、數(shù)據(jù)源
Mock.mock("/getData",'get',getData)
// 上面這句代碼的作用是攔截要請(qǐng)求的地址综膀，從而使用本地的數(shù)據(jù)
// 要模擬多個(gè)接口的話澳迫，寫多個(gè)數(shù)據(jù)源。每個(gè)調(diào)用一次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,還差一步就大功告成啦剧劝，現(xiàn)在可以在頁面中寫請(qǐng)求數(shù)據(jù)的函數(shù)了
created() {
this.getData();
},
methods: {
getData() {
this.$http.get("/getData")
.then(res => {
console.log(res);
});
}
}
?? 結(jié)果：
response
?? 注意
- get請(qǐng)求有帶參數(shù)時(shí)橄登，請(qǐng)把接口url寫為正則匹配，否則匹配不到就報(bào)錯(cuò)
例如：
Mock.mock("/\/getList/","get",{name:'Loli',age: "12"} )
?? 使用過后讥此，才能體驗(yàn)到Mock.js是多么的方便拢锹，前端同學(xué)想要數(shù)據(jù)接口，再也不用看后端的臉色了萄喳，我們自己制造接口??
其實(shí)國內(nèi)有個(gè)叫easy-mock基于mockjs的卒稳，比上面我寫的方法要簡單很多，而且是在線接口他巨，但是那個(gè)網(wǎng)站太慢了充坑，試著用了一次就放棄了
