项目说明文档

项目名称

学霸急救箱 (xueba-system)

项目类型

在线学习资源平台 / 教育管理系统

开发语言

• 后端: Java 17
• 前端: JavaScript (ES6+)

技术栈

后端技术栈

• 核心框架: Spring Boot 3.5.3
• 持久化框架: Spring Data JPA (Hibernate)
• Web框架: Spring Web MVC
• 数据库驱动: MySQL Connector/J
• 构建工具: Maven
• 服务器端口: 8080

前端技术栈

• 前端框架: Vue 3.5.17
• UI组件库: Element Plus 2.4.0
• 路由管理: Vue Router 4.2.0
• HTTP客户端: Axios 1.6.0
• 图标库: @element-plus/icons-vue 2.3.0
• 构建工具: Vite 7.0.0
• 开发辅助: Vite Plugin Vue DevTools 7.7.7

数据库

• 数据库类型: MySQL
• 数据库名称: xueba_db
• 数据库地址: localhost:3306
• 字符编码: UTF-8
• 时区: GMT+8
• DDL模式: update (自动更新表结构)

用户界面

• 界面类型: Web GUI (浏览器界面)
• 前端端口: 5173 (开发环境)
• 后端端口: 8080
• 跨域配置: 已配置CORS,允许前端访问

项目功能

1. 用户管理模块

• 用户注册: 新用户账号注册功能,支持用户名唯一性校验
• 用户登录: 用户身份验证,基于用户名和密码的认证机制
• 会话管理: 用户登录状态管理,退出登录功能

2. 科目管理模块

• 科目列表展示: 显示所有可学习的科目
• 科目分类: 包含以下9个主要科目:
  • 高等数学
  • 线性代数
  • 概率论
  • 离散数学
  • 大学英语
  • 大学物理
  • 数据结构
  • 马克思主义基本原理
  • 中国近现代史纲要

3. 学习资源模块

• 文字资料:
  • 每个科目配备详细的课程概述
  • 主要内容知识点列表
  • 学习建议和方法指导
  • 参考资料推荐
• 视频资料:
  • 精选在线教学视频链接
  • 来源于中国大学MOOC、网易公开课、Coursera等平台
  • 包含课程标题、描述、时长、观看人数等信息
  • 支持点击跳转到外部视频平台

4. 权限控制

• 未登录状态: 可以浏览科目列表,但无法查看学习资料详情
• 登录后状态: 可以查看所有科目的文字资料和视频资料
• 登录提示: 未登录时显示友好的登录引导界面

5. 界面功能

• 响应式设计: 支持PC端和移动端自适应布局
• 导航栏: 顶部导航栏显示系统名称和用户状态
• 侧边栏: 左侧科目菜单,支持科目切换
• 内容区: 主要内容展示区域,支持标签页切换(文字/视频)
• 对话框: 登录和注册弹窗表单

项目结构

后端结构

xueba-system/
├── src/main/java/com/xuebasystem/
│   ├── XuebaSystemApplication.java        # Spring Boot启动类
│   ├── controller/                        # 控制器层
│   │   ├── UserController.java           # 用户接口
│   │   └── SubjectController.java        # 科目接口
│   ├── entity/                            # 实体类层
│   │   ├── User.java                     # 用户实体
│   │   └── Subject.java                  # 科目实体
│   ├── repository/                        # 数据访问层
│   │   ├── UserRepository.java           # 用户Repository
│   │   └── SubjectRepository.java        # 科目Repository
│   └── config/                            # 配置类
│       ├── CorsConfig.java               # 跨域配置
│       └── DataInitializer.java          # 数据初始化
└── src/main/resources/
    └── application.properties             # 应用配置文件

前端结构

xueba-frontend/
├── index.html                             # HTML入口
├── src/
│   ├── main.js                           # Vue应用入口
│   ├── App.vue                           # 根组件
│   └── components/
│       └── HomePage.vue                  # 主页组件
├── package.json                          # 项目依赖配置
└── vite.config.js                        # Vite构建配置

核心数据表

users表

字段名	类型	说明
id	BIGINT	主键,自增
username	VARCHAR	用户名,唯一,非空
password	VARCHAR	密码,非空

subjects表

字段名	类型	说明
id	BIGINT	主键,自增
name	VARCHAR	科目名称,非空
description	VARCHAR(1000)	科目描述

API接口

用户接口

• POST /api/user/register – 用户注册
• POST /api/user/login – 用户登录

科目接口

• GET /api/subject/list – 获取科目列表
• GET /api/subject/{id}/materials – 获取科目学习资料

运行环境要求

• JDK: 17+
• Node.js: 14+
• MySQL: 5.7+ 或 8.0+
• Maven: 3.6+
• 浏览器: Chrome/Firefox/Edge 最新版

启动方式

后端启动

cd system/xueba-system
mvn spring-boot:run

前端启动

cd frontend/xueba-frontend
npm install
npm run dev

项目特色

1. 前后端分离架构: 清晰的模块划分,便于维护和扩展
2. 现代化UI设计: 采用Element Plus组件库,界面美观友好
3. 丰富的学习资源: 整合多个主流在线教育平台的优质课程
4. 完善的权限控制: 登录验证机制,保护学习资源
5. 响应式设计: 支持多终端访问,提升用户体验
6. 数据持久化: 使用JPA自动管理数据库表结构

未来扩展方向

• 增加练习题和测试功能
• 添加学习进度追踪
• 实现学习笔记功能
• 支持用户评论和交流
• 添加学习数据统计和可视化
• 实现更完善的用户权限管理(如VIP会员)

演示