若依使用及源码解析(前后端分离版)

news2024/11/19 1:53:58

部署环境

JDK >= 1.8

MYSQL >= 5.7

Maven >= 3.0

Node >= 12

Redis >= 3

运行若依项目

下载若依源码

 若依官网

若依项目源码(前后端分离)

运行后端项目 

ruoyi-ui就是vue项目(这里使用vscode打开) 

 整体用idea打开

1.配置数据库(sql提供sql文件中的sql脚本配置)

创建数据库 ruoyi_vue数据库并导入quartz.sql脚本和ry_20230706.sql脚本

结果为下:

 2.在工程中配置数据源(在ruoyi-admin中的配置文件中配置)

3.配置redis

4.通过启动类RuoYiApplication进行启动。 

 后端启动成功。

启动前端项目(ruoyi-ui) 

 1.打开前端项目

2.打开终端

#导入所需要的依赖
npm install 

#使用下面指令解决下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

#启动前端项目
npm run dev

 前端启动结果为下:

用户名:admin,密码: admin123

进入主页

 验证码实现

实现的思路:后端会随机生成一个固定的表达式比如(2*2=?@4),通过字符串符分割的方式,获得对应的题目和答案,后端会通过该题目生成对应的验证码图, 并将答案存放到redis中,后端把生成好的图片和redis对应的key传给前端。前端通过调用后端api传入用户输入值和之前的key值,最终这个api查询redis,判断redis中的value是否和用户输入的值一样,最终实现验证码。

前端的实现步骤

1.在页面初始化时调用自定义方法 getCode

调用该方法后会获取到后端生成的图片 img 和对应的key,这里使用uuid表示。

 自定义的getCodeImage的方法为下

在该方法中调用了自定义方法request,该方法就是使用axios实现ajax。

 在该request.js中设置的了前端请求的共部分 VUE_APP_BASE_API, 这里该值为:

 此时表示开发环境,我们后续可以根据需求设置为上线环境。

 上线环境的配置为下:

因为Request方法中设置了BaseURL所以对应的getCodeImg的请求路径为下:

我们通过观察可以发现前端地址是 localhost:80, 而我们的后端接口却是localhost:8080,存在跨域的问题,这种跨域问题前端和后端都有方法解决,这里通过前端解决此问题。

前端通过反向代理的方法解决,使用vue自带的反向代理服务器。

其中在进行反向代理的时候会将将/dev-api重写成空,如果将localhost:80代理成localhost:8080,最终实现反向代理。

 最终前端实现验证码的效果。

后端的实现步骤

 Controlle层的实现方法为下:

判断项目是否开启验证,项目是支持不开启验证的。

生成一个vo对象,用于最后返回给前端,这里的vo对象就是自定义的AjaxResult。

 生成对应的uuid用于作为redis中的key。

通过自定义方法createText生成题目和答案拼接的字符串,通过分割字符,获得题目和答案。

生成的表达式效果为下: 

通过createImage将题目生成对应的图片。

 将key和对应的答案存放到redis中。

将生成的图片以流的形式也就是这里的os,最终通过流的形式返回给前端, uuid和图片都封装到ajaxResult中,最终将这个vo返回给前端。

完成验证码。

登录实现

调用service层的login

 验证码校验

通过uuid从redis中获取对应验证码的答案,获取后就将对应的键值对从redis中删除,判断用户输入的验证码的有效性,错误就返回异常。

判断账号和密码的有效性 

 只要出现错误就会通过异步的方式记录日志到数据库中的sys_logininfor中

 sys_logininfor表为下:

 使用springsecurity设置权限

获取当前用户的登录信息,将该用户信息更新到数据库sys_user中 

updateUserProfile就是修改数据库表中对应的用户信息。

 sys_user表为下:

使用JWT生成对应的token令牌。

 使用setUserAgent方法获取loginUser的完整信息。

使用refreshToken方法设置loginUser的过期时间(默认是30分钟),在前端用不到,主要是为了做备份。

 并将loginUser的信息持久化到redis中,设置其的有效时间。

生成JWT令牌

 最后会将生成好的token返回给前端。

在前端的login中

 会将获得JWT令牌设置为前端的token,也就是存到cookie中,最终完成登录。

获取用户角色和权限

getInfo(将最终的数据存在vueX中)

在我们进行登录操作以后,我们可以观察到发送了两个请求。

1.前端实现

因为getInfo是获取用户的信息,所以为了保证正常的使用,进入每个界面都会调用getInfo,设置在全局路由 promission.js中。

 router.beforeEach方法的作用就是在做每次路由前都会执行其中的内容。(这里就是每次都会执行getInfo和getRoutes)

