Vue 前端模拟数据插件mockjs 使用

在前后端分离开发过程中，后端先给出API接口文档，由于前后端开发进度的问题，后台可能不能及时作出接口，那么就需要我们前端自己模拟数据，使用mockjs可以进行模拟数据。

1.安装

 npm install mockjs

使用步骤如下：

1.在src文件夹下创建 mock文件夹

2.准备json数据(mock文件夹中创建相应的JSON文件)–格式化一下，别留有空格

3.开始mock（虚拟的数据) ，通过mockjs 模块实现，

2.准备mock 数据及接口

我们以登录为例，返回token
src/mock/mockServer.js

//通过mockjs模块实现模拟数据
//对外暴露的是一个对象
import Mock from 'mockjs';
//模拟的数据需要引入进来
//对于一些模块：图片、json文件默认对外暴露【虽然你没有书写但是它已经暴露了】
import loginData from './login.json';

//通过Mock对象模拟出虚拟数据
//Mock依赖包对外暴露的是一个Mock对象，这个对象提供的一个mock方法可以模拟数据
//参数:第一个参数  模块数据将来axios请求的地址   第二个参数:获取到的数据
//注意:项目当中发请求的接口
//第一种:真实服务器接口 http://39.98.123.211/api/list/xx
//第二种:mock出来数据接口 xxx/mock/banner
//路径当中出现/api 真实接口    /mock 模拟数据
Mock.mock("/mock/login",{code:200,data:loginData});

login.json

{
    "token": "12333"
}

3.创建API接口统一调度

在src/api/mockRequest.js 文件

//axios进行二次封装
import axios from 'axios';

//创建axios实例[创建出来的实例即为axios，只不过可以配置一些东西]
let instance = axios.create({
    //可以给请求路径中添加一些参数
    baseURL: "/mock",
    //设置请求时间（5S）
    timeout: 5000
});

//请求拦截器:在发请求之前可以检测到，可以干一些事情
instance.interceptors.request.use((config) => {
    //config配置对象，这里面有请求头
    //config，请求拦截器的一个配置对象
    return config;
});

//响应拦截器：服务器的数据已经返回了，可以干一些事情
instance.interceptors.response.use((res) => {
    //简化服务器返回的数据格式
    //服务器数据返回进度条结束
    return res.data;
}, (error) => {
    //终止promise链
    return Promise.reject(error);
});


//对外暴露二次封装的axios
export default instance;

src/api/index.js

//统一管理项目全部接口的文件
//如果获取mock接口的数据，利用底下axios
import mockRequest from './mockRequest';

//登录
//api/user/passport/register  post  phone code password
export const reqLogin = (username,password)=> mockRequest({url:`/login`,method:'post',data:{username,password}});

4.使用

import { reqLogin} from "@/api";
        //当前的这个action，向服务器发起登录请求
        let result = await reqLogin(username, password);
        //切记:当用户登录成功以后，服务器会返回相应数据信息，数据信息当中包含token
        //登录成功一定是有token，登录没有成功【没有token】
        //用户登录成功，一般只是返回token，很少返回用户名
        //将来需要在发请求（获取用户名字的）携带token给服务器【用户信息】
        if (result.code == 200) {
            //如果仓库,已经存储token,用户一定是登陆了
            commit("SETTOKEN", result.data.token);
            //持久化存储token
            setToken(result.data.token);
            return 'ok';
        } else {
            //登录失败
            return Promise.reject(result.message);
        }