前后端分离的在线考试系统设计与实现

前后端分离的在线考试系统设计与实现

刘金羽

（海南大学，海口570228）

摘要院对于Web开发，前后端分离的架构模式具有很多优点，例如，局部性能提升、彻底解放前端、

提高工作效率、降低维护成本等。采用前后端分离架构模式设计实现了在线考试系统，前端使用

技术，后端使用SpringBoot技术实现。系统已经作为教学项目案例应用到本人《Web开发技术》课程

的教学中，取得了良好的教学效果。系统已发布到阿里云服务器上，教师可以利用本系统发布课后作

业、单元测试，系统自动判卷，教师只需要出题和导出成绩，节省了判卷的时间。

关键词院在线考试系统；教学项目案例；前后端分离；技术；SpringBoot技术

在教学中采用了项目驱动的教学模式袁不但可以使系统管理员通过教育管理对学科尧专业进行增尧删尧

学生获得相应的知识和技能袁而且能够使学生把学到的改尧查等操作遥系统管理员通过消息中心可以对多个用

知识应用到实践中去袁具有可以激发学生的学习兴趣尧户进行消息发送袁发送的消息包括交朋友英语 加入班级尧推送试卷

提高学生的编程能力等优点袁该教学模式能够成功实施等遥系统管理员通过日志管理查看系统对用户的基本操

的关键是如何设计合适的教学项目案例遥作进行的日志记录袁从而了解用户对系统的使用情况遥

设计和实现了一个在线考试系统袁用于叶Web开发系统管理员通过任务管理对分配给学生的作业尧考试任

技术曳课程的教学项目案例袁同时学生也使用该系统完务进行管理遥系统用例图如图1所示遥

成在线作业和单元测试遥系统采用前后端分离的架构模

式袁前端使用实现袁后端使用SpringBoot实现遥

错题本

学生

教师

班级管理

系统管理员

日志管理

1系统需求

系统的参与者有3种袁分别是学生尧教师尧系统管

学生可以使用考试中心进行考试袁考试中心发布了

考试记录登录

考试中心

注册

用户管理消息管理

教育管理

理员袁他们进入系统都需要注册和登录遥

卷题管理

任务管理

所有学生可以进行的考试和需要完成的作业遥学生可以

使用考试记录查看试卷和作业的结果尧用时尧得分尧自

行批改等遥学生可以使用错题本查看做题的结果尧分

数卷发类型 尧难度尧解析尧正确答案等遥

教师可以使用班级管理对班级进行增尧删尧改尧查

等操作袁也可以使用卷题管理对试卷和题目进行管理遥

试卷管理包括选择学科尧试卷类型尧试卷名称尧考试时

间等遥对于试卷内容可以添加大标题和添加题目到此试

卷中袁最后组成广州足球俱乐部 一套完整的试卷遥题目管理可以对作业

或考试题目进行增尧删尧改尧查等操作袁考试或作业的

题型包括单选题尧多选题尧判断题尧填空题尧简答题

等袁这些题型都支持图片尧公式遥题目可以在线编辑袁

也可以通过导入功能导入Excel中已经编辑好的题目遥

系统管理员通过用户管理对学生尧教师尧系鬼妈妈2猫的复仇 统管理

员这3种角色的用户进行增尧删尧改尧查等管理操作遥

图1系统用例图

2系统架构

系统采用了前后端分离的架构模式遥前端使用vue

2.6.10实现袁使用了vue-router尧element-ui尧js-co失眠吃什么食物最有效 okie尧

axios等vue插件库遥vue-玻尿酸的功效 router实现前端页面个人简历范文表格 路由功能袁

js-cookie实现客户端Cookie的存取袁axios实现向后端

发送AJax请求袁从而获得后端发送过来的JSON数据遥

后端使用了SpringBoot2.1.6实现遥由SpringSecu鄄

rity对前端发来的请求进行拦截并进行安全认证袁从而

保证系统信息的安全性遥如果前端数据请求合法袁

基金项目：海南省高等学校教育教学改革研究项目渊项

目编号院Hnjg2016-6冤曰海南大学教育教学改革研究项

目渊项目编号院hdjy1615冤遥

element-ui是饿了么出品的Vue2的WebUI工具套件袁

44

2020.04