欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評論