首页
所有分类
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 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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
公共键(1) 连接器(1) 曝光融合(1) kafka(2) 有序排列(1) shell脚本(1) HDR(1) key(1) pycryto(1) 数据加密(1)
You might like
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php目录操作实例代码
2014/02/21 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
自己动手写的javascript前端等待控件
2015/10/30 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python FTP操作类代码分享
2014/05/13 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
EJB的基本架构
2016/09/22 面试题
面试后的英文感谢信
2014/02/01 职场文书
小学敬老月活动方案
2014/02/11 职场文书
员工薪酬激励方案
2014/06/13 职场文书
观看信仰心得体会
2014/09/04 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
同学会感言
2015/07/30 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android