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

基础应用篇

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.DruidDataSource
       driverClassName: com.mysql.cj.jdbc.Driver
       druid:
           # 主库数据源
           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. 下载代码替换原来的前端页面
    在这里插入图片描述

系统监控

系统工具

上一篇:TypeScript 算法手册 【归并排序】-总结


下一篇:0基础学习CSS(十四)填充