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

若伊(前后端分离)学习笔记

news 2025/10/21 2:18:44

基础应用篇

1. 若伊搭建

若伊版本

若依官方针对不同开发需求提供了多个版本的框架，每个版本都有其独特的特点和适用场景：

  • 前后端混合版本 ：RuoYi结合了SpringBoot和Bootstrap的前端开发框架，适合快速构建传统的Web应用程序，其中前端和后端代码在同一项目中协同工作。
    在这里插入图片描述
  • 前后端分离版本：RuoYi-Vue利用SpringBoot作为后端开发框架，与Vue.js结合，实现了前后端分离的开发模式。这种架构有助于提高开发效率，前后端可以独立开发和部署，更适合现代化的Web应用开发。
    在这里插入图片描述
  • 微服务版本：RuoYi-Cloud基于Spring Cloud & Alibaba微服务架构，为构建大型分布式系统提供了完整的解决方案。它支持服务发现、配置管理、负载均衡等微服务特性，适合需要高可扩展性和高可用性的企业级应用。
    在这里插入图片描述
  • 移动端版本：RuoYi-App采用Uniapp进行开发，结合了Vue.js的优势，可以实现跨平台的移动端应用开发。一次编写，多端运行的能力使得它成为开发iOS和Android应用的理想选择。
    在这里插入图片描述
  • RuoYi-other（Vue3+ElementPlus+Vite）没有后端模块，可以适配前后端分离和微服务，默认前后端分离版使用的vue2
    在这里插入图片描述

RuoYi-Vue(前后端分离，前端使用vue3版)

RuoYi-Vue版本，采用了前后端分离的单体架构设计:

  • 软件环境：JDK、MySQL 、Redis 、Maven、Node
  • 技术选型：Spring Boot、Spring Security、MyBatis、Jwt、Vue3、Element-Plus
  • 官方地址：https://gitee.com/y_project/RuoYi-Vue
  • 扩展地址：https://gitee.com/ys-gitee/RuoYi-Vue3

运行后端项目

Git下载

通过idea克隆若依源码，仓库地址:https://gitee.com/y_project/RuoYi-Vue.git
在这里插入图片描述
使用idea打开项目后，等待环境检查（主要是Maven下载项目依赖）
在这里插入图片描述

MySQL相关
  1. 导入sql

创建数据库create schema ry-vue;
执行下图的sql脚本文件，完成导入
在这里插入图片描述
在这里插入图片描述

  1. 配置信息

在ruoyi-admin模块下，编辑resources目录下的application-druid.yml，修改数据库连接

# 数据源配置
spring:datasource:type: com.alibaba.druid.pool.DruidDataSourcedriverClassName: com.mysql.cj.jdbc.Driverdruid:# 主库数据源master:url: 数据库地址username: 数据库账号password: 数据库密码

在这里插入图片描述

Redis相关
  1. 启动Redis
  2. 配置信息

在ruoyi-admin模块下，resources目录下的application.yml，可以设置redis密码等相关信息
在这里插入图片描述

项目运行

在ruoyi-admin模块下，运行com.ruoyi.RuoYiApplication.java，出现如下图表示启动成功
在这里插入图片描述
访问http://localhost:8080
在这里插入图片描述

运行前端项目

  1. Git下载
# 克隆vue3项目
git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git# 通过vscode打开项目
code ./RuoYi-Vue3
  1. 项目运行
# 安装依赖
npm install# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com# 启动服务
npm run dev

在这里插入图片描述

默认账号/密码(admin/admin123)

2. 入门案例

通过若伊的代买生成实现课程需求的增删改查前后端完整模块

步骤分析

  1. 准备课程表结构和数据sql文件，导入到数据库中
  2. 登录系统（系统工具 -> 代码生成 -> 导入课程表）
  3. 代码生成列表中找到课程表（可预览、编辑、同步、删除生成配置）
  4. 点击生成代码会得到一个ruoyi.zip
  5. 执行sql文件导入菜单，按照包内目录结构复制到自己的项目中即可

代码生成

  1. 导入课程表sql
    在这里插入图片描述
  2. 代码生成导入
    在这里插入图片描述
  3. 修改生成配置
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

代码导入

  1. 执行菜单sql脚本
    在这里插入图片描述
  2. 前端页面
    在这里插入图片描述
  3. 后端代码

将main/java/com 拷贝到admin中
在这里插入图片描述

将main/resources/mapper拷贝到admin中
在这里插入图片描述

重启项目
在这里插入图片描述

3. 功能详情

系统管理

在这里插入图片描述

权限系统
  • 权限控制
    在这里插入图片描述

RBAC（基于角色的访问控制）是一种广泛使用的访问控制模型，通过角色来分配和管理用户的菜单权限。
在这里插入图片描述

  • 表关系说明
    在这里插入图片描述
    在这里插入图片描述
  • 案例

