RuoYi基于SpringBoot+Vue前后端分离的Java快速开发框架学习_2_登录

文章目录

  • 一、登录
    • 1.生成验证码
    • 2.验证码作用
      • 1.大体流程
      • 2.代码层面(我们都是从前端开始看起)


一、登录

1.生成验证码

基本思路:

  1. 后端生成一个表达式,例如3+4=?@7,显而易见@后面是答案
  2. 截取出来题干和答案
  3. 把题干1+1=?变成图片,变成流,传到前端
  4. 答案7存入Redis

2.验证码作用

1.大体流程

刷新RouYi前台后,查看Redis
在这里插入图片描述
Redis中存入了答案"10",并且"10"是存在Key值为captcha_codes中的,之后我们只需要根据Key值来提取答案即可验证用户输入的验证码是否正确。
在这里插入图片描述

2.代码层面(我们都是从前端开始看起)

Step1:找到地址栏中的地址,如下图所示为login。
在这里插入图片描述
Step2:找到地址login在路由中指向的vue文件。按照下图顺寻进行查找。
在这里插入图片描述
Step3:下图我们可以看到在这个login.vue文件created时,执行了函数this.getcode()。
在这里插入图片描述
Step4:从下面代码我们可以看到getCode()调用了getCodeImg()方法。

