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