Mockjs模拟登录接口数据

一丶安装mockjs

cnpm install mockjs --save-dev

二丶创建Mock文件

Mock文件下包含index.js(mock服务)和user.js(mock数据)

index.js:

// 首先引入Mock
const Mock = require('mockjs');
 
// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});
 
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);
    }
})

user.js:

import Mock from 'mockjs' //导入mockjs
 
const userList = {  //定义用户数据
    data: {
        total: 6,
        //前两个用户数据分别固定设为管理员和普通用户，为后续权限设置做准备，其他用户随机生成
        userinfo: [{  
            username: 'admin',
            password: '123456',
            roles: 'admin',
            name: '张三',
            age: 23,
            job: '前端工程师',
            token: '000111222333444555666',
            id: '100',
        }, {
            username: 'editor',
            password: '123456',
            roles: 'editor',
            name: '测试1',
            'age|20-30': 23,
            job: '前端工程师',
            token: '145145145123123123111',
            id: '101',
        }, {
            username: '@word(3, 5)',
            password: '123456',
            roles: 'editor',
            name: '@cname',
            'age|20-30': 23,
            'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
            token: '@guid()',
            id: '102',
        }, ],
        meta: {
            status: 200,
            message: 'success',
        }
    },
};

Mock.mock('/user', 'post', req => { //路径与请求方式
  const { username, password } = JSON.parse(req.body); //将传递进来的数据保存
  for (let i = 0; i < userList.data.userinfo.length; i++) { 
      //判断userList中是否存在该用户并且用户密码是否正确
      if (username === userList.data.userinfo[i].username && password === userList.data.userinfo[i].password) {
          return {
              meta: {
                  msg: 'success',
                  status: 200
              },
              user: {
                  username: userList.data.userinfo[i].username,
                  roles: userList.data.userinfo[i].roles
              }
          }
      }
  }
  return {
      meta: {
          msg: 'error',
          status: 201
      }
  }
})

//定义请求方法与路径
export default {
    'get|/user': userList,
}

三丶在main.js引入Mock文件
通过
方法一：require(’…/mock’)
方法二：import ‘…/mock’

四丶axios请求数据

login(){
        let {name,password} = this.ruleForm
        this.$http({
          method:'post',
          url:'/user',
          data:{
            username:name,
            password:password
          }
        }).then(res=>{
          console.log(res)
          let code = res.data.meta.status
          if(code == '200'){
            this.$router.push('/home')
          }
        })
      }

以上就是Mock登录接口的全部步骤啦~