若依Ruo-yi登录功能分析

已于 2022-09-30 09:05:03 修改
阅读量1.5k 收藏 2
点赞数 1
文章标签： java 服务器 html
于 2022-09-29 17:45:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61845680/article/details/127111159
版权
本文详细阐述了登录界面中验证码的生成过程，包括使用Ajax请求获取验证码、生成随机UUID、存储验证信息于Redis，以及登录时的验证流程。重点在于前后端交互的实现和用户唯一标识的管理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先加载登录界面会发送验证码请求和获取Cookie

会调用created函数

Getcode是获取验证码

GetCookie是获取cookie

 

 

GetCodeImg函数会调用ajax发送请求给后端

 

 

后端GetMapping接口接收到请求后执行getCode方法

 

Getcode方法中会随机生成uuid(用户的唯一标识)

 

然后生成验证码图片和答案

CapText会生成一个例如6-2=?@4的字符串

Codestr中保存6-2=?

Code中保存4也就是验证码的答案

Image就是验证码图片了

 

然后将用户的uuid、生成的验证码答案、以及验证码有效时间的信息传入redis内存数据库中

 

最后getcode函数把生成的uuid和经过转换后的验证码图片装入ajax中返回给前端

 

然后执行then后面的函数，变量res中就存储着返回的ajax信息，

然后赋值给页面变量codeurl、loginform.uuid

 

到此登录界面验证码和用户唯一标识生成完毕

当我们输入完用户名和密码点击登录按钮时，会触发handleLogin函数

 

handleLogin中会调用user.js中的Login函数并把loginform(用户名、密码、uuid、用户输入的验证码答案)传入函数中

 

