使用mock.js模拟数据

一、安装mock.js

npm i mockjs

二、配置JSON文件

我们创建一个mock文件夹，用于存放mock相关的模拟数据和代码实现。

我们将数据全部放在xxx.json文件夹下，里面配置我们需要的JSON格式的数据。

注意：json文件中不要留有空格，否则会获取数据失败！

如果json数据中有用到图片，记得配置图片的路径。

三、模拟mock接口

我们在mock文件夹下创建一个mockServe.js 文件，用于编写mock模拟数据的相关代码。

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数据
// 接收两个参数：请求地址 和 请求数据
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";

然后就可以使用我们配置的虚拟接口去发送请求获取到mock虚拟数据了。