目录
[1. 若依框架搭建与环境配置](#1. 若依框架搭建与环境配置)
[1.1 若依版本选择](#1.1 若依版本选择)
[1.1.1 官方版本](#1.1.1 官方版本)
[1.1.2 社区扩展版本](#1.1.2 社区扩展版本)
[1.2 RuoYi-Vue版本介绍](#1.2 RuoYi-Vue版本介绍)
[1.3 运行后端项目](#1.3 运行后端项目)
[1.3.1 初始化项目](#1.3.1 初始化项目)
[1.3.2 MySQL相关配置](#1.3.2 MySQL相关配置)
[1.3.3 Redis相关配置](#1.3.3 Redis相关配置)
[1.3.4 项目运行](#1.3.4 项目运行)
[1.4 运行前端项目](#1.4 运行前端项目)
[1.4.1 初始化项目](#1.4.1 初始化项目)
[1.4.2 项目运行](#1.4.2 项目运行)
[2. 入门实战:代码生成器应用](#2. 入门实战:代码生成器应用)
[2.1 功能需求](#2.1 功能需求)
[2.2 步骤分析](#2.2 步骤分析)
[2.3 代码生成](#2.3 代码生成)
[2.3.1 准备数据表](#2.3.1 准备数据表)
[2.3.2 系统导入](#2.3.2 系统导入)
[2.3.3 配置代码生成](#2.3.3 配置代码生成)
[2.3.4 生成代码](#2.3.4 生成代码)
[2.4 代码导入](#2.4 代码导入)
[2.4.1 导入课程菜单](#2.4.1 导入课程菜单)
[2.4.2 导入后端代码](#2.4.2 导入后端代码)
[2.4.3 导入前端代码](#2.4.3 导入前端代码)
[2.5 访问测试](#2.5 访问测试)
[3. 核心功能详解](#3. 核心功能详解)
[3.1 系统管理](#3.1 系统管理)
[3.1.1 权限系统(RBAC)](#3.1.1 权限系统(RBAC))
[3.1.2 数据字典](#3.1.2 数据字典)
[3.1.3 参数设置](#3.1.3 参数设置)
[3.1.4 通知公告](#3.1.4 通知公告)
[3.1.5 日志管理](#3.1.5 日志管理)
[3.2 系统监控](#3.2 系统监控)
[3.2.1 监控相关功能](#3.2.1 监控相关功能)
[3.2.2 定时任务](#3.2.2 定时任务)
[3.3 系统工具](#3.3 系统工具)
[3.3.1 表单构建](#3.3.1 表单构建)
[3.3.2 代码生成](#3.3.2 代码生成)
[3.3.3 系统接口](#3.3.3 系统接口)
[4. 项目结构与源码分析](#4. 项目结构与源码分析)
[4.1 后端项目结构](#4.1 后端项目结构)
[4.2 配置文件详解](#4.2 配置文件详解)
[4.3 模块依赖关系](#4.3 模块依赖关系)
[4.4 前端项目结构](#4.4 前端项目结构)
[4.5 数据库表结构分类](#4.5 数据库表结构分类)
[5. 源码阅读与核心原理](#5. 源码阅读与核心原理)
[5.1 前端代码分析(课程管理模块)](#5.1 前端代码分析(课程管理模块))
[5.2 后端代码分析](#5.2 后端代码分析)
[5.2.1 Controller层分析](#5.2.1 Controller层分析)
[5.2.2 核心基类解析](#5.2.2 核心基类解析)
[5.2.3 统一返回对象](#5.2.3 统一返回对象)
[5.2.4 实体基类](#5.2.4 实体基类)
[5.2.5 权限控制机制](#5.2.5 权限控制机制)
[5.3 前后端交互流程](#5.3 前后端交互流程)
[5.3.1 查询流程分析](#5.3.1 查询流程分析)
[5.3.2 跨域配置](#5.3.2 跨域配置)
[🎯 核心知识点速查](#🎯 核心知识点速查)
[🔧 常见问题排查](#🔧 常见问题排查)
[📁 重要文件位置](#📁 重要文件位置)
若依框架开发指南摘要
本文详细介绍了基于若依框架(RuoYi-Vue)的企业级应用开发全流程。主要内容包括:
- 环境搭建:JDK11+MySQL8+Redis5+Node16技术栈配置,前后端分离架构部署
- 核心功能:通过代码生成器快速实现课程管理模块,包含CRUD完整功能
- 权限系统:基于RBAC模型实现用户-角色-菜单三级权限控制,支持细粒度权限配置
- 系统架构:分析前后端项目结构,解读BaseController等核心基类设计
- 开发实践:从表结构设计到代码生成,再到前后端联调的全流程示例
重点技术点:
- 代码生成器支持单表/树表/主子表模板
- @PreAuthorize注解实现方法级权限控制
- TableDataInfo/AjaxResult统一返回格式
- 基于Vue3+Element Plus的前端架构
适用于需要快速构建企业级管理系统的开发者,提供从环境搭建到功能实现的完整参考方案。
1. 若依框架搭建与环境配置
1.1 若依版本选择
1.1.1 官方版本
若依官方针对不同开发需求提供了多个版本的框架,每个版本都有其独特的特点和适用场景:
-
前后端混合版本:结合SpringBoot和Bootstrap的前端开发框架,适合快速构建传统的Web应用程序,前端和后端代码在同一项目中协同工作。(基本淘汰)
-
前后端分离版本:利用SpringBoot作为后端开发框架,与Vue.js结合,实现了前后端分离的开发模式。这种架构有助于提高开发效率,前后端可以独立开发和部署,更适合现代化的Web应用开发。
-
微服务版本:基于Spring Cloud & Alibaba微服务架构,为构建大型分布式系统提供了完整的解决方案。它支持服务发现、配置管理、负载均衡等微服务特性,适合需要高可扩展性和高可用性的企业级应用。
-
移动端版本:采用Uniapp进行开发,结合了Vue.js的优势,可以实现跨平台的移动端应用开发。一次编写,多端运行的能力使得它成为开发iOS和Android应用的理想选择。
这些版本的框架为开发者提供了多样化的选择,无论是传统的Web应用、现代化的前后端分离应用,还是复杂的微服务架构和跨平台的移动端应用,都能找到合适的若依框架版本来满足开发需求。
1.1.2 社区扩展版本
若依框架因其强大的功能和灵活性,吸引了众多第三方开发者基于其核心架构进行扩展和优化,从而形成了丰富的生态系统。
这些扩展不仅增强了若依框架的功能性,也满足了开发者在不同场景下的具体需求。例如:
-
RuoYi-Vue3:前端升级Vue3 Element Plus Vite
-
RuoYi-Vue-Plus:后端集成Mybatis-Plus、Hutool、OSS存储、分布式锁等组件
这些扩展版本的推出,使得若依框架能够更好地适应不同规模和类型的项目需求,从小型快速开发到大型企业级应用,都能提供相应的解决方案。
1.2 RuoYi-Vue版本介绍
RuoYi-Vue版本采用了前后端分离的单体架构设计:
软件环境要求:
-
JDK >= 1.8(推荐使用JDK 11及以上)
-
MySQL >= 5.7.0(推荐使用MySQL 8及以上)
-
Redis >= 3.0(推荐使用Redis 5及以上)
-
Maven >= 3.0(推荐使用Maven 3.6)
-
Node >= 12(推荐使用Node 16及以上)
技术栈选型:
-
后端:Spring Boot、Spring Security、MyBatis、Jwt
-
前端:Vue3、Element-Plus
官方地址:
1.3 运行后端项目
1.3.1 初始化项目
Git下载项目:
bash
# 通过idea克隆若依源码
仓库地址:https://gitee.com/y_project/RuoYi-Vue.git
Maven构建 :
使用IDEA打开项目后,等待环境检查(主要是Maven下载项目依赖)
1.3.2 MySQL相关配置
数据库初始化步骤:
- 创建数据库:
sql
create schema ry-vue;
-
执行SQL脚本文件:
-
执行
/sql/quartz.sql(定时任务表) -
执行
/sql/ry_2024xxxx.sql(业务表)
-
-
导入后
ry-vue库内置30张表
配置文件修改 :
在ruoyi-admin模块下,编辑resources目录下的application-druid.yml:
XML
# 数据源配置
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driverClassName: com.mysql.cj.jdbc.Driver
druid:
# 主库数据源
master:
url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
username: root
password: your_password
1.3.3 Redis相关配置
Redis启动:
XML
# 在redis解压目录下执行
redis-server.exe redis.windows.conf
配置文件修改 :
在ruoyi-admin模块下,resources目录下的application.yml:
XML
# redis配置
redis:
# 地址
host: localhost
# 端口,默认为6379
port: 6379
# 密码
password: 123456
1.3.4 项目运行
在ruoyi-admin模块下,运行com.ruoyi.RuoYiApplication.java,出现启动成功日志表示启动成功。
后端运行成功后可以通过 http://localhost:8080 访问,但是不会出现静态页面,需要继续部署前端项目。
1.4 运行前端项目
1.4.1 初始化项目
bash
# 克隆Vue3项目
git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git
# 进入项目目录
cd RuoYi-Vue3
# 通过vscode打开项目
code .
1.4.2 项目运行
在vscode终端中输入以下命令:
bash
# 安装依赖
npm install
# 使用国内镜像源(可选)
npm install --registry=https://registry.npmmirror.com
# 启动开发服务器
npm run dev
启动成功后,打开浏览器输入:http://localhost:80,使用默认账户/密码 admin/admin123 登录。
2. 入门实战:代码生成器应用
2.1 功能需求
实现CRM系统中的课程管理功能,涵盖增加、删除、修改和查询课程信息的完整前后端代码。
2.2 步骤分析
-
准备课程表结构和数据SQL文件,导入到数据库中
-
登录系统(系统工具 -> 代码生成 -> 导入课程表)
-
代码生成列表中找到课程表(可预览、编辑、同步、删除生成配置)
-
点击生成代码会得到一个ruoyi.zip
-
执行SQL文件导入菜单,按照包内目录结构复制到自己的项目中
2.3 代码生成
2.3.1 准备数据表
创建课程表SQL:
sql
CREATE TABLE `course` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '课程ID',
`code` varchar(50) NOT NULL COMMENT '课程编码',
`subject` varchar(50) DEFAULT NULL COMMENT '课程学科',
`name` varchar(100) NOT NULL COMMENT '课程名称',
`price` decimal(10,2) DEFAULT NULL COMMENT '价格',
`applicable_person` varchar(200) DEFAULT NULL COMMENT '适用人群',
`info` text COMMENT '课程介绍',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`),
UNIQUE KEY `uk_code` (`code`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='课程表';
2.3.2 系统导入
登录系统后进入:系统工具 -> 代码生成 -> 导入课程表
2.3.3 配置代码生成
在代码生成列表中找到课程表,可以进行以下配置:
字段配置说明:
-
字段列名:表中的字段列名称
-
字段描述:字段的描述,读取的comment信息
-
物理类型:数据库所对应的字段类型
-
Java类型:Java实体类中属性的类型
-
Java属性:Java实体类中所对应的属性名称
-
插入/编辑/列表/查询:控制字段在对应操作中的可见性
-
查询方式:查询条件匹配方式(等于、LIKE、BETWEEN等)
-
必填:字段是否为必填项
-
显示类型:前端使用的组件类型
-
字典类型:关联数据字典类型
2.3.4 生成代码
点击生成代码,得到一个ruoyi.zip压缩包,解压后包含:
-
后端代码(Controller、Service、Mapper、Entity)
-
前端代码(Vue组件、API)
-
菜单SQL文件
2.4 代码导入
2.4.1 导入课程菜单
执行生成的SQL脚本,导入菜单数据:
sql
-- 插入菜单数据
INSERT INTO sys_menu (menu_name, parent_id, order_num, path, component, is_frame, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark)
VALUES ('课程管理', 3, 1, 'course', 'course/course/index', 1, 'C', '0', '0', 'course:course:list', 'education', 'admin', sysdate(), '', null, '课程管理菜单');
2.4.2 导入后端代码
将生成的后端代码按照包结构复制到对应模块:
-
Entity ->
ruoyi-system/src/main/java/com/ruoyi/system/domain -
Mapper ->
ruoyi-system/src/main/java/com/ruoyi/system/mapper -
Service ->
ruoyi-system/src/main/java/com/ruoyi/system/service -
Controller ->
ruoyi-admin/src/main/java/com/ruoyi/web/controller
2.4.3 导入前端代码
将生成的前端代码复制到前端项目中:
-
API文件 ->
src/api/ -
Vue组件 ->
src/views/
2.5 访问测试
重启前后端项目,登录系统后可以在系统工具菜单下找到课程管理模块,测试CRUD功能是否正常。
3. 核心功能详解
3.1 系统管理
3.1.1 权限系统(RBAC)
若依提供了企业级通用权限系统,基于RBAC(基于角色的访问控制)模型:
RBAC模型特点:
-
用户通过角色来分配和管理菜单权限
-
支持细粒度的权限控制(按钮级)
-
支持数据权限控制
表关系结构:
sql
用户表 (sys_user)
|
|--多对多--|
| |
用户角色表 (sys_user_role)
| |
|--多对多--|
|
角色表 (sys_role)
|
|--多对多--|
| |
角色菜单表 (sys_role_menu)
| |
|--多对多--|
|
菜单表 (sys_menu)
权限控制案例 :
创建新用户并关联角色,限制只能访问指定菜单:
-
创建菜单(如有需要)
-
创建角色,分配菜单权限
-
创建用户,关联角色
3.1.2 数据字典
若依内置的数据字典用于维护系统中常见的静态数据:
功能包括:
-
字典类型管理
-
字典数据管理
表结构:
sql
-- 字典类型表
sys_dict_type
-- 字典数据表
sys_dict_data
使用案例:将课程管理的学科字段改为数据字典维护
-
添加字典类型和数据
-
修改代码生成信息,设置字典类型
-
重新生成代码并导入前端
3.1.3 参数设置
对系统中的参数进行动态维护,如系统配置、业务参数等。
常见配置:
-
系统名称、版本、版权信息
-
文件上传路径
-
验证码开关
-
登录失败锁定策略
3.1.4 通知公告
提供通知、公告和新闻等信息发布功能:
-
支持富文本编辑和附件上传
-
可指定接收用户、部门或角色
-
支持站内通知和邮件通知(需自行开发集成)
3.1.5 日志管理
登录日志:
-
记录用户的登录信息(时间、IP地址)
-
监控登录行为,发现可疑尝试
-
支持搜索和筛选
操作日志:
-
记录用户在系统中的所有操作
-
便于审计和数据追踪
-
支持快速搜索和筛选
3.2 系统监控
3.2.1 监控相关功能
若依提供了一系列强大的监控工具:
-
在线用户:
-
查看当前在线用户信息
-
支持强制用户下线
-
-
数据监控:
-
实时监控系统各项指标
-
数据库连接池状态监控
-
-
服务监控:
-
监控系统服务运行状态
-
性能指标展示
-
-
缓存监控:
-
Redis缓存使用情况监控
-
缓存键管理
-
3.2.2 定时任务
提供Web界面动态管理定时任务:
创建定时任务步骤:
-
创建任务类,实现
ITask接口或使用注解 -
在管理界面添加任务规则
-
启动任务
示例任务类:
java
@Component("demoTask")
public class DemoTask {
public void demoMethod(String params) {
System.out.println("执行定时任务,参数:" + params);
}
}
任务配置参数:
-
任务名称、分组
-
调用目标字符串(类名.方法名)
-
Cron表达式
-
执行策略
-
并发执行控制
3.3 系统工具
3.3.1 表单构建
可视化表单构建工具:
-
通过拖放操作创建表单
-
自定义表单字段和验证规则
-
支持表单导出和分享
使用案例:
-
使用表单构建工具制作添加课程的表单
-
导出生成的代码
-
复制到前端工程并创建动态菜单
3.3.2 代码生成
自动化代码生成工具:
-
支持单表、树表、主子表三种模板
-
根据数据库表结构反向生成代码
-
生成Spring Boot、MyBatis等框架代码
代码生成配置:
-
基本信息配置(表名、模块名等)
-
字段信息配置(显示、查询、编辑等)
-
生成选项配置(是否覆盖、包路径等)
3.3.3 系统接口
集成Swagger,自动生成API文档:
-
在线API文档
-
接口测试功能
-
支持权限验证
4. 项目结构与源码分析
4.1 后端项目结构
java
com.ruoyi
├── ruoyi-admin // 后台服务模块
│ ├── src/main/java/com/ruoyi/web
│ │ ├── controller // 控制器层
│ │ └── RuoYiApplication.java // 启动类
│ └── resources // 配置文件
│
├── ruoyi-common // 通用工具模块
│ ├── annotation // 自定义注解
│ ├── config // 全局配置
│ ├── constant // 通用常量
│ ├── core // 核心控制
│ ├── enums // 通用枚举
│ ├── exception // 通用异常
│ ├── utils // 工具类
│ └── xss // XSS过滤
│
├── ruoyi-framework // 框架核心模块
│ ├── aspectj // AOP配置
│ ├── config // 系统配置
│ ├── datasource // 数据源配置
│ ├── interceptor // 拦截器
│ ├── security // 安全配置
│ └── web // Web配置
│
├── ruoyi-generator // 代码生成模块
├── ruoyi-quartz // 定时任务模块
└── ruoyi-system // 系统核心模块
├── domain // 实体类
├── mapper // 数据访问层
└── service // 业务逻辑层
4.2 配置文件详解
主要配置文件位置 :ruoyi-admin/src/main/resources/
application.yml 核心配置:
java
# 项目相关配置
ruoyi:
name: RuoYi # 系统名称
version: 3.8.7 # 系统版本
profile: D:/ruoyi/uploadPath # 文件上传路径
captchaType: math # 验证码类型
# 服务器配置
server:
port: 8080 # 服务端口
servlet:
context-path: / # 上下文路径
# Spring配置
spring:
profiles:
active: druid # 激活的配置文件
redis: # Redis配置
host: localhost
port: 6379
password: 123456
servlet:
multipart:
max-file-size: 10MB # 单个文件大小限制
max-request-size: 20MB # 总文件大小限制
# Token配置
token:
header: Authorization # Token请求头
secret: abcdefghijklmnopqrstuvwxyz # Token密钥
expireTime: 30 # Token有效期(分钟)
# MyBatis配置
mybatis:
typeAliasesPackage: com.ruoyi.**.domain
mapperLocations: classpath*:mapper/**/*Mapper.xml
# Swagger配置
swagger:
enabled: true # 是否开启Swagger
pathMapping: /dev-api # 请求前缀
4.3 模块依赖关系
java
ruoyi-admin
↑
ruoyi-system ruoyi-framework ruoyi-quartz ruoyi-generator
↑ ↑
ruoyi-common
4.4 前端项目结构
java
ruoyi-vue3/
├── src/
│ ├── api/ // 所有请求接口
│ ├── assets/ // 静态资源
│ ├── components/ // 全局公用组件
│ ├── directive/ // 全局指令
│ ├── layout/ // 布局组件
│ ├── router/ // 路由配置
│ ├── store/ // 状态管理
│ ├── utils/ // 工具方法
│ ├── views/ // 页面组件
│ ├── App.vue // 根组件
│ ├── main.js // 入口文件
│ ├── permission.js // 权限控制
│ └── settings.js // 系统设置
├── public/ // 公共资源
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── package.json // 项目依赖配置
└── vite.config.js // Vite配置
4.5 数据库表结构分类
系统管理相关表:
-
sys_user:用户表 -
sys_role:角色表 -
sys_menu:菜单表 -
sys_dept:部门表 -
sys_post:岗位表
系统监控相关表:
-
sys_logininfor:登录日志 -
sys_oper_log:操作日志 -
sys_job:定时任务 -
sys_job_log:定时任务日志
业务功能相关表:
- 各业务模块表(如
course课程表)
辅助功能表:
-
sys_dict_type:字典类型 -
sys_dict_data:字典数据 -
sys_config:参数配置 -
sys_notice:通知公告
5. 源码阅读与核心原理
5.1 前端代码分析(课程管理模块)
核心文件 :src/views/course/course/index.vue
组件结构分析:
html
<template>
<div class="app-container">
<!-- 1. 搜索表单区域 -->
<el-form :model="queryParams" ref="queryRef" :inline="true">
<!-- 查询条件字段 -->
</el-form>
<!-- 2. 按钮操作区域 -->
<el-row :gutter="10" class="mb8">
<el-button type="primary" @click="handleAdd">新增</el-button>
<!-- 其他操作按钮 -->
</el-row>
<!-- 3. 数据表格区域 -->
<el-table :data="courseList" @selection-change="handleSelectionChange">
<!-- 表格列定义 -->
</el-table>
<!-- 4. 分页组件 -->
<pagination
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 5. 表单对话框 -->
<el-dialog :title="title" v-model="open" width="500px">
<el-form ref="courseRef" :model="form" :rules="rules">
<!-- 表单字段 -->
</el-form>
</el-dialog>
</div>
</template>
<script setup>
// 1. 引入API接口
import { listCourse, addCourse, updateCourse, delCourse } from "@/api/course/course";
// 2. 响应式数据定义
const courseList = ref([]); // 课程列表数据
const loading = ref(true); // 加载状态
const total = ref(0); // 总条数
const queryParams = reactive({ // 查询参数
pageNum: 1,
pageSize: 10,
// ...其他查询条件
});
// 3. 获取数据字典
const { course_subject } = proxy.useDict('course_subject');
// 4. 核心方法
/** 查询课程列表 */
function getList() {
loading.value = true;
listCourse(queryParams.value).then(response => {
courseList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
/** 提交表单 */
function submitForm() {
proxy.$refs["courseRef"].validate(valid => {
if (valid) {
if (form.value.id != null) {
// 修改操作
updateCourse(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
// 新增操作
addCourse(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
// 5. 生命周期钩子
onMounted(() => {
getList();
});
</script>
5.2 后端代码分析
5.2.1 Controller层分析
CourseController示例:
java
@RestController
@RequestMapping("/course/course")
public class CourseController extends BaseController {
@Autowired
private ICourseService courseService;
/**
* 查询课程列表(分页)
*/
@PreAuthorize("@ss.hasPermi('course:course:list')")
@GetMapping("/list")
public TableDataInfo list(Course course) {
// 1. 开启分页
startPage();
// 2. 查询数据
List<Course> list = courseService.selectCourseList(course);
// 3. 返回分页数据
return getDataTable(list);
}
/**
* 新增课程
*/
@PreAuthorize("@ss.hasPermi('course:course:add')")
@Log(title = "课程管理", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody Course course) {
return toAjax(courseService.insertCourse(course));
}
}
5.2.2 核心基类解析
BaseController核心方法:
java
public class BaseController {
/**
* 设置请求分页数据
*/
protected void startPage() {
PageUtils.startPage();
}
/**
* 响应请求分页数据
*/
protected TableDataInfo getDataTable(List<?> list) {
TableDataInfo rspData = new TableDataInfo();
rspData.setCode(HttpStatus.SUCCESS);
rspData.setMsg("查询成功");
rspData.setRows(list);
rspData.setTotal(new PageInfo(list).getTotal());
return rspData;
}
/**
* 响应返回结果
*/
protected AjaxResult toAjax(int rows) {
return rows > 0 ? AjaxResult.success() : AjaxResult.error();
}
}
5.2.3 统一返回对象
TableDataInfo:分页查询统一返回对象
java
public class TableDataInfo {
private long total; // 总记录数
private List<?> rows; // 列表数据
private int code; // 状态码
private String msg; // 消息
// getter/setter
}
AjaxResult:操作结果统一返回对象
java
public class AjaxResult extends HashMap<String, Object> {
// 成功响应
public static AjaxResult success() {
return AjaxResult.success("操作成功");
}
// 错误响应
public static AjaxResult error(String msg) {
return AjaxResult.error(HttpStatus.ERROR, msg);
}
}
5.2.4 实体基类
BaseEntity:所有实体类默认继承的基类
java
public class BaseEntity implements Serializable {
private static final long serialVersionUID = 1L;
/** 搜索值 */
private String searchValue;
/** 创建者 */
private String createBy;
/** 创建时间 */
private Date createTime;
/** 更新者 */
private String updateBy;
/** 更新时间 */
private Date updateTime;
/** 备注 */
private String remark;
/** 请求参数 */
private Map<String, Object> params;
// getter/setter
}
5.2.5 权限控制机制
@PreAuthorize注解:Spring Security权限检查
java
// 检查是否有指定权限
@PreAuthorize("@ss.hasPermi('course:course:list')")
// 检查是否有多个权限之一
@PreAuthorize("@ss.hasPermi('course:course:list') or @ss.hasPermi('course:course:query')")
// 检查角色
@PreAuthorize("@ss.hasRole('admin')")
权限表达式解析:
java
// PermissionService.hasPermi 方法实现
public boolean hasPermi(String permission) {
// 1. 获取当前用户权限列表
Set<String> permissions = getLoginUser().getPermissions();
// 2. 检查是否包含指定权限
return StringUtils.hasText(permission)
&& permissions.contains(permission.trim());
}
权限控制流程:
-
用户登录,系统加载用户权限信息
-
访问接口时,Spring Security拦截请求
-
调用权限服务检查用户权限
-
有权限则放行,无权限则返回403
5.3 前后端交互流程
5.3.1 查询流程分析
前端发起请求:
javascript
// 1. 调用API接口
listCourse(queryParams).then(response => {
// 2. 处理响应数据
courseList.value = response.rows;
total.value = response.total;
});
// API接口定义
export function listCourse(query) {
return request({
url: '/course/course/list',
method: 'get',
params: query
});
}
后端处理流程:
-
请求到达Controller
-
权限检查(@PreAuthorize)
-
开启分页(startPage())
-
调用Service查询数据
-
封装分页结果返回
5.3.2 跨域配置
Vue项目代理配置(vite.config.js):
javascript
export default defineConfig({
server: {
port: 80,
open: true,
proxy: {
// 开发环境代理配置
[env.VITE_APP_BASE_API]: {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
}
}
}
});
Spring Boot跨域配置:
java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
}
快速回忆与查找指南
🎯 核心知识点速查
| 类别 | 关键点 | 快速定位 |
|---|---|---|
| 环境搭建 | JDK 11、MySQL 8、Redis 5、Node 16 | 第1.2节 |
| 代码生成 | 单表/树表/主子表模板、字段配置 | 第2.3节 |
| 权限系统 | RBAC模型、@PreAuthorize注解 | 第3.1.1节 |
| 数据字典 | 静态数据管理、字典类型/数据 | 第3.1.2节 |
| 定时任务 | @Scheduled、Cron表达式、Web管理 | 第3.2.2节 |
| 项目结构 | 模块划分、依赖关系、配置位置 | 第4章 |
| 前后端交互 | TableDataInfo、AjaxResult、跨域配置 | 第5.2-5.3节 |
| 二次开发 | 模块创建、主子表开发、页面定制 | 第6章 |
🔧 常见问题排查
-
项目启动失败:
-
检查MySQL、Redis连接配置
-
确认端口是否被占用
-
查看Maven依赖是否下载完整
-
-
代码生成问题:
-
确认表结构有主键和注释
-
检查数据库连接配置
-
查看生成配置是否完整
-
-
权限控制无效:
-
确认用户角色权限分配
-
检查@PreAuthorize注解格式
-
查看权限字符串是否匹配
-
-
前后端跨域:
-
检查Vite代理配置
-
确认后端CORS配置
-
查看网络请求地址
-
📁 重要文件位置
| 文件 | 路径 | 作用 |
|---|---|---|
| 主配置文件 | ruoyi-admin/src/main/resources/application.yml |
核心配置 |
| 数据源配置 | ruoyi-admin/src/main/resources/application-druid.yml |
数据库连接 |
| 前端入口 | src/main.js |
Vue应用入口 |
| 路由配置 | src/router/index.js |
路由管理 |
| 权限控制 | src/permission.js |
前端权限拦截 |
| 系统设置 | src/settings.js |
主题、布局配置 |
| 代码生成配置 | ruoyi-generator/src/main/resources/generator.yml |
代码生成器配置 |