详解vue2.0+axios+mock+axios-mock+adapter实现登陆

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

// import { LoginUsers } from './data/user'
import {users} from './data/user'

export default {
init() {
let mock = new MockAdapter(axios);

// mock success request 模拟成功请求
mock.onGet('/success').reply(200, {
msg: 'success'
});
// mock error request 模拟失败请求
mock.onGet('/error').reply(500, {
msg: 'failure'
})

// login 模拟登录接口
mock.onPost('/user/login').reply(config => {
// 解析axios传过来的数据
let { username, password } = JSON.parse(config.data);
return new Promise((resolve, reject) => {
// 先创建一个用户为空对象
let user = null;
setTimeout(() => {
// 判断模拟的假数据中是否有和传过来的数据匹配的
let hasUser = users.some(person => {
// 如果存在这样的数据
if (person.username === username && person.password === password) {
user = JSON.parse(JSON.stringify(person));
user.password = undefined;
return true;
}else {
// 如果没有这个person
return false
}
});
// 如果有那么一个人
if (hasUser) {
resolve([ 200, {code: 200, msg: '登录成功',user} ]);
} else { // 如果没有这么一个人
resolve([ 200, {code: 500, msg: '账号错误' }])
}
}, 500);
})
});
// 模拟注册接口
}
}

接着在mock下建立data文件夹，；里面新建user.js用来存放用户信息

/*
* 用来存放一些模拟用户的数据
* */
// import Mock from 'mockjs'
const users = [
 {
  id: 1,
  username: 'admin',
  password: '123456',
  email: '123456@qq.com',
  name: '搬砖者'
 },
 {
  id: 2,
  username: 'lytton',
  password: '123456',
  email: 'yyyyy@163.com',
  name: '混子'
 }
]
export { users }

为login.vue文件增加登录方法

<script>
 import {requseLogin} from "../axios/api";
 export default {
  name: "login",
  data () {
   return {
    account: {
     username: '',
     password: ''
    },
    loginRules: {
     username: [{required: true, message: '请输入账号', trigger: 'blur'}],
     password: [{required: true,message: '请输入密码', trigger: 'blur'}],
    },
    checked: true,
    logining: false
   };
  },
  methods: {
   handleLogin() {
    this.$refs.AccountForm.validate((valid) => {
     if (valid) {
      this.logining = true;
      let loginParams = {
       username: this.account.username,								 
 3/5   首页 上一页 1 2 3 4 5 下一页 尾页