该笔记基于黑马程序员课程黑马程序员Java最新AI+若依框架项目开发新方案视频教程,基于RuoYi-Vue3前后端分离版本,从前端到后端再到AI智能化应用全通关_哔哩哔哩_bilibili
参考若依官方文档:介绍 | RuoYi
若依项目环境配置自行参考其他教程,该笔记主要用于记录学习,方便查找,后期还会结合项目继续更新。
一、环境问题
1.前提准备
若依前后端分离版本源代码下载:RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本
上边代码前端使用的是Vue2,已停止维护,所以前端代码改为Vue3,从拓展地址找:
RuoYi-Vue3: 🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
技术选型:Spring Boot,Spring Security, MyBatis, Jwt, Vue3, Element-plus
软件环境:JDK>=1.8, Mysql>=5.7.0, Redis>=3.0, Maven>=3.0, Node>=12
2.后端代码下载启动
通过idea的vcs直接拉下来源代码
在配置好环境后,启动redis(建议通过设置将redis开机自启动以后就不用管了),连接mysql(新项目第一次连接,后面自动连接,每一步操作在下面)之后就可以运行RuoYiApplication.java文件,后端就启动了,成功启动会出现这个标志。
3.Mysql数据库连接
第一步打开navicat,或者你使用的数据库软件,新建一个数据库存储新项目的数据,我就以猪舍平台为例。如果不了解字符集和排序规则直接选择utf8mb4字符集(兼容utf8并且更多),排序规则utf8mb4_general_ci即可。
在navicat的数据库中运行若依自带的两个sql文件
运行之后刷新界面,一共会创建30个表格(navicat中可以看到每张表格的注释)
再然后通过idea连接上mysql
默认用户名是root,使用3306端口,密码自己设置的。
最后在ruoyi-admin文件夹下修改application-druid.yaml文件,修改用户名和密码,以及数据库的名称。
4.Redis数据库启动
这个使用6379端口,一般没问题,密码默认就是空的,有密码的输入即可
5.前端代码启动
官方的代码ruoyi-ui文件夹是前端Vue2的代码,可以正常使用。我使用的是Vue3,可以直接把原来文件的ruoyi-ui文件夹删掉,没有影响。从开始的第二个链接下载代码解压后,使用前端编写工具打开,我使用的是vscode,第一次在终端输入npm install去下载第三方依赖
下载完成后输入npm run dev即可运行,打开若依界面。
二、若依功能
1、系统管理(实用)
1.权限控制-RBAC
若依内置了强大的权限控制系统,采用了RBAC(基于角色的访问控制)的访问控制模型,通过角色来分配和管理用户的菜单权限。实际上是通过部门和职位来找到对应的角色,进而分配菜单权限。所以权限控制一共使用了9张表存储信息。
我们需要做的就三步:1.创建菜单 2.创建角色,并分配权限 3.创建用户,并关联角色
2.数据字典
若依内置的数据字典,用于维护系统中常见的静态数据。数据字典一共使用了两张表,第一张是字典类型表,存储了字典编号和名字,同时通过字典类型来进行主外键链接字典数据表,字典数据表中存储了字典的多个取值,编号和标签。
注意:数据字典一定是静态数据,这样维护起来更加方便。增加数据字典只需要添加字典类型和数据,此时使用该数据字典的字段显示类型改为下拉框,字典类型改为该字典即可。同时注意一个问题,如果选择使用了这个数据字典的值,在数据库中存储的不是这个字典的值,而是这个字典值的编号,这样更加节省空间。
3.参数设置
可以设置主题颜色,密码,验证码开启关闭,注册功能,黑名单等,直接在菜单中修改即可(也可以打开数据库修改表格)。
4.通知公告
通知公告功能可以直接添加,存储在数据库中,但是如何展示需要二次开发。数据库中使用了longblob数据类型,可以直接存储图片,文本等信息。
5.日志管理
日志管理分为操作日志和登录日志,存储在数据库中,方便找到操作人员,进行回溯。若依提供了一键清除功能,可以结合定时器进行定时清除。
2、系统监控(了解)
1.在线用户与缓存列表
系统监控下的在线用户功能可以查看当前登录用户信息,这些用户信息存储在Redis缓存中,具体的缓存信息可以看缓存列表功能。
2.缓存监控
可以看到使用的基本信息和内存消耗。
3.服务监控
看到运行服务器的设置,包括CPU,内存这些。因为若依项目现在部署在我的电脑上,信息就是我的电脑信息,当部署到阿里云或者其他云服务器上就是购买的服务器配置信息。
4.数据监控
数据监控功能需要登录,账号密码在配置文件中
可以设置最大连接数,进行SQL监控优化数据库,还有SQL防火墙等功能有效防止了攻击。
5.定时任务
若依的定时任务不同与以往的硬编码,修改定时任务后无需重启后端。创建任务需要三步:第一是创建任务类,注意这个必须放在ruoyi-quartz模块下的task文件夹下。第二是:添加任务规则。第三是:启动任务即可。但是需要注意添加任务规则的时候有两种调用方法都可以实现,但是执行策略和是否并发要考虑实际情况。执行策略处理的是如果一个定时任务前面的任务没有执行完,但是已经该这个任务执行了,此时采取的策略。立即执行是将前面未完成的任务执行完,执行一次是只执行前一个任务,放弃执行就是从这个任务开始执行,一般没问题就选择放弃执行即可。是否并发是说两个任务能否同时进行,一般是允许的,但是比如关闭订单和退款这种有先后顺序的任务就不可以并发进行。
3.系统工具(重点)
1.表单构建
通过图形化界面和拖拽就可以构建表单,虽然代码生成可以生成前端代码,但是一旦表单涉及多张表提交,或者要表单更漂亮,代码生成的前端页面就不行了。注意表单构建不仅仅若依提供,还有很多平台都有这个服务,可以自己找一下。
下面案例是创建一个课程页面
导出时可以选择页面导出,或者弹窗导出两种,我们一般是作为界面导出的,选择页面导出即可。导出后放到前端工程views下,记住相对路径,创建动态菜单即可。
2.代码生成
只需要导入数据库文件,就可以选择生成三种类型的表格,包括单表,树表,主子表。其中树表是指有从属关系的表结构,如若依自带的部门表,第一层是若依科技,第二层是两个公司,第三层是部门。对应填写树编码字段:dept_id:部门id 树父编码字段: parent_id :父部门id 树名称字段: dept_name :部门名称
3.系统接口
集成了Swagger工具,根据编写controller代码自动生成API同步在线文档,并提供Web界面进行接口调用和测试。
为了进行授权操作,需要拿到用户的令牌,若依存储在cookie中。打开浏览器开发者工具,找到应用中的cookie,第一个admin_Token的value值即可。
三、项目结构
1、后端结构
项目依赖关系:
ruoyi-admin:作为项目的启动入口,web中存储通用功能的Controller包,存放有后台登录相关的,权限控制相关的,数据字典相关的controller类,提供了两种方式的项目启动,第一种是RuoYiApplication是基于SpringBoot,内置Tomcat直接运行即可,第二种是RuoYiServletlnitializer,将SpringBoot打包,使用外置的threat容器运行项目。
项目的配置文件主要存放在ruoyi-admin的resources中
ruoyi-common:通用工具
ruoyi-framework:框架核心
ruoyi-generator和ruoyi-quartz是独立出来的两个模块,分别用于代码生成和定时任务,如果不使用这两个功能,删除也没有影响。
ruoyi-system:系统模块
1、权限注解
在生成的controller文件中有一些注解,注解主要就是给机器阅读的,第二个是生成日志相关的注解。重点来解释第一个,@PreAuthorize注解是Spring Security框架中用来做权限检查的,它在运行方法前先验证权限,权限够就放行,不够就拦截。
2、controller类
首先生成的所有controller类都默认继承了BaseController,这个文件在ruoyi-common下
所以来看一下这个文件提供的方法,这个文件也调用了其他文件,想看最初的实现可以按住ctrl,点击想要了解的内容,就会自动跳转到源文件。
2、前端结构
基本的开发Vue3中只需要使用src下面的api和views文件夹。
node_modules文件夹存放了项目的所有依赖包,是npm自动生成管理。
其中public文件夹,是静态文件目录,里面的文件不会被Webpack处理,所以一般我会把图片,图标,以及数据大屏放到这里(数据大屏用html,css,js写的),只需要在views下写一个vue文件指明html文件路径即可。
其余静态资源需要用到src下面的assets文件夹,例如使用的svg图标或者logo,登录界面背景图这些。
配置文件很少去动,比如修改端口号或者依赖出现问题才去修改,修改之前先备份。
如果需要修改配置文件或者使用组件自己再学vue3和elementplus。
3、数据库表结构
运行两个sql文件后会产生30张表格,其中19张时ruoyi相关的,其他11张表是定时任务Quartz集成相关的无需了解。
四、项目实战(经验总结)
1、端口问题无法启动后端
如果安装了mutisim或者其他软件占用了8080端口,更换成8081端口或者其他空闲端口即可,但是需要修改两个位置端口号:后端更改application.yml文件里面的端口号,前端更改vue.config.js文件里面的端口号。
2、系统500异常报错
这个一般都是因为idea把后端代码关了,前端页面找不到服务器导致的。只需要重启后端代码,刷新前端页面一般就可以解决。
3、若依项目修改名字
有个工具可以直接全部修改了名字,自己一个个修改不仅麻烦,还容易出错。链接为:常用工具: 收集常用工具
4、注册功能
第一步修改系统管理的参数设置里面的注册功能,开启注册权限。第二步在前端代码中找到login.vue文件,并在登录界面展示注册按钮。
修改这个标题在views文件夹下的register.vue文件中:
5、页面设置
首先可以点击头像旁边的小三角,里面有布局设置,可以更改侧边栏的颜色,主题颜色等,在参数设置里也可以修改。
更改页面标题:页面标题在主文件夹下的.env.development文件中,建议使用全局查找,把所有标题全部换成一致的:
页面图标在public文件夹下,可以直接更换图标1,命名不变。或者更换名字,修改index.html文件中的引用。
更改侧边栏的图标,在assets下,修改图标大小格式的文件在layout文件夹下。
背景图在前端代码的src下面的asstes文件夹下images文件夹下的login-background图片(我这是猪舍项目)
同时可以打开login.vue文件进行修改美化。
去除源码地址和文档地址,这个需要打开前端源码注释掉就可以
6、ICO图标资源
阿里提供了有一个非常好的图标库,可以从这里免费下载,非常好用 iconfont-阿里巴巴矢量图标库
当然有时候需要用我们自己的图标,这有个在线转的工具 在线制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net
7、新增业务模块
第一步新建模块,我是对生猪进行监控,所以命名为pig-monitor
第二步是父工程版本锁定,修改主文件夹下的pom.xml文件
第三步是入口文件添加依赖,修改admin文件夹下的pom.xml文件
8、数据大屏配置
首先登录界面,在菜单管理中新建一个数据大屏,注意组件路径默认在ruoyi-ui的src的views下,我将其存在system中,这个文件一定是vue代码,在vue代码中配置html文件的路径,在html文件中配置css和js路径。html文件放在public下,新建一个static文件夹。