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

news2024/11/17 6:44:45

文章目录

  • 一、登录
    • 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.coloradmin.cn/o/1949607.html

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

相关文章

下属不把你当回事?就做好这3步,他们会对你唯命是从!

下属不把你当回事?就做好这3步,他们会对你唯命是从! 一:规范制度,做事有理可依 企业管理好比是满汉全席,制度才是压轴大菜,人性化说教不过是菜盘边上的点缀罢了。 千万不可舍本逐末。 事要有人干…

React间的组件通信

一、父传子&#xff08;props&#xff09; 步骤 父组件传递数据&#xff0c;子组件标签身上绑定属性子组件接收数据&#xff0c;props的参数 // 子组件 function Son(props) {return (<div>this is Son, {props.name}</div>) }// 父组件 function App() {const n…

如何使用 DSPy 构建多步骤推理的 RAG 系统

一、前言 检索增强生成 (RAG) 系统已经成为构建基于大语言模型 (LLM) 应用的强大方法。RAG 系统的工作原理是&#xff1a;首先使用检索模型从外部知识源检索相关信息&#xff0c;然后使用这些信息来提示 LLM 生成最终的响应。 然而&#xff0c;基本的 RAG 系统&#xff08;也…

谷粒商城实战笔记-47-商品服务-API-三级分类-网关统一配置跨域

文章目录 一&#xff0c;跨域问题1&#xff0c;跨域问题产生的原因2&#xff0c;预检请求3&#xff0c;跨域解决方案3.1 CORS (Cross-Origin Resource Sharing)后端配置示例&#xff08;Spring Boot&#xff09; 3.2 JSONP (JSON with Padding)3.3 代理服务器Nginx代理配置示例…

python自动化中正则表达式提取(适用于提取文本结果)

对于结果是json格式的我们经常使用jsonpath&#xff0c;但是很多时候我们需要从一些文本中提取数据&#xff0c;这个时候正则表达式的提取就很重要&#xff0c;这边主要分享一些正则表达式的提取方法和应用场景的实践&#xff0c;主要介绍两种用法re.search()跟re.findall() 1…

基于springboot+vue+uniapp的居民健康监测小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

系留无人机在技术上有哪些优势或创新点

系留无人机在技术上具有显著的优势和创新点&#xff0c;主要体现在以下几个方面&#xff1a; 1. 长航时飞行作业&#xff1a; - 系留无人机系统由地面通过市电、发电机或电池组供电&#xff0c;并通过系留线缆将电力传输至无人机&#xff0c;实现了不间断供电。 - 这种供电方式…

概率论--矩估计

目录 简介 矩估计法的基本步骤 延伸 矩估计法在大样本情况下的准确性和有效性如何评估&#xff1f; 在实际应用中&#xff0c;矩估计法的局限性有哪些具体例子&#xff1f; 如何处理矩估计法在某些情况下可能出现的不合理解或无法唯一确定参数的问题&#xff1f; …

江科大/江协科技 STM32学习笔记P13

文章目录 TIM定时中断1、TIM简介计数器预分频器自动重装寄存器 2、定时器类型基本定时器主模式触发DAC 通用定时器高级定时器 3、定时器原理定时中断基本结构预分频器时序计数器时序RCC时钟树 TIM定时中断 1、TIM简介 定时器的基准时钟一般都是主频72MHz&#xff0c;如果对72M…

优化教学流程和架构:构建高效学习环境的关键步骤

在教育领域&#xff0c;设计和优化教学流程和架构是提高学习效果和学生参与度的关键。本文将探讨如何通过合理的教学流程和有效的架构来构建一个高效的学习环境。 ### 1. 理解教学流程和架构的重要性 教学流程指的是教学活动的组织和顺序&#xff0c;而教学架构则是指支持教学…

Centos 8 配置网络源

备份当前的软件源配置文件&#xff1a; sudo cp -a /etc/yum.repos.d /etc/yum.repos.d.bak 清理原有的 yum 仓库配置信息&#xff1a; sudo rm -f /etc/yum.repos.d/*.repo 获取阿里云的 CentOS 8 源配置&#xff1a; sudo curl -o /etc/yum.repos.d/CentOS-Base.repo ht…

Go之Web急速入门Gin+Gorm框架

简介 只作为快速入门、了解Go的GinGorm框架的demo&#xff0c;不能作为企业级开发。 详细用法请看官网 《Gin官网》 《Gorm官网》 使用GoLand创建Go项目&#xff08;默认modules&#xff09; go版本1.22.2 需要设置代理下载go相关软件包&#xff0c;否则软件包可能无法下载。…

unity2D游戏开发06稳定,材质,碰撞器

稳定性 在操控玩家时,我们会发现玩家移动时,摄像头会有抖动,这是摄像机过度精确造成的。 创建名为RoundCameraPos的C#脚本,用Visual Studio打开 代码 using System.Collections; using System.Collections.Generic; using UnityEngine; using Cinemachine;//导入Cinemac…

大模型llama结构技术点分享;transformer模型常见知识点nlp面经

1、大模型llama3技术点 参考&#xff1a;https://www.zhihu.com/question/662354435/answer/3572364267 Llama1-3&#xff0c;数据tokens从1-2T到15T;使用了MHA&#xff08;GQA缓存&#xff09;&#xff1b;上下文长度从2-4-8K&#xff1b;应用了强化学习对其。 1、pretraini…

【YashanDB知识库】yasdb jdbc驱动集成BeetISQL中间件,业务(java)报autoAssignKey failure异常

问题现象 BeetISQL中间件版本&#xff1a;2.13.8.RELEASE 客户在调用BeetISQL提供的api向yashandb的表中执行batch insert并将返回sequence设置到传入的java bean时&#xff0c;报如下异常&#xff1a; 问题的风险及影响 影响业务流程正常执行&#xff0c;无法获得batch ins…

html css 分页按钮效果

结果展示&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>分页按钮效果</title>&…

Richtek立锜科技微型辅听器系统电源解决方案

立锜科技推出微型辅听器系统电源解决方案&#xff0c;为新型设计提供了关键助力&#xff0c;克服小尺寸的挑战&#xff0c;同时确保系统发挥最佳性能。高效率&#xff1a;低静态电流Buck 转换器具有最佳性能&#xff0c;在 1mA 到 10mA 轻载范围内&#xff0c;效率高达 90&…

{Spring Boot 原理篇} Spring Boot自动装配原理

SpringBootApplication 1&#xff0c;Spring Boot 应用启动&#xff0c;SpringBootApplication标注的类就是启动类&#xff0c;它去实现配置类中的Bean的自动装配 SpringBootApplication public class SpringbootRedis01Application {public static void main(String[] args)…

JVM调优与监控工具概览

JVM调优与监控工具概览 1、JDK自带工具1.1 jconsole1.2 jvisualvm 2、第三方工具2.1 MAT&#xff08;Memory Analyzer Tool&#xff09;2.2 GChisto &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; JVM的性能调优与监控是确保应用稳定运行的…

《华为数据之道》读书笔记六---面向自助消费的数据服务建设

七、从结果管理到过程管理&#xff0c; 从能“看”到能“管” 1、数据赋能业务运营 数字化运营旨在利用数字化技术获取、管理和分析数据&#xff0c;从而为企业的战略决策与业务运营提供可量化的、科学的支撑。 数字化运营归根结底是运营&#xff0c;旨在推动运营效率与能力的…