RuoYi-Vue-Plus (HiKariCp JDBC连接池)
javaxueba的博客
07-23 309
是一个高性能的 JDBC 连接池实现。它以其的特点而广受 Java 开发者的青睐。：HikariCP 通过使用低开销的并发访问机制、有效地利用线程池、采用轻量级的对象池等技术，确保在高负载情况下依然能够保持稳定的性能表现。据官方数据，在并发场景下，HikariCP 的性能优于其他许多连接池。：HikariCP 的代码精简、依赖少，不依赖于其他第三方库，因此具有较小的内存占用和较低的启动时间。这使得它非常适合于内存有限的环境或者需要快速启动的场景。
ruoyi实用性改造--（一）ruoyi功能点修改
TheoGo的专栏
06-25 515
找到ruoyi-generator目录－－resources目录－－vm目录－－vue目录－－index.vue.vm，对其中内容进行改造，一是添加按纽，二是添加对应的form，三是添加open2变量，保证详情弹窗的显示与关闭，四是添加显示详情页的js函数handelDetail，将open2置为显示，五是在cancel函数中，添加open2的关闭。为顺应小程序的潮流，选择VUE版本，由于暂时VUE主线为2版本，且3版本的更新不是太及时，选择主支2版本。数据是业务的支撑，往往用到外部数据。
ruoyi-vue版本（二十七）UUID 随机数相关的文件的解析
一天不写代码难受的博客
06-24 924
UUID（通用唯一标识符）是一种标识符，用于在计算机系统中唯一标识实体或资源。UUID由 128 位的值组成，通常以字符串形式表示。UUID的 128 位中的一些位用于指示UUID的版本和变体信息。变体信息表示UUID的结构和生成方式。根据变体信息的不同，UUID可以分为四种变体类型：变体 0 （NCS backward compatibility）：这是最早的UUID变体，其结构基于NCS（ Network Computing System ）的标准。它的变体信息位为 0。
若依（ruoyi）系统测试接口说明
热门推荐
清宵尚温的博客
02-24 2万+
若依（ruoyi）系统测试接口说明1. 生成验证码2. 登录获取token信息3. 测试接口 最近测试若依项目，不知道怎么操作，多亏有好人将这篇文章相赠，特地分享出来供大家学习参考，希望大家共同进步。 1. 生成验证码 因为登录时需要输入验证码。 登录controller代码如下： 用postman 发起get请求 请求地址如下：http://localhost:8080/captchaImag...
（自用）若依框架登录流程概述
weixin_55869972的博客
03-25 886
1. 前端请求验证码：用户打开登录页面时，前端会请求验证码（getCode（）方法），并获取一个唯一的UUID（用户标识）。6. 请求资源时携带Token：每次请求资源时，前端从Cookies中获取Token，并将其放入请求头中。4. 生成Token：后端生成一个Token，并将其存储到Redis中，同时返回给前端。2. 用户输入登录信息：用户输入用户名、密码和验证码后，点击登录按钮，触发登录请求。7. 后端解析Token：后端解析Token，获取用户信息和权限，并进行鉴权。
ruoyi源码学习-4 获取用户信息
tiandi0123的博客
07-21 5270
前言 上期我们查看了登录时的流程，不过生成token的过程略过了。而本次需要根据token从redis中获取用户信息。所以我们先补充生成token过程，再查看获取用户信息流程。 生成token 简要步骤： 获取随机的UUID作为token token存入loginUser对象中 更新loginUser对象的登录信息、令牌有效期等 将loginUser存入redis中 使用jwt加密token并返回 // 创建令牌 public String createToken(LoginUser loginUser
若依框架讲解后端利用DefaultKaptcha生成验证码及校验
ProZuoy的博客
05-14 2358
若依框架之验证码生成与消炎
若依解析（一）登录认证流程
lovewangyihui的博客
11-28 873
JWT 与Spring Security 6.x
Ruo-Yi-plus.zip
05-08
6. **日志记录**：提供了完善的日志记录功能，便于追踪和分析系统运行状态，定位问题。 7. **API文档**：内置Swagger UI，自动生成RESTful API文档，方便开发者理解和使用接口。 8. **统一异常处理**：全局异常...
若依拓展开源项目
weixin_45765215的博客
09-30 2964
数据管理：配置系统用户的数据权限，如只能查看自己的数据，查看本部门的数据，查看所有数据。代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载。连接池监视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。用户管理：用户是系统操作者，该功能主要完成系统用户配置。菜单管理：配置系统菜单，操作权限，按钮权限标识等。
Spring Cloud视频教学
10-24
- **物联网应用**：设备管理、数据分析、安全监控等。 总结，Spring Cloud提供了一整套微服务解决方案，通过其核心组件和服务治理框架，可以帮助开发者轻松构建、部署和管理大规模分布式系统。无论是对于初创公司...
使用Cookie记录用户名和密码
03-19
NULL 博文链接：https://jiangzhenwei6.iteye.com/blog/734313
深入解析UUID及其应用
10-20 3021
原文地址:http://www.blogjava.net/feelyou/archive/2008/10/14/234320.html讨论UUID的定义、分类、应用及生成工具。什么是UUID？UUID是Universally Unique Identifier的缩写，它是在一定的范围内（从特定的名字空间到全球）唯一的机器生成的标识符。UUID具有以下涵义：经由一定的算法机器生成为了保证UUID的唯
在数据库录入词典数据时，如何自动生成uuid
intmainreturn的博客
07-25 1175
我是用的是idea自带的database加入数据的行数 比如，添加国家的时候，数据很多，uuid如何自动生成呢利用excel，在函数输入栏粘贴下面的函数表达式： 此时出现了一条uuid生成多条的时候，需要用到鼠标放到箭头位置，会出现+号，往下拖，就可以出现多条 我们将此列数据粘贴到数据库 就可以在数据库直接生成uuid啦，输好数据后右击点submit，才可以生效哦。创作不易，记得点赞哦...
Ruoyi若依前后端分离框架【若依登录详细过程】
ITxiaobaibai的博客
11-12 6140
Ruoyi项目登录全流程
RuoYi-Vue源码阅读(二）:登陆模块
云扬的博客
08-07 1331
本文主要介绍了RuoYi-Vue项目登录模块的代码实现，分成前端代码和后端代码两个部分来进行源码解读，通过本文可以对RuoYi-Vue项目的登录模块深入了解。
前端生成唯一id UUID
与世无争的小垃圾
09-18 4571
前提 前端需要一个唯一的ID 通用唯一识别码（英语：Universally Unique Identifier，简称UUID） 标题使用插件uuid 1.安装 npm install uuid --save 2.调用 import { v4 as uuidv4 } from 'uuid'; uuidv4(); 具体查看文档 https://www.npmjs.com/package/uuid/v/8.3.0 ...
若依（ruoyi）前后端分离版本集成微信小程序的一键登录功能
m0_64776123的博客
03-04 7848
若依（ruoyi）前后端分离版本集成微信小程序的一键登录功能
若依缓存使用浅析
qq_39007838的博客
12-15 5083
redis 缓存 若依
<!DOCTYPE html> <html class=""> <head> @(/head) <body class="theme-light"> <svg xmlns="http://www w3. org/2000/svg" xmlns:xlink="http://www. w3. org/199/xlink" style="position: absolute: width: 0: height: 0" id="_SVG_SPRITE_HODE_">@</svg> <noscript>@</noscript> <div id="app"> <div data-v-1387386 class="app-wrapper hideSidebar withoutAnimation mobile"> <!——> <div data-v-13877386 class="main-container"> <div data-v-13877386 class="fixed-header"> <div data-v-13877386 class="navbar theme-bgColor"> flx <div olass="navbar-left-menu flex alCen"> flx <div class="navbar-left-logo"></div> (ul role="menubar" class="navbar-left-menu el-menu-horizontal el-menu" style="background-color: rgb(255, 255, 255):") : :before <li role="menuitem" tabindex="0" class="el-menu-item navbar-left-menu-title is-active" style="color: rgb(0, 110, 255): border-bottom-color: rgb(0, 110, 255): background-color: rgb(255, 255,，255):">首页</li> <li role="menuitem" aria-haspopup="true" class="el-submenu" tabindex="0") <div class="el-submenu_title" style="border-bottom-color: transparent: color: rgb(51, 51, 51): background-color: rgb(255, 255, 255):"> <span class="navbar-left-menu-title"> eCRr管理</span> <i class="el-submenu_icon-arrow el-icon-arrow-down"></i> </div> </li> <(li role="menuite" aria-haspopup="true" class="el-submenu" tabindex="d"></li> (li role="menui tem" aria-haspopup="true" class="el-submenu" tabindex="0"></li> ::after </ul> </div> <div class="navbar-right">@</div> tlx) <div class=el-dialogwrapper" style=display: none:"></div> </div> </div> <section data-v-078753dd data-v-13877386 class="app-main theme-pagebgColor">@</section> </div> ::after </div> <div data-v-d04b590c class=DeactivateTip"></div> <div data--42d55f19 class=loginTimeout"></div> </div> (!— built files will be auto injected —> <soript type=text/javaseript" src="/static/is/chunk-vendors. is"></seript> <sript type="text/javascript" sre="/static/is/app is"></sceript> <div cla="elmenu-horizontal" xplacement=*bottom-start" style=posi
最新发布
04-12
### HTML代码结构与组件解析 #### Navbar 组件分析 `Navbar.vue` 文件定义了一个导航栏组件，其主要功能是展示右上角菜单项。以下是对其 `class` 和结构的具体解析： 1. **根容器** - `<div class="right-menu">` 是整个导航栏右侧菜单的外层容器[^1]。 - `.right-menu` 类名用于样式控制，通常会设置浮动或其他布局属性。 2. **条件渲染模板** - `<template v-if="device !== 'mobile'">` 表示当设备不是移动端时显示的内容。 - 这部分逻辑通过 Vue 的条件渲染指令实现动态加载不同的 UI 元素。 3. **具体子组件** - 注释掉的部分展示了多个可能的功能模块： - 搜索框 (`<search>`)[^1] - Git 地址提示 (`<ruo-yi-git>`) 及文档地址提示 (`<ruo-yi-doc>`) - 屏幕全屏切换按钮 (`<screenfull>`) - 布局大小选择器 (`<size-select>`) - 所有这些子组件都带有特定类名（如 `.hover-effect`），以便应用统一的交互效果。 4. **头像修改** - 头像的相关配置可以通过调整对应的数据绑定来完成，默认情况下可能是从全局状态管理工具（如 Vuex）获取用户信息并动态更新到视图中[^1]。 --- #### el-menu 菜单组件分析 基于 element-ui 提供的 `el-menu` 实现自定义菜单封装[^2]，以下是对其实现方式及其数据格式的深入解析： 1. **基础结构** - `<el-menu>` 定义了整体菜单区域，支持多种参数配置，例如主题颜色、展开模式等。 - 子节点可以嵌套多级菜单项，每项由 `<el-submenu>` 或 `<el-menu-item>` 构成。 2. **数据驱动** - 数据源采用树形结构表示目录关系，字段含义如下： - `catalogCode`: 目录唯一标识符。 - `catalogName`: 显示的文字名称。 - `childCatalogs`: 下属子目录数组。 ```javascript const menuData = [ { catalogCode: "001", catalogName: "顶级分类", childCatalogs: [ { catalogCode: "008", catalogName: "明星", refImgNum: 1 }, { catalogCode: "009", catalogName: "电影", refImgNum: 5 } ] } ]; ``` 3. **递归渲染** - 使用 Vue 的递归组件技术处理无限层级的菜单结构[^2]。 ```vue <template> <el-menu :default-active="activeIndex"> <menu-item v-for="(item, index) in menuList" :key="index" :data="item"></menu-item> </el-menu> </template> <script> export default { components: { MenuItem: () => import('./MenuItem') // 自定义递归组件 }, data() { return { activeIndex: '', menuList: [] // 动态加载菜单数据 }; } }; </script> ``` 4. **扩展功能** - 支持鼠标悬停事件触发下拉菜单。 - 配合路由跳转功能，点击菜单项可自动导航至指定页面。 --- ### 总结 通过对上述两部分内容的剖析可知： - `Navbar.vue` 主要负责顶部导航条的设计，利用 Vue 条件渲染和插槽机制灵活定制不同场景下的界面表现。 - `el-menu` 利用 tree-like 数据模型构建复杂层次化的侧边栏菜单体系，并借助递归算法简化开发流程[^2]。 ```html <!-- 示例：完整的 el-menu 结构 --> <el-menu mode="vertical" unique-opened router> <el-submenu index="1"> <template slot="title"><span>顶级分类</span></template> <el-menu-item-group> <el-menu-item index="/star">明星</el-menu-item> <el-menu-item index="/movie">电影</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值