vue 前端实现login页登陆 验证码

实现效果
在这里插入图片描述

// template
<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container">
        <span class="tool-bar"></span>
        <h2 class="title">用户登陆</h2>
        <el-form-item prop="account">
          <el-input type="text" v-model.trim="loginForm.account" auto-complete="false" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password" class="item-m10">
          <el-input type="password" v-model.trim="loginForm.password" auto-complete="false" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="code" align="left" style="margin-top: 20px">
          <el-input v-model="loginForm.code" style="width: 170px" placeholder="验证码,点击图片刷新"></el-input>
          <el-tag class="login-tag-code" @click="getCode">{{ viewCode }}</el-tag>
        </el-form-item>
        <div class="checked-item">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
        </div>
        <el-form-item style="width: 100%" class="btn-item">
          <el-button style="width: 100%" @click.native.prevent="loginSubmit" :loading="loading">登录</el-button>
 </el-form-item>


// js
// ---------分割线

  data () {
    return {
      viewCode: '',
      loginForm: {
        account: '',
        password: '',
        src: '',
        code: ''
      },
      fieldRules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      checked: false,
      // 加载中的标志
      loading: false
    }
  },


// ------ 分割线


  methods: {
    loginSubmit () {
      if (!this.loginForm.account || !this.loginForm.password) {
        this.$message.error('账号或密码不能为空!')
        return
      }
      if (!this.loginForm.code || this.loginForm.code !== this.viewCode) {
        this.$message.error('验证码不正确!')
        return
      }
      this.loading = true
      let userInfo = {
        account: this.loginForm.account,
        password: this.loginForm.password
      }
      //登陆接口
      this.$api.login
        .login(userInfo)
        .then((res) => {
            if (this.checked) {
              let rememberInfo = JSON.stringify({ ...userInfo })
              localStorage.setItem('rememberInfo', rememberInfo) // 记住密码时 保存login
            } else {
              localStorage.removeItem('rememberInfo')
            }
            this.$router.push('/') // 登录成功,跳转到主页 
            this.loading = false
        })
        .catch((err) => {
          this.$message({ message: err.message, type: 'error' })
        })
    },

  //获取验证码
    getCode () {
      this.viewCode = ''
      let codeString = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      let codeArray = codeString.split('')
      let num = codeArray.length
      let newCodeArray = []
      for (let i = 0; i < 5; i++) {
        let index = Math.floor(Math.random() * num)
        newCodeArray.push(codeArray[index])
      }
      this.viewCode = newCodeArray.join('')
    },
  },
  mounted () {
    this.getCode()
    if (localStorage.getItem('rememberInfo')) {
      // 有上次登录信息 显示上次登录
      let rememberData = JSON.parse(localStorage.getItem('rememberInfo'))
      const { account, password } = rememberData
      this.loginForm.account = account
      this.loginForm.password = password
    }
  }

样式代码省略。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/208655.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解决VSCode按住Ctrl(or Command) 点击鼠标左键不跳转的问题(不能Go to Definition)

问题出现 往往在升级了VSCode以后&#xff0c;就会出现按住Ctrl&#xff08;or Command&#xff09; 点击鼠标左键不跳转的问题&#xff0c;这个问题很常见。 解决办法 1 进入VScode的首选项&#xff0c;选择设置 2 输入Go to definition&#xff0c;找到如下两个设置&#…

逸学java【初级菜鸟篇】11.多线程【多方位详解】

hi&#xff0c;我是逸尘&#xff0c;一起学java吧 目标&#xff08;任务驱动&#xff09; 本章没有任务目标&#xff0c;略述概述多线程一隅&#xff0c;全是精华。 线程 进程 在提到线程是什么之前我们还需要提到另一个名词 他就是进程 进程&#xff1a;是指一个内存中运…

如何删除mac苹果电脑上面的流氓软件?

在使用苹果电脑的过程中&#xff0c;有时候我们也会遇到一些不需要的软件。无论是因为不再需要&#xff0c;或者是为了释放磁盘空间&#xff0c;删除这些软件是很重要的。本文将为大家介绍怎样删除苹果电脑上的软件&#xff01; CleanMyMac X全新版下载如下: https://wm.make…

springboot + vue 智能物流管理系统

qq&#xff08;2829419543&#xff09;获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;springboot 前端&#xff1a;采用vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xf…

FL Studio(水果软件)2024最新中文版云盘下载

如今&#xff0c;越来越多的音乐人选择使用音乐制作软件来进行音乐的创作&#xff0c;一台电脑、一款软件以及一个外接MIDI就是一个小型的音乐工作站。FL Studio成了音乐界萌新的首选&#xff0c;目前最新的版本为FL Studio2024版本。 你可以不知道如何做音乐&#xff0c;但是…

你对SPA单页面的理解,它的优缺点分别是什么?

面试官&#xff1a;你对SPA单页面的理解&#xff0c;它的优缺点分别是什么&#xff1f;如何实现SPA应用呢 一、什么是SPA SPA&#xff08;single-page application&#xff09;&#xff0c;翻译过来就是单页应用SPA是一种网络应用程序或网站的模型&#xff0c;它通过动态重写当…

微信小程序 slider 翻转最大和最小值

微信小程序 slider 翻转最大和最小值 场景代码示例index.wxmlindex.jsutil.js 参考资料 场景 我想使用 slider 时最左边是 10 最右是 -10。 但是想当然的直接改成<slider min"10" max"-10" step"1" /> 并没用。 查了文档和社区也没有现成…

