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 = falseVue.prototype.$axios = axiosnew 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"}