若依前后端分离版本(总结)

该笔记基于黑马程序员课程黑马程序员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文件夹。

<think>嗯,用户想知道若依前后端分离版本中Available authorizations的实现方案。首先,我需要回忆一下若依框架的结构。若依前后端分离版通常前端用Vue,后端用Spring Boot,权限管理可能用Spring Security或Shiro。 Available authorizations一般出现在Swagger或Knife4j的API文档中,用来做接口授权。用户提到引用[1]里提到的自定义装饰器类做权限验证,可能涉及CBV的权限控制。所以,可能的实现步骤包括:1. 集成Swagger或Knife4j;2. 配置安全框架的权限信息;3. 自定义授权信息的展示。 需要确认如何在后端将权限信息暴露给API文档。例如,在Swagger的配置类中添加全局参数,或者通过注解在每个接口上说明需要的权限。同时,权限验证可能使用自定义的注解或拦截器,比如@PreAuthorize,或者装饰器类来检查用户权限。 另外,用户引用的内容提到Knife4j美化了API文档,所以可能需要在后端配置Knife4j的相关依赖,并确保权限信息正确传递到前端。权限信息可能存储在Spring Security的权限模型中,如基于角色的访问控制(RBAC),通过@RequiresPermissions注解来标记需要的权限。 可能还需要考虑如何从后端动态获取权限列表,并在前端显示Available authorizations的下拉菜单。这可能需要后端提供一个接口返回当前用户可用的权限列表,前端调用该接口并渲染到Swagger UI中。 总结步骤:集成API文档工具,配置安全框架的权限注解,自定义装饰器或拦截器进行权限验证,前后端协作展示可用授权。同时,需要参考若依官方文档,确认是否有现成的实现方式,或者需要自行扩展。</think>关于若依前后端分离版本中"Available authorizations"的实现方案,主要涉及接口权限管理与API文档集成两个核心模块。以下是具体实现步骤分析: ### 一、权限验证基础框架 1. **安全框架集成**:采用Spring Security + JWT实现访问控制 ```java @Configuration @EnableGlobalMethodSecurity(prePostEnabled = true) public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/login").anonymous() .anyRequest().authenticated() .and().apply(securityConfigurationAdapter); // 自定义安全配置[^1] } } ``` 2. **自定义权限注解**:创建权限校验装饰器 ```python @Retention(RetentionPolicy.RUNTIME) @Target(ElementType.METHOD) public @interface RequiresPermissions { String[] value(); } ``` ### 二、Swagger/Knife4j集成方案 1. **API文档配置**(引用Knife4j优化方案[^2]) ```java @Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .securitySchemes(Collections.singletonList(apiKey())) .securityContexts(Collections.singletonList(securityContext())); } private ApiKey apiKey() { return new ApiKey("Authorization", "Authorization", "header"); } ``` ### 三、Available Authorizations实现 1. **动态权限注入**:通过实现OpenApiCustomiser接口 ```java @Component public class AuthOpenApiCustomizer implements OpenApiCustomiser { @Override public void customise(OpenAPI openApi) { openApi.getComponents() .addSecuritySchemes("BearerAuth", new SecurityScheme().type(SecurityScheme.Type.HTTP) .scheme("bearer").bearerFormat("JWT")); } } ``` 2. **前端权限展示**:基于Vue的动态渲染方案 ```javascript // 在api-docs.js中注入权限选项 global.ui.authActions = { "BearerAuth": { name: 'JWT Auth', values: () => { return localStorage.getItem('access_token') || '' } } } ``` ### 四、典型应用场景 1. 接口级权限控制:`@PreAuthorize("@ss.hasPermi('system:user:list')")` 2. 数据权限过滤:通过AOP实现数据范围过滤 3. 按钮级权限控制:前端根据权限标识`v-hasPermi="['system:user:edit']"`动态渲染
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值