vue中mock数据的使用

mock，大概操作就是根据后端提供的接口文档（没提供的打死他），在前端代码写上约定的接口名、入参、出参，在mock中写入约定的假数据，模拟整个联调过程，如果在页面中正常显示，那么后期出什么问题都不是前端调用api所致；

接下来我们就来看vue中如何使用mock；

安装mock.js

在项目根目录cmd

输入命令   npm install mockjs --save-dev

文件配置

在文件夹src中，手动创建文件夹mock，在里面创建文件mock.js，写入内容：

// 引入mockjs

const Mock = require('mockjs');

接下来是假数据结构：

// 假数据：假设这个返出假数据名为“jiaDataList ”

const  jiaDataList  = function () {

    let list = [ // 模拟数据放这里 ]

    return lsit

}

然后是对应的接口（定义接口的url地址，请求方式，返回的数据）：

// Mock.mock( url, post/get , 返回的数据)；

Mock.mock('/jiaData/jiaLsit', 'GET', jiaDataList );

---

main.js

在已有的文件main.js里，一堆import下面，引入mock.js

    // 引入mockjs（根据自己的路径修改）

    require('./mock/mock.js')

axios拦截

在文件夹src里，手动创建文件夹http，里面手动创建文件api.js，写入内容：

// 创建http文件夹，在该文件夹下创建api.js用来对axios做了拦截设置处理。

import axios from 'axios'

axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'

// 请求拦截器

axios.interceptors.request.use(config => {

const token = localStorage.getItem('userToken');

if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token

config.headers.accessToken = token;

    }

return config;

},

error => {

return Promise.reject(error);

    })

// 响应拦截器

axios.interceptors.response.use(response => {

return response;

},

error => {

return Promise.reject(error);

    })

export default axios

---

搭建mock服务器

vue项目在cmd中“npm run dev”之后，在同一层同时（可能要以管理员身份）新开一个cmd

全局安装mock服务器：

npm i @shymean/mock-server -g

然后输入下面命令（路径可能要改动）启动mock服务器。

mock -p 9999 -f ./src/mock/mock.js

预览数据显示情况

vue项目npm run dev的时候 除了localhost：8080之外，还会给个预览地址比如：http://192.111.2.222。

咱们想要预览模拟假数据在浏览器中的预览地址则是把后面的端口“8080”改成“9999”，在最后斜杠后面加上接口名字，即可预览到有没有成功拼上mock.js中的假数据，比如

localhost:8080/jiaData/jiaList

或者

http://192.111.2.222/jiaData/jiaList