詳解vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸

更新時(shí)間：2018年07月19日 09:40:45 作者：Nanana

這篇文章主要介紹了詳解vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

做項(xiàng)目過(guò)程中，需要用到后臺(tái)模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了mock，在學(xué)習(xí)使用的過(guò)程中又偶遇了axios-mock-adapter?，F(xiàn)在將實(shí)例展示如下：

1、準(zhǔn)備

實(shí)例是建立在vue-cli的基礎(chǔ)上實(shí)現(xiàn)

需要提前安裝的插件有：

axios：npm install axio --save

mockjs：npm install mockjd --save-dev

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

引入

第一種引入方式：按照es6的語(yǔ)法，以import的方式引入

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

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

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

代碼實(shí)例

整個(gè)項(xiàng)目的代碼結(jié)構(gòu)如下：

首先新建一個(gè)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="賬號(hào)">
   </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: '請(qǐng)輸入賬號(hào)', trigger: 'blur'}],
     password: [{required: true,message: '請(qǐng)輸入密碼', 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>

由于路由的默認(rèn)指向是HelloWorld，所以修改router文件夾下的index.js

import Vue from 'vue'
import Router from 'vue-router'
 
// 懶加載方式，當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件
const Login = resolve => require(['@/components/Login'], resolve)
 
Vue.use(Router)
 
export default new Router({
  routes: [{
    path: '/',
    name: 'login',
    component: Login
  }]

此時(shí)登錄界面樣式基本寫好，接下來(lái)修改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引入，只能每個(gè)需要發(fā)送請(qǐng)求的組件中即時(shí)引入，兩種引入方式
// 第一種引入方式：引入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/>'
})

刷新頁(yè)面

接下來(lái)就是對(duì)login.vue頁(yè)面進(jìn)行改造：增加登錄點(diǎn)擊事件和重置事件

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

此時(shí)的點(diǎn)擊事件沒有交互功能，使用axios和mock.js實(shí)現(xiàn)交互，并且使用axios-mock-adapter進(jìn)行axios數(shù)據(jù)調(diào)試

在src下新建一個(gè)axios文件夾，并建一個(gè)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);
}

再新建一個(gè)index.js

import * as api from './api'

export default api

這是像后臺(tái)發(fā)起post請(qǐng)求，地址是‘user/login'

此處的后臺(tái)數(shù)據(jù)我們使用mockjs進(jìn)行攔截，然后模擬后臺(tái)服務(wù)返回的數(shù)據(jù)

創(chuàng)建mock后臺(tái)模擬數(shù)據(jù)

在src目錄下創(chuàng)建mock文件夾，并且新建一個(gè)index.js，index.js內(nèi)容如下：、

// 通過(guò)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 模擬成功請(qǐng)求
  mock.onGet('/success').reply(200, {
   msg: 'success'
  });
  // mock error request 模擬失敗請(qǐng)求
  mock.onGet('/error').reply(500, {
   msg: 'failure'
  })

  // login 模擬登錄接口
  mock.onPost('/user/login').reply(config => {
   // 解析axios傳過(guò)來(lái)的數(shù)據(jù)
   let { username, password } = JSON.parse(config.data);
   return new Promise((resolve, reject) => {
    // 先創(chuàng)建一個(gè)用戶為空對(duì)象
    let user = null;
    setTimeout(() => {
     // 判斷模擬的假數(shù)據(jù)中是否有和傳過(guò)來(lái)的數(shù)據(jù)匹配的
     let hasUser = users.some(person => {
      // 如果存在這樣的數(shù)據(jù)
      if (person.username === username && person.password === password) {
       user = JSON.parse(JSON.stringify(person));
       user.password = undefined;
       return true;
      }else {
       // 如果沒有這個(gè)person
       return false
      }
     });
     // 如果有那么一個(gè)人
     if (hasUser) {
      resolve([ 200, {code: 200, msg: '登錄成功',user} ]);
     } else { // 如果沒有這么一個(gè)人
      resolve([ 200, {code: 500, msg: '賬號(hào)錯(cuò)誤' }])
     }
    }, 500);
   })
  });
 // 模擬注冊(cè)接口
 }
}

接著在mock下建立data文件夾，；里面新建user.js用來(lái)存放用戶信息

/*
* 用來(lái)存放一些模擬用戶的數(shù)據(jù)
* */

// 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: '請(qǐng)輸入賬號(hào)', trigger: 'blur'}],
     password: [{required: true,message: '請(qǐng)輸入密碼', 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
      }
      // 調(diào)用axios登錄接口
      requseLogin(loginParams).then(res => {
       // debugger;
       this.logining = false;
       // 根據(jù)返回的code判斷是否成功
       let { code, msg, user } = res.data;
       if (code === 200) {
        // elementui中提示組件
        this.$message({
         type: 'success',
         message: msg
        });
        // 登陸成功，用戶信息就保存在sessionStorage中
        sessionStorage.setItem('user', JSON.stringify(user));
        // 跳轉(zhuǎn)到后臺(tái)主頁(yè)面
        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>

當(dāng)點(diǎn)擊登錄按鈕后，跳轉(zhuǎn)到‘/home'頁(yè)面，在components文件夾下面新增home.vue文件

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

接下了修改router中的index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Home from '../components/home';

// 懶加載方式，當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件
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
  }
 ]
})

// 訪問(wèn)之前，檢查是否登陸了
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';

// 懶加載方式，當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件
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
  }
 ]
})

// 訪問(wèn)之前，檢查是否登陸了
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

至此，運(yùn)行npm run dev即可

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: