vue?中簡單使用mock的示例代碼詳解
更新時間：2022年02月21日 14:50:37 作者：逆風優(yōu)雅
這篇文章主要介紹了vue?中簡單使用mock的方法，本文通過圖文實例代碼相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、首先，在vue項目中，安裝依賴
# 使用axios發(fā)送ajax cnpm install axios --save # 使用mockjs產生隨機數(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 導入依賴模塊
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") {
//為了滿足當后臺有接口的時候，不是使用mock數(shù)據(jù)，在此處做一個判斷，可以在.env文件中對設置
//監(jiān)聽http請求
app.get("/user/userinfo", function (rep, res) {
//每次響應請求時讀取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
打印的結果是：
七、當項目中接口給到我么們時，我們移除mock的方法
在env文件中，進行配置。因為在mock.js文件中，我們已經設置了監(jiān)聽，并進行了判斷，所以此處MOCK如果為false,就不會執(zhí)行mock中的內容。
到此這篇關于vue 中簡單使用mock的文章就介紹到這了,更多相關vue 使用mock內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js 中取得后臺原生HTML字符串 原樣顯示問題的解決方法
這篇文章主要介紹了VUE.js 中取得后臺原生HTML字符串 原樣顯示問題 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
代碼優(yōu)化不僅僅局限在業(yè)務邏輯這塊，像是代碼復用、效率等等都是我們可以加以改進的地方，這篇文章主要給大家介紹了關于Vue項目優(yōu)化的一些實戰(zhàn)策略，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關于如何基于Vue3實現(xiàn)掃碼槍掃碼并生成二維碼的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
elementUI el-input 只能輸入正整數(shù)驗證的操作方法
這篇文章主要介紹了elementUI el-input 只能輸入正整數(shù)驗證,本文給大家詳細講解對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
vue3界面使用router及使用watch監(jiān)聽router的改變
vue2中使用router非常簡單，但是vue3中略微有些改變，通過本文講解下他的改變，對vue3?watch監(jiān)聽router相關知識感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了vue+vux實現(xiàn)移動端文件上傳樣式,樣式使用的是vux的cell組件，需要的朋友可以參考下2017-07-07
這篇文章主要為大家介紹了vue?element樹形控件實現(xiàn)樹形表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
解決vue+webpack項目接口跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue+webpack項目接口跨域出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue數(shù)據(jù)監(jiān)聽方法watch的使用
這篇文章主要介紹了Vue數(shù)據(jù)監(jiān)聽方法watch的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03