若依 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)代码生成器

                使用代码生成器前提是写好了创建表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)调用方法:

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/417247.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IP/TCP/UDP协议的关键知识点

导语&#xff1a;网络协议是理解网络情况的基础&#xff0c;当遇到网络问题时&#xff0c;首先可以从网络协议入手&#xff0c;熟悉的网络协议可以有效帮助小伙伴们排查或者说定位大概的问题方面。本文整理了目前最常用的网络通信协议&#xff0c;相信对小伙伴们肯定都有帮助。…

cookie实战案例-自动登录网站

在写爬虫的时候&#xff0c;要伪装成真实用户请求。可能需要大量的IP地址&#xff0c;那么大量的IP地址从哪里来呢&#xff1f;这里就需要用代理IP来解决了&#xff0c;有的网站专门通过提供代理IP池服务作为主要的经营业务&#xff0c;只要注册相关网站开通对应套餐就可以了。…

Java笔试面试题AI答之JDBC(1)

文章目录 1. 什么是JDBC&#xff1f;2. 驱动(Driver)在JDBC中的角色&#xff1f;3. JDBC PreparedStatement比Statement有什么优势&#xff1f;1. 预编译和性能提升2. 参数化查询和安全性3. 更好的可读性和可维护性4. 支持批量操作5. 缓存机制&#xff08;特定数据库环境&#…

2024 高教社杯 数学建模国赛 (A题)深度剖析|“板凳龙” 闹元宵|数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题&#xff01; CS团队倾注了大量时间和心血&#xff0c;深入挖掘解…

2024 年高教社杯全国大学生数学建模竞赛题目-D 题 反潜航空深弹命中概率问题

应用深水炸弹&#xff08;简称深弹&#xff09;反潜&#xff0c;曾是二战时期反潜的重要手段&#xff0c;而随着现代军事技术 的发展&#xff0c;鱼雷已成为现代反潜作战的主要武器。但是&#xff0c;在海峡或浅海等海底地形较为复杂的 海域&#xff0c;由于价格低、抗干扰能力…

读懂以太坊源码(4)-详细解析节点配置文件geth.toml

要读懂以太坊源码&#xff0c;先熟悉配置文件的每个配置项也是非常有必要的&#xff0c;以下代码是以太坊主网配置文件(geth.toml)的完整内容&#xff0c;后面是对每个配置项的说明&#xff1a; [Eth] NetworkId 0 SyncMode "snap" EthDiscoveryURLs [] SnapDisc…

14 C语言实现平衡二叉树

//LL型失衡 右旋 //RR型失衡 左旋 //RL型失衡 先右旋 再左旋 //LR型失衡 先左旋 再右旋 #include "stdio.h" #include "stdlib.h"typedef int ElemType; typedef struct node {ElemType data;int height;struct node *left;struct node *right; } Node;Nod…

SpringBoot生成ETH和ERON钱包

首先大家需要先引入相关依赖包&#xff0c;这个maven里面是没有的&#xff0c;需要我们自行导入才可以。在项目路径下面创建lib&#xff0c;将所有需要使用的包导入即可。给大家一个包的下载链接&#xff1a;https://download.csdn.net/download/qq_38935605/89715772 因为放在…

scrapy 爬取微博(一)【最新超详细解析】:创建微博爬取工程

本项目属于个人学习记录&#xff0c;爬取的数据会于12小时内销毁&#xff0c;且不可用于商用。 1 初始化环境 首先我们需要有python环境&#xff0c;先安装一下python&#xff0c;然后配置环境变量&#xff0c;这边给出windows的配置&#xff1a; 我这边的安装目录是D:\pyt…

关于SPI通信失败的一种情况(CRC校验不匹配的问题)

问题 该项目中&#xff0c;使用外置的ADC芯片采集电压电流&#xff0c;主控MCU通过SPI与ADC芯片通信。调试时&#xff0c;SPI通信一直失败&#xff0c;与之前成功的项目对比&#xff0c;发现是SPI配置的问题。 void MX_SPI2_Init(void) {/* USER CODE BEGIN SPI2_Init 0 *//*…

