基于SpringBoot2+vue2的在线考试与学习交流系统

1. 资源

浏览全文可获取

2. 项目简介

线考试与学习交流系统，是一个基于Spring Boot和Vue.js架构的综合性Web应用。系统旨在为用户提供一个集在线学习、课程视频观看、技术论坛交流以及在线考试于一体的互动平台。

项目包含两个核心子系统：

• 后台管理系统：供管理员使用，负责管理用户信息、学习视频、试题试卷、公告论坛等核心数据，并处理考试记录与错题本。
• 前台用户系统：供普通用户使用，用户可以观看学习视频、在论坛发帖交流、参与在线考试、查看个人考试记录与错题分析。

通过将学习资源、社区互动与考核评估相结合，系统为在线教育提供了一个完整的解决方案。

3. 技术栈

该项目采用了当前主流的Java Web开发技术，前后端分离的架构模式。

• 后端技术

  • 核心框架: Spring Boot 2.2.2.RELEASE
  • 持久层框架: MyBatis-Plus 2.3
  • 数据库: MySQL 5.7.32
  • 权限控制: Apache Shiro 1.3.2 (用于身份验证与授权)
  • 其他工具: Apache Commons Lang3, HuTool, Fastjson, Apache POI (用于Excel导入导出)

• 前端技术

  • 后台管理界面: Vue.js 2.x, Element UI, ECharts
  • 用户前台界面: Layui, Vue.js, jQuery, Swiper (用于轮播图)

• 开发与部署

  • 项目构建: Maven
  • 开发工具: IDEA (推断)
  • 服务器: 内置Tomcat
  • 环境: JDK 1.8

4. 详细介绍

系统围绕“学习”和“考试”两个核心业务展开，分为管理员和普通用户两个角色。

核心功能模块如下：

• 用户管理

  • 支持用户注册、登录、个人信息维护。
  • 后台管理员可对所有用户进行增删改查操作。

• 学习视频管理

  • 管理员可以上传和管理学习视频，包括视频标题、封面、讲师、类型和详情信息。
  • 用户可以在前台观看视频，并可以对视频进行留言和回复。

• 论坛管理

  • 用户可以发布新帖（可选择帖子类型）、浏览所有帖子，并对他人帖子进行评论（回帖）。
  • 管理员可以管理所有论坛帖子，并进行删除或回复。

• 公告管理

  • 管理员可以发布、修改和删除系统公告。
  • 用户可以在首页和公告列表页查看公告详情。

• 考试与试题管理（核心模块）

  • 试卷管理：管理员可以创建试卷，设定试卷名称、考试时长和总分。
  • 试题管理：管理员可以为指定试卷添加、修改或删除试题。试题支持多种类型，包括单选题、多选题、判断题和填空题。
  • 在线考试：用户选择试卷后开始考试，系统自动计时。用户作答后，系统会根据预设的正确答案自动判分。
  • 考试记录与详情：用户可查看自己的每次考试成绩和答题详情。
  • 错题本：系统会自动将用户做错的题目收录到错题本中，方便用户回顾和复习。

• 系统配置

  • 管理员可以管理首页轮播图，实现页面动态化配置。

5. 部分代码

后端 - Spring Boot 控制器示例 (ExampaperController.java)

// 试卷表的后端控制器片段
@RestController
@RequestMapping("/exampaper")
public class ExampaperController {
    @Autowired
    private ExampaperService exampaperService;

    // 后端列表查询接口
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        // ... 权限判断逻辑
        PageUtils page = exampaperService.queryPage(params);
        // ... 数据转换逻辑
        return R.ok().put("data", page);
    }

    // 前端详情接口，允许忽略登录验证
    @IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        ExampaperEntity exampaper = exampaperService.selectById(id);
        // ... 将实体转换为View对象，并处理字典值转换
        return R.ok().put("data", view);
    }
}

后端 - 试题实体类片段 (ExamquestionEntity.java)

