vue項(xiàng)目中如何使用mock你知道嗎
Mock.js 是一款模擬數(shù)據(jù)生成器,旨在幫助前端攻城師獨(dú)立于后端進(jìn)行開(kāi)發(fā),幫助編寫(xiě)單元測(cè)試。提供了以下模擬功能:
- 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)
- 模擬 Ajax 請(qǐng)求,生成并返回模擬數(shù)據(jù)
- 基于 HTML 模板生成模擬數(shù)據(jù)
第一步:
npm install mockjs // 安裝mockjs
npm install axios
第二步,在request.js中進(jìn)行相關(guān)配置,request.js代碼如下:
import axios from 'axios'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-urlencoded'
const http = axios.create()
http.defaults.timeout = 3000
http.interceptors.request.use(config => { // 請(qǐng)求攔截器配置 // 可不配置
// do sth
return config
}, error => {
console.log(error)
return Promise.reject(error)
})
http.interceptors.response.use(response => { // 響應(yīng)攔截器配置 // 可不配置
// do something
return response
}, error => {
console.log(error)
return Promise.reject(error)
})
export function fetch(url, params) { // 封裝axios的post請(qǐng)求
return new Promise((resolve, reject) => { // promise 用法,自行查閱
axios.post(url, params).then(response => {
resolve(response.data) // promise相關(guān)
}).catch(error => {
reject(error) // promise相關(guān)
})
})
}
export default { // 暴露htto_mock方法,即后面頁(yè)面中用到的方法
http_mock(url, params) {
return fetch(url, params)
}
}
第三步,在mock.js中進(jìn)行相關(guān)配置,mock.js代碼如下:
import Mock from 'mockjs'
const Random = Mock.Random
var listData = function() {
let _data = {
status: 200,
message: 'success',
data: {
total: 100,
'rows|10': [{
id: '@guid',
name: '@cname',
'age|20-30': 23,
'job|1': ['前端工程師', '后端工程師', 'UI工程師', '需求工程師']
}]
}
}
return { _data }
}
// url為要攔截的請(qǐng)求地址 請(qǐng)求方式 請(qǐng)求數(shù)據(jù)(規(guī)則) (此處api會(huì)被mockjs攔截)
Mock.mock('http://route.showapi.com/60-27', 'post', listData())

第四步,在main.js中需引入mock.js即可
import mock from '@/http/mock'
第五步,在頁(yè)面中使用
import request from '@/http/request'
export default {
name: "FirstPage",
created() {
this.getData()
},
methods: {
getData() {
// 假裝要使用http_mock發(fā)送請(qǐng)求(mock自動(dòng)攔截請(qǐng)求并生成數(shù)據(jù))
// 此處第一個(gè)參數(shù)需要和Mock.mock()中的第一個(gè)參數(shù)一致
console.log('請(qǐng)求開(kāi)始')
request.http_mock('http://route.showapi.com/60-27','api_id=63114&api_sign=3847b0').then(response => {
console.log(response._data)
})
},
}
}
效果如下:

總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
vue中循環(huán)請(qǐng)求接口參數(shù)問(wèn)題及解決
這篇文章主要介紹了vue中循環(huán)請(qǐng)求接口參數(shù)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
vue使用?vue-socket.io三種方式及踩坑實(shí)例解析
這篇文章主要為大家介紹了vue使用?vue-socket.io三種方式及踩坑實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
vue如何實(shí)現(xiàn)左右滑動(dòng)tab(vue-touch)
這篇文章主要介紹了vue如何實(shí)現(xiàn)左右滑動(dòng)tab(vue-touch),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue最強(qiáng)table vxe-table 虛擬滾動(dòng)列表 前端導(dǎo)出問(wèn)題分析
最近遇到個(gè)問(wèn)題,后臺(tái)一次性返回2萬(wàn)條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁(yè),怎么操作呢,下面通過(guò)本文介紹下vue最強(qiáng)table vxe-table 虛擬滾動(dòng)列表 前端導(dǎo)出問(wèn)題,感興趣的朋友一起看看吧2023-10-10
vue?內(nèi)置組件?component?的用法示例詳解
這篇文章主要介紹了vue內(nèi)置組件component的用法,本文給大家介紹了component內(nèi)置組件切換方法,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue props傳值失敗 輸出undefined的解決方法
今天小編就為大家分享一篇vue props傳值失敗 輸出undefined的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

