关于Mock数据

注意：mock（模拟数据）数据需要使用到mockjs模块，可以帮助我们模拟数据。

注意：mockjs【并非mock.js mock-js】

http://mockjs.com/  官方地址

mock官网一句话：晚上练习的时候，如果网速可以，看看mock的官网，看看语法规则；

生成随机数据，拦截 Ajax 请求

mock官网当中这句话的理解：

模拟的数据一般：对象、数组

[
  {
    "id": "1",
    "imgUrl": "/images/1.jpg"
  },
  {
    "id": "2",
    "imgUrl": "/images/2.jpg"
  },
  {
    "id": "3",
    "imgUrl": "/images/3.jpg"
  },
  {
    "id": "4",
    "imgUrl": "/images/4.jpg"
  }
]

拦截ajax请求：请求发布出去【浏览器会进行拦截：因为服务器】，只是项目当中本地自己玩耍数据。

 

第一步:安装依赖包mockjs

第二步：在src文件夹下创建一个文件夹，文件夹mock文件夹。

第三步:准备模拟的数据

把mock数据需要的图片放置于public文件夹中！

 

第四步：在mock文件夹中创建一个server.js文件

//先引入mockjs模块
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});

注意：

在server.js文件当中对于banner.json || floor.json的数据没有暴露，但是可以在server模块中使用。

对于webpack当中一些模块：图片、json，不需要对外暴露，因为默认就是对外暴露。
 

第五步:通过mock模块模拟出数据
 

比如:listContainer中的轮播图的数据

[

   {id:1,imgUrl:'xxxxxxxxx'},

   {id:2,imgUrl:'xxxxxxxxx'},

   {id:3,imgUrl:'xxxxxxxxx'},

]

第六步:回到入口文件，引入serve.js

//引入MockServer.js----mock数据
import "@/mock/mockServe";

mock需要的数据|相关mock代码页书写完毕，关于mock当中serve.js需要执行一次，

如果不执行，和你没有书写一样的。

第七步:在API文件夹中创建mockAjax.js,专门获取模拟数据用的axios实例。

//对于axios进行二次封装
import axios from "axios";
import nprogress from "nprogress";
//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";
//底下的代码也是创建axios实例
let requests = axios.create({
  //基础路径
  baseURL: "/mock",
  //请求不能超过5S
  timeout: 5000,
});

//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {
  //现在的问题是config是什么?配置对象
  //可以让进度条开始动
  nprogress.start();
  return config;
});

//响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use(
  (res) => {
    //进度条结束
    nprogress.done();
    //相应成功做的事情
    return res.data;
  },
  (err) => {
    alert("服务器响应数据失败");
  }
);
//最终需要对外暴露（不对外暴露外面模块没办法使用）
//这里的代码是暴露一个axios实例
export default requests;

在开发项目的时候：切记，单元测试，某一个功能完毕，一定要测试是否OK