vue?中簡單使用mock的示例代碼詳解
更新時(shí)間：2022年02月21日 14:50:37 作者：逆風(fēng)優(yōu)雅
這篇文章主要介紹了vue?中簡單使用mock的方法，本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
一、首先，在vue項(xiàng)目中，安裝依賴
# 使用axios發(fā)送ajax cnpm install axios --save # 使用mockjs產(chǎn)生隨機(jī)數(shù)據(jù) cnpm install mockjs --save-dev # 使用json5解決json文件,無法添加注釋問題 cnpm install json5 --save-dev
二、在根目錄下，新建一個(gè)mock文件
三、在vue.config.js文件中使用mock數(shù)據(jù)
四、配置mock中的index.js數(shù)據(jù)
const fs = require("fs");
const path = require("path");
const Mock = require("mockjs"); //mockjs 導(dǎo)入依賴模塊
const JSON5 = require("json5"); //json5的作用是可以解析json文件中的注釋
//讀取json文件
function getJsonFile(filePath) {
//讀取指定json文件
var json = fs.readFileSync(path.resolve(__dirname, filePath), "utf-8");
//解析并返回
return JSON5.parse(json);
}
//返回一個(gè)函數(shù)
module.exports = function (app) {
if (process.env.MOCK == "true") {
//為了滿足當(dāng)后臺(tái)有接口的時(shí)候，不是使用mock數(shù)據(jù)，在此處做一個(gè)判斷，可以在.env文件中對(duì)設(shè)置
//監(jiān)聽http請(qǐng)求
app.get("/user/userinfo", function (rep, res) {
//每次響應(yīng)請(qǐng)求時(shí)讀取mock data的json文件
//getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對(duì)象
var json = getJsonFile("./userInfo.json5");
//將json傳入 Mock.mock 方法中，生成的數(shù)據(jù)返回給瀏覽器
res.json(Mock.mock(json));
});
}
};五、定義mock的數(shù)據(jù)
六、在任意一個(gè)頁面檢查自己配置的mock
打印的結(jié)果是：
七、當(dāng)項(xiàng)目中接口給到我么們時(shí)，我們移除mock的方法
在env文件中，進(jìn)行配置。因?yàn)樵趍ock.js文件中，我們已經(jīng)設(shè)置了監(jiān)聽，并進(jìn)行了判斷，所以此處MOCK如果為false,就不會(huì)執(zhí)行mock中的內(nèi)容。
到此這篇關(guān)于vue 中簡單使用mock的文章就介紹到這了,更多相關(guān)vue 使用mock內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 表單之v-model綁定單選按鈕radio的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue+element實(shí)現(xiàn)輸入密碼鎖屏
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)輸入密碼鎖屏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue項(xiàng)目支付功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
這篇文章主要給大家介紹了關(guān)于Vue中@click事件的常見修飾符用法的相關(guān)資料,@click事件修飾符是在Vue組件中用來修改@click事件行為的特殊標(biāo)記,需要的朋友可以參考下2023-10-10
vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解
這篇文章主要為大家介紹了vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue?項(xiàng)目優(yōu)雅的對(duì)url參數(shù)加密詳解
這篇文章主要為大家介紹了vue?項(xiàng)目優(yōu)雅的對(duì)url參數(shù)加密詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
最近正在使用Pinia進(jìn)行狀態(tài)管理,我希望在重新刷新頁面時(shí)保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue對(duì)象的深度克隆方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+Element中table表格實(shí)現(xiàn)可編輯(select下拉框)
這篇文章主要介紹了vue+Element中table表格實(shí)現(xiàn)可編輯，實(shí)現(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了淺談Vue 數(shù)據(jù)響應(yīng)式原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05