mock.js模擬數(shù)據(jù)的實現(xiàn)
更新時間：2023年11月28日 11:52:11 作者：永久旅途
在沒有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項目的時候可以使用mock.js來模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實現(xiàn),感興趣的可以了解一下
一、安裝mock.js
npm i mockjs
二、配置JSON文件
我們創(chuàng)建一個mock文件夾，用于存放mock相關(guān)的模擬數(shù)據(jù)和代碼實現(xiàn)。
我們將數(shù)據(jù)全部放在xxx.json文件夾下，里面配置我們需要的JSON格式的數(shù)據(jù)。
注意：json文件中不要留有空格，否則會獲取數(shù)據(jù)失?。?/strong>
如果json數(shù)據(jù)中有用到圖片，記得配置圖片的路徑。
三、模擬mock接口
我們在mock文件夾下創(chuàng)建一個mockServe.js 文件，用于編寫mock模擬數(shù)據(jù)的相關(guān)代碼。
Mock.mock("請求地址", {code:xxx, data:xxx})// 引入mock模塊
import Mock from "mockjs";
// 引入json文件
// 因為Webpack中，圖片和json文件是默認(rèn)暴露的，所以我們可以直接使用
import banner from "./banner.json";
import floor from "./floor.json";
// 配置mock數(shù)據(jù)
// 接收兩個參數(shù)：請求地址 和 請求數(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ā)送請求獲取到mock虛擬數(shù)據(jù)了。
到此這篇關(guān)于mock.js模擬數(shù)據(jù)的實現(xiàn)的文章就介紹到這了,更多相關(guān)mock.js模擬數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文給大家分享基于js和canves實現(xiàn)點擊按鈕水波紋效果，效果非常逼真，對此感興趣的朋友一起看看吧2016-09-09
js獲取控件位置(坐標(biāo)位置)在不同瀏覽器中的差別，在本文為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-08-08
promise結(jié)合requestAnimationFrame用法示例
這篇文章主要為大家介紹了promise結(jié)合requestAnimationFrame用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
JS實現(xiàn)遍歷不規(guī)則多維數(shù)組的方法
這篇文章主要介紹了JS實現(xiàn)遍歷不規(guī)則多維數(shù)組的方法,涉及javascript數(shù)組遞歸遍歷相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2018-03-03
這篇文章主要為大家介紹了Canvas實現(xiàn)打飛字游戲示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
在做微信小程序開發(fā)時,遇到一個問題,要如何實現(xiàn)返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡單實現(xiàn),文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
本節(jié)主要介紹了JS判斷變量是否為空是否null的方法,需要的朋友可以參考下2014-07-07
本文主要介紹了JavaScript中清空數(shù)組的三種方式。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
基于Web標(biāo)準(zhǔn)的UI組件 — 樹狀菜單(2)
基于Web標(biāo)準(zhǔn)的UI組件 — 樹狀菜單(2)...2006-09-09
javascript 控制彈出窗口...2007-04-04