使用背景: vue項目 axios
使用詳情:
1、首先安裝
# 在項目中安裝
npm install mockjs
2、在項目中使用
在項目中src文件夾下 新建mock文件夾 新建mock.js 和index.js文件 這裏面用來生成基礎的接口
項目結構截圖:
數據
mock.js 文件
//-----------------mock.js-------------------
// 引入mockjs
import Mock from 'mockjs'
// 創建模擬數據 具體的數據生成方法 請查看文檔http://mockjs.com/examples.html
function 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 文件
// ------------index.js---------------
// 引入mockjs
import Mock from 'mockjs'
// 引入生成的模擬數據
import {creatPostMock, creatGetMock} from './mock'
// 設置請求延時時間
Mock.setup({
// timeout: 2000 方式一 直接設置值
timeout: '2000 - 5000' // 方式二 設置區間 注意這個是一個字符串形式
})
// 設置攔截的接口 格式請看文檔 https://github.com/nuysoft/Mock/wiki/Mock.mock()
// 注意: 這裏攔截的地址 最好使用正則匹配 如果直接使用字符串接口 就有可能攔截不到帶參數的請求 報錯404
Mock.mock(/\/api\/mock(|\?\S*)$/, 'post', creatPostMock)
// Mock.mock('/api/mock', 'get', creatGetMock) // 方式一
Mock.mock(/\/api\/mock(|\?\S*)$/, 'get', creatGetMock) // 方式二
然後在main.js 文件裏面引入我們寫好的mock/index.js文件 用於攔截請求
//------------------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' // 引入axios
import('./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/>'
})
接下來我們就可以定義api了 在api文件下 新建一個自定義接口文件 如questMock.js 裏面是我們需要請求數據的模擬接口;
//-------------questMock.js----------------
// 引入axios
import axios from 'axios'
// 使用
this.axios = axios
// 封裝的post
function postMockList (data) {
return this.axios.post('/api/mock', {
data
})
}
// 封裝的get
function 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>
遇到的問題
1、在設置模擬接口時 使用get請求 發現報錯404 後來查資料發現是因爲直接使用字符串接口會導致mockjs 攔截不到地址 解決辦法就是使用 正則去匹配請求接口
2、如何設置請求延時 由於mockjs 是在本地模擬數據所以並未發起真正的請求,無法看到請求的加載效果,解決辦法就是使用Mock.setup({timeout: 加載時間}) 來設置每次的模擬請求時間
也可參考以下:
vue-cli 中使用 Mockjs .
服務器端數據模擬,支持請求轉發、返回JSON靜態數據、返回JS可變數據 .