若依 RouYi-Vue(Spring Boot + Vue)笔记

注意:本笔记不讲细节

若以的搭建

搭建环境:JDK(11)   MySQL(8)   Redis(5)   Maven(3.6)    Node 16(Vue3)

官方地址:https://gitee.com/y_project/RuoYi-Vue

扩展地址:https://gitee.com/ys-gitee/RuoYi-Vue3

搭建后端项目

  1. Git克隆并且初始化项目 :创建项目,选择从版本控制获取然后在URL中写入若以脚手架地址 https://gitee.com/y_project/RuoYi-Vue.git然后点击克隆
  2. MySQL导入与配置:克隆初始化后打开src/main/resources/application-druid.yml配置文件,找到数据库配置修改usernam和password为自己的用户名和密码,也可以在url中修改要连接的数据库,然后打开数据库管理系统创建和url地址中名字相同的数据库,最后在该数据库中运行在项目中sql文件夹下面的两个sql脚本,运行之后应该是有30个表的,刷新检查一下表
  3. 启动Redis:启动Redis 注意:如果Redis设置了密码或者不是本地的那么需要在src/main/resources/application.yml文件夹下面配置一下redis相关的配置如密码和地址
  4. 运行后端项目:找到项目下src/main/java/com/ruoyi/RuoYiApplication.java启动类下的main方法启动项目,在控制台看到  若依启动成功的标志项目就启动成功了

搭建前端项目

  1. Git克隆并初始化项目 :在需要创建前端项目的路径下打开终端输入git clone https://github.com/wzs28150/RuoYi-Vue3.git命令来克隆前端脚手架
  2. 安装依赖 :然后继续在控制台输入cd RuoYi-Vue3进入前端项目然后继续输入npm install 来安装前端依赖
  3. 运行前端项目 :最后直接可以输入npm run dev来运行项目,也可以输入code . 来用Visual Studio Code来打开项目再运行默认会进入若依后台,这里就是来操作页面生成的

注意:如果前端进去之后在系统管理中的一些用户管理、菜单管理等等没有数据可能需要更改一下代理。找到vite.config.js文件下面的server代码出,修改target具体修改成什么要看后端的端口号等等。这里后端使用的是8080端口

若依功能讲解

系统管理

权限控制

菜单管理
  1. 添加菜单:在菜单管理中只学习添加菜单 

    上级菜单:表示菜单的位置也就是把菜单放在什么下面,主类目表示和首页是同级别的          菜单类型:菜单分为  目录菜单  页面菜单  按钮菜单 三种类型,目录菜单是实现展开二级菜                    单的并不会实现页面跳转  上图中菜单选项表示的就是页面菜单是来显示页面的                      菜单 按钮菜单就是弹出框                                                                                        显示排序:表示排序的顺序,值越小表示越靠前                                                                      路由地址:表示的是跳转方式的,这里是父子关系,随便写,只要是见名知意就行了

角色管理

  1. 权限字符:和后台权限控制有关的
  2. 角色顺序:控制在前面显示角色的顺序,值越低越靠前
  3. 菜单权限:用来控制这个角色可以访问那些菜单
用户管理

  1. 角色:用来分配权限的,表示该用户访问的是该角色可以访问的菜单
部门管理
岗位管理

数据字典

数据字典分为两部分,分别是字典类型 和 字典数据 可以把字典类型和字典数据理解为css中的属性和值

  1. 字典名称:这个属性的名称
  2. 字典类型:也就是一个标识而已,放在数据库中的标识,让该字典类型中的值比较容易对应上

添加类型之后可以点击字典类型,对该字典类型的值进行操作

  1. 数据标签:表示的是展示在页面的值
  2. 数据键值:表示的是存储在数据库中的值,用数字来存储
  3. 显示排序:是显示顺序的

其他功能

参数设置

对系统中的参数进行动态的维护

通知公告

促进组织内部的信息传递

日志管理

轻松追踪用户行为和系统运行状况

系统监控

监控相关功能

若依提供了一系列强大的监控工具,能够帮助开发者和运维快速了解应用程序的性能状态。

