基于 Spring Boot 3 与 Vue 3 的家校互动平台

家校互动系统

基于 Spring Boot 3 与 Vue 3 的家校互动平台,支持通知发布、作业布置与批改、消息沟通、家长会管理;管理员可管理全系统用户。

项目截图


功能概览

模块 说明
首页 仪表盘:待办通知、未读消息、作业与家长会入口
通知 发布/查看通知,类型筛选,置顶与阅读确认
作业 布置作业、提交作业、批改与成绩
消息 私信、通讯录、群聊、家长留言
家长会 发布/查看家长会,时间地点与回执
用户管理 仅管理员:用户分页、编辑、重置密码、删除
孩子管理 仅家长:孩子信息管理
个人中心 个人信息、修改密码

角色与权限

角色 说明
ADMIN 管理员:用户管理(增删改、重置密码);可发布通知/作业/家长会;无删除通知/作业权限
TEACHER 教师:发布通知/作业/家长会,批改作业,可删除通知/作业
PARENT 家长:查看通知、提交作业、消息、家长会,孩子管理

技术栈

  • 后端:Spring Boot 3.x、Spring Security、JWT、MyBatis-Plus、MySQL、Redis、WebSocket
  • 前端:Vue 3、Vite、Pinia、Vue Router、Element Plus、Axios

项目结构

复制代码
Parent-School/
├── backend/                    # 后端
│   ├── src/main/java/com/school/parent/
│   │   ├── common/              # 统一响应、异常
│   │   ├── config/              # Security、MyBatis、Redis、CORS、WebSocket
│   │   ├── security/            # JWT、登录过滤器
│   │   └── module/
│   │       ├── user/            # 用户、登录、注册、用户管理
│   │       ├── announcement/   # 通知
│   │       ├── homework/        # 作业与提交
│   │       ├── message/         # 私信、群聊、家长留言
│   │       └── meeting/         # 家长会
│   └── src/main/resources/
│       ├── application.yml
│       ├── schema.sql           # 建表脚本
│       └── data-test.sql        # 可选示例数据
│
└── frontend/                    # 前端
    ├── src/
    │   ├── api/                 # 接口
    │   ├── layouts/             # 布局(侧边栏、头部)
    │   ├── views/               # 页面
    │   ├── stores/              # Pinia
    │   └── router/
    └── vite.config.js           # 开发代理 /api、/ws → 8080

快速开始

1. 数据库

创建库并执行建表(脚本会创建 parent_school 及所有表):

bash 复制代码
cd backend
mysql -u root -p < src/main/resources/schema.sql

或手动在 MySQL 中执行 backend/src/main/resources/schema.sql。

2. 配置

编辑 backend/src/main/resources/application.yml:

  • spring.datasource.url / username / password:MySQL 连接
  • spring.data.redis:Redis(可选,部分功能依赖)
  • jwt.secret:JWT 密钥(生产环境请改为 64 字符以上随机串)

3. 启动后端

bash 复制代码
cd backend
mvn spring-boot:run

默认端口:8080 。首次运行若无用户会自动创建管理员 admin / admin123。

4. 启动前端

bash 复制代码
cd frontend
npm install --registry=https://registry.npmmirror.com
npm run dev

默认端口:5173 ,代理 /api、/ws 到 8080。

5. 访问

  • 前端:http://localhost:5173
  • 登录后按角色看到对应菜单(管理员有「用户管理」,家长有「孩子管理」)。

测试数据(可选)

使用内置 TestDataGenerator 可一次性生成大量测试数据(仅当 spring.profiles.active=testdata 时执行,且不启动 Web 服务):

bash 复制代码
cd backend
mvn spring-boot:run "-Dspring-boot.run.profiles=testdata"

生成规模(库中无用户时):1 管理员 + 50 教师 + 200 家长,以及通知、作业、作业提交、私信、群聊、家长留言、家长会等。

数据类型 数量说明
用户 admin / admin123;teacher001~teacher050、parent001~parent200 密码均为 123456
通知/作业/家长会等 见 TestDataGenerator 注释

若库中已有用户,则只复用现有用户并生成业务数据。也可仅执行 data-test.sql 插入少量示例数据。


API 概览

接口 说明
POST /api/auth/login 登录
POST /api/auth/register 注册
GET /api/auth/info 当前用户信息
GET /api/announcement/list 通知列表(分页、类型、关键字)
GET /api/homework/list 作业列表
GET /api/message/list 会话列表
GET /api/meeting/list 家长会列表
GET /api/user/page 用户分页(仅 ADMIN)
PUT /api/user/{id} 更新用户(仅 ADMIN)
DELETE /api/user/{id} 删除用户(仅 ADMIN,不可删自己)

更多见各 Controller。


说明

  • 首次运行前请执行 schema.sql 并配置数据库与 jwt.secret。
  • 管理员可由 InitRunner 自动创建(admin/admin123),或通过注册接口注册后手动改角色。
  • 文件上传路径见 application.yml 中的 file.upload-path,可按需配置静态资源映射。
相关推荐
非优秀程序员2 小时前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
非优秀程序员2 小时前
第06章 浙江帮的内战|《互联网产品恩仇录》
后端
非优秀程序员2 小时前
第08章 马云的反击|《互联网产品恩仇录》
后端
非优秀程序员2 小时前
题记|《互联网产品恩仇录》
后端·程序员·创业
非优秀程序员2 小时前
第04章 邮箱大战,163 与 QQ 的暗战|《互联网产品恩仇录》
java·vue.js·架构
Gopher_HBo6 小时前
Go CPU 剖析的"地基":信号、CAS、写屏障、无锁环形缓冲
后端
panbook6 小时前
从0到1实现一个分布式时序数据库(二):写入成功之后,如何用 WAL 找回数据
后端
Swot6 小时前
上传一张 4MB 图片,我先后撞上了三层请求体限制
后端
IT_陈寒7 小时前
Vite的HMR把我整不会了:一个生产环境的热更新坑
前端·人工智能·后端
OLRainM7 小时前
实习复盘:大模型网关渠道质量评分实战(二)—— 报错了到底算谁的锅?流式归因与 Token 补账踩过的 8 个真坑
后端