若依 Vue3的前后端分离系统管理创建使用

别挡

已于 2024-09-03 21:57:45 修改

阅读量957

点赞数 21

文章标签： spring boot

于 2024-08-30 11:24:14 首次发布

本文链接：https://blog.csdn.net/weixin_45939821/article/details/141686534

版权

RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-UI||www.ruoyi.vip

GitHub - yangzongzhuan/RuoYi-Vue3: :tada: (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

一、若依项目的创建

1）进入若依官网，下载vue分离版。编辑

2）在分离版的readme中提供了vue3前端项目的下载链接。

3）在英文路径下解压出前后端项目

4）删除 ruoyi-ui 文件

5）创建一个数据库，将sql中的文件执行。

6）启动前后端项目的准备

①RuoYi-Vue-master 后端项目直接使用idea打开

1)依赖下载

2)修改配置

3）启动后端

②RuoYi-Vue3-master 前端项目使用vscode打开

①）假设这里有一个his用户登录,他就只能看到两个菜单标签

②）比如打开菜单管理：

2）代码生成

3）定时任务

一、若依项目的创建

1）进入若依官网，下载vue分离版。

2）在分离版的readme中提供了vue3前端项目的下载链接。

3）在英文路径下解压出前后端项目

RuoYi-Vue-master 后端项目

RuoYi-Vue3-master 前端项目

4）删除 ruoyi-ui 文件

这个是vue2版本前端界面

5）创建一个数据库，将sql中的文件执行。

6）启动前后端项目的准备

①RuoYi-Vue-master 后端项目直接使用idea打开

1)依赖下载

          后端项目镜像源都在项目中配好了，只需要在pom.xml点击刷新依赖就ok

2)修改配置

3）启动后端

②RuoYi-Vue3-master 前端项目使用vscode打开

                既然是vue3的项目还是一样的操作，需要node.js

npm config set registry https://registry.npmmirror.com //前端设置镜像源

   npm i

          npm run dev

7）启动

二、若依项目的使用

1）若依项目的架构

Ⅰ 角色管理

把用户角色和权限相互关联起来，这种基于角色管理的模式叫做RBAC模型：

这种模型的意义是每个用户的权限不一样，但是通常又有一些都具备的权限，如果单独为每个用户单独分配权限存在数据库中，数据量冗余太大；

这个时候引入第三张表角色，给每个设计好的角色固定的权限，再直接给用户分配角色来解决。

Ⅱ 字典管理

1）对常量数据的增删改查，比如性别在中国通常就两种男女。

2）在若依中封装了对常量数据的异步查询函数

并且已经设置了全局异步查询常量的函数，只需要我们在组件中调用该函数传入对应字典类型的名称就能直接获取对应的常量数据。

使用组合式api调用该函数。
<script setup name="Drug">
const { proxy } = getCurrentInstance();
const { sys_user_sex } = proxy.useDict('sys_user_sex');
</script>
Ⅲ菜单管理

        菜单管理使用了spring security 权限校验，所有标签都有额外的权限标识符。

                        所有的标签属性都存在数据库中，打开若依主界面时会查询所有的标签名并显示在主界面中

这里的权限标识符会和角色表对应，每个角色具有相应的权限标识符，并通过该权限标识符查询具有的菜单标签。假设有一个小丑角色只具有系统管理、系统工具的标识符，那扮演该角色的用户就只能看到系统管理、系统工具的标签:

①）假设这里有一个his用户登录,他就只能看到两个菜单标签



②）比如打开菜单管理：

                点击修改系统管理查看一级标签：

          这里的菜单类型为目录，对应的是前端界面的左边的标签

点击修改用户管理查看二级标签：

菜单类型为菜单，对应的是vue前端界面的.vue组件

路由地址对应的就是url访问路径

组件路径对应的就是前端项目的.vue的路径.

2）代码生成器

使用代码生成器前提是写好了创建表sql语句，并在数据库中创建该表。

单表的增删改查可以使用代码生成器完成。会一键生成所需要的从后端到前端的所有代码，复制粘贴可以在若依项目中直接运行。

2.1）代码生成器对应若依的系统模块ruoyi-generator

2.2）编辑和下载

点击对应表的编辑按钮，修改生成信息中的包路径和模块名，还有上级菜单。

点击下载，前端和后端的代码就都有了。

3）定时任务

若依的定时任务：

springboot框架自带的有定时任务功能，只需要添加注解配置执行任务的规则cron表达式就可以使用。

在若依项目中使用的是quartz定时任务框架，只需要登录系统设置定时任务的类对象和cron表达式就可以使用。在若依的sql表有一半的表都和quartz有关。

实现一个定时任务

0）添加白名单

白名单添加执行任务的包路径，才能允许创建定时任务。

该白名单路径在common模块中，并没有直接放在quartz模块

1)创建一个定时任务的业务方法

updateDrugStatues()方法体写一个输出语句就ok

2）登录若依系统，点击新增

2.1)cron表达式

        quartz框架解析cron表达式支持多少秒执行一次

这里cron表达式为 */20 * * * * ?   代表每20秒执行一次

cron表达式中*代表任意值 ?代表不关心 /20表示追加的规则

也就是任意的20秒任意分任意小时任意日任意月不关心多少年。

2.2）调用方法：

若依直接给出了详细提示：

                                        对象直接用对象名调用方法

静态类调用使用全限定名称