HarmonyOs 4 (二) HelloWord

目录 一 开发工具下载安装1.1 下载安装包1.2 下载相关依赖 二 开发者注册与个人实名认证三 第一个程序2.1 创建第一个程序2.2 认识开发者界面2.3 目录结构认识2.3.1 父目录认识2.3.2 AppScope 目录2.3.3 entry目录2.3.3.1 ets 目录2.3.3.2 resources目录 2.3.4 认识配置文件2.3…

(四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、Tiki-taka算法&#xff08;TTA&#xf…

SQL Server 2016(创建数据库)

1、实验环境。 某公司有一台已经安装了SQL Server 2016的服务器&#xff0c;现在需要新建数据库。 2、需求描述。 创建一个名为"db_class"的数据库&#xff0c;数据文件和日志文件初始大小设置为10MB&#xff0c;启用自动增长&#xff0c;数据库文件存放路径为C:\db…

Python 网络爬虫(一):HTML 基础知识

《Python入门核心技术》专栏总目录・点这里 文章目录 1. 什么是 HTML2. HTML 的特点3. HTML 的标签和属性4. HTML 的结构4.1 文档类型声明4.2 根元素4.3 头部部分4.4 主体部分4.5 表格标签4.6 区块4.7 嵌套和层次结构4.8 表单4.9 注释 5. HTML 交互事件 大家好&#xff0c;我是…

C#文件夹基本操作(判断文件夹是否存在、创建文件夹、移动文件夹、删除文件夹以及遍历文件夹中的文件)

目录 一、判断文件夹是否存在 1.Directory类的Exists()方法 2. DirectoryInfo类的Exists属性 二、创建文件夹 1. Directory类的CreateDirectory()方法 2.DirectoryInfo类的Create()方法 三、移动文件夹 1. Directory类的Move()方法 2.DirectoryInfo类的MoveT…

Docker容器间网络共享

Docker容器间网络共享 1、新建网络2、容器绑定网卡3、验证 Docker环境中为了一套应用部署多个环境、并且不修改配置文件的情况下&#xff0c;做到一键部署。要求不同容器直接的网络交互&#xff0c;使用容器名称。 网络相关常用命令 #查看网络内部信息docker network inspect b…

应用于智慧零售的AI边缘计算盒子+AI算法软硬一体化方案

中国是世界上最大的消费市场&#xff0c;零售行业拥有极大的发展潜力&#xff0c;阿里、腾讯两大互联网巨头正在加紧、加大布局&#xff1b; 信迈智慧零售方案可涵盖快消行业、服饰行业、餐饮行业、酒店行业、美家行业、消费电子行业、新零售商行业、服饰连锁、大卖场/商超、百…

详解Linux常用命令

目录 1. ps 命令 2. top 命令 3. grep 命令 4. df 命令 5. tail 命令 6. head 命令 7. cat 命令 8. --help 和 man 命令 9. cd 命令 10. mkdir 命令 11. rm 命令 12. mv 和 cp 命令 13. touch 命令 14. vi 或 vim 命令 15. chmod 修改权限 16. 打包和压缩文件 …

39.从0到上线三天搭建个人网站(第三天)

点赞收藏加关注&#xff0c;你也能住大别墅&#xff01; 一、第三天主要工作 1.完成detail页面的开发 2.将所有数据以及部分静态资源存在uniCloud&#xff0c;为以后做管理后台做准备 3.创建云对象getData&#xff0c;在beforecreate&#xff08;&#xff09;中获取数据 4.…

【漏洞复现】智跃人力资源管理系统GenerateEntityFromTable.aspx接口存在SQL注入漏洞 附POC

漏洞描述 智跃人力资源管理系统是基于B/S网页端广域网平台,一套考勤系统即可对全国各地多个分公司进行统一管控,成本更低。信息共享更快。跨平台,跨电子设备。智跃人力资源管理系统GenerateEntityFromTable.aspx接口处存在SQL注入漏洞,攻击者可通过该漏洞获取数据库中的信…

国内首所国际职业培训学院落户深圳盐田揭幕开业

11月26日&#xff0c;中科国药•中科大有大健康上市企业孵化平台迎来了国内首所国际职业学院——深圳市盐田区国际职业培训学院的正式落成与揭幕仪式。中科大有高新科技有限公司董事长、长江商学院MBA\FMBA金融导师、深圳市中科国药生物医药研究院理事长、深圳市盐田区国际职业…

​iOS Class Guard github用法、工作原理和安装详解及使用经验总结

iOS Class Guard是一个用于OC类、协议、属性和方法名混淆的命令行工具。它是class-dump的扩展。这个工具会生成一个symbol table&#xff0c;这个table在编译期间会包含进工程中。iOS-Class-Guard能有效的隐藏绝大多数的类、协议、方法、属性和 实例变量 名。iOS-Class-Guard不…

java设计模式学习之【桥接模式】

文章目录 引言桥接模式简介定义与用途&#xff1a;实现方式 使用场景优势与劣势桥接模式在Spring中的应用绘图示例代码地址 引言 想象你正在开发一个图形界面应用程序&#xff0c;需要支持多种不同的窗口操作系统。如果每个系统都需要写一套代码&#xff0c;那将是多么繁琐&am…