mockjs是什么菩鲜？
Mock.js是一個(gè)模擬數(shù)據(jù)生成器园细，可以幫助前端開發(fā)和原型與后端進(jìn)度分開，并減少一些單調(diào)接校，尤其是在編寫自動(dòng)化測(cè)試時(shí)猛频。
官方網(wǎng)站：http://mockjs.com
作為一個(gè)前端搬磚工相信你都遇到過一個(gè)問題：優(yōu)秀如你寫代碼寫的太快了后端寫接口的速度完全跟不上你寫頁面的速度，如果你想吧后面的頁面寫下去又不得不需要后端數(shù)據(jù)蛛勉，什么你要自己編json假數(shù)據(jù)鹿寻？那樣也行但是有沒有更優(yōu)雅的方式呢？有的----mockjs數(shù)據(jù)模擬生成器
怎么使用诽凌？
實(shí)例：
1.首先安裝
npm install mockjs --save-dev
因?yàn)榇虬笫遣恍枰乃晕覀儗⑺惭b到開發(fā)環(huán)境中
2.在src中新建mock文件夾并在其中新建index.js和user.js
- mock/index.js
import mockjs from 'mockjs'
import { getUserList } from './user'
const Mock = require('mockjs')
//獲取用戶表格數(shù)據(jù)
Mock.mock("/web/user/getUserList", "get", getUserList);
export default mockjs
- mock/user.js
import Mock from 'mockjs'
const code = 200;
export let getUserList = () => {
return {
data: Mock.mock({
'list|10': [{
'userId|+1': 1,
'username': "@cname",
'date': '@date',
'address': '@region'
}]
}),
code: code
}
}
3.在main.js中配置mock
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
//引入mock數(shù)據(jù)
require('./mock')
new Vue({
router,
render: h => h(App),
}).$mount('#app')
簡(jiǎn)單吧這樣就算配置完成了一個(gè)模擬獲取用戶數(shù)據(jù)的接口了毡熏，接下來直接使用axios調(diào)用/web/user/getUserList接口就可以獲取模擬數(shù)據(jù)了
難點(diǎn)
我覺得mockjd使用起來還是挺簡(jiǎn)單的但是要模擬多樣化的隨機(jī)數(shù)據(jù)還是建議去看看官網(wǎng)
提供一份比較容易使用到的代碼
const Mock = require('mockjs')
// 返回字符串
Mock.mock('/api/data', (req, res) => {
return Mock.mock({
'string|3': '*'
})
})
// 返回指定范圍的整數(shù)
Mock.mock('/api/getInteger', (req, res) => {
return Mock.mock({
'a|1-100': 100
})
})
// 返回隨機(jī)個(gè)數(shù)的對(duì)象
Mock.mock('/api/getObject', (req, res) => {
return Mock.mock({
'brand|1-3': {
a: '京東',
b: '國(guó)美',
c: '蘇寧',
d: '當(dāng)當(dāng)',
e: '天貓',
f: '淘寶'
}
})
})
// 返回隨機(jī)數(shù)組
Mock.mock('/api/getArr', (req, res) => {
return Mock.mock({
'data|1-10': [
{
'name': '張三'
}
]
})
})
// 返回隨機(jī)字符
Mock.mock('/api/getRandom1', (req, res) => {
return Mock.mock({
'random1': /[a-z]{2}[A-Z]{2}[0-9]/
})
})
// 返回隨機(jī)字符
Mock.mock('/api/getRandom2', (req, res) => {
return Mock.mock({random2: '@string("lower", 5)'})
})
// 返回UUID
Mock.mock('/api/getUUID', (req, res) => {
return {'uuid': Mock.Random.id()}
})
