在Vue中使用mockjs程式碼例項
阿新 • • 發佈：2020-11-27
前言
前後端分離的開發模式，前端需要向後端請求資料（ajax請求），但實際開發過程中，前後端會約定一份介面文件，但前後端開發進度並不一致，當後端沒有完善介面功能時，前端需要在本地模擬資料返回，此時需要使用到mockjs。
安裝
npm install mockjs --save-dev
目錄結構
配置
1、api下的config.js：配置axios的攔截處理
import axios from 'axios'
// 建立一個axios例項
const service = axios.create({
//請求超時配置
timeout:3000
})
//新增請求攔截器
service.interceptors.request.use(
config => {
return config
},err => {
console.log(err)
}
)
//新增響應攔截器
service.interceptors.response.use(
response => {
let res = {}
res.status = response.status
res.data = response.data
return res
},err => {
console.log(err)
}
)
export default service另外一個應用場景，劫持請求，獲取token，為請求新增token：
// 請求攔截器
axios.interceptors.request.use(config => {
const token = localStorage.getItem('userToken');
if (token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
config.headers.accessToken = token;
}
return config;
},error => {
return Promise.reject(error);
})2、mock目錄下index.js
import Mock from 'mockjs'
import homeApi from './home'
import userApi from './user'
// 設定200-2000毫秒延時請求資料
// Mock.setup({
// timeout: '200-2000'
// })
// 首頁相關
// 攔截的是 /home/getData
Mock.mock(/\/home\/getData/,'get',homeApi.getStatisticalData)
// 使用者相關
Mock.mock(/\/user\/getUser/,userApi.getUserList)
Mock.mock(/\/user\/del/,userApi.deleteUser)
Mock.mock(/\/user\/batchremove/,userApi.batchremove)
Mock.mock(/\/user\/add/,'post',userApi.createUser)
Mock.mock(/\/user\/edit/,userApi.updateUser)
Mock.mock(/\/home\/getData/,homeApi.getStatisticalData)
import Mock from 'mockjs'
// 圖表資料
let List = []
export default {
getStatisticalData: () => {
for (let i = 0; i < 7; i++) {
List.push(
Mock.mock({
vue: Mock.Random.float(100,8000,2),wechat: Mock.Random.float(100,ES6: Mock.Random.float(100,Redis: Mock.Random.float(100,React: Mock.Random.float(100,springboot: Mock.Random.float(100,2)
})
)
}
return {
code: 20000,data: {
// 餅圖
videoData: [
{
name: 'springboot',value: Mock.Random.float(1000,10000,2)
},{
name: 'vue',{
name: '小程式',{
name: 'ES6',{
name: 'Redis',{
name: 'React',2)
}
],// 柱狀圖
userData: [
{
date: '週一',new: Mock.Random.integer(1,100),active: Mock.Random.integer(100,1000)
},{
date: '週二',{
date: '週三',{
date: '週四',{
date: '週五',{
date: '週六',{
date: '週日',1000)
}
],// 折線圖
orderData: {
date: ['20191001','20191002','20191003','20191004','20191005','20191006','20191007'],data: List
},tableData: [
{
name: 'ES6',todayBuy: Mock.Random.float(100,1000,monthBuy: Mock.Random.float(3000,5000,totalBuy: Mock.Random.float(40000,1000000,{
name: 'Vue',{
name: 'springboot',2)
}
]
}
}
}
}
home.js
import Mock from 'mockjs'
// get請求從config.url獲取引數，post從config.body中獲取引數
function param2Obj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g,'\\"')
.replace(/&/g,'","')
.replace(/=/g,'":"') +
'"}'
)
}
let List = []
const count = 200
for (let i = 0; i < count; i++) {
List.push(
Mock.mock({
id: Mock.Random.guid(),name: Mock.Random.cname(),addr: Mock.mock('@county(true)'),'age|18-60': 1,birth: Mock.Random.date(),sex: Mock.Random.integer(0,1)
})
)
}
export default {
/**
* 獲取列表
* 要帶引數 name,page,limt; name可以不填,limit有預設值。
* @param name,limit
* @return {{code: number,count: number,data: *[]}}
*/
getUserList: config => {
const { name,page = 1,limit = 20 } = param2Obj(config.url)
console.log('name:' + name,'page:' + page,'分頁大小limit:' + limit)
const mockList = List.filter(user => {
if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
return true
})
const pageList = mockList.filter((item,index) => index < limit * page && index >= limit * (page - 1))
return {
code: 20000,count: mockList.length,list: pageList
}
},/**
* 增加使用者
* @param name,addr,age,birth,sex
* @return {{code: number,data: {message: string}}}
*/
createUser: config => {
const { name,sex } = JSON.parse(config.body)
console.log(JSON.parse(config.body))
List.unshift({
id: Mock.Random.guid(),name: name,addr: addr,age: age,birth: birth,sex: sex
})
return {
code: 20000,data: {
message: '新增成功'
}
}
},/**
* 刪除使用者
* @param id
* @return {*}
*/
deleteUser: config => {
const { id } = param2Obj(config.url)
if (!id) {
return {
code: -999,message: '引數不正確'
}
} else {
List = List.filter(u => u.id !== id)
return {
code: 20000,message: '刪除成功'
}
}
},/**
* 批量刪除
* @param config
* @return {{code: number,data: {message: string}}}
*/
batchremove: config => {
let { ids } = param2Obj(config.url)
ids = ids.split(',')
List = List.filter(u => !ids.includes(u.id))
return {
code: 20000,data: {
message: '批量刪除成功'
}
}
},/**
* 修改使用者
* @param id,name,data: {message: string}}}
*/
updateUser: config => {
const { id,sex } = JSON.parse(config.body)
const sex_num = parseInt(sex)
List.some(u => {
if (u.id === id) {
u.name = name
u.addr = addr
u.age = age
u.birth = birth
u.sex = sex_num
return true
}
})
return {
code: 20000,data: {
message: '編輯成功'
}
}
}
}
user.js
mockjs
Mock.mock( rurl,rtype,function( options ) ) Mock.mock( rurl,template ) 表示當攔截到rurl和rtype的ajax請求時，將根據資料模板template生成模擬資料，並作為響應資料返回。 Mock.mock( rurl,function( options ) ) 記錄用於生成響應資料的函式。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函式 function(options) 將被執行，並把執行結果作為響應資料返回。 其中： rurl 可選 表示要攔截的url，可以使字串，也可以是正則 rtype 可選 表示要攔截的ajax請求方式，如get、post template 可選 資料模板，可以是物件也可以是字串 function(option) 可選 表示用於生成響應資料的函式
3.main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//全域性配置
import http from '@/api/config'
import './mock'
//第三方包
Vue.prototype.$http = http
Vue.config.productionTip = false
new Vue({
router,store,render: h => h(App)
}).$mount('#app')
4、元件中的方法如何使用：
this.$http.get('/home/getData').then(res => {
//
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。