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


            做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了mock，在学习使用的过程中又偶遇了axios-mock-adapter。现在将实例展示如下：

1、准备

实例是建立在vue-cli的基础上实现



需要提前安装的插件有：



axios：npm install axio --save



mockjs：npm install mockjd --save-dev

axios-mock-adapter：npm install axios-mock-adapter --save-dev

引入

第一种引入方式：按照es6的语法，以import的方式引入







import axios from 'axios';

import MockAdapter from 'axios-mock-adapter';



第二种引入方式：以require方式引入







var axios = require('axios');

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



代码实例

整个项目的代码结构如下：



首先新建一个login.vue文件，代码如下





<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>



由于路由的默认指向是HelloWorld，所以修改router文件夹下的index.js





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

  }]



此时登录界面样式基本写好，接下来修改main.js，将需要引入的文件引入



如下：





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 = axios



Vue.config.productionTip = false;

Vue.use(ElementUI);





/* eslint-disable no-new */

new Vue({

 el: '#app',

 router,

 store, // 使用store

 components: { App },

 template: '<App/>'

})



刷新页面



接下来就是对login.vue页面进行改造：增加登录点击事件和重置事件





 <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>



此时的点击事件没有交互功能，使用axios和mock.js实现交互，并且使用axios-mock-adapter进行axios数据调试



在src下新建一个axios文件夹，并建一个api.js





import axios from 'axios'



axios.defaults.baseURL = 'http://127.0.0.1:80';



export const requseLogin = params => {

 return axios.post('/user/login', params);

}



再新建一个index.js





import * as api from './api'



export default api



这是像后台发起post请求，地址是‘user/login'



此处的后台数据我们使用mockjs进行拦截，然后模拟后台服务返回的数据

创建mock后台模拟数据



在src目录下创建mock文件夹，并且新建一个index.js，index.js内容如下：、





// 通过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);

   })

  });

 // 模拟注册接口

 }

}



接着在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,

       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>



当点击登录按钮后，跳转到‘/home'页面，在components文件夹下面新增home.vue文件





<template>

 <div >

  <h1>{{ msg }}</h1>

  

 </div>

</template>

<script>

export default {

 name: '后台主界面',

 data () {

  return {

   msg: '后台主界面'

  }

 }

}

</script>



接下了修改router中的index.js





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



在main.js中引入mock





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



至此，运行npm run dev即可

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。