一、项目概述

1.1 项目背景

企业新员工岗前培训缺乏线上数字化学习渠道，传统线下培训存在资料难留存、考核难落地、学习进度无法追踪、资源共享不便等问题。本员工岗前培训学习平台基于 SpringBoot+Vue 前后端分离架构开发，搭建集在线学习、公告通知、线上考试、学习计划、个人信息管理于一体的数字化培训系统，满足管理员、导师两类角色的培训管理与员工自主学习需求。

1.2 开发技术栈

前端技术（Vue 端）

• 核心框架：Vue2/Vue3 + Vue Router 路由管理

• UI 组件库：Element UI / Element Plus（表单、弹窗、分页、富文本、上传组件）

• 网络请求：Axios 封装统一请求拦截、响应拦截

• 富文本编辑器：WangEditor（学习计划、课程详情、公告内容编辑）

• 图片轮播：Swiper（首页轮播 banner）

• 工具：NPM、Vite/Webpack、本地存储 localStorage（记住密码功能）

后端技术（SpringBoot 端）

• 核心框架：SpringBoot 2.7.x

• 持久层：MyBatis / MyBatis-Plus（CRUD 快速开发）

• 数据库：MySQL 8.0

• 权限认证：JWT Token 登录鉴权（区分管理员 / 导师角色）

• 文件上传：本地文件 / OSS 存储（头像、课程配图、公告图片）

• 工具类：日期工具、分页工具、试题解析工具、统一返回封装

• 依赖：Lombok、Validation 参数校验、SpringMVC

部署与环境

• 开发环境：JDK8、Node16、MySQL、Maven

• 服务器部署：Tomcat / SpringBoot 内置容器、Nginx 反向代理

• 版本管理：Git

1.3 系统用户角色

1. 管理员：拥有全部权限，管理账号、公告、学习资源、试卷试题、学习计划、导师信息、学员数据

2. 导师：发布学习课程、创建学习计划、上传试题、查看学员考试记录、管理咨询指导

3. （隐含）学员：登录平台查看公告、学习资源、完成在线考试、维护个人中心、查看自有学习计划

1.4 核心功能总览

二、需求分析

2.1 功能性需求

（1）登录功能

1. 支持管理员 / 导师两种身份标签切换登录；

2. 账号、密码输入框，勾选「记住密码」可本地缓存账号；

3. 登录校验：账号密码匹配、角色权限校验；

4. 登录成功下发 JWT Token，前端存储，请求头携带鉴权；

5. 登录失败提示（账号不存在、密码错误、角色不匹配）。

（2）首页功能

1. 顶部全局导航栏：首页、公告信息、试卷列表、学习资源、个人中心；

2. 顶部轮播图展示平台宣传图；

3. 下方「学习资源展示」区域展示课程卡片，支持查看更多跳转；

4. 右上角用户头像快捷入口，跳转个人中心 / 退出登录。

（3）公告信息模块

1. 公告列表页面：顶部搜索框根据标题模糊检索公告；

2. 公告卡片展示封面图、标题、简述；

3. 点击卡片查看完整公告详情（富文本图文内容）；

4. 管理员 / 导师支持新增、编辑、删除公告。

（4）学习资源模块

1. 学习课程列表展示导师账号、姓名、发布时间、简述；

2. 新增课程弹窗：填写导师信息、发布时间、简述、富文本详情（支持图片上传）；

3. 课程详情支持图文混排编辑、提交保存；

4. 课程分页、修改、删除操作。

（5）试卷管理模块

1. 试卷分类管理（如数学、岗前安全、企业文化等）；

2. 试题管理：新增试题弹窗，配置所属试卷、试题类型（单选 / 多选 / 判断）、题目、选项、标准答案、解析、分值、排序；

3. 在线考试功能：加载整套试卷、倒计时、选择答案、提交后自动判分；

4. 考试页面展示题目、用户作答、正确答案、解析；

5. 考试记录分页查询，查看历史作答得分。

（6）学习计划模块

1. 新增学习计划表单：员工工号、员工姓名、计划标题、开始 / 结束日期、计划自动生成时间、备注；