在GetInfo方法中调用getInfo方法,最终返回给前端当前的用户数据,将用户数据存储在全局存储中(这里会存储用户的角色,权限,名字,头像 ,此处为该getInfo实现的核心)

在该方法中的getInfo方法的实现为下:

 就是调用后端的getInfo接口

 2.后端实现

 获取用户的身份信息,如果不是admin就到数据库中从查询。

因为是多对多的关系,所以将sys_role,sys_user,sys_user_role三表联合起来查询。

最终查出用户的身份,并返回对应的身份。

获取用户的权限 ,如果用户是admin的话就直接返回*.*.*。

 如果不是就到数据库查询,通过身份的判断,关联sys_menu和sys_role两表返回该用户有权限访问的菜单。

最终将数据返回给前端,完成getInfo。

getRouters

1.前端实现 

 在界面加载时就会调用方法GenerateRoutes

在GenerateRoutes中会调用 getRouters方法,调用后端对用的getRouters接口

 2.后端实现

在数据库中对应的menu表中设置了父id用于递归做树形菜单。

通过userId查询中间表sys_role_menu,查询出所有属于该角色的menu。

通过对应的菜单表通过递归的方式将其组装起来成为以含有完整子菜单的菜单表。

通过遍历根据parentId查询所有主节点,通过方法recursionFn查询各个主节点对应的子节点,并将其组装起来。

从通过userId查询到总菜单列表中查询出该节点对应的所有菜单,将这些菜单全部设置为当前节点的子菜单,设置完毕之后,通过循环递归的方式去访问各个子节点的对应的子菜单并对其进行组装,以此类推,那些没有子菜单的菜单就不会继续递归,最终完成菜单的组装。

最终返回组装好的菜单列表返回给前端,完成getRouters。

首页数据加载

主页分析 

进入主页

在登录时会执行handleLogin方法会通过路由到主界面,该方法会路由到"/"

 对应"/"的路由为下:

 会去加载主组件Layout,还会加载子组件/views/index.vue

 因为Layout组件没有特定指定对应名字的vue界面,所以默认就会跳转到该组件文件夹下的index.vue

在该index.vue中sidebar就是自定义的侧边栏组件,app-mian就是主界面的自定义组件。

 在sidebar组件中就是去生成对应的树形菜单。

我们可以发现在我们进入主页后,直接加载主页的信息,而不是别的菜单信息。

 在路由中我们做了重定向,在地址是"/"时会直接重定向到 /views/index.vue界面。

 用户管理界面分析

在我们点击用户管理界面时对应的路径为下: 

我们就可以找到对应的index.vue文件

 在加载该界面时就会去调用方法getList和getDeptTree。

1.getList 

getList获取的数据由于展示页面中的用户信息,getDeptTree获取的数据由于生成页面中的部门树形图。

getList通过调用listUser方法进行实现,这里queryParams就是用户在界面中设置的限制条件。

 params就是传入的搜索的限制条件

发送的请求为下: 

 @PreAuthorize注解就是判断当前用户身份有权限调用该接口,这里是管理员角色,权限就是

*:*:*,参数就是传入的限制条件。