@TableName("examquestion")
public class ExamquestionEntity<T> implements Serializable {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private Integer exampaperId; // 所属试卷id
    private String examquestionName; // 试题名称
    private String examquestionOptions; // 选项，json字符串
    private Integer examquestionScore; // 分值
    private String examquestionAnswer; // 正确答案
    private String examquestionAnalysis; // 答案解析
    private Integer examquestionTypes; // 试题类型：1单选，2多选等
    // ... getters/setters
}

前端 - Vue.js 路由配置片段 (router-static.js)

const routes = [{
    path: '/index',
    component: Index,
    children: [
        { path: '/', component: Home, meta: {title: 'center'} },
        { path: '/users', name: '管理信息', component: users },
        { path: '/exampaper', name: '试卷表', component: exampaper },
        { path: '/examquestion', name: '试题表', component: examquestion },
        // ... 其他子路由
    ]
},
{
    path: '/login',
    component: Login,
}];

前端 - 考试页面核心逻辑片段 (exam.html)

// 考试倒计时和答案提交逻辑
methods: {
    init() {
        // 获取试卷信息，并开始倒计时
        layui.http.request(`exampaper/info/${id}`, 'get', {}, (data) => {
            this.paper = data.data;
            if (this.paper.exampaperDate) {
                this.count = this.paper.exampaperDate * 60;
                this.inter = window.setInterval(() => {
                    this.count = this.count - 1;
                    if (this.count < 0) this.isEndFlag = true;
                }, 1000);
            }
        });
    },
    submitTap() {
        // 提交当前题目答案并判分
        this.isSubmitFlag = true;
        let myscore = 0;
        if (this.answer == this.ruleForm.examquestionAnswer) {
            myscore = this.ruleForm.examquestionScore;
            this.score += myscore;
        }
        // 保存答题记录
        let record = { /* 答案数据 */ };
        layui.http.requestJson(`examredetails/saveExamredetails`, 'post', record);
    }
}

前端 - 菜单权限控制配置 (menu.js)

// 定义不同角色的后台菜单和权限按钮
const menu = {
    list() {
        return [
            {
                "roleName": "管理员",
                "backMenu": [
                    {
                        "menu": "用户管理",
                        "child": [{
                            "tableName": "yonghu",
                            "buttons": ["查看", "新增", "修改", "删除"]
                        }]
                    },
                    {
                        "menu": "试卷管理",
                        "child": [{
                            "tableName": "exampaper",
                            "buttons": ["查看", "新增", "修改", "删除"]
                        }]
                    }
                    // ...
                ]
            },
            {
                "roleName": "用户",
                "backMenu": [
                    {
                        "menu": "考试管理",
                        "child": [
                            { "tableName": "exampaper", "buttons": ["查看", "考试"] },
                            { "tableName": "examrecord", "buttons": ["查看"] }
                        ]
                    }
                ]
            }
        ]
    }
}

5. 部分截图

7. 项目总结

该项目是一个功能完备、结构清晰的在线教育与考试系统。

优点：

• 功能完整性：覆盖了在线教育的核心环节：提供学习资源（视频）、互动交流（论坛）和效果评估（考试），形成了一个业务闭环。
• 技术成熟：采用了Spring Boot + MyBatis-Plus + Vue.js这一成熟稳定的技术栈，代码结构清晰，分层合理，易于维护和扩展。
• 用户体验：前台页面交互友好，集成了视频播放、富文本编辑等功能。在线考试模块的自动计时、自动阅卷和错题本功能，对学习者非常实用。
• 设计细节：通过字典表(dictionary)实现了数据字典的集中管理，提高了系统的灵活性。使用逻辑删除（如xxx_delete字段）而非物理删除，保护了数据安全。

总体而言，该系统作为一个课程设计或毕业设计级别的项目，质量很高，展示了开发者对全栈开发流程的熟练掌握。它具备成为一个小型线上教育平台MVP（最小可行产品）的潜力。

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