首页
所有分类
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组件生命周期运行原理解析
Nov 25 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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
SWL(1) GWEN(1) ad hoc(1) 电台频率(32) Harman Kardon(1) FM(4) 中波(3) 调频(4) KDKA(1) 立体声(1)
You might like
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
js版本A*寻路算法
2006/12/22 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
javascript设计模式Constructor（构造器）模式
2016/08/19 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
详细解读Python中的__init__()方法
2015/05/02 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
东方电视购物：东方CJ
2016/10/12 全球购物
AOP的定义以及作用
2013/09/08 面试题
外语学院毕业生的自我鉴定
2013/11/28 职场文书
策划总监岗位职责
2014/02/16 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
单位委托书范本
2014/04/04 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
自主招生专家推荐信
2015/03/26 职场文书
安全生产标语口号
2015/12/26 职场文书