首页
所有分类
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图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue3语法糖内的defineProps及defineEmits
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
意大利购物网站(128) 比利时购物网站(33) 阿根廷购物网站(9) 澳大利亚购物网站(309) 挪威购物网站(7) 瑞典购物网站(55) 丹麦购物网站(22) 肯尼亚购物网站(2) 芬兰购物网站(10) 南非购物网站(8)
You might like
用Socket发送电子邮件
2006/10/09 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
微信支付开发告警通知实例
2016/07/12 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python pygame实现2048游戏
2018/11/20 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
如何用python 操作zookeeper
2020/12/28 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
家庭户外服装：Hawkshead
2017/11/02 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
计算机应用专业推荐信
2013/11/13 职场文书
公司合作意向书
2014/04/01 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
药店营业员岗位职责
2015/04/14 职场文书
考试后的感想
2015/08/07 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
k-means & DBSCAN 总结
2021/04/27 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库