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

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打开

7）启动

二、若依项目的使用

1）若依项目的架构

Ⅰ 角色管理

Ⅱ 字典管理

Ⅲ菜单管理

①）假设这里有一个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的路径.