vue实现登录功能

1.背景

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

代码:

<!-- 输入框-->
   <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.表单数据格式错误提示

官方案例:

本案例代码如下:

<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.表单重置功能

官方案例如下:

本案例代码:

<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.请求发出前数据校验

// 登录
   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 消息组件

2.使用

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.路由导航守卫-登录拦截

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 登录功能的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue.extend 登录注册模态框的实现

    模态框是我们 UI 控件中一个很重要的组件,使用场景有很多种,我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建. 文档中的解释是 在最近在做一个常用的类似下面的 登录/注册 业务场景时,利用 Vue.extend 来改善我们的代码,使我们代码逻辑更清晰化. 需求:点击登录或注册出现各自的模态框. 我们对于这种常见的登录注册业务,一般都是分为 Sigin.vue 和 Register.vue 两个组件,然后把两个组件写入 App.vue 组件中,或者是 l

  • Vue实现手机号、验证码登录(60s禁用倒计时)

    最近在做一个Vue项目,前端通过手机号.验证码登录,获取验证码按钮需要设置60s倒计时(点击一次后,一分钟内不得再次点击).先看一下效果图: 输入正确格式的手机号码后,"获取验证码"按钮方可点击:点击"获取验证码"后,按钮进入60s倒计时,效果图如下: 效果图已经有了,接下来就上代码吧! html <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnD

  • vue+Element-ui实现登录注册表单

    本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码,供大家参考,具体内容如下 登录注册表单验证 通过Element-ui的表单实现登录注册的表单验证 效果图如下 注册 登录表单 登录的实现,需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求 // 登录表单验证的代码 // template的代码 <el-form :model="ruleForm" :rules="rules" ref="ruleForm"

  • Spring Boot + Vue 前后端分离项目如何踢掉已登录用户

    上篇文章中,我们讲了在 Spring Security 中如何踢掉前一个登录用户,或者禁止用户二次登录,通过一个简单的案例,实现了我们想要的效果. 但是有一个不太完美的地方,就是我们的用户是配置在内存中的用户,我们没有将用户放到数据库中去.正常情况下,松哥在 Spring Security 系列中讲的其他配置,大家只需要参考Spring Security+Spring Data Jpa 强强联手,安全管理只有更简单!一文,将数据切换为数据库中的数据即可. 本文是本系列的第十三篇,阅读前面文章有助

  • vue 实现用户登录方式的切换功能

    一.vue 实现用户登录方式的切换 在 data 当中,定义一个标识符 loginWay,用来表示是用短信登录还是密码登录,true代表短信登录,false 代表密码登录,代码如下所示: data() { return { loginWay: true } } 在短信登录和密码登录上,进行动态样式绑定,loginWay为true就短信登录绑定动态样式on,loginWay为false就密码登录绑定动态样式on,并且也绑定点击事件,进行设置 loginWay的true和false,代码如下所示:

  • vue实现登录、注册、退出、跳转等功能

    本文给大家介绍vue实现登录.注册.退出.跳转功能,具体代码如下所示: 效果图1: 效果图2: 效果图3: 效果图4: 完整实例: <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> ul li { margin: 0; padding: 0; list-style: none; } #app { widt

  • vue项目中微信登录的实现操作

    1.下载组件 wxlogin npm install vue-wxlogin --save 2.引入组件,给组件传参 3.重定向的url应该是微信登录官网中的微信授权作用域 4.如果url里面有端口号,微信授权作用里面也要有 5.重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中转码 6.微信登录成功后,会自动重定向到新地址,此时的地址栏中就有code参数 7.如果报错说不能从组件跳到页面,那就找到wxlogin组件里面的iframe标

  • vue实现用户长时间不操作自动退出登录功能的实现代码

    一.需求说明 昨天后端开发人员让我实现一个网页锁屏,当时我一头雾水,问他为啥搞的跟安卓系统一样.他的回复是"看起来帅点". 首先我们梳理下逻辑,先来个简化版的,用户长时间未操作时,返回登录页 二.思路 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出登陆,清除token,返回登录页 三.实现 [1]在util文件夹下创建一个storage.js封装localStorage方法 export default { set

  • Vue登录拦截 登录后继续跳转指定页面的操作

    在开发中我们经常遇到这样的需求,需要用户登录后才可以访问该页面,如果用户没有登录点击该页面时则自动跳转到登录页面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 1.在路由器router下的 index.js 的配置中,给需要拦截登录的页面的路由上加一个meta: {loginRequest: true} ,其中loginRequest 变量自己可以随意定义 2.在main.js文件里面添加beforeEach钩子函数 解释: router.beforeEach((to, from,

  • Vue+Spring Boot简单用户登录(附Demo)

    1 概述 前后端分离的一个简单用户登录 Demo . 2 技术栈 Vue BootstrapVue Kotlin Spring Boot MyBatis Plus 3 前端 3.1 创建工程 使用 vue-cli 创建,没安装的可以先安装: sudo cnpm install -g vue @vue/cli 查看版本: vue -V 出现版本就安装成功了. 创建初始工程: vue create bvdemo 由于目前 Vue3 还没有发布正式版本,推荐使用 Vue2 : 等待一段时间构建好了之后

  • vue实现简单的登录弹出框

    本文实例为大家分享了vue实现简单的登录弹出框的具体代码,供大家参考,具体内容如下 初学vue框架,小小的写了一个登录弹出框效果 各路大佬多多指教. 不多废话,直接上代码: CSS: *{margin:0;padding:0;} /*登陆按钮*/ #app{ width:140px; height:36px; margin:10px auto; } #login,#login a{ width: 200px; height: 38px; line-height:38px; text-align:

随机推荐