@DataScope(deptAlias = "d, userAlias = "u"),此注解用于设置别名。 

 2.getDeptTree

deptTreeSelect方法

发送的请求为下: 

 后端的Controller中

也是使用和菜单组装的递归方式将部门进行组装,最终返回给前端。(就是广度优先搜索)

 用户数据分页

在用户管理中用户数据存在分页的步骤

在发送获取用户数据的请求时就会携带对应的分页参数

 分页设置步骤就在getDataTable方法中

在方法startPage中就会设置分页

该方法使用mybatis实现分页操作。此时我们会有一个疑问,它是怎么获取分页参数的呢?(我们在controller层中可没有就是对应的分页参数)

setReasonable(reasonable)的作用就是设置页面逻辑判断。(如果页面为负数,字母,那么页面就会自动设置为1,保证逻辑正确)

在buildPageRequest中通过 ServletUtils工具类获取请求对应的路径参数。

通过对应的名字获取对应的路径参数。 

 在我们这给请求中的路径参数就是pageNum和pageSize。

 获取到对应的分页参数,使用pageHelper生成对应的page结果。(mybatis的pagehelper会通过拦截器在我们查询对应的用户数据时自动进行分页),mybtis的pageHelper只需要我们配置其参数也就是配置当前页码和总页数,配置完后在我们查询数据的时候就会自动实现分页效果。

 将最终分页的总数据,总个数,封装成对象返回给前端。

前端会获取到用户的数据列表和用户的个数。

最终完成分页。

添加用户

添加用户前的数据加载

在点击新增按钮时,会调用方法handleAdd方法。

调用后端接口为下:

 获取用户的基本信息,因为这里是新增操作且身份是admin,所以就返回对应的身份列表,所有职位列表。(这里没有返回部门列表,因为需要显示所有恶的部门,之前已经查询过了,所以我们直接使用之前查到的部门列表)最终实现数据加载。

添加用户

在新增页面中,填写数据完成后,调用方法submitform。 

调用后端接口

 校验基本的信息,设置被新建的时间,对密码进行加密。

最终完成用户的添加。

修改用户

在点击修改的时候,会调用handleUpdate,该方法会调用后端的接口 

该后端接口就会通过userId返回对应的数据。

 在设置好修改修改的新内容后,点击修改就会调用后端的以下方法edit:

其会先判断该用户是否为超级管理员,如果是就不能进行修改,判断当前用户是否有访问权限,判断基本的输入,设置修改时间,对新密码进行加密 。

在updateUser中其步骤就是先删除对应的该用户旧信息,在重新添加该用户的新信息。

最终完成修改。

删除用户

点击删除按钮就都会调用handleDelete函数 

handleDelete方法为下: 

 通过delUser会调用后端接口

 如果要删除的用户就是当前用户的话就无法删除,最终实现的删除也是逻辑删除。(并非真正的删除)

代码自动生成

在改该项目的数据库中创建对应的新表 

 在代码生成中选择导入表,选中test表。

点击编辑按钮设置基本信息。(每个属性的注释,生成的包名及路径) 

因为是基于若依项目,所以设置对应的上级菜单。 

设置对应的上级菜单。

点击生成代码, 最终会生成一个压缩包,解压进行使用。

1.后端修改部分 

将对应的代码复制到前后端即可。 

 直接选中java和resources将其复制到项目的main中(直接心中 idea中main的文件夹粘贴即可)

 

 2.前端修改部分

选中api和views直接复制到ruoyi-ui项目中(选中src进行粘贴,也就是粘贴到根路径) 

 

  

执行SQL(导入新菜单在数据库中的信息)

重新运行进行测试(后端点击构建项目按钮),测试结果为下:

最终完成代码的自动生成。

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

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

相关文章

千兆以太网传输层 UDP 协议原理与 FPGA 实现

文章目录 前言心得体会一、UDP 协议介绍二、UDP 数据报格式三、UDP 数据发送测试四、Verilog实现UDP 数据发送1、IP 头部检验 IPchecksun 的计算2、以太网报文的校验字段 FCS 的计算3、以太网报文发送模块实现五、以太网数据发送测试六、仿真代码七、仿真波形展示八、上板测试九…

婚礼策划展示小程序制作全程解析

随着互联网的发展,小程序已成为各行各业所钟爱的一种数字化工具。对于婚礼策划师来说,一款专为自己业务打造的小程序能够更好地展示婚礼策划方案,提升服务质量,加强与客户的沟通。以下就是制作婚礼策划展示小程序的全程解析。 一、…

【Linux网络编程】gdb调试技巧

这篇博客主要要记录一下自己在Linux操作系统Ubuntu下使用gbd调试程序的一些指令,以及使用过程中的一些心得。 使用方法 可以使用如下代码 gcc -g test.c -o test 或者 gcc test.c -o test ​ -g的选项最好添加,如果不添加,l指令无法被识别 …

机试(2017 cs se)

2017计算机系夏令营 题解参考: 2017 华东师范计算机系暑期夏令营机考 A. 不等式 Problem #3304 - ECNU Online Judge 有点像贪心算法 选一个刚刚好在条件范围里的b[i]作为候选,【这个“刚刚好”是指选一个符合这个条件的最极限的值】 代码 #in…

力扣669 补9.16

最近大三上四天有早八,真的是受不了了啊,欧嗨呦,早上困如狗,然后,下午困如狗,然后晚上困如狗,尤其我最近在晚上7点到10点这个时间段看力扣,看得我昏昏欲睡,不自觉就睡了1…

关于Python安装Scrapy库的常见报错解决

目录 1、关于pip3命令的报错 2、执行scrapy报错(Python3下的OpenSSL模块出错) 3、卸载pyopenssl时报错 由于Scrapy该库在Windows下会存在兼容问题,下面介绍的是在Linux系统进行安装。 1、关于pip3命令的报错 报错代码: error…

redis漏洞修复:(CNVD-2019-21763)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、漏洞内容二、镜像准备1.确认镜像版本2.下载镜像 三、配置文件准备1.获取配置文件2.修改配置文件 四、启动redis容器五、修改iptables文件总结 前言 漏扫发…

Java JVM分析利器JProfiler 结合IDEA使用详细教程

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、JProfiler是什么?二、我的环境三、安装步骤1.Idea安装JProfiler插件1.下载程序的安装包 四、启动 前言 对于我们Java程序员而言,肯…

博通强迫三星签不平等长约,被韩处罚1亿元 | 百能云芯

近日,博通(Broadcom)这家国际知名的半导体公司因其市场主导地位的滥用,遭到了韩国公平贸易委员会(FTC)的严厉制裁,罚款高达191亿韩元,约合人民币1.04亿元。这一惩罚背后的故事揭示了…

用AVR128单片机的音乐门铃

一、系统方案 1、使用按键控制蜂鸣器模拟发出“叮咚”的门铃声。 2、“叮”声对应声音频率714Hz,“咚”对应声音频率500Hz,这两种频率由ATmega128的定时器生成,定时器使用的工作模式自定,处理器使用内部4M时钟。“叮”声持续时间300ms&#x…

Linux新手教程||Linux vi/vim

所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在。 但是目前我们使用比较多的是 vim 编辑器。 vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性,方便程序设计。 什么是 vim? Vim是…

链表oj3(Leetcode)——相交链表;环形链表

一,相交链表 相交链表(Leetcode) 1.1分析 看到这个我们首先想到的就是一个一个比较他们的值有相等的就是交点,但是如果a1和b2的值就相等呢?所以这个思路不行,第二种就是依次比较链表,但是这…

xdebug3开启profile和trace

【xdebug开启profiler】 https://xdebug.org/docs/profiler http://www.xdebug.org.cn/docs/profiler 1、php.ini添加下面配置然后重启php容器: xdebug.modeprofile ;这个目录保存profile和trace文件 xdebug.output_dir /var/tmp/xdebugPHP日志提示报错&#xff1a…

ultraEdit正则匹配多行(xml用)

在ultraEdit中&#xff0c;我想选取<channel到</channel>之间的多行&#xff08;进行删除&#xff09;。在perl模式下&#xff0c;命令为“<channel[\s\S]?</channel>”。下面是xml文件&#xff1a; <!--This XML file does not appear to have any sty…

版本控制系统git:一文了解git,以及它在生活中的应用,网站维护git代码,图导,自动化部署代码

目录 1.Git是什么 2.git在生活中的应用 2.1git自动化部署代码 3.网站维护git代码 3.1如何在Git代码托管平台等上创建一个仓库 3.2相关文章 4.ruby实现基础git 4.1.Git add 4.2 Git commit 4.3 Git log 1.Git是什么 Git是一个版本控制系统&#xff0c;它可以追踪文件的…

C++11的一些新特性|线程库|包装器|lambda表达式

文章目录 目录 文章目录 一、可变参数模板 1.可变参数模板 2.STL容器中emplace相关函数接口: 二、lambda表达式 1.c98中的一个例子 2.lambda表达式 三、包装器 1.fuction包装器 四、线程库 1.thread类简单介绍 2.并发和并行的区别 3.线程函数参数 4.原子性操作库…

关于Java多线程的那些事

多线程 多线程1. 关于多线程的理解1.1 进程和线程1.2 并行和并发1.3 线程调度 2. 创建多线程的方式创建线程有哪几种方式&#xff1f;2.1 通过继承Thread类来创建并启动线程的步骤如下&#xff1a;2.2 通过实现Runnable接口来创建并启动线程的步骤如下&#xff1a;2.3 通过实现…

充电江湖暗战,充电运营商为什么忌惮平台崛起?

配图来自Canva可画 话说&#xff1a;“天下大势&#xff0c;分久必合&#xff0c;合久必分”&#xff0c;日前充电运营商与第三方充电平台再次倾情上演分手戏码。 8月中旬&#xff0c;新能源汽车充电运营服务商特来电、星星充电与云快充&#xff0c;毫无预兆的下架第三方充电…

Qt创建线程(线程池)

1.线程池可以创建线程统一的管理线程&#xff08;统一创建、释放线程&#xff09; 2.使用线程池方法实现点击开始按钮生成10000个随机数&#xff0c;然后分别使用冒泡排序和快速排序排序这10000个随机数&#xff0c;最后在窗口显示排序后的数字&#xff1a; mainwindow.h文件…

CATIA | 如何创建曲面点云数据并保存

问题描述 CATIA中创建的曲面模型&#xff0c;如何转换成可读的点云数据&#xff08;点云坐标数据&#xff09;输出保存&#xff1b; 操作流程&#xff08;示例&#xff09; 1、打开软件 2、创建三维曲面模型 &#xff08;具体步骤省略&#xff09; 3、文件另存为“.stl” …