学生管理系统（前后端+数据库）完整思路总结

🎓 学生管理系统（前后端+数据库）完整思路总结

🚀 1. 需求目标（一句话总结）

实现一个学生信息管理系统：可以登录 → 进入管理页面 → 查看学生列表 → 添加、修改、删除学生，并把真实数据存入 MySQL 数据库中。

系统由三部分组成：

MySQL（数据库）：保存学生真实数据
Spring Boot（后端）：提供接口，负责读写数据库
Vue（前端）：提供界面，向后端请求数据展示给用户

🧱 2. 数据库设计（建表）

学生信息要持久化，就必须存入数据库，因此要先建一张 student 表：

复制代码

CREATE TABLE student (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50),
  major_class VARCHAR(50),
  hobby VARCHAR(100)
) DEFAULT CHARSET=utf8mb4;

设计思路：

id：自增唯一标识，负责区分每条记录
name / major_class / hobby：要展示、增删改的数据字段
utf8mb4：为了支持中文

🔧 3. 后端（Spring Boot）整体流程

后端负责：

接收前端请求
操作数据库
返回结果给前端

它分三层：

复制代码

Controller  →  Service  →  Mapper  →  MySQL

你可以这样讲：

⭐ 3.1 Mapper 层（最底层：负责 SQL）

写 SQL 与数据库交互，例如：

复制代码

@Select("SELECT id, name, major_class AS majorClass, hobby FROM student")
List<Student> getAllStudents();

Mapper 的作用：

直接写 SQL
插入、删除、更新、查询都在这里完成
MyBatis 会自动把查询结果封装成 Java 对象

⭐ 3.2 Service 层（业务逻辑）

复制代码

public List<Student> getAllStudents() {
    return studentMapper.getAllStudents();
}

Service 的作用：

Controller 不直接操作数据库
把 Mapper 功能组合成业务逻辑
保持代码更干净、可维护

⭐ 3.3 Controller 层（对外提供 REST API）

前端只和 Controller 打交道：

复制代码

@GetMapping("/student/list")
public List<Student> getAllStudents() { ... }

Controller 的作用：

提供接口给前端，比如：
- GET /student/list 查询所有学生
- POST /student/add 添加学生
- PUT /student/update 修改学生
- DELETE /student/delete/{id} 删除学生
返回 JSON 给前端使用

🌐 4. 前端（Vue）整体流程

用户在浏览器操作界面，Vue：

展示 UI
通过 fetch 请求后端接口
将后端返回的数据渲染在页面上
操作（增删改）后再次调用后端刷新数据

例如获取学生列表：

复制代码

fetch("http://localhost:8080/student/list")
  .then(res => res.json())
  .then(data => {
    this.students = data;
  });

⭐ 4.1 添加学生（前端→后端→数据库）

用户点击"添加学生"，触发：

① 前端发请求：

复制代码

fetch("http://localhost:8080/student/add", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({
    name, majorClass, hobby
  })
})

② 后端 Controller 收到 → 调用 Service → Mapper 插入数据库：

复制代码

@Insert("INSERT INTO student(name, major_class, hobby) VALUES(#{name}, #{majorClass}, #{hobby})")

③ 返回 "ok" → 前端刷新学生列表

前端为了保证页面最新，会再次请求：

复制代码

this.getStudents();

⭐ 4.2 修改学生（update 流程）

一样走三步：

前端 → 后端 Controller → Service → Mapper → 数据库 → 返回成功 → 前端刷新表格

⭐ 4.3 删除学生（delete 流程类似）

🎨 5. 页面美化逻辑思路

你的 UI 特点：

内容在页面中间（卡片布局）
顶部欢迎提示（显示登录用户名）
表格干净简洁
控件样式统一（按钮 hover、圆角卡片）

总结一句话：

让用户的注意力集中在数据表格，而不是周围乱七八糟的布局。

🔐 6. 登录系统思路

前端 Login.vue 成功登录后：

复制代码

localStorage.setItem("username", this.username);

管理页面读取：

复制代码

this.username = localStorage.getItem("username");

实现：

登录后显示"欢迎 xxx"
退出登录清除 localStorage

🔁 7. 整套系统数据流转图（你讲课时可以直接画）

复制代码

前端 (Vue)
   |
   | HTTP 请求 fetch()
   v
后端 Controller (REST API)
   |
   v
Service (业务层)
   |
   v
Mapper (SQL)
   |
   v
MySQL 数据库
   |
   | 返回结果 (JSON)
   v
前端渲染 UI

一句话总结：

前端显示，后端处理，数据库存储。

🏆 8. 最终解释

这个学生管理系统是一个标准的前后端分离项目。

前端使用 Vue 负责页面展示，通过 fetch 向后端发送请求。

后端使用 Spring Boot，通过三层结构（Controller--Service--Mapper）处理前端请求。

数据通过 MyBatis 映射到 MySQL 的 student 表中，实现数据的增删改查。

整个系统数据流向是：用户操作 → Vue 发送请求 → Spring Boot 接收并处理 → MySQL 存储数据 → Spring Boot 返回结果 → Vue 渲染页面。

通过这种设计，前后端解耦、代码整洁、结构清晰，便于维护和扩展。