Mock.js模拟登录

一、下载安装mock.js

npm install mockjs --save

二、使用mock

在根目录下面新建mock文件夹，index.js文件下面当前文件下所有的.js文件注册mock服务

// 引入mock模块
import Mock from 'mockjs'
//
let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);

files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});
// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

三、mock模拟登录接口

import Mock from 'mockjs'
const login = function (_req) {
  let body = JSON.parse(_req.body);
  if (body.username === 'admin' && body.password === '111111') {
    return Mock.mock({
      "code": 200,
      "data": "@guid()",//mock token
      "isOk": true,
      "msg": "登陆成功",
      "statusCode": "200"
    });
  } else if (body.username === 'admin' && body.password != '111111') {
    return Mock.mock({
      "code": 400,
      "data": null,
      "isOk": false,
      "msg": "密码错误",
      "statusCode": null
    });
  } else if (body.username != 'admin') {
    return Mock.mock({
      'code': 500,
      "data": null,
      "isOk": false,
      "msg": "账号不存在",
      "statusCode": null
    });
  }
}


//定义请求方法与路径
export default {
  'post|/authLgn': login
}

四、main.js引入mock

//mock
import '@/mock/index.js'

五、axios请求拦截

baseURL = ''//mock服务下baseURL设置为空
this.$http.post('authLgn',this.userInfo).then(res=>{})