首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

vue实现登录功能

Posted in Vue.js onDecember 31, 2020

1.背景

完成了登录的表单输入框界面如下:

vue实现登录功能

代码:

<!-- 输入框-->
   <el-form label-width="0px" class="login_form">
    <!-- 用户名 -->
    <el-form-item >
     <el-input prefix-icon="el-icon-s-custom"></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item >
     <el-input prefix-icon="el-icon-lock"></el-input>
    </el-form-item>
    <!-- 按钮区域 -->
    <el-form-item >
     <el-button type="primary">登录</el-button>
     <el-button type="info">重置</el-button>
    </el-form-item>
   </el-form>

2.表单数据绑定

可以查看element的官方案例

本案例代码如下:

<div>
    <!-- 输入框-->
    <el-form :model="loginForm" label-width="0px" class="login_form">
     <!-- 用户名 -->
     <el-form-item>
      <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
     </el-form-item>
     <!-- 密码 -->
     <el-form-item>
      <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     </el-form-item>
     <!-- 按钮区域 -->
     <el-form-item>
      <el-button type="primary">登录</el-button>
      <el-button type="info">重置</el-button>
     </el-form-item>
    </el-form>
   </div>
<script>
 export default {
  name: "Login",
  data() {
   return {
    loginForm: {
     username: 'admin',
     password: '123456'
    }
   }
  }
 }
</script>

3.表单数据格式错误提示

官方案例:

vue实现登录功能

本案例代码如下:

<template>
 <div class="login_container">
  <div class="login_box">
   <!--登录logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="">
   </div>
   <div>
    <!-- 输入框-->
    <el-form :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 用户名 prop="username" 与表单验证属性对应-->
     <el-form-item prop="username">
      <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
     </el-form-item>
     <!-- 密码 -->
     <el-form-item prop="password">
      <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     </el-form-item>
     <!-- 按钮区域 -->
     <el-form-item>
      <el-button type="primary">登录</el-button>
      <el-button type="info">重置</el-button>
     </el-form-item>
    </el-form>
   </div>
  </div>
 </div>
</template>

<script>
 export default {
  name: "Login",
  data() {
   return {
    // 表单数据
    loginForm: {
     username: 'admin',
     password: '123456'
    },
    // 表单验证
    loginRules: {
     username: [
      // trigger: 'blur' 表示失去焦点触发
      {required: true, message: '请输入登录账号', trigger: 'blur'},
      {min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
     ],
     password: [
      {required: true, message: '请输入密码', trigger: 'blur'},
      {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
     ],
    }
   }
  }
 }
</script>

<style lang="less" type="text/less" scoped>
 .login_container {
  background-color: #2b4b6b;
  height: 100%;
 }

 .login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
   height: 130px;
   width: 130px;
   border: 1px solid #eee;
   border-radius: 50%;
   padding: 10px;
   box-shadow: 0 0 10px #ddd;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;

   img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
   }
  }
 }

 .login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
 }


</style>

4.表单重置功能

官方案例如下:

vue实现登录功能

本案例代码:

<template>
 <div class="login_container">
  <div class="login_box">
   <!--登录logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="">
   </div>
   <div>
    <!-- 输入框-->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 用户名 prop="username" 与表单验证属性对应-->
     <el-form-item prop="username">
      <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
     </el-form-item>
     <!-- 密码 -->
     <el-form-item prop="password">
      <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     </el-form-item>
     <!-- 按钮区域 -->
     <el-form-item>
      <el-button type="primary">登录</el-button>
      <el-button type="info" @click="resetLoginForm">重置</el-button>
     </el-form-item>
    </el-form>
   </div>
  </div>
 </div>
</template>

<script>
 export default {
  name: "Login",
  data() {
   return {
    // 表单数据
    loginForm: {
     username: '',
     password: ''
    },
    // 表单验证
    loginRules: {
     username: [
      // trigger: 'blur' 表示失去焦点触发
      {required: true, message: '请输入登录账号', trigger: 'blur'},
      {min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
     ],
     password: [
      {required: true, message: '请输入密码', trigger: 'blur'},
      {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
     ],
    }
   }
  },
  methods:{
   // 重置登录表单
   resetLoginForm(){
    this.$refs.loginFormRef.resetFields()
   }
  }
 }
</script>

<style lang="less" type="text/less" scoped>
 .login_container {
  background-color: #2b4b6b;
  height: 100%;
 }

 .login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
   height: 130px;
   width: 130px;
   border: 1px solid #eee;
   border-radius: 50%;
   padding: 10px;
   box-shadow: 0 0 10px #ddd;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;

   img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
   }
  }
 }

 .login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
 }


</style>

5.请求发出前数据校验

vue实现登录功能

// 登录
   login() {
    // 登录前参数验证
    this.$refs.loginFormRef.validate((valid) => {
     if (!valid) {
      console.log("参数验证失败")
      return
     }
     console.log("参数校验成功")
    })
   }

6.发起登录请求

1.安装:axios(可以cnpm安装,也可以下载js引入文件)

cnpm install axios -S
-D 等价于 --save-dev
-S 等价于 --save

