一、项目概述
搭建一个基于 Spring Boot + Vue + MyBatis-Plus 的前后端分离学生管理系统。通过该系统，你将学会：
- 使用 Vue 3 构建前端页面，实现数据交互
- 整合 MyBatis-Plus 简化数据库操作
- 实现学生信息的增删改查功能
二、技术栈选型
| 技术栈 | 说明 |
|---|---|
| 后端 | Spring Boot 2.x |
| 数据库 | MySQL 8.0 |
| 持久层框架 | MyBatis-Plus 3.5.x |
| 前端框架 | Vue 3 + Vue Router + Vuex |
| UI 组件库 | Element Plus |
| 跨域解决方案 | Spring Boot 原生 CORS |
三、后端开发步骤
1. 创建 Spring Boot 项目
使用 IDEA 快速创建
手动添加依赖（pom.xml）
2. 配置数据库连接（application.yml）
3. 创建实体类（Student.java）
4. 编写 Mapper 接口
5. 实现 Service 层
6. 编写 Controller
7. 启用跨域（配置类）
四、前端开发步骤
1. 数据加载与状态管理
响应式状态定义
数据获取逻辑
3. 新增 / 编辑功能
表单提交逻辑
4. 删除功能
五、项目运行与测试
1. 启动后端服务
- 确保 MySQL 已启动，并创建数据库
student
- 运行 Spring Boot 主类后端服务启动在
http://localhost:8080
2. 启动前端项目
前端访问地址：http://localhost:5174
六、功能演示
- 新增学生：点击「新增学生」按钮，填写表单后保存
- 编辑学生：点击列表中学生的姓名，修改信息后保存
- 删除学生：点击「删除」按钮确认删除
- 搜索功能：在搜索栏输入关键词（支持姓名或班级模糊查询）
- 分页功能：切换页码或每页显示数量
