简单六步，搞定Mock/模拟数据接口

1、下载依赖

npm install mockjs

2、设计JSON数据结构

理解JSON数据结构

• 结构: 名称, 数据类型 b. value c. value可以变, 但结构不能变

编写模拟JSON数据

• src/mock/baners.json

[
    {
        "id":"001",
        "imgUrl":"/images/banner1.jpg"
    },
    {
        "id":"002",
        "imgUrl":"/images/banner2.jpg"
    },
    {
        "id":"003",
        "imgUrl":"/images/banner3.jpg"
    },
    {
        "id":"004",
        "imgUrl":"/images/banner4.jpg"
    }
    
]

3、封装mockjs模拟服务器返回数据，并在main.js中引入关联

• mock/mockServer.js

/* 
利用mockjs来mock数据接口
*/
import Mock from 'mockjs'
import banners from './banners.json'

// 提供广告位轮播数据的接口
Mock.mock('/mock/banners',{
    code: 200,
    data: banners
})

import Vue from 'vue'
import App from '@/App'

// 在main.js中引入mockServer
import '@/mock/mockServer'

new Vue({
    el:'#app',
    render: h => h(App),
})

4、封装专门请求mock接口的axios

• api/ajaxMock.js

import axios from 'axios'

const mockAjax = axios.create({
  baseURL: "/mock", // 路径前缀
  timeout: 10000 // 请求超时时间
})

mockAjax.interceptors.request.use((config) => {
  return config
})

mockAjax.interceptors.response.use((response) => {
  return response.data
}, (error) => {
  return Promise.reject(error)
})

export default mockAjax

 5、在接口请求函数中，封装用于请求mock数据的请求函数

• api/index.js

import mockAjax from './mockAjax'

// 获取广告轮播列表
export const reqBanners = ()=> mockAjax.get('/banners')

6、在vuex中发送管理mock数据

• store/modules/home.js

import { reqBaseCategoryList } from '@/api'

const state = {
  banners: [], // 广告位轮播数据的数组
}

const mutations = {
  // 接收广告轮播列表
  RECEIVE_BANNERS(state, banners) {
    state.banners = banners
  },
}

const actions = {
  //异步获取广告位轮播数据
  async getBanners({ commit }) {
    const result = await reqBanners();
    if (result.code === 200) {
      commit('RECEIVE_BANNERS', result.data)
    }
  },
}

const getters = {

}

export default {
  state,
  actions,
  mutations,
  getters
}