mock.js模擬數(shù)據(jù)的實(shí)現(xiàn)
一、安裝mock.js
npm i mockjs
二、配置JSON文件
我們創(chuàng)建一個(gè)mock文件夾，用于存放mock相關(guān)的模擬數(shù)據(jù)和代碼實(shí)現(xiàn)。
我們將數(shù)據(jù)全部放在xxx.json文件夾下，里面配置我們需要的JSON格式的數(shù)據(jù)。
注意：json文件中不要留有空格，否則會(huì)獲取數(shù)據(jù)失敗！
如果json數(shù)據(jù)中有用到圖片，記得配置圖片的路徑。
三、模擬mock接口
我們?cè)趍ock文件夾下創(chuàng)建一個(gè)mockServe.js 文件，用于編寫mock模擬數(shù)據(jù)的相關(guān)代碼。
Mock.mock("請(qǐng)求地址", {code:xxx, data:xxx})// 引入mock模塊
import Mock from "mockjs";
// 引入json文件
// 因?yàn)閃ebpack中，圖片和json文件是默認(rèn)暴露的，所以我們可以直接使用
import banner from "./banner.json";
import floor from "./floor.json";
// 配置mock數(shù)據(jù)
// 接收兩個(gè)參數(shù)：請(qǐng)求地址 和 請(qǐng)求數(shù)據(jù)
Mock.mock("/mock/banner", { code: 200, data: banner });
Mock.mock("/mock/floor", { code: 200, data: floor });四、引入mock文件
我們編寫完如上代碼過后必須要引入，否則就沒有意義。
如果我們是在Vue中使用mock，那么直接在main.js文件中引入即可：
import "@/mock/mockServe.js";
然后就可以使用我們配置的虛擬接口去發(fā)送請(qǐng)求獲取到mock虛擬數(shù)據(jù)了。
到此這篇關(guān)于mock.js模擬數(shù)據(jù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)mock.js模擬數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript實(shí)現(xiàn)前端input密碼輸入強(qiáng)度驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)前端input密碼輸入強(qiáng)度驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
JS數(shù)組中常用方法技巧學(xué)會(huì)進(jìn)階成為大佬
這篇文章主要為大家介紹了JS數(shù)組中常用的方法技巧，學(xué)會(huì)了你就在進(jìn)階成為大佬的道路上又邁進(jìn)了一步，希望能夠有所幫助，祝大家多多進(jìn)步2021-10-10
js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
此功能用js實(shí)現(xiàn)，然后在fileupload控件的change事件中調(diào)用，這樣當(dāng)用fileupload選擇完圖片以后，圖片就會(huì)自動(dòng)顯示出來了，感興趣的各位可以參考下哈2013-03-03
JS針對(duì)瀏覽器窗口關(guān)閉事件的監(jiān)聽方法集錦
這篇文章主要介紹了JS針對(duì)瀏覽器窗口關(guān)閉事件的監(jiān)聽方法,總結(jié)整理了幾種常用的瀏覽器關(guān)閉事件監(jiān)聽方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-06-06
某些正則表達(dá)式模式可能容易受到回溯的影響,這可能會(huì)導(dǎo)致超線性運(yùn)行時(shí),并可能導(dǎo)致DoS攻擊,本文就來介紹一下如何防止JavaScript中的正則表達(dá)式回溯,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了JS重載實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript重載的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-12-12
JS事件循環(huán)機(jī)制event loop宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JS事件循環(huán)機(jī)制event loop宏任務(wù)微任務(wù)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
javascript 流暢動(dòng)畫實(shí)現(xiàn)原理
瀏覽器目前來說是沒有抗鋸齒效果的(將來不一定哦)，這樣dom元素外觀的改變就被限制在1個(gè)像素為最佳效果。2009-09-09
解析從小程序開發(fā)者工具源碼看原理實(shí)現(xiàn)
小程序的架構(gòu)設(shè)計(jì)與web技術(shù)還是有一定的差別，其吸取了web技術(shù)的一些優(yōu)勢(shì)，同時(shí)也摒棄web技術(shù)中體驗(yàn)等不好的地方。下面通過問題的形式來說說小程序架構(gòu)中的一些設(shè)計(jì)點(diǎn)2021-06-06
這篇文章主要為大家詳細(xì)介紹了關(guān)于Bootstrap導(dǎo)航條的使用和理解的學(xué)習(xí)記錄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12