mockjs

npm install mockjs

 

使用步骤：

1.src文件夹中新建mock文件夹

2.准备json数据

banner.json

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

 

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

4.创建mockServe.js，通过mockjs插件实现模拟数据

//引入mockjs模块
import Mock from 'mockjs'
//引入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});

5.引入mockServe.js

在main.js中引入

import '@/mock/mockServe'

6.重新封装一个mock的axios请求，mockRequest.js

//对于axios进行二次封测
import axios from 'axios';
import nProgress from 'nprogress';
//引入进度条样式
import 'nProgress/nprogress.css';
//start()代表进度条开始 done()代表进度条结束

//1.利用axios读写的方法create，创建一个axios实例
const request = axios.create({
    //设置基础路径，发送请求时路径自动拼接上api,如http://xxx:8080/api/xxx
    baseURL: "/mock",
    timeout: '5000'
});
//请求拦截器:在发请求前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
request.interceptors.request.use((config)=>{
    //config：配置对象，对象里面有个属性，header请求头
    //进度条开始
    nProgress.start()
    return config;
});
//响应拦截器
request.interceptors.response.use((res)=>{
    //服务器成功的回调函数，服务器响应数据回来以后，响应拦截器可以检测到
     //进度条结束
    nProgress.done()
    return res.data
},(error)=>{
    //服务器响应失败的回调函数
    return Promise.reject(new Error('fail'));//终止promise链
})

//对外暴露
export default request;

 

获取请求示例

1.统一管理请求地址js中

api.js

import request from "./request";//真实请求
import mockRequest from './mockRequest';//mock请求

export const reqCategoryList = ()=>{
    //发请求:axios发请求返回结果是Promise对象
    return request({
        url: '/product/getBaseCategoryList',
        method: 'GET'
    })
}
//获取banner
export const reqBannerList = ()=> mockRequest.get("/banner")

2.组件中获取数据

<script>
export default {
    name: '',
    mounted(){
      this.$store.dispatch('getBannerList')
    }
};
</script>

3.store仓库

import { reqBannerList } from '@/api';

const actions = {

    async getBannerList({commit}){
      let res = await reqBannerList();
      console.log(res);
    }
};