基于SpringBoot2+vue2的智能学习平台系统

智能学习平台

1. 获取地址

https://fifteen.xiaobias.com/source/208

2. 项目简介

本项目是一个面向在线教育的智能学习平台，旨在为教师和学生提供课程管理、在线考试、论坛交流、公告通知等一体化学习服务。系统支持多角色登录（学生、教师、管理员），学生可浏览课程、参加考试、查看错题本、发布论坛帖子；教师可管理课程、批阅试卷；管理员则拥有系统配置、用户管理等最高权限。

平台核心功能包括：

• 课程信息管理：教师发布课程（含视频、文档、图片），学生在线查看课程详情并留言。
• 在线考试系统：支持试卷管理、试题录入（单选、多选、判断、填空）、自动评分、考试记录与错题本。
• 论坛交流：学生、教师、管理员均可发布帖子与回复，实现教学互动。
• 公告信息：管理员发布公告，展示于首页。
• 个人中心：用户可修改个人信息、头像、密码等。
• 后台管理：管理员对用户、课程、试卷、试题、字典表等进行维护。

3. 技术栈

4. 详细介绍

4.1 模块划分

系统分为前台用户端和后台管理端（但未提供独立的admin页面，通过角色权限在同一界面区分）。主要业务模块如下：

4.1.1 用户角色

• 学生：注册登录后，可浏览课程、参加考试、查看考试记录和错题本、论坛发帖/回复、修改个人资料。
• 教师：发布课程（上传图片、视频、文档），查看课程留言并回复，管理自己发布的课程。
• 管理员：后台管理用户（学生/教师）、字典表、试卷表、试题表、公告、论坛帖子审核等。

4.1.2 课程管理

• 课程列表展示（含分类筛选、搜索）。
• 课程详情页：展示课程图片、视频、文档下载链接，教师信息，课程内容（富文本）。
• 课程留言功能：学生可留言，教师可回复。

4.1.3 考试系统

• 试卷管理：管理员/教师创建试卷，设置考试时长、总分。
• 试题管理：支持单选题、多选题、判断题、填空题，每道题可设置分值、选项（JSON存储）、正确答案、解析。
• 在线考试：学生选择试卷开始考试，前端计时，逐题作答，提交后自动计算得分，保存考试记录及错题到错题本。
• 考试记录：学生可查看历史考试详情（每道题的作答、得分、正确答案、解析）。
• 错题本：自动记录答错的题目，方便学生复习。

4.1.4 论坛交流

• 帖子列表：展示所有正常状态的帖子，支持分页。
• 发帖功能：登录用户可发布新帖子（标题+内容）。
• 帖子详情：显示主帖内容，下方展示评论（回复），且可继续回复。
• 帖子状态：1-正常，2-审核中，管理员可审核/删除。

4.1.5 公告信息

• 首页展示最新公告（带图片），列表页支持分类、搜索。
• 公告详情页显示完整内容。

4.1.6 个人中心

• 学生/教师可修改自己的账户信息、头像、联系方式、邮箱等。
• 重置密码功能（默认初始密码123456）。

4.1.7 数据字典

• 系统通过字典表管理下拉选项（如课程类型、性别、试题类型、帖子状态等），支持动态配置。

4.2 数据库设计要点

5. 部分代码

5.1 后端 – 课程信息控制器（KechengController.java）

@RestController@RequestMapping("/kecheng")publicclassKechengController{@AutowiredprivateKechengServicekechengService;@AutowiredprivateDictionaryServicedictionaryService;// 前端列表（忽略认证）@IgnoreAuth@RequestMapping("/list")publicRlist(@RequestParamMap<String,Object>params,HttpServletRequestrequest){PageUtilspage=kechengService.queryPage(params);List<KechengView>list=(List<KechengView>)page.getList();for(KechengViewc:list){dictionaryService.dictionaryConvert(c,request);}returnR.ok().put("data",page);}// 前端详情@RequestMapping("/detail/{id}")publicRdetail(@PathVariable("id")Longid,HttpServletRequestrequest){KechengEntitykecheng=kechengService.selectById(id);if(kecheng!=null){KechengViewview=newKechengView();BeanUtils.copyProperties(kecheng,view);dictionaryService.dictionaryConvert(view,request);returnR.ok().put("data",view);}returnR.error(511,"查不到数据");}}

5.2 前端 – 课程信息列表页（kecheng/list.html）

主要功能：展示课程卡片，支持按课程类型筛选、按名称搜索，点击进入详情。

<divclass="travel-gallery-wrapper"><divclass="row"><divv-for="(item,index) in dataList"class="col-md-3 col-sm-6 col-xs-6 col-lg-3 single-box"><div@click="jumpCheck('../kecheng/detail.html?id='+item.id, item.aaaaaaaaaa, item.shangxiaTypes)"><divclass="part-img"><img:src="item.kechengPhoto?item.kechengPhoto.split(',')[0]:''"style="height:350px;width:100%"></div><divclass="part-txt"><divclass="title"><h3>{{item.kechengName}}</h3><pv-if="item.kechengNewMoney">{{item.kechengNewMoney}} RMB</p><pv-else>{{item.kechengValue}}</p></div></div></div></div></div></div><script>// 分页查询functionpageList(){http.request('kecheng/list','get',vue.searchForm,function(res){vue.dataList=res.data.list;laypage.render({...});});}</script>

5.3 前端 – 考试页面（exampaper/exam.html）

核心考试逻辑：倒计时、逐题作答、自动评分、保存答题记录。

// 提交答案submitTap(){letmyscore=0;if(this.answer==this.ruleForm.examquestionAnswer){this.score+=this.ruleForm.examquestionScore;myscore=this.ruleForm.examquestionScore;}letrecord={examredetailsUuidNumber:layui.http.getParam("paperUUID"),examquestionId:this.ruleForm.id,examredetailsMyscore:myscore,examredetailsMyanswer:this.answer,yonghuId:this.user.id,};http.requestJson(`examredetails/saveExamredetails?examrecordId=`+examrecordId,'post',record);}

6. 部分截图

7. 项目总结

本项目是一个功能相对完整的在线学习平台，实现了课程资源管理、在线考试与自动评分、论坛社交、公告发布等核心教育场景需求。技术选型成熟稳定，Spring Boot 提供高效的后端服务，Mybatis-Plus 简化数据访问，前端使用 Layui 和 Vue 结合，降低了开发成本。

项目亮点：

• 完善的考试子系统：支持多种题型、计时考试、自动判分、错题本记录，学生可反复练习。
• 多角色权限控制：通过 token 拦截器和 session 角色区分，不同角色看到不同操作按钮。
• 字典表动态配置：下拉选项可后台维护，提高系统灵活性。
• 论坛互动：师生均可参与讨论，增强学习氛围。

总体而言，该平台可作为中小型教育培训机构或学校在线学习系统的初始版本，具备良好的扩展基础。