# 在項目中安裝 npm install mockjs

//-----------------mock.js-------------------// 引入mockjsimport Mock from 'mockjs'// 創建模擬數據 具體的數據生成方法 請查看文檔http://mockjs.com/examples.htmlfunction creatPostMock () { const list = [] const mockdata = { id: '@increment', // 數據定義 @increment 'object|1': { '310000': '上海市', '320000': '江蘇省', '330000': '浙江省', '340000': '安徽省' }, name: '@pick(["a", "e", "i", "o", "u"])', m1: '@integer(60, 100)', m2: '@integer(60, 100)', m3: '@integer(60, 100)', m4: '@integer(60, 100)', m5: '@integer(60, 100)', m6: '@integer(60, 100)', m7: '@integer(60, 100)', m8: '@integer(60, 100)', m9: '@integer(60, 100)' } for (var i = 0; i < 10; i++) { const a = Mock.mock(mockdata) list.push(a) } const data = { data: {}, size: 1, pagesize: 10 } data.data = list return data}// 創建模擬數據function creatGetMock () { const getMock = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) return getMock}// 將模擬好的數據輸出出去；export {creatPostMock, creatGetMock}

// ------------index.js---------------// 引入mockjsimport Mock from 'mockjs'// 引入生成的模擬數據import {creatPostMock, creatGetMock} from './mock'// 設置請求延時時間Mock.setup({ // timeout: 2000 方式一 直接設置值 timeout: '2000 - 5000' // 方式二 設置區間 注意這個是一個字符串形式})// 設置攔截的接口 格式請看文檔 https://github.com/nuysoft/Mock/wiki/Mock.mock()// 注意: 這里攔截的地址 最好使用正則匹配 如果直接使用字符串接口 就有可能攔截不到帶參數的請求 報錯404Mock.mock(///api//mock(|/?/S*)$/, 'post', creatPostMock)// Mock.mock('/api/mock', 'get', creatGetMock) // 方式一Mock.mock(///api//mock(|/?/S*)$/, 'get', creatGetMock) // 方式二

//------------------main.js-------------------// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios' // 引入axiosimport('./mock/index') // 引入設置好基礎的mock, 用于攔截請求// 設置為 false 以阻止 vue 在啟動時生成生產提示。Vue.config.productionTip = false// 在vue項目中 axios中無法直接使用vue.use() 所以將axios直接添加到Vue的原型上Vue.prototype.axios = axios/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})

//-------------questMock.js----------------// 引入axiosimport axios from 'axios'// 使用this.axios = axios// 封裝的postfunction postMockList (data) { return this.axios.post('/api/mock', { data })}// 封裝的getfunction getMockList (data) { return this.axios.get('/api/mock', { data })}// 輸出export { postMockList, getMockList }

// ----------------------HelloWorld---------------------<template> <div class="hello"> <div class="mask" :class="{boxNone:isMask }"></div> <div> <p>這是獲取mock 數據</p> <button @click="getMockData">get模擬數據</button> <button @click="postMockData">post模擬數據</button> </div> </div></template><script>import { postMockList, getMockList } from '../api/questMock.js'export default { name: 'HelloWorld', data () { return { msg: '模擬前后臺交互', getMock: getMockList, postMock: postMockList, isMask: true } }, methods: { getMockData () { this.isMask = false this.getMock({ params: {  name: '隔壁老王' } }).then(res => { this.isMask = true console.log('GET模擬數據', res) }).catch(e => { console.log('錯誤', e) }) }, postMockData () { this.isMask = false this.postMock({ name: 'xiaoming', age: '5' }).then(res => { this.isMask = true console.log('POST模擬數據', res) }).catch(e => { console.log('錯誤', e) }) } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: green; opacity: 0.5;}.mask.boxNone { display: none;}</style>