2. 富文本编辑器编辑计划详细内容，支持图片、文字排版；

3. 保存计划，个人中心可查看、编辑、删除自有学习计划。

（7）个人中心模块

左侧侧边菜单栏：

• 个人中心：展示员工工号、密码、姓名、头像上传、性别、手机号，支持更新基础信息；

• 修改密码：旧密码、新密码、确认密码校验；

• 我的收藏管理：收藏的公告、课程资源；

• 学习计划管理：查看本人创建的全部学习计划；

• 学习课程管理：本人发布的培训课程；

• 试卷管理：本人创建的试卷、试题；

• 指导咨询管理：学员咨询问答记录；
  功能按钮：更新信息、退出登录（清除 Token 跳转登录页）。

2.2 非功能性需求

1. 性能：页面响应≤1s，列表分页加载，大数据量不分页卡顿；

2. 兼容性：Chrome、Edge 主流浏览器适配，PC 端网页布局；

3. 安全性：密码加密存储、JWT 过期校验、接口权限拦截（导师不能操作管理员数据）、参数防 XSS；

4. 易用性：表单必填项标 *、弹窗提交 / 取消、操作成功失败弹窗提示、富文本可视化编辑；

5. 可维护性：前后端代码分层，统一返回格式，接口文档清晰。

三、数据库设计（MySQL）

3.1 用户表 user（管理员 + 导师）

3.2 公告表 notice

3.3 学习课程表 study_course

3.4 试卷表 exam_paper

3.5 试题表 exam_question

3.6 考试记录表 exam_record

3.7 学习计划表 study_plan

3.8 收藏表 user_collect

四、系统模块详细设计

4.1 登录模块设计

1. 前端页面

   • 双 Tab 切换：管理员、导师；

   • 表单校验：账号密码非空；

   • localStorage 存储账号（记住密码勾选状态）；

   • 登录按钮触发 axios 请求，接收后端返回 token 存入 sessionStorage；

   • 路由跳转首页，未携带 token 自动拦截跳转登录页。

2. 后端接口

   • /api/loginPOST：入参 username、password、role；

   • 逻辑：根据账号查询用户，BCrypt 校验密码，匹配则生成 JWT 返回；

   • JWT 载荷存储 userId、role，设置过期时间；

   • 全局拦截器：校验请求头 Token，无 Token / 过期直接返回 401。

4.2 首页模块

1. 顶部导航路由：

/ 首页 /notice 公告信息 /exam/paper 试卷列表 /study/course 学习资源 /user/center 个人中心

2. 轮播组件请求轮播图接口，循环展示；

3. 学习资源区域请求课程分页接口，展示前几条卡片，「查看更多」跳转学习资源列表。

4.3 公告信息模块

1. 列表接口：/api/notice/listGET，支持 title 模糊查询、分页；

2. 新增 / 编辑弹窗：富文本上传封面图、正文图片，提交保存；

3. 详情页面回显全部图文内容；

4. 删除接口逻辑删除，不物理清除数据。

4.4 学习课程模块

1. 列表分页查询全部课程，展示导师信息、发布时间、简述；

2. 新增课程弹窗：

   • 自动填充当前登录导师账号、姓名、系统时间；

   • WangEditor 富文本支持拖拽 / 上传图片；

3. 提交接口保存富文本 HTML 内容至数据库 content 字段。

4.5 试卷 & 试题模块

1. 试卷管理：新增试卷分类名称；

2. 试题新增弹窗：

   • 下拉选择所属试卷、试题类型；

   • 动态渲染多组选项输入框，支持新增 / 删除选项；

   • 多选答案支持多选项勾选；

   • 填写解析、分值、排序；

3. 在线考试流程：

   1. 选择试卷加载全部试题；

   2. 前端倒计时计时；

   3. 用户选择答案缓存；

   4. 提交后后端批量对比标准答案，自动计算得分，保存考试记录；

   5. 回显每道题用户答案、正确答案、解析。

4.6 学习计划模块