methods: {getCode() {getCodeImg().then(res => { //调用了getCodeImg()方法this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;if (this.captchaEnabled) {this.codeUrl = "data:image/gif;base64," + res.img;this.loginForm.uuid = res.uuid;//验证码在redis的key值}});},

Step5:而从下图我们可以看出getCodeImg是在api目录下的login文件中。
在这里插入图片描述
Step6:我们找到getCodeImg()函数,它封装了一个request对象,里面是axios的东西。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[C++进阶]多态的概念、定义与实现

多态,顾名思义,即多种形态。具体来说,就是不同对象执行同一行为而产生不同的结果。 一、多态的概念 多态的概念:通俗来说,就是多种形态,具体点就是去完成某个行为,当不同的对象去完成时会产生…

神经网络与注意力机制的权重学习对比:公式探索

神经网络与注意力机制的权重学习对比:公式探索 注意力机制与神经网络权重学习的核心差异 在探讨神经网络与注意力机制的权重学习时,一个核心差异在于它们如何处理输入数据的权重。神经网络通常通过反向传播算法学习权重,而注意力机制则通过学…

LLMs之Llama 3.1:Llama 3.1的简介、安装和使用方法、案例应用之详细攻略

LLMs之Llama 3.1:Llama 3.1的简介、安装和使用方法、案例应用之详细攻略 导读:2024年7月23日,Meta重磅推出Llama 3.1。本篇文章主要提到了Meta推出的Llama 3.1自然语言生成模型。 背景和痛点 >> 过去开源的大型语言模型在能力和性能上一…

Kylin Cube构建日志分析:洞察大数据构建过程的窗口

Kylin Cube构建日志分析:洞察大数据构建过程的窗口 Apache Kylin是一款为Hadoop优化的开源分布式分析引擎,它通过构建数据立方体(Cube)来实现对大数据的快速查询。在维护和优化Cube的过程中,构建日志分析是一个重要的…

Docker 常用命令详解

目录 Docker 简介安装 DockerDocker 基本命令 镜像命令容器命令网络命令 Docker 高级命令 数据卷Docker Compose 实战案例 部署一个简单的 Web 应用使用 Docker Compose 管理多容器应用 总结 Docker 简介 Docker 是一个开源的容器化平台,提供了简化应用程序开发、…

OCC 创建方管(拉伸操作)

目录 一、OCC 拉伸操作 二、例子 1、使BRepBuilderAPI_MakeFace 2、使用BRepPrimAPI_MakeRevol 3、垂直路径扫掠 一、OCC 拉伸操作 BRepPrimAPI_MakeSweep Class Reference - Open CASCADE Technology Documentation OCC提供几种图形的构建是由基本图形的旋转,拉伸等方…

C++进程遍历的几种方法

在应用层下,进程遍历有多种方式,这里介绍几种常用的方式:进程快照、NtQuerySystemInformation、EnumProcesses函数、WMI等。 在C#中Process类提供了一个GetProcesses()函数,这个函数内部就是调用的NtQuerySystemInformation进行获…

基于STM32瑞士军刀--【FreeRTOS开发】学习笔记(二)|| 堆 / 栈

堆和栈 1. 堆 堆就是空闲的一块内存,可以通过malloc申请一小块内存,用完之后使用再free释放回去。管理堆需要用到链表操作。 比如需要分配100字节,实际所占108字节,因为为了方便后期的free,这一小块需要有个头部记录…

电子加密狗的定义与功能

电子加密狗,也称为加密锁、硬件锁或USB密钥,是一种用于软件保护和授权管理的硬件设备。它通常是一个外部设备,插入到计算机的USB接口上,通过加密算法和技术来确保软件的安全性和防止非法复制、盗版以及未经授权的使用。以下是关于…

软件测试面试准备工作

1、 什么是数据库? 答:数据库是按照某种数据模型组织起来的并存放二级存储器中的数据集合。 2、 什么是关系型数据库? 答:关系型数据库是建立在关系数据库模型基础上的数据库, 借助集合代数等概念和方法处理数据库中的数据。目前主流的关…

AR 眼镜之-蓝牙电话-实现方案

目录 📂 前言 AR 眼镜系统版本 蓝牙电话 来电铃声 1. 🔱 技术方案 1.1 结构框图 1.2 方案介绍 1.3 实现方案 步骤一:屏蔽原生蓝牙电话相关功能 步骤二:自定义蓝牙电话实现 2. 💠 屏蔽原生蓝牙电话相关功能 …

[linux] seqeval安装报错

新建一个新的环境 然后安装: # 不能拷贝别人的环境再安mebert_wash的环境。有冲突。我需要重新安一个空的conda环境,再安装。 # conda create -n wash python3.10 ipykernel python -m pip install --upgrade setuptools python -m pip install --upgr…

【Unity】关于Luban的简单使用

最近看了下Luban导出Excel数据的方式,来记录下 【Unity】关于Luban的简单使用 安装Luban开始使用UnityLubanC# 扩展 安装Luban Luban文档:https://luban.doc.code-philosophy.com/docs/beginner/quickstart 1.安装dotnet sdk 8.0或更高版本sdk 2.githu…

ViewPager2实现原理分析

ViewPager2 是 Android 开发中用于实现水平滑动视图的组件,它是 ViewPager 的一个改进版,提供了更多的功能和更好的性能。下面,我们将结合源码来简要分析 ViewPager2 的实现原理。 1. 基本架构 ViewPager2 的主要架构基于 RecyclerView&…

Activiti 6 兼容openGauss数据库bytes类型不匹配

当前有个项目需要做国产调研,需要适配高斯数据库,项目启动的时候,提示column "bytes_" is type bytea but expression is of type blob byte_字段是act_ge_bytearray表的,openGauss里的类型是bytea,类型是匹…

Mysql或MariaDB数据库的用户与授权操作——实操保姆级教程

一、问题描述 在日常的工作中,我们需要给不同角色的人员创建不同的账号,他们各自可访问的数据库或权限不一样,这时就需要创建用户和赋予不同的权限内容了。 二、问题分析 1、创建不同的角色账号; 2、给这些账号授予各自可访问数据库的权限。 三、实现方法 Centos8安装…

房子装修完显得大的一些

雅静说房子装修完怎么让它显得大一些      说七点,给大家总结装修三十年的经验      1,把阳台纳入大厅里来,拆掉开发商给的推拉门,换个大点但不影响通风的窗户      视觉上的通透感就会显得空间更大      2,全屋通铺,在瓦工阶段跟师父交代好,      直接通铺…

Java Generic练习(2024.7.25)

GenericExercise1 package GenericExercise20240725;import java.util.ArrayList; import java.util.List;public class GenericExercise1 {public static void main(String[] args) {// 泛型是JDK5以后引入的新的特性,主要目的是为了提供编译时的类型安全检测机制…

STM32——GPIO(LED闪烁)

一、什么是GPIO? GPIO(通用输入输出接口): 1.GPIO 功能概述 GPIO 是通用输入/输出(General Purpose I/O)的简称,既能当输入口使用,又能当输出口使用。端口,就是元器件…

Java 代码规范if嵌套

在Java编程中,过度的if嵌套会使代码难以阅读和维护。为了遵循良好的代码规范,我们应尽量减少嵌套的深度。这通常可以通过重新组织代码或使用其他结构(如switch语句,或者将逻辑封装到单独的方法中)来实现。 以下是一个…