Vue mock

npm install mockjs --save -dev开发时使用

1 src下创建文件夹mock
文件夹mock下创建banner.json 和 mockServe.js

[
  {
    "id": "1",
    "imgUrl": "/images/banner1.jpg"
  },
  {
    "id": "2",
    "imgUrl": "/images/banner2.jpg"
  },
  {
    "id": "3",
    "imgUrl": "/images/banner3.jpg"
  },
  {
    "id": "4",
    "imgUrl": "/images/banner4.jpg"
  }
]
 mockServe.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});

2 main.js 引入MockServer.js
import "./src/mock/mockServe";

3 将images文件夹放在public下

4 封装ajax
API文件夹中创建mockRequest【axios实例:baseURL:'/mock'】
API文件夹下index.js export const reqGetBanner = () => mockrequests.get('/banner');

上一篇:自动化测试(四)031-js测试框架Jest——Mock与Spy之Mock函数提供三种特性-捕获函数调用情况、设置函数返回值、改变函数的内部实现


下一篇:JS 中 参数的传递