定时任务

  1. 创建任务类 : 找到后端项目的src/main/java/com/ruoyi/quartz/task目录下创建MyTask任务类
  2. 添加任务规则 调用方法:使用Bean注入的直接可以使用类名.方法名来调用方法
  3. 启动任务 : 点击启动按钮就可以启动了

系统工具

表单构建

  1. 制作表单 : 用习惯了就好了也会了,这里不写了,有谁会写怎么使用微信呢?对吧!
  2. 导出表单,并且复制到前端工程 : 导出表单有生成类型选项分为页面和弹窗两种,页面是单独展示的,弹窗是按钮 ,导出之后是vue组件,把他放在course\course下面就可以了。
  3. 创建动态菜单 : 然后在菜单管理中添加菜单就行了,和权限管理上面不同的是这里需要在组件路径填写刚刚放组件的位置用来显示组件,刚刚只是为了演示权限所以没有讲,其他的就没有了。

代码生成

系统接口

项目结构

后端部分

ruoyi-admin包 - 后台服务

该部分是项目的启动入口

  1. web包:里面存放的是通用功能的controller 有登录相关的、数据字典相关的、权限控制相关的controller类 用于接受前端的请求
  2. RuoYiApplication和RuoYiServlerlnitializer:项目的两种启动类,RuoYiApplication是若依Spring Boot 内置Tomcat服务器直接运行就可以了,第二种RuoYiServlerlnitializer可以将Spring Boot工程打成一个包使用外置的Service容器来运行

ruoyi-common包 - 通用工具 

core/controller/BaseController类 -- web层通用数据处理

BaseController是所有Controller都要继承的类,

  1. 全局配置:这里面的类是来读取项目配置信息的
  2. 通用常量:项目中的通用常量信息
  3. 通用异常:异常处理类,可以将我们自定义的放在这里面
  4. xss:防止跨站脚本的

ruoyi-framework包 - 框架核心

ruoyi-generator - 代码生成(可移除)

ruoyi-quartz - 定时任务(可移除)

ruoyi-system - 系统模块

ruoyi-ui - 前端部分

每个模块的依赖

前端部分

src包

表结构

原码解读

前端代码分析

自己去读(⊙x⊙;)

后端代码分析

@PreAuthorize注解 Spring Security框架中来做权限检查

该注解是在运行方法之前验证权限的,权限够就放行执行方法,不够就拦截这里的权限指的是RABC的权限,不是其他的什么token之类的。

讲解例子:@PreAuthorize("@ss.hasPermi('course:course:list')")该注解中的值用到的是Spring Security的表达式这个现在不需要知道,知道该注解的作用和怎么用就可以了,这个值就像我们调用了ss对象的hasPermi方法该方法传入了一个值,这个值就是权限字符串,只有用户的这个字符串匹配才通过,具体用户怎么携带看看下面的图,主要不是用户是否携带,是菜单中的是否携带和菜单中的字符之类的是否携带

权限控制流程图

在ruoyi中权限有两个,一个是用户的,用户登录获取用户信息和角色集合这个角色集合就是用户权限,并且适用于菜单中,然后获取用户的权限集合,这个权限集合就是该用户的权限集合,然后用户才执行一个操作的时候被@PreAuthorize拦截,这个时候来权限集合中找是否有权限,有就放行,而@PreAuthorize中的值是在添加菜单的时候添加权限字符来添加上去的。

前后端交互流程

没什么要看的,最多看一下代理(╯▔皿▔)╯

项目开发

若依修改器

地址 :RuoYi-MT 发行版 - Gitee.com

使用  :  把后端项目压缩成压缩包然后直接打开修改器把压缩包放进去直接根据自己修改

新建业务模块

  1. 新建子模块 : 创建子模块后在子模块pom.xml文件中引入核心文件(framework模块)这个代码在admin中的pom.xml中有
  2. 父工程版本锁定 : 对新建的子模块在父工程中添加版本锁定,打开父工程的pom.xml引入子模块可以指定<version>
  3. 在admin添加依赖 : 在admin的pom.xml文件中引入子模块,因为在父工程中已经指定版本,这里就不需要<version>来指定版本了。

  • 16
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值