1. 新增计划表单：

   • 员工工号、姓名、计划标题为必填；

   • 日期选择器限制结束日期大于开始日期；

   • 富文本编辑器编写培训计划细则；

2. 保存后存入 study_plan 表，个人中心可查询当前用户创建的全部计划。

4.7 个人中心模块

1. 侧边栏菜单路由区分各子功能；

2. 基础信息：回显用户工号、姓名、手机号、性别、头像；

3. 头像上传接口：后端接收图片文件，存储路径更新至 user 表 avatar；

4. 更新信息接口：修改手机号、性别等；

5. 修改密码接口：校验旧密码，加密新密码更新；

6. 退出登录：清空本地 token、缓存，跳转登录页。

五、前后端接口规范

5.1 统一返回格式

{"code":200,// 200成功 500失败 401未登录"msg":"操作成功","data":{}// 业务数据}

5.2 分页统一参数

请求参数：

• pageNum：页码

• pageSize：每页条数
  返回 data 包含：records（数据列表）、total（总条数）、pages（总页数）

5.3 请求头鉴权

所有非登录接口请求头携带：
Authorization: Bearer {token}

六、项目目录结构

6.1 Vue 前端目录

src/ ├── api/ # 所有接口请求封装（login.js、notice.js、exam.js、study.js、user.js） ├── assets/ # 静态图片、样式 ├── components/ # 公共组件（轮播、富文本、分页、弹窗） ├── router/ # 路由配置、路由守卫（登录拦截） ├── store/ # Vuex存储用户信息、token ├── views/ # 页面视图 │ ├── login/ # 登录页 │ ├── home/ # 首页 │ ├── notice/ # 公告列表、详情 │ ├── study/ # 学习资源、学习计划 │ ├── exam/ # 试卷列表、新增试题、在线考试 │ └── user/ # 个人中心各子页面 ├── utils/ # axios封装、日期工具、存储工具 └── App.vue、main.js 入口文件

6.2 SpringBoot 后端目录

com.training/ ├── TrainingApplication.java 启动类 ├── config/ # 配置类（跨域、JWT、MyBatis-Plus、文件上传） ├── controller/ # 控制层（LoginController、NoticeController、ExamController、StudyController、UserController） ├── service/ # 业务层接口 + impl实现类 ├── mapper/ # MyBatis Mapper接口、xml映射文件 ├── entity/ # 数据库实体类 ├── dto/vo/ # 请求入参DTO、返回VO ├── util/ # JWT工具、加密工具、分页工具 ├── exception/ # 全局异常处理 └── resources/ # application.yml配置、mapperxml、静态文件上传目录

七、系统运行流程

1. 用户打开页面，无 Token 自动跳转登录页；

2. 选择管理员 / 导师角色，输入账号密码登录，获取 Token；

3. 进入首页浏览轮播、推荐学习资源；

4. 通过顶部导航切换功能模块：

   • 公告信息：查看培训通知公告；

   • 学习资源：浏览 / 发布线上培训课程；

   • 试卷列表：管理试题、发起在线考试、完成答题；

   • 个人中心：维护个人信息、管理自己创建的课程 / 试卷 / 学习计划；

5. 导师创建学习计划，分配给对应员工，员工查看计划并完成配套线上考试；

6. 操作完成后点击退出登录，清除 Token 返回登录页面。

八、项目部署说明

1. 前端打包：npm run build，dist 文件夹放入 Nginx 静态资源目录；

2. 后端打包：Maven clean package，生成 jar 包；

3. MySQL 执行项目数据库初始化 SQL 脚本，创建表、初始化管理员账号；

4. 服务器运行 jar 包：java -jar training.jar；

5. Nginx 配置反向代理，前端页面访问转发至静态资源，/api 请求转发至 SpringBoot 后端端口；

6. 配置文件上传路径、JWT 过期时间、数据库连接信息。

九、项目资料

👇🏻 精彩专栏推荐订阅👇🏻 在下方专栏👇🏻不然下次找不到哟
《Java精品推荐项目》
《springboot+vue项目100套》
《ssm项目100套》
《微信小程序合集》