在前后端的交互中經(jīng)常會遇到前端等后端的數(shù)據(jù)接口上線谆甜，才好做一些bug方面的調(diào)試私植。這中間的時間成本會大大加大項目的時間成本從而產(chǎn)生滯后效應(yīng)鸡岗。
我了解到的可以模擬后端接口的有兩種工具人弓，一個是阿里爸爸出產(chǎn)的RAP癞季，可以說是復(fù)刻了一個后端出來，所以安裝注冊起來相對來說麻煩一些雷猪，要準備好Tomcat,java,mysql等睛竣。另一個就是vue原生的mockjs了，只需要在項目中install就可以使用了求摇。
- 生成隨機數(shù)據(jù)
- 攔截ajax射沟、axios請求
mockjs的文檔查閱
1.上mockjs官網(wǎng)
http://mockjs.com/
mock官網(wǎng).png
2.下載官方文檔
http://mockjs.com/0.1/
官方文檔.png
下載后就可以在本地查看官方文檔來解決大部分問題了
vue中mockjs的使用
一、安裝mockjs
- 使用cli腳手架安裝vue項目
- npm安裝mockjs
//cnpm會更快點
（c）npm install mockjs
二与境、引入mockjs
- 在項目目錄下創(chuàng)建新的文件验夯，格式如下：
mock文件.png
2.在index.js中引入mockjs
import Mock from 'mockjs'
3.在main.js中引入
import Vue from 'vue'
import App from './App.vue'
import './mock/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
三、mock實例
- 在index.js中創(chuàng)建一組指定實例
import Mock from 'mockjs'
const data = Mock.mock({
// "|"后的數(shù)字表示生成幾組數(shù)據(jù)
'string|1-4': '哎呦摔刁！'
})
console.log(data)
效果如圖：
哎呦.png
- 在index.js中生成一組隨機數(shù)據(jù)
import Mock from 'mockjs'
const data = Mock.mock({
// 隨機生成字符串挥转，括號中是字符串的個數(shù),c代表生成的是中文
string: '@cword(3)'
})
console.log(data)
效果如圖：
隨機字符串png
常用到的數(shù)據(jù)類型：(可在官網(wǎng)實例上查看)
- 文本： string
- 標(biāo)題： titlle
- 句子： sentence
- 數(shù)字： number
- 數(shù)組： object
四、模擬axios/ajax請求
- 安裝axios先
npm install axios
- 模擬get請求
- 在index.js中定義get請求
import Mock from 'mockjs'
// 定義get請求
Mock.mock('/api/news', 'get', {
status: 200,
meg: '獲取數(shù)據(jù)成功',
user_name: '@cword'
})
- 在app.vue中引入axios
<template>
<div id="app">
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {}
},
created() {
axios.get('/api/news').then(res => {
console.log(res)
})
}
}
</script>
上圖：
get請求.png
- 模擬post請求
- 同理，index.js加入
Mock.mock('/api/post/news', 'post', {
status: 200,
meg: '獲取數(shù)據(jù)成功'
})
- app.vue中加入
axios.post('/api/post/news').then(res => {
console.log(res)
})
post請求.png
- get模擬批量數(shù)據(jù)
- 需要將數(shù)據(jù)接口轉(zhuǎn)化成函數(shù)模式
const { cardList } = Mock.mock({
'cardList|10-20': [{
status: 0,
user_id: '@phone',
user_name: Mock.Random.name(),
phone: '@phone',
avatar_url: Mock.Random.image('200x200', '#ff6600', '#FCFCFC'),
university_id: '@cword(5)',
user_word: '@cword(10)',
occupation: Mock.Random.pick('職友', '學(xué)生'),
profession: '@cword(4)技術(shù)',
'age|1-90': 90,
sex: Mock.Random.pick('男', '女'),
label: Mock.mock({
'array|1-10': [
{
'name|+1': [
'Hello',
'Mock.js',
'!'
]
}
]
}),
'followers|1-200': 200,
'followings|1-200': 200,
'friends|1-200': 200,
'collection|1-100': 100,
realnames: '@boolean',
'activities|1-200': 200
}]
})
Mock.mock('/card_get', 'get', () => {
return {
list: cardList
}
})
在vue中調(diào)用這個接口可見到數(shù)據(jù)：
get批量png