创建新用户小智并关联课研人员角色，仅限课程管理和统计分析菜单访问。

  1. 创建菜单
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  2. 创建角色，并分配权限
    在这里插入图片描述
  3. 创建用户，并管理角色
    在这里插入图片描述
  4. 登录刚创建的用户测试权限控制
    在这里插入图片描述
数据字典
  • 若依内置的数据字典，用于维护系统中常见的静态数据。例如：性别、状态…
  • 功能包括：字典类型管理、字典数据管理
  • 表关系说明
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 案例

将课程管理的学科字段改为数据字典维护。

  1. 添加字典类型和数据
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  1. 修改代码生成信息
    在这里插入图片描述

在这里插入图片描述

  1. 下载代码替换原来的前端页面
    在这里插入图片描述

系统监控

系统工具

相关文章：

若伊(前后端分离)学习笔记

基础应用篇 1. 若伊搭建 若伊版本 若依官方针对不同开发需求提供了多个版本的框架，每个版本都有其独特的特点和适用场景： 前后端混合版本 ：RuoYi结合了SpringBoot和Bootstrap的前端开发框架，适合快速构建传统的Web应用程序&…...

编程日记 2024/9/29 4:03:22

Elasticsearch学习笔记(2）

索引库操作 在Elasticsearch中，Mapping是定义文档字段及其属性的重要机制。 Mapping映射属性 type：字段数据类型 1、字符串： text：可分词的文本，适用于需要全文检索的情况。keyword：用于存储精确值&am…...

编程日记 2024/9/29 4:00:19

Vue devtools 插件

一、安装 去这下载https://chrome.zzzmh.cn/ 打开chrome的扩展程序 再打开开发模式 把刚才下载的拖到这里 然后把它固定到工具栏 就是这样了。 二、使用 程序通过open on live server后&#xff0c;打开开发者工具&#xff0c;找到vue就可以了。 这是代码 <div id"ap…...

编程日记 2024/9/29 3:57:17

Ubuntu 16.04安装填坑记录

一. 问题描述&#xff1a; &#xff08;1&#xff09;Ubuntu 16.04使用USB启动盘安装时&#xff0c;出现"try ubuntu without installation"或“install ubuntu”选择&#xff0c;Enter选择安装后&#xff0c;显示器黑屏无任何显示。 原因分析&#xff1a; 显示黑…...

编程日记 2024/9/29 3:56:14

python的pyinstaller

1、pyinstaller --onefile -w *.py 可以生成可执行文件 -w就是不需要有console窗体出现、 2、 console窗体会出现一些警告。 比如 Warning: QT_DEVICE_PIXEL_RATIO is deprecated. Instead use: QT_AUTO_SCREEN_SCALE_FACTOR to enable platform plugin controlled per-scre…...

编程日记 2024/9/29 3:54:11

Vue3(五) 组件通信大汇总

文章目录 一、props二、自定义事件三、mitt四、v-model1.v-model的本质2.v-model用在组件标签上3.更换modelValue4.更换modelValue时&#xff0c;可以在组件标签上多次使用v-model 五、$attrs六、$refs,与&#xffe5;parent1. 回顾标签ref属性修改组件信息2. $refs实现父修改所…...

编程日记 2024/9/29 3:53:10

红队信息搜集扫描使用

红队信息搜集扫描使用 红队行动中需要工具化一些常用攻击&#xff0c;所以学习一下 nmap 等的常规使用&#xff0c;提供灵感 nmap 帮助 nmap --help主机扫描 Scan and no port scan&#xff08;扫描但不端口扫描&#xff09;。-sn 在老版本中是 -sP&#xff0c;P的含义是 P…...

编程日记 2024/9/29 3:52:09

Python自学查漏9.28

自学查漏9.28 一、环境安装&代码执行原理&变量命名 安装 Python 代码执行原理 解析&#xff08;Parsing&#xff09;: 当你运行一个 Python 脚本时&#xff0c;Python 解释器首先会解析整个代码&#xff0c;将其转换成一种叫做“字节码”&#xff08;bytecode&…...

编程日记 2024/9/29 3:48:05

Java文件I/O处理之RandomAccessFile【随意存取文件】

Java语言有一个处理文件输入输出的RandomAccessFile类&#xff0c;既可以读取文件内容&#xff0c;也可以向文件输出数据。 RandomAccessFile类在国内的技术文档和书籍中都翻译为“随机访问文件”类&#xff0c;确实令人不解。 在中文中“随机”的意思&#xff1a; 不设任何条…...

编程日记 2024/9/29 3:47:04

Android页面跳转与返回机制详解

在Android开发中&#xff0c;页面跳转是实现应用功能交互的重要手段之一。本文将从Activity之间的跳转、Activity与Fragment之间的跳转、Fragment之间的跳转以及页面返回的问题四个方面进行详细解析。 一、Activity之间的跳转 Activity是Android应用的基本构建块&#xff0c;…...

编程日记 2024/9/29 3:46:03

Elasticsearch学习笔记(1）

初识 Elasticsearch 认识和安装 Elasticsearch 是由 Elastic 公司开发的一套强大的搜索引擎技术&#xff0c;属于 Elastic 技术栈的一部分。完整的技术栈包括&#xff1a; Elasticsearch&#xff1a;用于数据存储、计算和搜索。Logstash/Beats&#xff1a;用于数据收集。Kib…...

编程日记 2024/9/29 3:41:59

react是一种语言？

React 不是一种编程语言&#xff0c;而是一种用于构建用户界面的 JavaScript 库。它由 Facebook 开发&#xff0c;并广泛用于开发单页应用程序&#xff08;SPA&#xff09;。React 允许你将 UI 拆分成独立的、可复用的组件&#xff0c;这些组件可以接收输入&#xff08;称为“p…...

编程日记 2024/9/29 3:40:58

如何区分这个ip是真实ip，不是虚假的ip

区分一个IP地址是真实IP还是虚假IP&#xff08;伪造IP&#xff09;是非常重要的&#xff0c;特别是在网络安全、数据采集和其他与IP相关的业务场景中。虚假IP&#xff08;也称为伪造IP或假冒IP&#xff09;可以通过多种方式被创建&#xff0c;如代理、VPN、或IP欺骗&#xff08…...

编程日记 2024/9/29 3:39:57

【软件测试】详解软件测试中的测试级别

目录 一、测试级别二、组件测试三、开发者测试3.1测试与调试3.2 组件测试目标3.3 测试功能 四、稳健性测试4.1 效率的测试4.2 测试可维护性4.3 测试策略4.4 白盒测试 一、测试级别 软件系统通常是由许多子系统组成的&#xff0c;而这些子系统又是由多个组件组成的&#xff0c;…...

编程日记 2024/9/29 3:35:52

一条sql在MySQL中是怎么执行的

目录 一、MySQL总体架构二、各层的作用1、连接层2、应用层3、存储引擎层 一、MySQL总体架构 作为常问八股文&#xff0c;相信不少小伙伴当年都被问到过这个问题&#xff0c;回答这个问题我们首先得知道MySQL服务器基本架构&#xff0c;主要分为连接层&#xff0c;应用层和存储…...

编程日记 2024/9/29 3:33:51

Git | Dockerized GitLab 安装使用（简单实操版）

1. 详细步骤 1.1 安装启动 postgresql 服务 docker pull sameersbn/postgresql:14-20230628docker run --name gitlab-postgresql -d \--env DB_NAMEgitlabhq_production \--env DB_USERgitlab --env DB_PASSpassword \--env DB_EXTENSIONpg_trgm,btree_gist \--volume /srv/…...

编程日记 2024/9/29 3:32:50

SpringCloud简介 Ribbon Eureka 远程调用RestTemplate类 openfeign

〇、SpringCloud 0.区别于单体项目和soa架构&#xff0c;微服务架构每个服务独立&#xff0c;灵活。 1. spring cloud是一个完整的微服务框架&#xff0c;springCloud包括三个体系&#xff1a; spring cloud Netflix spring cloud Alibaba spring 其他 2.spring cloud 版本命名…...

编程日记 2024/9/29 3:29:46

微信小程序开发系列之-微信小程序性能优化

微信小程序开发系列之-微信小程序性能优化 性能优化是任何应用开发中的重要组成部分&#xff0c;尤其是在移动环境中。对于微信小程序而言&#xff0c;随着用户量的增加和应用功能的丰富&#xff0c;性能优化显得尤为关键。良好的性能不仅提升用户体验&#xff0c;还能增加用户…...

编程日记 2024/9/29 3:28:45

线程池面试集

目录 线程池中提交一个任务的流程是怎样的? 线程池有五种状态 如何优雅的停止一个线程? 线程池的核心线程数、最大线程数该如何设置? 如何理解Java并发中的可见性、原子性、有序性? Java死锁如何避免? 线程池中提交一个任务的流程是怎样的? 线程池有五种状态 如何优…...

编程日记 2024/9/29 3:25:43

从密码学看盲拍合约：智能合约的隐私与安全新革命！

文章目录 前言一、什么是盲拍合约&#xff1f;二、盲拍合约的优势1.时间压力的缓解2.绑定与秘密的挑战 三、盲拍合约的工作原理1.提交盲出价2.披露出价3.结束拍卖4.退款机制 四、代码示例总结 前言 随着区块链技术的发展&#xff0c;智能合约在各种场景中的应用越来越广泛。盲…...

编程日记 2024/9/29 3:24:41

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/10/20 2:44:01

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/9/24 19:23:45

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/10/18 14:30:41

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/9/22 16:19:17

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19