Mock数据

使用步骤：

1.在项目当中src文件夹中创建mock文件夹

2.第二步准备JSON数据（mock文件夹中创建相应的JSON文件） -------格式化一下，别留有空格（跑不起来）

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

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

5.mockServe.js文件在入口文件中引入（至少需要执行一次，才能模拟数据）

以轮播图为例：

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"
    }
]

 mockServe.js

// 先引入mockjs模块
import Mock  from "mockjs";
// 把JSON数据格式引入进来【JSON数据格式根本没有对外暴露，但是可以引入】
// webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json'

// mock数据：第一个参数请求地址，第二个参数：请求数据
 Mock.mock('./mock/banner',{code:200,data:banner}); //模拟首页的轮播图的数据 

在入口文件main.js中引入

// 引入MockServe.js-------mock数据
import '@/mock/mockServe'

接下来就需要向服务器发请求，获取到数据，存储于vuex中，展示数据，

mockAjax.js

//对于axios进行二次封装
import axios from 'axios'
// 引入进度条
import nprogress  from 'nprogress';
// 引入进度条样式
import "nprogress/nprogress.css"
// start：进度条开始  done:进度条结束

//   1.利用axios对象的方法create，去创建一个axios实例
// 2.request就是axios，只不过稍微配置了一下
const requests = axios.create({
    // 配置对象
    // 基础路径，发请求的时候，路径中会出现api
    baseURL: '/mock',
    // 代表请求超时的时间5s
    timeout: 5000,
});
// 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    // config :配置对象，对象里面有一个属性很重要，headers请求
    //  进度条开始
    nprogress.start();
    return config;
});
// 响应拦截器
requests.interceptors.response.use((res) => {
    // 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    //  进度条结束
    nprogress.done();
    return res.data;
}, (error) => {
    // 响应失败的回调函数
    return Promise.reject(new Error('faile'))
});
// 对外暴露
export default requests;

 index.js     

 import mockRequests from './mockAjax'
// 获取banner   mock数据  get请求   没有/mock  因为前边已经写过了 直接写banner
//  对象的写法
export const reqGetBannerList=()=>mockRequests.get('./banner');

在组件中挂载完毕之后发请求：

  mounted() {
    //   派发action，通过Vuex发起ajax请求，将数据存储在仓库中
    // mounted：组件挂载完毕，正常说组件结构（DOM）已经全有了
    this.$store.dispatch("getBannerList");   
  },

vuex三连环，获取轮播图数据，

import {  reqGetBannerList  } from '@/api'
// home模块的小仓库
const state = { 
    // 轮播图的数据
    bannerList: []
};
// mutations是唯一修改state的地方 ，在action中是不允许修改的  
const mutations = {
    GETBANNERLIST(state, bannerList) {
        state.bannerList = bannerList;
    },
};
const actions = {
    // 获取首页轮播图的数据   返回的是promise 等待响应的结果 因此写入async  await
    async getBannerList({ commit }) {
        let result = await reqGetBannerList();
        if (result.code == 200) {
            commit('GETBANNERLIST', result.data)
        }
    },
};
// 计算属性
const getters = {};
export default {
    state,
    mutations,
    actions,
    getters
}

在组件中，向vuex仓库要数据,

import { mapState } from "vuex";
computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },

现在组件中数据已经拿到了，剩下的活就是替换图片就完事了。