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

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

var axios = require('axios');var MockAdapter = require('axios-mock-adapter');

<template> <el-form   class="login-container"   ref="AccountForm"   :model="account"   :rules="loginRules"   label-position="left">  <h3>Login</h3>  <el-form-item prop="username">   <el-input      v-model="account.username"      type="text"      placeholder="账号">   </el-input>  </el-form-item>  <el-form-item prop="password">   <el-input v-model="account.password" type="password" placeholder="密码"></el-input>  </el-form-item>  <el-checkbox v-model="checked" checked>记住密码</el-checkbox>  <el-form-item>   <el-button type="primary">login</el-button>   <el-button type="primary">reset</el-button>  </el-form-item> </el-form></template><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: {}</script><style scoped> body{  background: #DFE9FB; }.login-container { width:350px; margin-left:35%; border: 1px solid #d3d3d3; box-sizing: border-box; padding: 10px 30px; border-radius: 5px;} .el-button {  width:100%;  box-sizing: border-box;  margin: 10px 0; }</style>

import Vue from 'vue'import Router from 'vue-router' // 懒加载方式，当路由被访问的时候才加载对应组件const Login = resolve => require(['@/components/Login'], resolve) Vue.use(Router) export default new Router({  routes: [{    path: '/',    name: 'login',    component: Login  }]

import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import axios from 'axios'Vue.prototype.$ajax = axios// axios不能直接使用use引入，只能每个需要发送请求的组件中即时引入，两种引入方式// 第一种引入方式：引入axios后，修改原型链// import axios from 'axios'// Vue.prototype.$axios = axiosVue.config.productionTip = false;Vue.use(ElementUI);/* eslint-disable no-new */new Vue({ el: '#app', router, store, // 使用store components: { App }, template: '<App/>'})

 <el-form-item>   <el-button @click.native.prevent="handleLogin" :loading="logining" type="primary">login</el-button>   <el-button    type="primary"    class="resetBtn"    @click.native.prevent="reset">    reset   </el-button>  </el-form-item>

import axios from 'axios'axios.defaults.baseURL = 'http://127.0.0.1:80';export const requseLogin = params => { return axios.post('/user/login', params);}

import * as api from './api'export default api

// 通过axios-mock-adapter生成代理api地址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);   })  }); // 模拟注册接口 }}

/** 用来存放一些模拟用户的数据* */// 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 }

<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,       password: this.account.password      }      // 调用axios登录接口      requseLogin(loginParams).then(res => {       // debugger;       this.logining = false;       // 根据返回的code判断是否成功       let { code, msg, user } = res.data;       if (code === 200) {        // elementui中提示组件        this.$message({         type: 'success',         message: msg        });        // 登陆成功，用户信息就保存在sessionStorage中        sessionStorage.setItem('user', JSON.stringify(user));        // 跳转到后台主页面        console.log('this',this)        this.$router.push({ path: '/home' })       }else {        this.$message({         type: 'error',         message: msg,        });       }      }).catch(err =>{       console.log(err);      });     }else {      console.log('error submit!');      return false;     }    })   },   reset () {    this.$refs.AccountForm.resetFields()   },  }  }</script>

<template> <div >  <h1>{{ msg }}</h1>   </div></template><script>export default { name: '后台主界面', data () {  return {   msg: '后台主界面'  } }}</script>

import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'// import Home from '../components/home';// 懒加载方式，当路由被访问的时候才加载对应组件const Login = resolve => require(['@/components/Login'], resolve)const Home = resolve => require(['@/components/home'], resolve)Vue.use(Router)const router = new Router({ routes: [  {   path: '/',   name: 'login',   component: Login  },  {   path: '/login',   name: 'login',   component: Login  },  {   path: '/home',   name: 'home',   component: Home  } ]})// 访问之前，检查是否登陆了router.beforeEach((to, from, next) => { if(to.path.startsWith('/login')) {  window.sessionStorage.removeItem('user');  next() }else {  let token = window.sessionStorage.getItem('user');  if (!token) {   next({path: '/login'})  }else {   next()  } }});export default router

import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'// import Home from '../components/home';// 懒加载方式，当路由被访问的时候才加载对应组件const Login = resolve => require(['@/components/Login'], resolve)const Home = resolve => require(['@/components/home'], resolve)Vue.use(Router)const router = new Router({ routes: [  {   path: '/',   name: 'login',   component: Login  },  {   path: '/login',   name: 'login',   component: Login  },  {   path: '/home',   name: 'home',   component: Home  } ]})// 访问之前，检查是否登陆了router.beforeEach((to, from, next) => { if(to.path.startsWith('/login')) {  window.sessionStorage.removeItem('user');  next() }else {  let token = window.sessionStorage.getItem('user');  if (!token) {   next({path: '/login'})  }else {   next()  } }});export default router