vue?中簡(jiǎn)單使用mock的示例代碼詳解

更新時(shí)間：2022年02月21日 14:50:37 作者：逆風(fēng)優(yōu)雅

這篇文章主要介紹了vue?中簡(jiǎn)單使用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 中簡(jiǎn)單使用mock的文章就介紹到這了,更多相關(guān)vue 使用mock內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue
mock

相關(guān)文章

Vue.js 中取得后臺(tái)原生HTML字符串原樣顯示問題的解決方法
這篇文章主要介紹了VUE.js 中取得后臺(tái)原生HTML字符串原樣顯示問題 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
Vue項(xiàng)目?jī)?yōu)化的一些實(shí)戰(zhàn)策略
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊，像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方，這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目?jī)?yōu)化的一些實(shí)戰(zhàn)策略，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
vue實(shí)現(xiàn)分頁的三種效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
elementUI el-input 只能輸入正整數(shù)驗(yàn)證的操作方法
這篇文章主要介紹了elementUI el-input 只能輸入正整數(shù)驗(yàn)證,本文給大家詳細(xì)講解對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
vue3界面使用router及使用watch監(jiān)聽router的改變
vue2中使用router非常簡(jiǎn)單，但是vue3中略微有些改變，通過本文講解下他的改變，對(duì)vue3?watch監(jiān)聽router相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-11-11
vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式
這篇文章主要介紹了vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式,樣式使用的是vux的cell組件，需要的朋友可以參考下
2017-07-07
vue通過element樹形控件實(shí)現(xiàn)樹形表格
這篇文章主要為大家介紹了vue?element樹形控件實(shí)現(xiàn)樹形表格，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue數(shù)據(jù)監(jiān)聽方法watch的使用
這篇文章主要介紹了Vue數(shù)據(jù)監(jiān)聽方法watch的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03