2.引入到vue项目中

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:XXXX/XXXXX'
Vue.prototype.$http = axios

3.发起登录请求

<template>
 <div class="login_container">
  <div class="login_box">
   <!--登录logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="">
   </div>
   <div>
    <!-- 输入框-->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 用户名 prop="username" 与表单验证属性对应-->
     <el-form-item prop="username">
      <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
     </el-form-item>
     <!-- 密码 -->
     <el-form-item prop="password">
      <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     </el-form-item>
     <!-- 按钮区域 -->
     <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
      <el-button type="info" @click="resetLoginForm">重置</el-button>
     </el-form-item>
    </el-form>
   </div>
  </div>
 </div>
</template>

<script>
 export default {
  name: "Login",
  data() {
   return {
    // 表单数据
    loginForm: {
     username: '',
     password: ''
    },
    // 表单验证
    loginRules: {
     username: [
      // trigger: 'blur' 表示失去焦点触发
      {required: true, message: '请输入登录账号', trigger: 'blur'},
      {min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
     ],
     password: [
      {required: true, message: '请输入密码', trigger: 'blur'},
      {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
     ],
    }
   }
  },
  methods: {
   // 重置登录表单
   resetLoginForm() {
    this.$refs.loginFormRef.resetFields()
   },
   // 登录
   login() {
    // 登录前参数验证
    this.$refs.loginFormRef.validate(async (valid) => {
     if (!valid) {
      console.log("参数验证失败")
      return
     }
     // 发起网络请求登录
     let {data: result} = await this.$http.post('login', this.loginForm)
     console.log("result:" + result)
     if (result.meta.status !== 200) {
      console.log("登录失败")
      return
     }
     console.log("登录成功")
    })
   }
  }
 }
</script>

<style lang="less" type="text/less" scoped>
 .login_container {
  background-color: #2b4b6b;
  height: 100%;
 }

 .login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
   height: 130px;
   width: 130px;
   border: 1px solid #eee;
   border-radius: 50%;
   padding: 10px;
   box-shadow: 0 0 10px #ddd;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;

   img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
   }
  }
 }

 .login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
 }


</style>

7.消息提示配置

1.添加element 消息组件

vue实现登录功能

2.使用

vue实现登录功能

8.登录成功后token存放

// 登录
   login() {
    // 登录前参数验证
    this.$refs.loginFormRef.validate(async (valid) => {
     if (!valid) return ;
     // 发起网络请求登录
     let {data: result} = await this.$http.post('login', this.loginForm)
     console.log(result)
     if (result.meta.status !== 200){
      this.$message.error(result.meta.msg)
      return
     }
     this.$message.success("登录成功")
     // token放入 sessionStorage
     window.sessionStorage.setItem('token', result.data.token)
     // 跳转到home路径
     this.$router.push("/home")
    })
   }

9.路由导航守卫-登录拦截

vue实现登录功能

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'

Vue.use(Router)

const router = new Router({
 routes: [
  {
   path: "/",
   redirect: "/login"
  },
  {
   path: '/login',
   name: 'Login',
   component: Login
  }
  ,
  {
   path: '/home',
   name: 'Home',
   component: Home
  }
 ]
})
router.beforeEach((to, from, next) => {
 // to 将要访问的路径
 // from 从哪里跳转来的
 // next 放行

 // 判断是不是登录登录,登录路径直接放行
 if (to.path == '/login') {
  next()
  return
 }
 // 获取token,看是否有token,有token放行
 const token = window.sessionStorage.getItem("token")
 if (!token) {
  next('/login')
  return;
 }
 // 放行
 next();
})
export default router

10.退出功能

<template>
 <div>
  <el-button type="info" @click="logout">退出</el-button>
 </div>
</template>

<script>
 export default {
  name: "Home",
  methods: {
   // 退出登录
   logout() {
    window.sessionStorage.clear()
    this.$router.push("/login")
   }
  }
 }
</script>

<style lang="less" scoped>

</style>

以上就是vue实现登录功能的详细内容，更多关于vue 登录功能的资料请关注三水点靠木其它相关文章！

vue实现登录功能

- Author -

李东平|一线码农

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
Vue如何清空对象
Mar 03 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
vue 动态创建组件的两种方法
Dec 31 #Vue.js
Vue 修改网站图标的方法
Dec 31 #Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 #Vue.js
vue导入.md文件的步骤（markdown转HTML）
Dec 31 #Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
SQLite3(1) filter(1) reduce(2) dockerfile(1) Selenium(1) Tsmoothie(1) TextInputLayout(1) 分布式锁(3) 短信验证码(1) Django(9)
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
PHP insert语法详解
2008/06/07 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php上传excel表格并获取数据
2017/04/27 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
JavaScript之自定义类型
2012/05/04 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
numpy中的高维数组转置实例
2018/04/17 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
英国领先的餐饮折扣俱乐部：Gourmet Society
2020/07/26 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
欢迎横幅标语
2014/06/17 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
医院营销工作计划
2015/01/16 职场文书
艺术节开幕词
2015/01/28 职场文书