WIFI贴项目到底是不是“骗局”呢?由我来揭秘!

各位亲爱的朋友们&#xff0c;大家好&#xff01;我是你们的老朋友鲸天科技千千&#xff0c;一直在这片互联网的热土上耕耘。相信你们对我都不会陌生&#xff0c;因为我常常分享一些互联网上的新奇项目和实用技巧。如果你对我的内容感兴趣&#xff0c;别忘了点个关注哦&#xf…

【案例67】Npart批量启动服务卡顿严重分析过程

问题现象 通过Npart启动NC服务&#xff0c;发现只启动一个&#xff0c;大概3min左右即可启动成功。但是批量启动服务需要几十分钟才可以把服务启动成功&#xff0c;启动卡在获取“wenjian”图标处。 绕过Npart直接写脚本并行启动相关服务&#xff0c;发现也需要30min 问题分析…

数组与贪心算法——605、121、122、561、455、575(5简1中)

605. 种花问题&#xff08;简单&#xff09; 假设有一个很长的花坛&#xff0c;一部分地块种植了花&#xff0c;另一部分却没有。可是&#xff0c;花不能种植在相邻的地块上&#xff0c;它们会争夺水源&#xff0c;两者都会死去。 给你一个整数数组 flowerbed 表示花坛&#xf…

网络传输加密及openssl使用样例(客户端服务器)

文章目录 背景常用加密方式SSLOpenSSL主要功能 库结构 交互流程证书生成生成 RSA 私钥私钥的主要组成部分私钥的格式 创建自签名证书: 签发证书服务器端代码客户端代码常见错误版本问题证书问题证书格式 背景 网络传输中为保证数据安全&#xff0c;通常需要加密 常用加密方式…

1.初识ChatGPT:AI聊天机器人的革命(1/10)

引言 在当今的数字化世界中&#xff0c;人工智能&#xff08;AI&#xff09;正以其独特的方式重塑我们的生活和工作。其中&#xff0c;AI聊天机器人作为人机交互的前沿技术&#xff0c;已经成为企业与客户沟通、提供个性化服务的重要工具。这些机器人通过模拟人类的对话方式&a…

【Unity3D优化】优化内置shader的内存占用

一、性能分析 监控项目线上的崩溃情况&#xff0c;绝大多数崩溃都是因为低端设备&#xff0c;运行时内存不足&#xff0c;在运行过程中申请开辟新的内存时Crash了。因此&#xff0c;不定期继续优化内存占用。 性能分析首先主要靠Unity3d的Memory Profiler监控一些可追踪到的内存…

Java 方法的定义

目录 1.Java的方法类似于其他语言的函数&#xff0c;是一段用来完成特定功能的代码片段。 2.方法包含一个方法头和方法体&#xff0c;下面是一个方法的所有部分&#xff1a; &#xff08;1&#xff09;修饰符&#xff1a;可选。告诉编译器如何调用该方法&#xff0c;定义了该…

基于微信小程序的挂号管理系统-小程序端

微信小程序端系统功能实现 登录功能 系统登录功能中&#xff0c;用户只需在登录界面输入正确的用户名和密码&#xff0c;即可快速进入系统。登录功能还采用了先进的加密技术&#xff0c;保障用户信息的安全性&#xff0c;让用户能够放心使用。 注册功能 系统注册功中&#xf…

Vue项目“npm run serve”总卡住的问题 已解决

Vue项目“npm run serve”总卡住的问题 已解决 概述 如果卡住进度在51% 直接看这篇 https://blog.csdn.net/qq_34419312/article/details/141681307?spm1001.2014.3001.5501 在使用Vue.js进行项目开发时&#xff0c;npm run serve命令是我们常用的启动本地开发服务器的方式…

使用docker compose一键部署 Openldap

使用docker compose一键部署 Openldap LDAP&#xff08;轻量级目录访问协议&#xff0c;Lightweight Directory Access Protocol&#xff09;是一种用于访问分布式目录服务的网络协议&#xff0c;OpenLDAP 是 LDAP 协议的一个开源实现&#xff0c;由 OpenLDAP 项目提供&#x…