基于 Vue 和 SpringBoot 的 C 语言程序在线测评系统的设计与实现

本文链接：https://blog.csdn.net/Aknits/article/details/139215120

作者主页：毕业设计精选

作者简介：9年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN博客专家

摘要

为简化教师对学生练习的评判过程，基于前端框架 Vue 和后端框架 SpringBoot 设计与实现了一套 C语言程序在线测评系统。此系统实现了对代码的自动评判，且具有用户、班级管理及作业下发的功能。

关键词：在线测评系统；Vue;SpringBoot;脚本；文件流；

1 引言

目前，几乎所有大学都开通了 C语言的课程， C语言的教学在讲练结合的模式下日趋完善。但随着讲课的深入，学生练习的程序越来越复杂，教师的判题流程也越来越繁琐。且因为分支众多，教师无法简单地判断学生程序的正确与否，也就难以给出一个准确的分数[1] 。

使用 Vue 和 Sprin gBoot 实现 C 语言程序在线测评系统，能智能化地给学生的程序进行评分，快速得出成绩，以取代低效率的、机械的人工阅卷模式，避免了人工阅卷中由于主观因素而导致的不公平现象的发生，从而更能真实地反映学生的学习水平和教师的教学成果。

2 设计思路

2.1 系统的主要功能

(1) 学生可以从题库选择题目。

(2) 学生可以利用精确搜索与模糊搜索找到想要练习的题目。

(3) 学生可以获得多样化的结果（答案正确，答案错误，运行超时，运行时错误）。

(4) 教师可以添加题目与测试点。

(5) 教师可以在班级里布置编程作业。

(6) 教师可以查看所有学生完成作业的情况。

2.2 前端设计

前端使用 Vue框架的组件式编程模式[2] 。

系统由账户模块、题目模块、评测模块、教师模块组成，见图 1 。各模块的功能和包含的组件见表 1 。

图 1 系统的模块组成

表 1 各模块的功能及包含的组件

模块	功能	使用的组件
账户模块	用户的注册、登录与用户信息的管理	用户登录组件 Login. vue 用户注册组件 Regist. vue 用户资料组件 User. vue
题目模块	题目的添加、编辑、检索、阅读与评测数据的上传评判用户提交的	题目列表组件 Problems . vue 题目组件 Problem. vue
评测模块	代码并返回评测的结果	评测界面组件 Judgement. vue
教师模块	班级的管理与题目、作业的建立	教师端组件 Teacher. vue

2.3 后端设计

后端采用 MVC 架构[3] , 每一类逻辑都由 Controller 、Service 、Dao类构成，详见表 2 。

表 2 后端类及功能

类	功能
User类	操作用户的信息
Account类	用户登录与注册
Problem类	操作题目信息
Judgement 类	评测操作
Class类	班级操作
Homework类	作业操作

前端通过调用后端的接口实现通讯和数据交换，系统接口表见表 3 。

表 3 系统接口表

接口路径功能

checkLogIn

checkRegister

addAProblem

findProblemById findAllByPages

findLikeByPages

getProblemInformation uploadInOut

uploadImage isPass

checkCookie

getIco

selectUserById

selectUserByClassId

getJudgementId judgement

addHomework

getHomeworkByTeacherId

getHomeworkByClassId

检查登录的合法性

检查注册的合法性添加新用户添加新的题目

通过题目编号查找题目分页接口返回当页题目

分页接口返回根据题目名称查找后当页题目

获取题目内容

上传题目测试点文件

编辑题目时上传图片文件某个题目是否通过

调用后端接口之前统一调用，检查距离登录是否超过 30 分钟，若是无法调用任何接口并强制用户重新登录

获取用户头像

通过用户编号获取用户

通过班级编号获取班级内所有用户

评测之前获取评测号

评测提交的代码添加新的作业

根据教师编号获取当前教师布置的作业

根据班级编号获取当前班级的所有作业

getProblemsByHomeworkId通过作业编号获取作业

listClasses

getClassByHomeworkId checkCode

根据教师编号获取当前教师所有的班级

根据作业编号获取拥有此作业的所有班级

生成验证码

2.3.3 安全性设计

为确保用户的数据安全，后端额外添加了两个功能：

(1) 登录超时。用户登录超过 30 分钟无法访问服务器，需重新登录。

(2) 并发保护。对并发量大的操作添加锁，确保多个用户同时访问时的数据安全。

2.4 数据库设计

2.4.1 数据库的概念

结构设计 E-R 图如图 2 所示。

图 2 系统的 E-R 图

学生只能属于一个班级，一个班级可以有多个学生；一个老师可以教多个班级，一个班级只能有一个老师；老师可以布置多份作业，一份作业只能被一个老师布置；一个班级可以有多份作业，一份作业也可以同时被布置到多个班级；学生可以练习多道题目，一道题目也可以被多个学生练习；一个学生可以产生多条评测记录，一条评测记录只能被一个同学产生。

