一、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";