使用mockjs模拟数据

1.安装

          npm i mockjs     

2.在mock文件夹创建xxx.json，将模拟的json数据放进去

（如果有图片资源把图片放置到public文件夹中的images中，public文件夹在打包的时候会把相应的资源原封不动的打包到dist文件夹中）

3.在mock文件夹中创建mockserve.js

4.开始使用：

        引入mockjs

        import Mock from 'mockjs'

        引入json文件

        import banner from './banner.json'

// mock数据
Mock.mock('/mock/banner',{code:200,data:banner})//模拟轮播图的数据

在main.js中先引入，让其执行一遍

// 引入mockserver.js
import  '@/mock/mockServer'

复制一遍二次封装的axios，将基础路径改为/mock，这样在发请求时遇到mock开头的路径就会被拦截不向服务器发请求

const requests=axios.create({
    // 基础路径，发送请求的时候，路径当中会出现/api
    baseURL: '/mock',
    // 代表请求超时的时间
    timeout:5000,
    
})

在api--> index.js中发请求时：

// 引入mockrequest
import mockRequests from './mockaxios'

// 对外暴露,获取banner(home首页轮播的接口)
 export const reqGetBannerList=()=>mockRequests.get('/banner')

vuex中

   // 获取首页轮播数据
  async  getBannerList({commit}){
    let result= await reqGetBannerList()
    // console.log(result)
    if(result.code==200){
      commit("GETBANNERLIST",result.data)
    }
    },

接下来就是vuex的任务了，发请求拿数据存数据渲染页面...