前端中Mock的使用方法

一、Mock的作用

官方解释：生成随机数据，拦截Ajax请求

二、Mock的使用场景

开发时，后端还没有完成数据输出，只好在前端模拟数据

三、使用Mock时要注意：前端mock的数据不会和服务器进行任何通信，不会涉及跨域问题

四、使用步骤

1.在项目文件夹的集成终端下载安装mock模块

# 安装
cnpm install --save mockjs

2.在项目中的src文件夹中创建mock文件夹

3.准备JSON数据(在mock文件夹中创建相应的JSON文件) ----代码要进行格式化，若留有空格，项目会跑不起来。如下准备banner.json和floor.json数据

 

4.把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动地打包 到dist文件夹中】

5.在mock文件夹下面，创建mockServe.js文件，通过mockjs插件实现模拟数据

//先引入mockjs模块
import Mock from "mockjs";
//引入JSON数据格式[JSON数据格式没有对外暴露，但是可以引入]
//webpack默认对外暴露的有：图片、JSON数据格式
import banner from "./banner.json";
import floor from "./floor.json";

//mock数据(Mock是一个对象，Mock身上有一个mock方法):第一个参数：请求的地址 第二个参数：请求数据
Mock.mock("/mock/banner", { code: 200, data: banner });//成功的话，状态码返回200
Mock.mock("/mock/floor", { code: 200, data: floor });

其中Mock是一个对象，它身上有一个mock方法

Mock.mock(请求的地址，请求地址下相应的参数)

6.mockServer.js文件在入口文件main.js中引入(至少需要执行一次，才能模拟数据)

//引入mockServer.js文件 ---mock数据
import "@/mock/mockServe";