利用mockjs模拟后台数据

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

　　安装mockjs

　　　　终端输入： npm i mockjs

　　准备本地数据

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

?

1 2 3 4 5 6 7 8 9 10

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

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

 　　　编写服务器

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

?

1 2 3 4 5 6 7 8

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

　　　　编写发送请求的接口

　　　　　src\api\mockRequest.js下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 这个配置的是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下

?

1 2 3

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

　　发送请求　　

?

1 2 3 4 5 6

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