当前位置: 首页 > news >正文

若依 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的路径.                  

2)代码生成

3)定时任务

相关文章:

  • 设计模式 16 迭代器模式
  • opencv/c++的一些简单的操作(入门)
  • 大数据处理从零开始————1.Hadoop介绍
  • splunk Enterprise 的HTTP收集器-windows
  • 【PLL】为什么 环路带宽是参考频率的1/10
  • MFC工控项目实例之十添加系统测试对话框
  • 《黑神话·悟空》是用什么编程语言开发的?
  • SQL-函数
  • HTML实现俄罗斯方块
  • 2024/8/30 英语每日一段
  • HTML <template> 标签的基本技巧
  • 一维/二维高斯分布的负对数似然推导
  • 黑客声称窃取海量腾讯数据?数据库加密看这...
  • 零基础Opencv学习(三)
  • 制造业中的MES知识与ERP\PLM\WMS架构关系(附智能制造MES解决方案PPT下载)
  • Oracle 和 PostgreSQL 主从对比介绍
  • 【服务对接】✈️SpringBoot 项目整合华为云 obs 对象存储服务
  • Codeforces Round 969 (Div. 2)
  • npm install速度慢,install超时报错----npm换源;npm i npm install区别
  • 使用Python写贪吃蛇游戏
  • 王毅:时代不容倒退,公道自在人心
  • 交通运输部:预计今年五一假期全社会跨区域人员流动量将再创新高
  • 习近平访问金砖国家新开发银行
  • 上海74岁老人宜春旅游时救起落水儿童,“小孩在挣扎容不得多想”
  • 文天祥与“不直人间一唾轻”的元将唆都
  • 一周人物|卡鲁等入围英国特纳奖,李学明新展中国美术馆