基于springbootvue员工岗前培训学习平台一、项目概述1.1 项目背景企业新员工岗前培训缺乏线上数字化学习渠道传统线下培训存在资料难留存、考核难落地、学习进度无法追踪、资源共享不便等问题。本员工岗前培训学习平台基于 SpringBootVue 前后端分离架构开发搭建集在线学习、公告通知、线上考试、学习计划、个人信息管理于一体的数字化培训系统满足管理员、导师两类角色的培训管理与员工自主学习需求。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-PlusCRUD 快速开发数据库MySQL 8.0权限认证JWT Token 登录鉴权区分管理员 / 导师角色文件上传本地文件 / OSS 存储头像、课程配图、公告图片工具类日期工具、分页工具、试题解析工具、统一返回封装依赖Lombok、Validation 参数校验、SpringMVC部署与环境开发环境JDK8、Node16、MySQL、Maven服务器部署Tomcat / SpringBoot 内置容器、Nginx 反向代理版本管理Git1.3 系统用户角色管理员拥有全部权限管理账号、公告、学习资源、试卷试题、学习计划、导师信息、学员数据导师发布学习课程、创建学习计划、上传试题、查看学员考试记录、管理咨询指导隐含学员登录平台查看公告、学习资源、完成在线考试、维护个人中心、查看自有学习计划1.4 核心功能总览功能模块功能说明登录模块双角色切换登录、记住密码、账号密码校验、JWT 签发首页模块轮播 banner、学习资源推荐展示、导航菜单公告信息模块公告列表分页、标题搜索、公告详情查看学习资源模块课程资源列表、新增 / 编辑课程、富文本详情、图片上传试卷管理模块试卷分类、试题新增单选 / 多选 / 判断、在线考试、考试记录、自动判分个人中心模块个人信息修改、头像上传、修改密码、我的收藏、学习计划管理、试卷管理、指导咨询学习计划模块新增学习计划、富文本编辑计划内容、起止日期配置、计划列表管理二、需求分析2.1 功能性需求1登录功能支持管理员 / 导师两种身份标签切换登录账号、密码输入框勾选「记住密码」可本地缓存账号登录校验账号密码匹配、角色权限校验登录成功下发 JWT Token前端存储请求头携带鉴权登录失败提示账号不存在、密码错误、角色不匹配。2首页功能顶部全局导航栏首页、公告信息、试卷列表、学习资源、个人中心顶部轮播图展示平台宣传图下方「学习资源展示」区域展示课程卡片支持查看更多跳转右上角用户头像快捷入口跳转个人中心 / 退出登录。3公告信息模块公告列表页面顶部搜索框根据标题模糊检索公告公告卡片展示封面图、标题、简述点击卡片查看完整公告详情富文本图文内容管理员 / 导师支持新增、编辑、删除公告。4学习资源模块学习课程列表展示导师账号、姓名、发布时间、简述新增课程弹窗填写导师信息、发布时间、简述、富文本详情支持图片上传课程详情支持图文混排编辑、提交保存课程分页、修改、删除操作。5试卷管理模块试卷分类管理如数学、岗前安全、企业文化等试题管理新增试题弹窗配置所属试卷、试题类型单选 / 多选 / 判断、题目、选项、标准答案、解析、分值、排序在线考试功能加载整套试卷、倒计时、选择答案、提交后自动判分考试页面展示题目、用户作答、正确答案、解析考试记录分页查询查看历史作答得分。6学习计划模块新增学习计划表单员工工号、员工姓名、计划标题、开始 / 结束日期、计划自动生成时间、备注富文本编辑器编辑计划详细内容支持图片、文字排版保存计划个人中心可查看、编辑、删除自有学习计划。7个人中心模块左侧侧边菜单栏个人中心展示员工工号、密码、姓名、头像上传、性别、手机号支持更新基础信息修改密码旧密码、新密码、确认密码校验我的收藏管理收藏的公告、课程资源学习计划管理查看本人创建的全部学习计划学习课程管理本人发布的培训课程试卷管理本人创建的试卷、试题指导咨询管理学员咨询问答记录功能按钮更新信息、退出登录清除 Token 跳转登录页。2.2 非功能性需求性能页面响应≤1s列表分页加载大数据量不分页卡顿兼容性Chrome、Edge 主流浏览器适配PC 端网页布局安全性密码加密存储、JWT 过期校验、接口权限拦截导师不能操作管理员数据、参数防 XSS易用性表单必填项标 *、弹窗提交 / 取消、操作成功失败弹窗提示、富文本可视化编辑可维护性前后端代码分层统一返回格式接口文档清晰。三、数据库设计MySQL3.1 用户表 user管理员 导师字段名类型主键非空说明idbigint是是用户 ID 自增主键usernamevarchar(50)否是登录账号passwordvarchar(100)否是加密密码real_namevarchar(30)否是姓名roletinyint否是角色 1 - 管理员 2 - 导师avatarvarchar(255)否否头像文件路径gendertinyint否否0 - 未知 1 - 男 2 - 女phonevarchar(11)否否手机号create_timedatetime否是创建时间update_timedatetime否是更新时间del_flagtinyint否是逻辑删除 0 - 正常 1 - 删除3.2 公告表 notice字段名类型主键非空说明idbigint是是公告 IDtitlevarchar(100)否是公告标题cover_imgvarchar(255)否否封面图地址summaryvarchar(500)否否简短简述contenttext否是富文本详情内容create_userbigint否是创建人用户 IDcreate_timedatetime否是发布时间del_flagtinyint否是逻辑删除3.3 学习课程表 study_course字段名类型主键非空说明idbigint是是课程 IDteacher_idbigint否是导师用户 IDteacher_namevarchar(30)否是导师姓名summaryvarchar(500)否否课程简述contenttext否是课程富文本详情publish_timedatetime否是发布时间del_flagtinyint否是逻辑删除3.4 试卷表 exam_paper字段名类型主键非空说明idbigint是是试卷 IDpaper_namevarchar(100)否是试卷名称如数学create_userbigint否是创建导师 IDtotal_scoreint否否试卷总分time_limitint否否考试时长分钟create_timedatetime否是创建时间del_flagtinyint否是逻辑删除3.5 试题表 exam_question字段名类型主键非空说明idbigint是是试题 IDpaper_idbigint否是所属试卷 IDquestion_typetinyint否是1 单选 2 多选 3 判断titletext否是题目内容optionstext否是选项 JSON 存储 [{“key”:“A”,“val”:“0”},...]answervarchar(200)否是标准答案 多选逗号分隔 B,Danalysistext否否试题解析scoreint否是单题分值sortint否是排序号del_flagtinyint否是逻辑删除3.6 考试记录表 exam_record字段名类型主键非空说明idbigint是是记录 IDpaper_idbigint否是试卷 IDuser_idbigint否是作答学员 IDanswer_detailtext否是作答详情 JSONscoreint否是本次得分submit_timedatetime否是交卷时间3.7 学习计划表 study_plan字段名类型主键非空说明idbigint是是计划 IDemp_idvarchar(30)否是员工工号emp_namevarchar(30)否是员工姓名plan_titlevarchar(100)否是计划标题start_datedate否是开始日期end_datedate否是结束日期plan_timedatetime否是计划创建时间remarkvarchar(500)否否备注plan_contenttext否是富文本计划详情create_userbigint否是创建人导师 IDdel_flagtinyint否是逻辑删除3.8 收藏表 user_collect字段名类型主键非空说明idbigint是是收藏 IDuser_idbigint否是用户 IDcollect_typetinyint否是1 公告 2 课程target_idbigint否是公告 / 课程 IDcreate_timedatetime否是收藏时间四、系统模块详细设计4.1 登录模块设计前端页面双 Tab 切换管理员、导师表单校验账号密码非空localStorage 存储账号记住密码勾选状态登录按钮触发 axios 请求接收后端返回 token 存入 sessionStorage路由跳转首页未携带 token 自动拦截跳转登录页。后端接口/api/loginPOST入参 username、password、role逻辑根据账号查询用户BCrypt 校验密码匹配则生成 JWT 返回JWT 载荷存储 userId、role设置过期时间全局拦截器校验请求头 Token无 Token / 过期直接返回 401。4.2 首页模块顶部导航路由/ 首页 /notice 公告信息 /exam/paper 试卷列表 /study/course 学习资源 /user/center 个人中心轮播组件请求轮播图接口循环展示学习资源区域请求课程分页接口展示前几条卡片「查看更多」跳转学习资源列表。4.3 公告信息模块列表接口/api/notice/listGET支持 title 模糊查询、分页新增 / 编辑弹窗富文本上传封面图、正文图片提交保存详情页面回显全部图文内容删除接口逻辑删除不物理清除数据。4.4 学习课程模块列表分页查询全部课程展示导师信息、发布时间、简述新增课程弹窗自动填充当前登录导师账号、姓名、系统时间WangEditor 富文本支持拖拽 / 上传图片提交接口保存富文本 HTML 内容至数据库 content 字段。4.5 试卷 试题模块试卷管理新增试卷分类名称试题新增弹窗下拉选择所属试卷、试题类型动态渲染多组选项输入框支持新增 / 删除选项多选答案支持多选项勾选填写解析、分值、排序在线考试流程选择试卷加载全部试题前端倒计时计时用户选择答案缓存提交后后端批量对比标准答案自动计算得分保存考试记录回显每道题用户答案、正确答案、解析。4.6 学习计划模块新增计划表单员工工号、姓名、计划标题为必填日期选择器限制结束日期大于开始日期富文本编辑器编写培训计划细则保存后存入 study_plan 表个人中心可查询当前用户创建的全部计划。4.7 个人中心模块侧边栏菜单路由区分各子功能基础信息回显用户工号、姓名、手机号、性别、头像头像上传接口后端接收图片文件存储路径更新至 user 表 avatar更新信息接口修改手机号、性别等修改密码接口校验旧密码加密新密码更新退出登录清空本地 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、静态文件上传目录七、系统运行流程用户打开页面无 Token 自动跳转登录页选择管理员 / 导师角色输入账号密码登录获取 Token进入首页浏览轮播、推荐学习资源通过顶部导航切换功能模块公告信息查看培训通知公告学习资源浏览 / 发布线上培训课程试卷列表管理试题、发起在线考试、完成答题个人中心维护个人信息、管理自己创建的课程 / 试卷 / 学习计划导师创建学习计划分配给对应员工员工查看计划并完成配套线上考试操作完成后点击退出登录清除 Token 返回登录页面。八、项目部署说明前端打包npm run builddist 文件夹放入 Nginx 静态资源目录后端打包Maven clean package生成 jar 包MySQL 执行项目数据库初始化 SQL 脚本创建表、初始化管理员账号服务器运行 jar 包java -jar training.jarNginx 配置反向代理前端页面访问转发至静态资源/api 请求转发至 SpringBoot 后端端口配置文件上传路径、JWT 过期时间、数据库连接信息。九、项目资料 精彩专栏推荐订阅 在下方专栏不然下次找不到哟《Java精品推荐项目》《springbootvue项目100套》《ssm项目100套》《微信小程序合集》