2.4.2 数据库的逻辑结构设计

数据库包括用户基本信息表、班级表、题目信息表、评测信息、班级作业。

为满足第三范式[4] , 多对多关系需额外设计表。这些表包括班级－作业表、作业－题目表、用户通过题目表。

数据库的表结构设计详见表 4-10 。

表 4 用户基本信息表 tbl

名称	类型	约束条件	说明
user＿(ｉｄ)	varchar(255)	p rimary key	主键用户编号
user	varchar(255)	not null unique	昵称
user__password	varchar(255)	not null	密码
user	varchar(255)	not null	学号
user＿(ｃｌａｓｓ)	varchar(255)	not null	班级
name	varchar(255)	not null	真实姓名
signature	varchar(255)		个人签名
email	varchar(255)	not null	邮箱
type	char(1)	not null	用户类型
submission	int	not null	提交数
pass	int	not null default	通过数
register＿(ｔｉｍｅ)	timestamp	CURRENTＴＩ(＿) MESTAMP	注册时间

表 5 班级作业表 tbl ＿(ｈｏｍｅｗｏｒｋ)

名称	类型	约束条件	说明
homework＿(ｉｄ)	int	p rimary key	主键作业编号
homework＿(ｔｅａｃｈｅｒ)	int	not null	布置作业的教师编号
homework＿(ｔｉｔｌｅ)	varchar(255)	not null	作业标题

表 6 评测信息表 tbl__judgement

名称	类型	约束条件	说明
judgement＿(ｉｄ)	int	p rimary key	主键评测号
judgement＿(ｔｉｍｅ)	varchar(40)	not null	评测时间
judgement ＿(ｉｄ)	int	not null	评测者
judgement__prob- lem＿(ｉｄ)	int	not null	需要评测的题目

表 7 题目表 tbl__problem

名称	类型	约束条件	说明
p roblem＿(ｉｄ)	int	primary key	主键题目编号
p roblem＿(ｔｉｔｌｅ)	varchar(40)	not null	题目标题
p roblem＿(ｓｕｂｍｉｔｔｅｄ)	int	not null	提交人数
p roblem__passed	int	not null	通过人数
p roblem＿(ｔｉｍｅｌｉｍｉｔ)	double	not null default 1	题目限制时间(s)

表 8 作业－题目表 tbl ＿(ｈｏｍｅｗｏｒｋ)__problem

名称	类型约束条件	说明
id int	p rimary key	主键编号
homework＿(ｉｄ) int	not null	作业编号
p roblem＿(ｉｄ) int	not null	题目编号

表 9 班级－作业表 tbl ＿(ｈｏｍｅｗｏｒｋ)＿(ｃｌａｓｓ)

名称	类型约束条件	说明
id int	p rimary key	主键编号
homework＿(ｉｄ) int	not null	作业编号
p roblem＿(ｉｄ) int	not null	班级编号

表 10 用户通过题目表 tbl __problem

名称		类型	约束条件	说明
id	int		p rimary key	主键编号
user＿(ｉｄ)	int		not null	用户编号
Problem＿(ｉｄ)	int		not null	题目编号

2.5 评测模型

后端通过调用系统控制台运行评测脚本文件。脚本可以根据语言类型不同运行不同编译器对代码进行编译，之后运行输入文件并将输出保存，然后与标准输出文件对比。后端会抓取对比结果并返回前端。

3 评测系统的实现

3.1 验证码控制

为了防止恶意提交表单，登录和注册功能都使用了验证码。

图 3 评测的数据流图

图 4 前端表单的验证码

用户在前端点击验证码图片可以申请新的验证码。此时系统会生成四个随机字符，并将其扭曲，添加杂乱线生成一张验证码图片，同时将正确验证码都存入到 Session 中。Session对象是针对会话创建的，这可以保证多个用户在申请验证码时验证码不会冲突。

3.2 注册

3.2.1 注册判断流程

注册界面共有 5 个输入框：用户名、邮箱、密码、确认密码和验证码。前端根据写定的正则表达式判断是否有格式错误。如果没有，前端会将所有输入的信息发送到后端。后端的 UserController类会将所有信息封装为 User 类。 UserService类会通过 UserDao 类调用数据库查看输入的数据是否重复。如果不重复，则服务器会将注册信息储存到数据库。所有操作完成后， UserController类会将注册状态返回给前端。如果注册状态为成功，则前端会跳转到登录界面，否则会生成对应的失败弹窗。

3.2.2 格式错误判断

前端使用正则表达式来判断格式的正确与否。如果输入框内的字符与输入框的正则表达式不匹配，则视为格式错误[5] 。

图 5 对格式错误的判断

为防止用户绕过前端的格式判断直接调用接口，后端会对数据的格式进行二次验证。

