vue使用mock模拟数据操作

首先下载mockjs

npm install mockjs

npm install axios

之后在src文件夹下创建一个新的文件夹，名为mock

在mock文件夹下创建一个index.js

里面的内容为

const Mock = require('mockjs');

//设置ajax请求的相应的时间
Mock.setup({
timeout:'200-600'
});

let configArray = [];

const files = require.context('.', true ,/\.js$/);
//使用webpack读取所有的mock文件
files.keys().forEach((key)=> {
if( key==='./index.js') return;
configArray = configArray.concat(files(key).default);
})

//注册所有的mock服务
configArray.forEach((item)=>{
for (let [path, target] of Object.entries(item)) {
let protocol = path.split('|')
Mock.mock(new RegExp('^'+protocol[1]), protocol[0], target);
}
})

 

之后在main.js进行引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";

require('./mock');

Vue.config.productionTip = false
Vue.prototype.$axios = axios

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

 

之后在mock文件夹下创建demoList.js文件，

里面的内容为;

// 获取 mock.Random 对象
const Mock = require('mockjs')
const Random = Mock.Random;

let demoList = [{
id: 1,
name: 'zs',
age: '23',
job: Random.cname()
},{
id: 2,
name: 'ww',
age: '24',
job: '后端工程师'
}]

export default {
'get|/parameter/query': (option) => {
return {
status: 200,
message: 'success',
data: demoList
};
}
}

 

之后就可以在template组件中进行使用，运用axios库，就可以拿到自己定义的数据

created() {
this.$axios.get("/parameter/query").then((res)=>{
console.log(res)
})
}

问题统计

1、如果你使用了eslint代码校验的话，会出项报错的情况

报错信息：error 'option' is defined but never used no-unused-vars

解决方法：在package.json中添加如下信息，即可解决。

"rules": {
"generator-star-spacing": "off",
"no-tabs":"off",
"no-unused-vars":"off",
"no-console":"off",
"no-irregular-whitespace":"off",
"no-debugger": "off"
}