利用mockjs模拟后台数据

在Vue项目中，有些数据不是后台服务器返回的，所以我们需要在本地建立一个假服务器来存储一些数据

　　安装mockjs

　　　　终端输入： npm i mockjs

　　准备本地数据

　　　　在src目录下创建一个mock文件夹,文件夹下准备各种json文件，里面存储数据格式
　　　　注意：json文件格式不能有空格，需要格式化。json文件不需要对外暴露

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

　　　　因为我们是模拟的后台数据，但是真正的数据还是在要本地，public/images 里面放置真正的图片

 　　　编写服务器

　　　　　在src\mock/index.js下编写服务代码

// 引入mock
import Mock from 'mockjs'
// 引入json数据
import name from './name.json'
// mock方法两个参数，第一个：请求地址，第二个：请求的数据
Mock.mock('/mock/name',
    { code:200,
      data:name 

})

　　　　编写发送请求的接口

　　　　　src\api\mockRequest.js下

// 这个配置的是mock内部的请求
import axios from "axios";
const requests = axios.create({
  // 所有利用这个配置发请求的都会在前面加上'/mock'
  baseURL:'/mock',
  timeout:5000
});
requests.interceptors.request.use((config)=>{
    return config
})
requests.interceptors.response.use(
    (res)=>{
        return res.data
    },
    (err)=>{
      return err
    })
export default  requests

　　　src\api\index.js下

import mockRequests  from "./mockRequest.js";
// 写各种接口请求，分别暴露                                            
export const  reqGetName = () =>mockRequests.get('/name')

　　发送请求　　

async  GetTNData({commit}){
      let res = await reqGetName();
      if(res.code == 200){
        data = res.data
      }
    },