密码的正则表达式为：／q[a-zA-Z0-9] {6 , 16} $ /。用户名的正则表达式：／q[a-zA-Z0-9\u4e00- \u9fa5-__] { 2 , 10} ＄／。

3.2.3 用户信息保存

注册成功后，UserController会利用 MyBatis 将用户信息保存到数据库中。

3.3 登录

登录界面共有 3 个输入框：用户名、密码与验证码。前端判定格式无误后，将输入信息传至后端。后端的 UserController类会将所有信息封装为 User类。UserService类会通过 UserDao类调用数据库查看输入的数据是否正确，并将结果返回至前端。若登录成功，前端会跳转至首页。反之显示失败弹窗。

登录同样使用正则表达式来判断输入的正确与否。

用户登录成功后，服务端会在浏览器中储存一个含有用户信息的 Cookie , 即使关闭浏览器，再次打开网页也不需要重新登录。有效期为 30 分钟，用户在此 30 分钟之内访问服务器会刷新有效期。若 30 分钟之内用户没有访问服务器，则 Cookie会失效，用户需重新登录。

3.4 题目检索与分页

3.4.1 题目分页

用户访问题目列表时，前端请求的并不是所有题目数据，而是当页的题目数据。分页利用的是数据库的限制查询条数功能。例如现在位于第 3 页，每页 20 条记录，则服务端就会计算出需要从数据库的第 41 条记录开始取，共取 20 条。用户在翻页时，前端会将当前所在页数和每页题目条数这两条信息发送给后端，后端会返回当前页面的题目。

3.4.2 题目检索

使用数据库的模糊查询功能，可以查询到包含某些关键字的题目。当用户对某个关键词进行检索后，下次分页时数据库只会对包含关键词的题目进行分页并返回。

3.5 评测

3.5.1 评测号

每个评测必须有一个独一无二的评测号，以便于用户输入查询。评测号在用户提交代码评测时生成，是一个依次增大的自然数[6] 。评测号生成后，主线程将会把评测号返回，同时会开启另外一个线程在后台进行评测。待主线程再次访问时，将评测结果返回给主线程，详见图 6 。

图 6 评测的线程流程图

3.5.2 评测过程

评测分为编译和运行两个部分，在评测开始时，系统会生成一个结果对象。如果编译失败，系统便不再往下评测，并将编译失败的信息插入到结果对象中。如果编译成功，系统就将继续往下评测并将评测信息插入到结果对象中。最后系统返回此对象到前端。

脚本根据传入的路径找到源程序并使用 gcc[7] 对 C语言程序进行编译。因为编译成功过后没有输出，所以只要服务器端检测到了脚本的输出，就可以认定程序编译失败，并将脚本的输出作为编译信息返回。

编译成功后，系统开始执行程序。脚本首先检测用户提交的是哪一道题目，并找到其评测文件。之后脚本会让用户的程序依次运行每个输入文件并得到相应的输出文件，详见图 7 。

图 7 评测流程图

3.5.3 获取评测结果

评测的原理是用户的程序运行题目的输入，将输出结果与题目的输出做比较，如果比较完全一致，则对于这组数据，用户的程序运行正确，否则运行错误。评测系统会将正确与否作为评测信息。用户的程序还可能会出现运行错误或者规定时间内不输出的错误，导致无法比较输出，这样评测系统不会比较文件，而是直接将错误信息作为评测信息。

如果程序未出现运行时错误，脚本的输出如图 8 所示：

图 8 程序正确时脚本的输出

服务器只需识别＃＆＃前缀就可以获取每个测试点的测评结果。如果出现了运行时错误，脚本的输出如图 9 所示：

图 9 运行时错误时脚本的输出

如果服务器在识别到＃＆＃前缀之前识别到了其它前缀，则可认定为运行时错误，停止抓取此测试点，并将此测试点的结果设定为运行时错误。

3.6 教师端

教师可以通过 MarkDown 编辑器编辑题目，并可以实时预览。 MarkDown 中上传的图片会被上传至云端以便其他设备正常访问。添加题目后需要上传测试数据。教师需要搜索到需要上传测试数据的题目，之后将多个输入输出文件一并上传。系统会找到该题目的评测数据文件夹并将评测数据保存。输入输出文件的命名方式是从 1 开始增大的自然数，输入文件以 in 为后缀名，输出文件以 out 为后缀名。

教师可以从题库中选择一些题目组成作业，并可以下发给选中的班级。由于作业和题目是多对多的关系，作业和班级也是多对多的关系，因此需要在数据库中多建立两张表来存放多对多的关系。若老师布置了一次作业(id为 m),选择了题目 a、b , 布置给了班级 1 和班级 2 , 则作业－题目表会插入两条数据（作业 m , 题目 a) 与（作业 m , 题目 b);作业－班级表会插入两条数据（作业 m , 班级1) 与（作业 m , 班级 2)。如果此时班级 1 的学生想查看自己的作业，就会查询到有一次作业 m , 内含题目 a、b。