Vue框架中如何調(diào)用模擬數(shù)據(jù)你知道嗎
更新時(shí)間：2022年03月31日 12:53:25 作者：時(shí)間的情敵
這篇文章主要為大家詳細(xì)介紹了Vue框架中如何調(diào)用模擬數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1、框架結(jié)構(gòu)
mock是模擬數(shù)據(jù)文件夾，文件夾中有index.js，里面包含所模擬的接口數(shù)據(jù)：如下所示
const Mock = require("mockjs");
const { param2Obj } = require("./utils");
const user = require("./user");
//調(diào)用方式
const mocks = [...user];
function mockXHR() {
// mock patch
// https://github.com/nuysoft/Mock/issues/300
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send;
Mock.XHR.prototype.send = function() {
if (this.custom.xhr) {
this.custom.xhr.withCredentials = this.withCredentials || false;
if (this.responseType) {
this.custom.xhr.responseType = this.responseType;
}
}
this.proxy_send(...arguments);
};
function XHR2ExpressReqWrap(respond) {
return function(options) {
let result = null;
if (respond instanceof Function) {
const { body, type, url } = options;
// https://expressjs.com/en/4x/api.html#req
result = respond({
method: type,
body: JSON.parse(body),
query: param2Obj(url),
});
} else {
result = respond;
}
return Mock.mock(result);
};
}
for (const i of mocks) {
Mock.mock(
new RegExp(i.url),
i.type || "get",
XHR2ExpressReqWrap(i.response)
);
}
}
module.exports = {
mocks,
mockXHR,
};
2、在api中進(jìn)行調(diào)用：如圖
然后就可以成功請(qǐng)求數(shù)據(jù)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Ant Design moment對(duì)象和字符串之間的相互轉(zhuǎn)化教程
這篇文章主要介紹了Ant Design moment對(duì)象和字符串之間的相互轉(zhuǎn)化教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了Vue中如何把hash模式改為history模式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue移動(dòng)端使用canvas簽名的實(shí)現(xiàn)
這篇文章主要介紹了vue移動(dòng)端使用canvas簽名的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式
這篇文章主要介紹了Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue引入Excel表格插件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
vue3中實(shí)現(xiàn)使用element-plus調(diào)用message
這篇文章主要介紹了vue3中實(shí)現(xiàn)使用element-plus調(diào)用message，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue中正確使用Element-UI組件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue中正確使用Element-UI組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue 級(jí)聯(lián)下拉框的設(shè)計(jì)與實(shí)現(xiàn)
在前端開(kāi)發(fā)中，級(jí)聯(lián)選擇框是經(jīng)常用到的，這樣不僅可以增加用戶輸入的友好性，還能減少前后端交互的數(shù)據(jù)量。本文就介紹一下使用Vue實(shí)現(xiàn)級(jí)聯(lián)下拉框，感興趣的可以了解一下2021-07-07
一般在vue項(xiàng)目開(kāi)發(fā)中，事件的處理邏輯一般很復(fù)雜，我們可以將處理的邏輯變成函數(shù)，在vue開(kāi)發(fā)中，一般使用的是使用的是v-on指令進(jìn)行事件的監(jiān)聽(tīng)，事件監(jiān)聽(tīng)的過(guò)程中觸發(fā)相應(yīng)的JavaScript代碼2022-08-08
解決vue項(xiàng)目運(yùn)行npm run serve報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行npm run serve報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10