详解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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
详解Vue中watch的高级用法
May 02 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
AngularJs中$cookies简单用法分析
May 30 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
vue2实现provide inject传递响应式
May 21 Vue.js
JavaScript声明变量和数据类型的转换
Apr 12 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 项目的方法
2007/01/02 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
form中限制文本字节数js代码
2007/06/10 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
AUC计算方法与Python实现代码
2020/02/28 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
为什么使用接口?
2014/08/13 面试题
护士自我鉴定范文
2013/10/06 职场文书
中专自我鉴定范文
2013/10/16 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
培训班开班主持词
2015/07/02 职场文书