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


Posted in Javascript onJuly 19, 2018

做项目过程中,需要用到后台模拟数据,在机缘巧合下发现了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');

代码实例

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

详解vue2.0+axios+mock+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/>'
})

刷新页面

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

接下来就是对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即可

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 #Javascript
微信小程序实现自定义加载图标功能
Jul 19 #Javascript
Angular5集成eventbus的示例代码
Jul 19 #Javascript
微信小程序实现弹出菜单
Jul 19 #Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 #Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 #Javascript
微信小程序实现折叠展开效果
Jul 19 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
js实现选项卡效果
2020/03/07 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Python迭代器和生成器介绍
2015/03/06 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
护理个人求职信范文
2014/01/08 职场文书
个性与发展自我评价
2014/02/11 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
环保倡议书50字
2014/05/15 职场文书
商超业务员岗位职责
2015/02/13 职场文书
员工家属慰问信
2015/03/24 职场文书
公司庆典主持词
2015/07/04 职场文书
单位提档介绍信
2015/10/22 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android