用mock.js模拟发送数据

背景及作用

• 背景：有时前端自己造模拟数据进行测试
• 作用：发送随机数据，拦截ajax请求（即只作用在前端，不会实际发给后端请求，浏览器进行拦截）

操作步骤

1. 项目当中src文件夹中创建mock文件夹并安装mockjs包cnpm install mockjs
2. 准备JSON数据（mock文件夹中创建相应的JSON文件）--------此处需要格式化，不能留空格（否则无法跑起来）
3. 把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹】
4. 开始mock（虚拟的数据），mock文件夹下创建mockServe.js文件，（通过mockjs插件实现模拟数据）
5. mockServer.js文件在入口文件中引入（因为需要至少被执行一次，才能模拟数据）即在main.js中引入mockServer.js文件

//这是在main.js文件中
//引入MockServer.js-----mock数据
import '@/mock/mockServe';

//这是在src新建的mock文件夹下的mockServe.js文件中
//先引入mock.js模块
import Mock from 'mockjs';
//把JSON数据格式引入进来[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});