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相關的模擬數(shù)據(jù)和代碼實現(xiàn)。

我們將數(shù)據(jù)全部放在xxx.json文件夾下，里面配置我們需要的JSON格式的數(shù)據(jù)。

注意：json文件中不要留有空格，否則會獲取數(shù)據(jù)失??！

如果json數(shù)據(jù)中有用到圖片，記得配置圖片的路徑。

三、模擬mock接口

我們在mock文件夾下創(chuàng)建一個mockServe.js 文件，用于編寫mock模擬數(shù)據(jù)的相關代碼。

Mock.mock("請求地址", {code:xxx, data:xxx})

// 引入mock模塊
import Mock from "mockjs";

// 引入json文件
// 因為Webpack中，圖片和json文件是默認暴露的，所以我們可以直接使用
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 });