mockjs

npm install mockjs

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

//引入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});

import '@/mock/mockServe'

//对于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;

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")

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

import { reqBannerList } from '@/api';

const actions = {

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