Ruoyi-Vue3实战：10分钟搞定学生管理系统CRUD（附完整SQL）

Ruoyi-Vue3学生管理系统实战从零到部署的完整指南在当今快速迭代的开发环境中选择高效的技术栈至关重要。Ruoyi-Vue3作为基于Spring Boot和Vue3的企业级开发框架以其模块化设计和丰富的功能组件成为快速构建管理系统的首选方案。本文将带您完整实现一个学生信息管理系统涵盖数据库设计、前后端代码生成、联调测试等全流程特别适合需要快速交付教学演示或毕业设计的开发者。1. 环境准备与项目初始化在开始之前确保您的开发环境满足以下基础要求JDK 1.8或更高版本Node.js 14.x以上MySQL 5.7Maven 3.6Ruoyi-Vue3框架的安装可以通过以下步骤完成# 克隆项目仓库 git clone https://gitee.com/y_project/RuoYi-Vue.git # 进入项目目录 cd RuoYi-Vue # 安装前端依赖 npm install # 启动前端开发服务器 npm run dev后端项目需要使用Maven进行依赖管理在IntelliJ IDEA或Eclipse中导入项目后等待Maven自动下载所有依赖。首次启动前需要修改ruoyi-admin模块下的application.yml文件配置正确的数据库连接信息# 数据源配置 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/ry-vue?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLtrueserverTimezoneGMT%2B8 username: root password: your_password2. 数据库设计与表创建学生管理系统的核心是合理的数据结构设计。我们建议采用以下字段设计tb_student表字段名类型允许空默认值描述idint否无主键ID自增namevarchar(255)否无学生姓名ageint是NULL学生年龄genderint是NULL性别(0男1女2其他)student_novarchar(50)是NULL学号class_idint是NULL班级IDphonevarchar(20)是NULL联系电话addressvarchar(500)是NULL家庭住址statuschar(1)是1状态(0停用1正常)del_flagchar(1)是0删除标志(0存在1删除)create_timedatetime是CURRENT_TIMESTAMP创建时间update_timedatetime是CURRENT_TIMESTAMP更新时间在Navicat中执行建表SQL的便捷方法连接MySQL数据库选择ry-vue数据库点击顶部菜单查询→新建查询粘贴以下SQL语句并执行CREATE TABLE tb_student ( id int NOT NULL AUTO_INCREMENT COMMENT 学生ID, name varchar(255) NOT NULL COMMENT 学生姓名, age int DEFAULT NULL COMMENT 年龄, gender int DEFAULT 0 COMMENT 性别(0男1女2其他), student_no varchar(50) DEFAULT NULL COMMENT 学号, class_id int DEFAULT NULL COMMENT 班级ID, phone varchar(20) DEFAULT NULL COMMENT 联系电话, address varchar(500) DEFAULT NULL COMMENT 家庭住址, status char(1) DEFAULT 1 COMMENT 状态(0停用1正常), del_flag char(1) DEFAULT 0 COMMENT 删除标志(0存在1删除), create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY idx_student_no (student_no) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci COMMENT学生信息表;提示在设计表结构时建议为可能频繁查询的字段如学号添加索引以提高查询性能。同时合理设置字段的默认值和约束条件可以减少业务逻辑中的空值判断。3. 代码生成与模块配置Ruoyi-Vue3的代码生成器能极大提升开发效率。按照以下步骤生成学生管理模块的基础代码创建系统菜单登录系统后台进入系统管理→菜单管理添加一级菜单学生管理设置路由路径为/student记住菜单ID后续代码生成会用到导入数据表并生成代码进入系统工具→代码生成点击导入按钮选择刚才创建的tb_student表在生成配置页面关键设置如下生成模板选择Vue3模板上级菜单选择刚创建的学生管理菜单模块名称填写student包路径com.ruoyi.student点击提交生成代码压缩包后端模块集成在项目根目录下创建ruoyi-student模块解压生成的代码将main目录内容复制到新模块中修改根目录和ruoyi-admin模块的pom.xml添加对新模块的依赖!-- 在ruoyi-admin的pom.xml中添加 -- dependency groupIdcom.ruoyi/groupId artifactIdruoyi-student/artifactId version${ruoyi.version}/version /dependency前端代码集成将生成的Vue组件文件复制到src/views/student目录路由配置通常会自动生成检查src/router/index.js确认路由已添加如果使用API自动导入确保src/api/student.js文件已正确创建注意代码生成器生成的SQL文件需要执行这些SQL通常包含必要的菜单权限配置。在开发环境中可以直接在Navicat中执行这些SQL文件。4. 功能扩展与自定义开发基础CRUD功能生成后通常需要根据实际需求进行定制开发。以下是几个常见的扩展场景4.1 添加复杂查询功能在学生列表页面默认生成的查询条件可能比较简单。我们可以扩展查询表单添加按班级、状态等多条件查询template el-form :modelqueryParams refqueryForm :inlinetrue el-form-item label学生姓名 propname el-input v-modelqueryParams.name placeholder请输入学生姓名 clearable / /el-form-item el-form-item label学号 propstudentNo el-input v-modelqueryParams.studentNo placeholder请输入学号 clearable / /el-form-item el-form-item label班级 propclassId el-select v-modelqueryParams.classId placeholder请选择班级 clearable el-option v-foritem in classOptions :keyitem.id :labelitem.name :valueitem.id / /el-select /el-form-item el-form-item label状态 propstatus el-select v-modelqueryParams.status placeholder请选择状态 clearable el-option label正常 value1 / el-option label停用 value0 / /el-select /el-form-item el-form-item el-button typeprimary iconel-icon-search clickhandleQuery搜索/el-button el-button iconel-icon-refresh clickresetQuery重置/el-button /el-form-item /el-form /template后端Controller需要相应调整查询接口GetMapping(/list) public TableDataInfo list(Student student) { startPage(); ListStudent list studentService.selectStudentList(student); return getDataTable(list); }4.2 添加数据导入导出功能Ruoyi框架内置了Excel导入导出功能可以轻松为学生管理系统添加这些特性在Student实体类中添加Excel注解Excel(name 学生姓名) private String name; Excel(name 年龄) private Integer age; Excel(name 性别, readConverterExp 0男,1女,2其他) private Integer gender; Excel(name 学号) private String studentNo;在Controller中添加导出方法PostMapping(/export) public void export(HttpServletResponse response, Student student) { ListStudent list studentService.selectStudentList(student); ExcelUtilStudent util new ExcelUtil(Student.class); util.exportExcel(response, list, 学生数据); }前端添加导出按钮并调用接口el-button typewarning plain iconel-icon-download clickhandleExport 导出/el-button // 方法实现 handleExport() { this.download(/student/export, { ...this.queryParams }, 学生数据_${new Date().getTime()}.xlsx) }4.3 添加数据统计图表利用ECharts为学生管理系统添加数据可视化安装ECharts依赖npm install echarts --save创建统计组件template div classchart-container div refgenderChart stylewidth: 100%; height: 400px;/div /div /template script import * as echarts from echarts; export default { data() { return { genderChart: null }; }, mounted() { this.initChart(); this.loadData(); }, methods: { initChart() { this.genderChart echarts.init(this.$refs.genderChart); this.genderChart.setOption({ title: { text: 学生性别分布, left: center }, tooltip: { trigger: item }, legend: { orient: vertical, left: left }, series: [ { name: 性别分布, type: pie, radius: 50%, data: [], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } } } ] }); }, async loadData() { const res await this.$axios.get(/student/statistics/gender); this.genderChart.setOption({ series: [{ data: [ { value: res.data.male, name: 男生 }, { value: res.data.female, name: 女生 }, { value: res.data.other, name: 其他 } ] }] }); } } }; /script5. 部署与性能优化完成开发后项目需要部署到生产环境。Ruoyi-Vue3项目的前后端可以分开部署也可以一起部署。5.1 前端构建与部署前端项目构建命令# 生产环境构建 npm run build:prod构建完成后dist目录下的文件可以部署到Nginx服务器。以下是Nginx配置示例server { listen 80; server_name yourdomain.com; location / { root /path/to/ruoyi-ui/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } location /prod-api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 500 502 503 504 /50x.html; location /50x.html { root html; } }5.2 后端打包与部署后端使用Maven打包mvn clean package -Dmaven.test.skiptrue打包完成后ruoyi-admin/target目录下会生成可执行的jar文件。可以使用以下命令启动java -jar ruoyi-admin.jar --spring.profiles.activeprod对于生产环境建议使用Docker容器化部署创建DockerfileFROM openjdk:8-jdk-alpine VOLUME /tmp COPY ruoyi-admin.jar app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]构建并运行容器docker build -t ruoyi-admin . docker run -d -p 8080:8080 --name ruoyi ruoyi-admin5.3 性能优化建议数据库优化为常用查询字段添加合适索引对大表考虑分表分库策略定期执行ANALYZE TABLE更新统计信息前端优化启用Gzip压缩减少传输体积使用CDN加速静态资源加载按需加载组件减少初始包大小后端优化配置合理的线程池参数启用二级缓存减少数据库访问对热点数据使用Redis缓存// Spring Cache配置示例 Configuration EnableCaching public class CacheConfig { Bean public CacheManager cacheManager(RedisConnectionFactory factory) { RedisCacheConfiguration config RedisCacheConfiguration.defaultCacheConfig() .entryTtl(Duration.ofMinutes(30)) .disableCachingNullValues(); return RedisCacheManager.builder(factory) .cacheDefaults(config) .transactionAware() .build(); } }在实际项目中根据监控数据持续优化系统性能是关键。可以使用Spring Boot Actuator暴露监控端点结合Prometheus和Grafana建立可视化监控系统。