在线评测系统的设计与实现

在线评测系统的设计与实现目录TOC\o"1-3"\h\z\t"参考文献,1,英文摘要,1,致谢,1,保证书,1"189741前言 在线评测系统的设计与实现专业：软件工程学号：201812300313学生姓名：吴家毅指导老师：王金艳【内容摘要】程序在线评测系统（简称OJ，OnlineJudge）指针对用户所提交的代码进行运行时间、运行所占用内存和准确性进行自动检测和判断的趋于智能化的系统，其主要用于ICPC、学生能力提升、编程学习、课程教学等领域。近年来，编程设计类竞赛不仅仅是学生在学校中争取各类奖项，也是即将毕业的学生简历中的闪光点。那么学生对于算法的学习也就越加的迫切，为学生提供高效、简便、轻量的学习算法的平台也是迫在眉睫。为了高效的对大量的评测进行同时评测，评测系统的设计需要摆脱常规的单机评测，采取多机共存的方式提高系统的性能。【关键词】B/S架构；在线评测；Vue；高性能1前言1.1研究的背景和意义近年来，算法类竞赛在各大国内高校不断的发展和推广，越来越多的学生开始学习算法，评测系统成为了学习算法和教师检验学生的学习情况不可或缺的工具。教师布置编程作业，学生在作业本上手写程序的老旧方法已然不能带来学生学习编程上的成效，同时教师还得花费大量的时间批改作业，不仅耗时还成效低。在线评测系统的研究和使用不仅能够不仅便于教师对于学生的管理，让学生能够真实的编写程序，同时还提供准确的程序评判功能，对于学生的日益繁重的编程学习带来了高效性。目前虽然已有很多趋于稳定的在线评测系统经过研究并开发出来，但是目前开源的评测系统一是大多数针对于非校园的用户使用，二是功能过多不够轻量，三是使用不够便捷，四是不具备可再开发且不方便学生管理，影响了教师对于学生学习情况的获取。为提高高校对于学生编程学习和算法的普及，研究如何一个轻量、便捷、高性能的服务于高校的在线评测系统对于国内高校进一步法阵和推广算法类竞赛和学生学习编程带来了重要意义。在线评测系统还可以将统一类型的题目汇总的一个题单，不仅让学生免于查找同类型题目所消耗的时间，还可以方便教师统计学生们对于不同类型题目知识点所掌握的深度进行比对。在线评测系统还可以提供比赛功能，教师可以创建比赛来考察学生对于不同的编程语言、题目类型、思维能力等进行考察，更可以通过比赛让学生们处于一种紧张、高度思考的状态进行磨炼，有利于参与其他大型比赛做准备。在线评测系统还可以统计每位学生自注册以来所有的写题过程，诸如做题次数、通过次数、参与比赛次数、每日做题次数等，通过这些数据，教师可以更好的掌握每位学生编程习惯、学习效率等进行有效的评估。1.2国内外研究现状1.2.1国外研究现状近20年来，在线评测系统在国外都有出现。俄罗斯的Codeforces，日本的信息学奥赛网站AtCoder，面向平面设计师和程序员的TopCoder，印度的CodeChef，波兰的SPOJ，面向求职者的刷题网站LeetCode等均是国外有名的或存在时间较长的在线评测系统，这些在线评测系统服务着他们各自的用户，为用户提供高效、便捷的在线评测体验。Codeforces，一个俄罗斯的在线评测系统，创建该系统的是来自俄罗斯萨拉托夫州立大学的MikeMirzayanov领导的一支团队，该系统会定期开展公开和私有的比赛，用户同样可以在改系统进行刷题和交流。在Codeforces中每位用户都有一个Rating分数，根据Rating分数不同用户姓名的颜色也不相同。Rating分只能通过参加比赛后通过后台的算法进行改变。在比赛中，参赛的用户不仅可以随时查看自己的排名，还可以选择只查看自己所关注的所有用户在本场比赛中的排行榜。此外，比赛中还提供每个题目的通过和提交信息。LeetCode，一个建于美国硅谷的程序员学习平台，其开发的内容丰富和专业度高的职业提升平台给全世界程序员带来了福音，帮助了大部分程序员实现技术上的提升和巩固。除此之外，LeetCode还提供高效的在线评测系统，不仅提供各种类型的题目，还提供了目前主流的面试题。LeetCode提供了目前主流C、C++、Java、Python、Rust、JavaScript等十几种编程语言的支持，用户可以使用自己擅长的语言进行编程。LeetCode的编程模式为模板编程，不需要用户编写完整的代码，只需要完成能够解决题目问题的主要代码即可，最终编写好的代码将会被LeetCode独特的类似单元测试的技术进行编译并载入到整体的测试框架中运行评测，即用户无需关注数据的输入，只需给出结果，剩余的逻辑将由LeetCode独特的评测技术提供。当然，为了吸引更多的程序员前来学习，LeetCode还提供了比赛系统和积分奖励机制，激励平台用户[1]。总的来说，国外对于在线评测系统的相关研究和发展是广阔的，面向各类人群的，高稳定的，高效率的。1.2.2国内研究现状近些年来，我国的在线教育发展快速，诸如好未来、新东方、隆海生物、全通教育等公司占据了半壁江山，从一开始的线下课堂到如今大多数转为线上课堂进行教学，其实都摆不脱一个原因，即我国的很多家庭已经不满足与普通教育带来的效果，越来越多家长开始在教育上展开竞争，导致了教育上的“内卷”。编程教育也是如此，随着这些年来编程方向岗位的不断吃香，大部分程序员的薪资已然高于其他行业太多，所以学习编程的人也是越来越多。学习编程自然逃不开需要反复的动手编写程序，从而提高自己的编程水平。而对于国内的高校而言，编程课程所布置的作业日益繁重，若学生只是在作业本上完成编程作业，其实并不能给学生带来实质性的实践效果，而且教师需要花费大量时间于批改作业中，利大于弊。不过随着近年来诸如清华大学、北京大学、杭州电子科技大学等都开发了自己的在线评测系统，并将其用于日常教学和算法竞赛中，其中所得到的成效比以前的人工式教学和学习有了很大的提升，也弥补了传统计算机编程教学方面的不足。当然，不只是高校开始自研各自的在线评测系统，国内的也崛起了很多服务于大众的在线评测系统，如服务于初高中信息学竞赛学子的洛谷，又如同样如LeetCode一样服务于程序员编程提升和学习的牛客，又如近两年异军突起的社区型在线评测系统Acwing，他们都是目前国内比较出名的在线评测平台，不仅仅给用户提供了题目的评测，还提供了如题单、比赛、排行榜等丰富的功能，用户也可以根据不同的题目难度进行编程学习和挑战，循序渐进的提高自己的编程能力。1.3研究内容本文将讲述如何设计并实现一个基于高校管理的在线评测系统，将支持主流的如C、C++、Java、Python语言的在线编程和提交评测并实时监控评测，并结合国内外现有的在线评测系统的功能，支持如题单、比赛、排行版、用户信息统计等功能的设计与实现。本文主要研究内容包括：（1）探索了在线评测系统的研究背景和意义以及国内外的相关发展情况，并结合现有的在线评测系统所提供的功能明确了本文将要实现的评测系统的主要功能。（2）探实并研究了系统的总体设计方案，将使用Vue框架、NaiveUI和ElementUI进行前端和后台页面的编写，使用Express框架进行后端的编写并配合Redis服务器进行数据缓存，采取类似Nginx负载均衡的思想对判题系统进行整体的框架设计，最终使用Docker容器技术进行部署运行虽有的服务。进行总体设计，确定游戏的功能需求，给出主要功能的用例图。（4）研究了微服务的思想架构，分离系统中的如资源上传、爬虫服务等占用大带宽的服务进行单独实现和部署运行，为降低后端服务的整体压力开辟了新方法。（5）对系统进行详细设计，确定系统整体的架构、用例模型、数据库表结构等，为系统设计奠定了基础。（6）实现系统所有功能，并对系统进行功能开展各项测试，确保系统能够正常的运行。2关键技术概述2.1Vue框架Vue是一个用于构建用户界面的渐进式框架，诞生于2014年，其作者是叫做尤雨溪的中国人。Vue是前端三大框架中最容易入手的框架，不同于React和Angular，其有着完整且全面的中文文档供社区用户学习。Vue提供的设计模式为MVVM模式[2]，即Model->View->View->Model，如图2-1所示，MVVM是对MVC和MVP两种模式的进一步改进，开发者主需要关注数据逻辑的改变和一些简单的HTML+CSS的页面搭建即可完成可交互式的Web界面，Vue内部已经将开发者定义的数据进行响应式处理，数据改变即可实现页面中引用到了该数据的结点更新。图2-1MVVM模式模型最左边为视图层，即View，其主要负责通过自身设计的模板语法将数据和HTML进行结合最终渲染到界面中。模式中间为视图模型层，即ViewModel，其负责将Model层和View层建立其通信的桥梁，即连接。View中的数据改变或Model中的数据改变都将由ViewModel进行处理并进行反向反馈。模式最右边为模型层，即Model，负责处理业务逻辑以及和服务器端进行数据交互处理。在MVVM模式下，View层和Model层并不需要有硬联系，而是通过ViewModel层自动完成他们之间的关联，无需人为干涉，因此Vue得以通过该模式实现开发者只需操作数据和业务逻辑的一大特色，开发者完全看不到DOM操作，也无需关注，开发效率在前端三大框架中是最好的。Vue框架对比其他框架具有低耦合、可重用性、独立开发、方便测试、易用的优点，简要介绍如下：低耦合。视图可以独立使用和运行，即HTML中的内容可以自行改变而无需依赖于Model层，而一个ViewModel允许我们将同一个Model绑定到不同的“View”上使用。可重用性。可以把异性视图逻辑放在一个ViewModel中，使得很多View均可以重用这段视图逻辑，即Vue提供的Minxins。独立性。开发页面的研发人员可以无需关注UI的设计，而只对整体的逻辑和数据的变更进行操作。便于测试。因前端界面一直以来在测试上存在难度，开发中大部分Bug来自于逻辑处理，而由于ViewModel分离了大部分的逻辑，使得测试人员可以直接对ViewModel进行构造相应的单元测试。易于使用。研发人员从头到尾只需要操作数据逻辑，没有了DOM操作的烦恼，且Vue提供了诸如v-if、v-for、v-bind、v-on等指令，使开发者的开发效率更加高效。2.1.1前端组件库现代的前端开发突破了老旧的懒式开发，不为每个甚至每部分页面或区块单独编写不重样的界面，而是基于组件式的开发方式，所有具有同一类型的界面、按钮、区块抽离成一个个可重复使用和配置的组件，即Component，这种方式称为组件化开发[3]。组件式开发固然提高了现代的界面开发效率，但为每一个项目开发一个配套的组件库仍造成了人力浪费且占用了大量的时间，故开发社区中出现了很多具有不同风格和组件的开源组件库，开发者同样可以自定义所有组件的样式数据以达到区分度，从而避免了为每个项目开发一个组件库的消耗，使得整个项目的开发效率至少提高30%，开发和只需关注业务逻辑，而不需要考虑基础组件的复用性、扩展性、稳定性等问题。目前流行的组件库有ElementUI、Bootstrap、AntdDesign等。2.1.2前端构建工具前端工程化是将软件工程中的工程化的方法和思想运用到了前端开发中，而其并没有权威和准确的定义。我们可以将其分为两种理解方式：狭义上，将开发阶段的代码发布到生产环境，包含：构建，分支管理，自动化测试。广义上，前端工程化应该包含从编码到发布，运行和维护的所有阶段。当然，最准确的定义为在前端整个开发的过程中所使用的到的方法和工具可以成为前端工程化。而前端构建工具[4]就是用于前端开发过程中进行诸如将SASS转为CSS、运行本地服务器、将所有分散的代码整合成Bundle、打包第三方包、压缩代码等操作。构建是将工程化、自动化思想进行结合，而构建过程中所有的流程都可以使用代码实现，代码将会自动的为我们执行所有复杂的构建过程的操作。总的来说，构建引入前端，不仅为前端开发带来了活性，同时也释放了我们的生产力。目前最火的前端构建工具有Webpack、Vite、Gulp、Parcel等，每个前端构建工具所提供的功能基本类似，区别在于各自的运行机制不一。Webpack是一个模块打包器，其视HTML，JS，CSS，图片等文件和资源为同一种资源，每个资源文件都是一个模块文件，Webpack可以根据每个模块文件之间的相互依赖关系将所有的模块进行打包。Webpack对于不是JS的文件需要通过loader机制进行解析为JS代码，最终根据开发者的配置文件和默认配置信息进行整合，将所有模块打包为至少一个Bundle。Wepback还提供Plugin机制，供开发者们在生产和打包过程中进行更好的开发体验和提升开发效率。Vite是基于现代浏览器的一个更快速、更简洁的Web应用开发工具和构建工具。Vite基于浏览器原生支持的ESM模块系统进行实现，其出现的主要原因之一是为了解决在开发过程中Webpack的启动、编译和热更新随着项目体积变得庞大而变得缓慢的问题。Vite在打包阶段使用成熟稳定的Rollup进行打包，而在开发时使用ESBuild对一些资源进行快速打包。其最佳成就就是极大的减少了开发者在开发过程中因更改某些文件而进行热更新所带来的反应时间。2.1.3WebSocketWebSocket[5]是一种单个TCP连接上进行全双工通信的协议。其于2011年被IETF设定了一个新的标准RFC6455，之后又由RFC7936标签进行补充规范。WebSocketAPI也被W3C定义为标准。WebSocket的出现使得客户端和服务器之间的数据传输不仅仅是由客户端进行单向发起的通信问题，它允许构建好通信的双方均具有独立发送数据的能力，且双方简历的连接是具有持久性的，这减少了在纯粹使用HTTP协议上发送多个信息所需要构建多次TCP协议的资源消耗和时间消耗。2.2Express框架Express[6]是基于Node.js开发的一个更具轻量型的Web开发框架，开发人员可以使用Express快速的构建和开发Web和移动端的应用。Express不对Node.js原本的特性进行二次抽象，而是在其基本功能上进行扩充，且Express完全是由路由和中间件构成的框架，本质上来说一个Express应用就是调用各种中间件完成开发者所需要的功能。如今很多的Web开发框架，如Django、Koa等均提供了完善的后台开发体验和架构，Express可以用作存后端开发服务，不仅仅是因为Express内部已经实现了完善的路由系统，开发者更可以基于流式的中间件排布对所有的API进行诸如权限控制、用户鉴权等重复操作，极大的减少了开发者所需编写的代码量，也使得整个逻辑更加的清晰。2.2.1Express中间件Express中的中间件可以看做一个函数，所有的中间件均通过Express实例进行注册并使用，每个中间件均可以接受到Request、Response、Next三个参数实例。Request。记录了一个HTTP请求中所携带的所有诸如请求头、请求体等信息。Response。将要发送给客户端的HTTP请求实例，同Requst的结构类似，可由开发者自行设置回传信息。Next。调用下一个中间件的函数，若不调用，则中间件执行流将到此结束，后续的所有中间件将不会被执行。2.3评测技术在线评测系统不可或缺的就是程序的评测，而为了去除人工编译和运行程序，就诞生除了使用自动化的程序解决人工的程序操作。除此之外，提供给外界使用的系统将会暴露出很多安全问题，诸如用户提交的程序将会执行关闭整个服务器的运行等安全隐患。容器和沙箱是谈论预防恶意软件防护时经常提到的2个术语，而沙箱技术是在线评测系统中使用的最广泛的技术。从本质上讲，沙箱是关于创建隔离的独立环境，可将其用于特定安全目的[7]，而对于具有威胁的代码，沙箱将限制整个程序的系统调用，最终导致程序将会执行出错，而不会成功的运行。而容器技术其实现在已经很流行了，如Docker容器技术等。一个容器就相当于一个小型的服务系统，用户所要执行的任务将会运行于独立的容器中，容器的崩溃不会引起宿主机的崩溃，从而解决了恶意程序引起的系统安全问题。以上介绍了评测技术中安全问题的解决方案，而限制程序运行的时间和内存使用的最频繁的技术是Cgroup，借助于Linux系统下自带的Cgroup，能很好的限制程序的运行过程。2.4Docker容器与虚拟化技术虚拟化技术是一种资源管理技术，计算机中的不同实体将会被抽象、转化后以一种比原生态更好的方式展示给用户的技术。它的核心是对资源的抽象，目标是为了在一个主机上同时运行多个系统或应用，从而提高系统资源的利用率。虚拟化技术从宏观上可分为基于硬件的虚拟化和基于软件的虚拟化[8]。基于硬件的虚拟化：又称之为传统的虚拟化技术，其利用虚拟宿主机底层硬件环境，在硬件物理资源的基础上，虚拟成多个OS，进而在OS资源的基础上形成相对单独的程序运行环境，如常用的VMwareWorkstation和VirtualBox等都采用了该技术[8]。基于软件的虚拟化：操作系统的内核通过创建多个虚拟的操作系统实例(内核和库)来隔离不同的进程。Docker容器技术就是在操作系统层面上实现虚拟化，直接复用宿主机的操作系统，因此更加轻量级[8]。3系统总体设计此章节包含了需求分析、概要设计两个部分。需求分析对游戏的功能需求做出详细的说明，概要设计给出功能模块之间的交互设计和数据结构，是实施开发工作的基础。3.1需求分析3.1.1系统需求概述本系统是一个基于浏览器端的在线评测系统，后端、判题服务器等服务均运行于服务器的Docker容器中。该系统提供主要给高校提供独立的，自主可控的在线评测服务，用于给学生进行编程相关的训练、刷题和比赛。学生可以直接在电脑的浏览器中进入在线评测系统选择想要刷的题目并在线编写程序进行实时的评测，为学生省去了自己编译、运行、评判的步骤，提高了学生学习编程的效率和成本。同时，高校可以通过后台录入更多的题目，安排定时比赛，监测一日内的访客量、提交量等数据，实时分析学生的学习情况，进一步强化学生对于编程学习的效率。除了刷题和比赛外，本系统还提供了登录和注册的基本功能，学生需输入正确的手机号，学号，学校信息，真实姓名等信息进行注册，注册过程中要求进行验证码查验。而登录过程仅需手机号和密码即可登录。为了限制同一用户多机登录的情况，增加IP的查验，实现用户仅能单机登录的功能。网络上现有的在线评测系统仅有少部分提供了比赛的实时广播功能，当比赛进行中因一些题目或测试数据有误引起的问题出现时并不能很好的通知正在进行比赛的用户，这反而使得某些用户错失了题目的通过机会。所以，提供一个赛时实时广播功能更能有利于后台管理员或教师管控比赛，也有利于学生在赛时及时获取正确的信息。本系统划分为六个子块组成：前台、后台、后端服务、判题服务、文件上传微服务、爬虫微服务。本系统的总功能模块如图3-1所示。图3-SEQ图\*ARABIC1评测系统总功能模块本系统的前台模块的详细功能划分如图3-2所示。图3-2前台模块功能模块本系统的后台模块的详细功能划分如图3-3所示。图3-3后台模块功能模块3.1.2系统功能需求分析本系统前台模块应具备以下七个基本功能：（1）登录和注册在前台即浏览器网页中，通过不同页面的权限进行限制非登录和登录的用户所能访问到的页面，大部分涉及重要数据信息的展示的页面强制用户登录后方可访问，这是安全防范的首要目标。本系统的前台允许用户通过填写手机号、真实姓名、学号、邮箱、所在学校、密码和昵称完毕后在经过合法数据验证机制验信息通过后方可进行注册，且为了进一步限制一个手机号仅能注册一个账户和手机号的有效性，增加了短信验证码作为二次验证后方可最终注册。本系统的前台登录机制仅需用户通过手机号和密码进行登录，并无图片验证码和短信验证码等验证机制，降低了用户在登录过程中的复杂度。用户填写的手机号和密码发送到后端服务中进行验证，若数据库中存在该手机号的账户且密码对应则允许登录。若无该手机号的用户将提示用户“该手机号未注册”，若密码不正确则提示用户“密码错误”。该部分用例图如图3-4所示。图3-4前台登录和注册用例图（2）公告模块在前台中，为了更好的提供一些即时的或重要的信息供所有用户获取，完整公告模块依然必须。用户通过头部导航进入到公告模块界面，公告模块界面的所有公共可分为三类：信息公告、重要通知和工作动态，并提供按照公告标题进行对应的公告分类下的公告进行搜素的功能。当当前分类下没有公告或者用户所搜索的公告不存在时，将会展示空的状态告知用户。对于每个公告，均可以被管理员设置为置顶的或普通的，设置为置顶的公告将会排在当前分类下所有公告的前面，更容易让用户浏览。用户可以点击任意一个公告的标题浏览当前公告的详细信息，公告的内容展示使用简洁美观的Markdown进行渲染，用户可以通过点击浏览导航区域的每个标题滑动到指定的内容位置进行阅读，当然随着用户的滚动，导航区域也会自动的提示用户当前所在的内容位置。该部分用例图如图3-5所示。图3-5前台公告模块用例图（3）题库模块题库模块主要有两个功能，题目检索和题目列表展示。用户通过界面的导航进入到题库界面，题库的默认筛选为目前用户可见的所有题目。题目的检索键可以为根据题目标题、题目ID、题目等级和题目的标签进行精细化筛选，其中题目标题和题目ID不能同时起作用。题目标签是通过用户自主选择的方式进行有意的选择想要筛选的标签进行筛查，可选择多个，而题目等级只能选择一到五级。地根据用户的筛选规则，在筛选的下方提供当前筛选项下的所有题目的列表，一页最多提供15条题目信息，通过分页进行切换。每个题目展示的信息有题目ID、题目标题、题目标签、题目等级和题目的通过率。用户可以点击某个题目的标题浏览该题并进行编写代码提交评测。当用户的鼠标移动到任意一个题目的通过率区域时，将提供一个悬浮的提示表格告知用户该题的提交信息，包括提交数、通过数等数据。当用户点击某个题目的标题进入该题的详情页后，整个页面将会默认的为横屏模式，即在该模式下将会分为两个区域，左边的区域用于显示题目的详细信息，如题目描述、输入格式、输出格式、样例等。右边区域为代码编辑区，用户可以修改所编写的代码的语言标识和代码编辑区的一些特性设置。还有一个模式为竖屏模式，该模式默认在用户屏幕宽度小于800px的情况下强制切换，或者在800px以上通过一定的操作进行切换，该模式下题目的信息和编辑区域将会上下连接。用户可以编辑好代码后点击编辑区上部分的“提交评测”按钮进行代码评测，若用户没有写任何代码，将给出“请编写代码后再提交”的提示。当提交过后会弹出一个评测状态Dialog，用于实时显示当前评测的状态和信息，若用户在运行到某个测试点出现错误后将会停止评测并给出响应的状态反馈，若所有测试点均通过将会展示“Accepted”的字样，表示用户的代码是正确的。每个测试点都将会给出用户的代码运行所用时间和所用内存。在题目的内容展示部分的最上方提供了“历史提交”的Tab供用户进行跳转到历史提交列表查看所有的对于当前题目的提交，已列表的形式展示。该部分用例图如图3-6所示。图3-6前台题库模块用例图（4）排行榜模块为了方便系统使用者、教师等对所有用户的某个指标进行排序后的排行，前台界面提供了排行榜模块，即排行榜界面。进入排行榜界面，首先会提示用户排行榜的数据将于每天晚上的10点整进行更新，每次更新的内容为前一天晚上10点后到当天晚上10点时间段所有用户的数据汇总变化排序。排行榜主要有两个分类，一为根据总分排序，二为根据用户通过题目数进行排序，由用户进行随意切换。排行榜提供用户搜索功能，输入某个用户的真名进行查询该人在真个榜单中的位置信息并单独列出。排行榜会详细的列出每个用户新旧数据的一个变化细节，如排名前后变化、分数前后变化、过题数前后变化等，在简洁的前提下提高全面性和细节性。该部分用例图如图3-7所示。图3-7前台排行榜模块用例图（5）题单模块用户通过前台界面的导航进入题单界面，题单界面是从题库模块中抽离出来的功能模块。每个题单都可以看做是一个小型的题库，题单中的所有题目都是具有同一性质或者处于同一个分类的所有题目的集合。通过管理员的整合，将题库中的题目汇集成一个题单，每个题单都有题单简介、题单题目列表等功能。用户可以在题单界面根据题单标题进行搜索，填写好需要搜索的题单标题后点击搜索框右边的搜索图标按钮即可进行搜索。每个题单中的题目列表和题库中的题目列表所展示的内容一致，即题目的标题、题目的ID、题目的等级、题目的标签和题目的通过率。题单可以由管理员创建多个，故题单界面提供分页功能，每一个展示不超过20个题单，用户可以通过页面底部的分页条进行跳转对应的页面。该部分用例图如图3-8所示。图3-8前台题单模块用例图（6）比赛模块用户可以通过前台界面的导航进入比赛模块界面。比赛模块界面主要展示用户可以查看的所有比赛列表和一个前20名用户报名比赛次数的排行榜。报名次数排行榜展示了用户的排名、用户名称用户所在学校和用户参加的比赛次数，可以通过点击用户的名称进入该用户的个人中心查看其详细信息。比赛列表从上到下依次列出，列出了每个比赛的标题、开始时间、结束时间、是否是私密的、用户是有报名和比赛的规则类型。只有当前登录的用户报名了某场比赛才能在对应的比赛上显示“已报名”的字样。用户通过点击某场比赛的标题查阅该场比赛的一些有效信息，如比赛的状态、比赛的起止时间、比赛的报名人数、比赛主办方和比赛简介，均展示在一个Dialog中。若该场比赛“未开始”，则在Dialog的下方将会提供“报名”按钮供用户进行报名，此时若用户点击报名且该场比赛是私密的，用户输入正确的报名密码后方可完成报名。若该场比赛“正在进行中”，Dialog的下方将会根据用户是否报名显示不同的字样，如“进入比赛”或“为报名本场比赛”，只有报名的用户方可进入该场比赛。若比赛处于“已结束”，则Dialog下方的按钮显示规同“正在进行中”一致。任何未报名的用户鼠标移到按钮上均为禁用状态。用户通过“进入比赛”或“查看比赛”的Dialog按钮进入某场比赛的详情页后，将会展示三部分操作区域给用户——左边的导航切换区域，中间的当前选中导航信息展示区域，右边的固定比赛信息展示区域。导航区域分为：比赛简介，题目列表，提交列表，排行榜，比赛广播共五大块，默认选择比赛简介，则中间的内容区域将会展示当场比赛的简介信息。用户通过切换导航从而改变中间区域显示的内容。切到题目列表和排行榜时，中间的显示区域将会有一个共同的刷新按钮，用于刷新题目数据和排行榜数据，每30秒可刷新一次，若30秒内多次点击将会提示“请30秒后再来操作”的警告弹窗。若用户选择提交列表，则中间显示区域不仅仅会显示当场比赛所有用户的所有提交列表，同时直接根据用户名称、题目和“只看自己”的筛选，也提供重置按钮进行筛选重置。该部分用例图如图3-9所示。图3-9前台比赛模块用例图本系统后台模块应具备以下八个基本功能：（1）登录后台仅提供给管理员或教师进行登录访问，不对外开放直接的注册功能，所有账号的注册仅能通过有相关权限的管理员进行添加和赋予对应的权限。后台的登录仅需要输入手机号和密码即可，若手机号不正确，那么会提示用户“手机号有误”的字样，当用户手机号输入正确后调用后端服务接口进行登录，在登录过程中若用户输入的手机号尚未注册过，则在后台提示“用户不存在”，若密码不正确则会提示“密码错误”，当所有的验证流程均无误后方用户方可正式进入后台的操作界面。该部分用例图如图3-10所示。图3-10后台登录模块用例图（2）首页信息展示模块前台不提供展示本日的所有用户的所有提交，故为了供教师能够监控和实时获得每日用户的编程学习状态和效率，在后台的首页中显示当天所有用户的所有提交，不区分普通提交和比赛提交。管理员或教师通过点击提交列表中的“通过状态”列后将弹出一个Dialog，用于显示当前用户所提交的代码。若用户的提交是编译不通过的或产生了系统错误，Dialog显示的信息将会额外增加编译错误的信息或系统错误的信息，以供管理员进行查修。除了在首页提供当天的所有提交外，管理员还能看到当日的所有访客记录、新注册的用户数、总提交数、当前账号所处的地理位置等丰富的信息。该部分用例图如图3-11所示。图3-11后台首页信息展示模块用例图（3）用户管理模块用户管理模块用于管理普通用户和管理员用户，若某个用户没有普通用户管理和管理员用户管理的权限，则后台将不提供用户管理模块的导航给用户切换，即使用户手动修改URL进行切换仍会提示“无权限”的悬浮提示，并取消本次切换。拥有普通用户或者管理员用户管理的权限的账号将可以进入对应的管理界面，操作页面的上方将提供筛选功能，用户可以通过姓名、封禁状态、手机号等信息进行账号筛选。下方将会显示每次筛选后的所有账户信息的列表，每一页显示不超过20条信息。拥有权限的用户可以添加、删除、修改、查看和封禁一个账户。用户可以点击整个页面最上方的“添加账户”按钮进行手动添加账户，手动添加账户需要填写账户的手机号、姓名、邮箱等信息，并经过一定的验证后方可添加成功。删除账户需要用户通过勾选界面下方的列表项进行多个账户同时删除，若用户未勾选任何账户，则会提示“请选择需要删除的账户”，若删除成功后将提示“删除成功”，若删除失败将提示“删除失败”。封禁账户仅能单个进行封禁，用户需要点击账号列表的一行中最后一列的“封禁”按钮方可封禁该用户，不提供多个同时封禁的功能。若封禁成功，该用户将被移除当前列表并提示“封禁成功”，若封禁失败则提示“封禁失败”。用户通过点击账户列表的一行中的最后一列的“查看”按钮，将会弹出一个Dialog，用于查看某个账户的详细信息，包括手机号、姓名、注册时间、邮箱、最近一次修改信息的时间等。用户通过点击账户列表的一行中的最后一列的“修改”按钮，将会弹出一个Dialog，用于修改某个账户的信息，包括重置密码、手机号、姓名、邮箱等。若完成修改则点击Dialog最下方的“确定”按钮进行保存修改，若修改成功则会提示“修改成功”且自动关闭Dialog，若修改失败则会提示“修改失败”并且Dialog不会关闭。若放弃更改可以点击Dialog右上角的关闭图标或者最下方的“取消”按钮关闭当前Dialog。该部分用例图如图3-12所示。图3-12后台用户管理模块用例图（4）题库管理模块题库管理分为三个子管理系统——题目管理，测试数据管理和题目标签管理，且均需要对应的权限方能进入。首先，题目管理的操作逻辑和用户管理大体相同，提供对题目的增、删、改、查功能。增添一个题目同样是点击界面最上方的“添加题目”按钮并在弹出的Dialog中输入所有必填的题目信息后点击Dialog最下面的“确定”按钮经过信息验证后即可添加，若信息验证失败，则提示“信息验证失败”，若提交添加成功后提示“添加成功”并关闭Dialog，若失败则提示“添加失败”。其余操作均同用户管理。再者，测试数据管理提供对系统所有题目的测试数据进行上传、下载的操作，进入该界面后左边提供根据题目ID、题目标题进行检索题目的功能，点击确定后会在右边的题目列表中显示查到的所有相关的题目，若无对应的题目则提示“无数据”的字样。对于列表的每一行，最后一列均提供“上传”和“下载”两个按钮，通过点击“上传”按钮弹出Dialog，Dialog中提供上传功能和“确定”按钮，用户或管理员选择对应的系统上的“.zip”文件后点击“确定”按钮即可上传，若上传的数据有误则会给出对应的提示，若成功则提示“上传并解压成功”。若一个题目已上传了数据，则“下载”按钮可点击，否则不可点击。点击后即可下载上传的“.zip”文件，若下载失败则提示“下载超时或失败”。最后，题目标签管理主要供管理员或教师用户对整个系统的标签进行搜索、增加和删除的操作。增加的标签将会用户前台和后台中供用户进行对应的标签进行题目的筛选。管理员或教师用户可以在搜索框中输入标签名称进行检索，下方的标签列表将会显示所有检索到的标签，若无内容则提示“无数据”的字样。用户可以点击搜索框右边的下拉框中的“添加标签”或“删除标签”选项对标签进行操作，若操作成功则给出提示，若用户没有选择需要删除的标签则提示“请选择需要删除的标签”。该部分用例图如图3-13所示。图3-13后台题库管理模块用例图（5）比赛管理模块比赛管理分为比赛列表管理和比赛广播，即有对应权限的管理员或教师用户可以管理所有的比赛，并对正在进行的比赛发送全场的广播消息。首先，比赛列表管理提供对所有比赛的搜索、新建、编辑、删除和查看的操作，操作界面同用户管理和题目管理，均为一套模板。用户通过点击比赛列表管理界面左上方的“新建比赛”按钮进入新建比赛的步骤界面，分为填写比赛信息，选择赛题，赛题排序和设置，创建完成四个步骤。用户需完成上一步并通过相应的表单验证后方能点击界面下方的“下一步”按钮跳转到下一步，若需要更改上一步骤的信息可点击界面下方的“上一步”回到上一个步骤。在选择赛题步骤中提供题目的赛选和选择操作，用户通过勾选相应的题目后方可进入下一步。若任何一步操作中不够完善则给出提示“数据不完整”。到了倒数第二步后点击“创建”按钮即可发起创建，若成功创建则提示“创建成功”，否则提示“创建失败”。用户可以通过点击比赛列表管理界面下方的比赛列表中任意一个“编辑”按钮进入新增编辑比赛界面进行编辑，同上有四步操作。其余的如删除和查看均同用户管理和题目管理操作和效果一致。最后，比赛广播功能界面左边列举了所有正在进行的比赛，用户选中一个比赛后右侧会显示该场比赛中所有已经发布的广播和条数，用户通过点击右下方的“喇叭”按钮对选中的比赛进行发布广播内容的操作。若发布成功则提示“发布成功”，否则提示“发布失败”。 该部分用例图如图3-14所示。图3-14后台比赛管理模块用例图（6）题单管理模块题目管理同比赛列表管理操作一致，需要用户有响应权限方可进入，提供对题单的新增、编辑、删除、搜索和查看的功能。用户通过点击界面左上方的“新增题单”按钮进入新增编辑题单界面进行操作，新增成功后将提示“新增成功”，若在新增的任意一步验证失败则不允许继续进行，若最后点击“新增”按钮失败则提示“新增失败”。用户通过点击题单管理界面下方的题单列表的操作列的“编辑”和“查看”按钮对某个题单进行编辑和查阅。编辑同新增使用同一界面，仅提示词不同。用户通过点击题单管理界面上方的“删除”图标，对选中的题单进行删除，若删除成功则提示“删除成功”，否则提示“删除失败”。若没有选择任何的题单，则提示“请选择需要删除的题单”。该部分用例图如图3-15所示。图3-15后台题单管理模块用例图（7）公告管理模块公告管理同用户管理和题目管理操作一致，提供发布、删除、查看、编辑和搜索题单的功能，同样仅有相关权限的用户方可操作。用户通过点击界面左上角的“发布新公告”按钮打开一个Dialog并填写公告标题、公告内容、公告所属分类、是否置顶等信息后点击Dialog下方的“确定”按钮即可发布新的公告，若信息填写有误则提示“信息有误，发布失败”，信息无误则提示“发布成功”并关闭Dialog。用户通过点击界面下方的公告列表的“操作”列中的“查看”和“编辑”按钮对某个公告进行查看和编辑操作。编辑操作同发布操作一致。用户通过界面中间的筛选框进行相应的公告筛选，可填写公告标题、公告编号、是否置顶进行关键筛选。该部分用例图如图3-16所示。图3-16后台公告管理模块用例图（8）权限管理模块为了有效管控后台的每一位管理员或教师账号所能使用到的模块，且一些涉及管理员增删改查等操作的功能并不能每个账号都可以操作，故需要对每个账号进行权限管理。有权限管理权限的账号可以通过后台界面的导航进入管理界面，权限管理界面仅提供一个操作，即编辑对应账号的权限。用户可以点击账号列表中最后一列的“编辑”按钮，对一个账号进行权限的分配，若某个用户需要“用户管理”的权限，则在对应列打上勾后即可，其他权限以此类推。选择好后点击最后一列中的“保存”按钮即可完成保存。若保存失败则提示“编辑失败”，否则提示“编辑成功”。该部分用例图如图3-17所示。图3-17后台权限管理模块用例图3.2概要设计3.2.1功能模块之间的信息交互设计（1）前台系统主界面用户在浏览器中输入前台系统的URL后，页面的最上方提供了页面导航和系统名称展示，前台系统的每个界面模块之间的交互通过页面导航即可实现转换。页面导航包含“首页”、“公告”、“题库”、“题单”、“榜单”、“比赛”六个按钮。若用户未登录，则将额外增加两个按钮“登录”和“注册”，进行登录或注册功能的切换操作。若用户已登录，则将额外增加“个人中心”和“退出登录”两个下拉选择，用户可点击“个人中心”切换到“个人中心”模块界面。（2）题目展示和代码编辑页题目展示和代码编辑页中提供“返回”按钮，供用户切回上一个模块界面。同时编辑区域提供“格式化”、“清空”、“调试”、“全屏”、“编辑器设置”和“提交评测”六个按钮。（3）公告界面通过页面导航进入公告界面后，点击公告的不同分类按钮即可切换到不同的公告进行展示。在公告界面上方的输入框输入需要搜索的公告标题后，点击任意一条公告的标题即可打开公告详情展示页面。（4）比赛界面设置界面包含画质和画面两个部分。如功能需求分析中所述，从上至下排列。点击每一栏的左右选择按钮进行设置。点击应用按钮，弹出应用设置询问框。按下键盘ESC键，返回系统主界面。（5）个人中心界面登录后点击“个人中心”进入，展示用户在系统中的如提交、比赛、排行等信息统计和图表展示。点击个人资料卡右方的“编辑资料”按钮进入个人资料编辑页面，编辑好新的资料后点击“保存”按钮进行提交，点击“返回”按钮返回到个人中心，点击“撤销”按钮撤销本次编辑。（6）后台系统主界面用户在浏览器中输入后台系统的URL后，页面的左侧提供了页面导航和系统名称展示，前台系统的每个界面模块之间的交互通过页面导航即可实现转换。页面导航包含“首页”、“用户管理”、“题库管理”、“比赛管理”、“题单管理”、“爬虫管理”、“公告管理”、“反馈管理”、“权限管理”九个按钮。（7）管理界面所有管理界面均提供“添加”、“删除”、“编辑”、“查看”、“搜索”五个基本操作。（8）删除询问框点击确定按钮，选中的项将会被删除。点击取消按钮或者关闭图标，关闭询问框。（9）封禁询问框点击确定按钮，封禁选中的账户，账户将被正常移除列表。点击取消按钮或关闭图标，关闭询问框。解禁询问框点击确定按钮，解禁选中的账户，账户将被封禁移除列表。点击取消按钮或关闭图标，关闭询问框。3.3数据库设计3.3.1数据库实体属性图根据本文的相关研究和数据分析，可以得出本系统主要的数据库实体，分别为普通用户信息、管理员用户信息、题目信息、比赛信息、题单信息和评测信息实体，下面将给出各个实体的属性图。普通用户信息实体在线评测系统分为前台系统和后台系统，所有的访客用户均只能使用前台系统，而后台系统只允许管理员用户进行操作。前台系统的普通用户信息实体如图3-18所示。图3-18普通用户信息实体属性图管理员用户信息实体在线评测系统的后台系统跟前台是独立运行的系统，前台账户无法登录后台，且后台系统中的用户信息不需要前台这么繁杂，为了降低不必要的内存浪费，为此需要创建一个独立的管理员信息实体，如图3-19所示。图3-19管理员用户信息实体属性图题目信息实体系统中最主要的就是题目的管理和展示，为了充分突出每个题目的信息丰富度，创建一个题目信息实体如图3-20所示。图3-20题目信息实体属性图比赛信息实体在线评测系统不仅支持题目的评测，完善的比赛模块将给系统增加可用率和广度，为此创建比赛信息实体，如图3-21所示。图3-21比赛信息实体属性图题单信息实体为了便于收集同类型的题目供用户查阅，题单模块的完善提高了系统高可用性和便捷性，为此创建题单信息实体，如图3-22所示。图3-22题单信息实体属性图评测信息实体评测服务是本系统的重要功能，为了能给用户提供高性能的评测和信息丰富度，创建一个完备的评测信息实体是必不可少的，如图3-23所示。图3-23评测信息实体属性图3.3.2实体间关系根据研究和分析，可以得出上述介绍的各个实体间的关系。一个普通用户可以查阅多个题目，一个题目也可以被多个用户查阅，关系为多对多。一个普通用户可以参加多场比赛，一场比赛也可以供多个用户参与，关系为多对多。一个普通用户可以提交多个评测，一个评测信息只对应一个用户，关系为一对多。一个普通用户可以检索多个题单，一个题单也可以被多个用户检索，关系为多对多。一个管理员用户可以管理多个题目，一个题目也可以被多个管理员进行管理，关系为多对多。一个管理员用户可以管理多个题单，一个题单也可以被多个管理员进行管理，关系为多对多。一个管理员用户可以管理多个比赛，一个比赛也可以被多个管理员进行管理，关系为多对多。从上面的分析可以得到各个实体间的关系，如图3-24和3-25。图3-24实体关系图1图3-25实体关系图23.3.3数据库表设计数据库的逻辑结构设计更好的为开发人员提供了间接直观的数据框架，使得在开发过程中有框架可以依靠。本系统的实体-属性模型描述如下。普通用户信息表（用户ID，真实姓名，昵称，简介，手机号，密码，邮箱，学号，所在学校，头像URL，封禁状态，提交相关信息）管理员用户信息表（管理员ID，真实姓名，手机号，邮箱，密码，权限信息，封禁状态，头像URL）题目信息表（题目ID，标题，内容，输入格式，输出格式，提示信息，分数，等级，来源，标签，可见状态，时间限制，空间限制，总提交数，总通过数）比赛信息表（比赛ID，标题，简介，比赛时间，可见状态，比赛赛制，私密性，比赛密码，主办方）题单信息表（题单ID，标题，简介，可见状态，题单题目信息）评测信息表（评测ID，用户ID，比赛ID，题目ID，提交时间，评测完成时间，代码，评测过程信息，评测结果，语言，最大运行时间，最大运行内存）3.3.4数据库表设计在线评测系统数据库主要有以下数据表，如表3-1所示。表3-1在线评测系统数据表表名描述user普通用户信息表admin管理员用户信息表problem题目信息表contest比赛信息表problem_cell题单信息表submission评测信息表结合以上数据表，使用NavicatPremium进行创建所有需要的数据表。（1）user（普通用户信息表）为了存储更多的用户信息数据，user表的字段如下表3-2所示。表3-2普通用户信息表字段名类型是否允许为空是否是为主外键描述user_idint否主键用户IDmobilevarchar否否手机号real_namevarchar否否真实姓名nicknamevarchar是否昵称schoolvarchar否否所在学校desctext是否简介avatarvarchar否否头像URLemailvarchar是否邮箱lockedchar否否封禁状态passwordvarchar否否密码student_numbervarchar否否学号（2）admin（管理员用户信息表）admin表主要有admin_id、real_name、mobile等字段，如下表3-3所示。表3-3管理员用户信息表字段名类型是否允许为空是否是为主外键描述admin_idint否主键管理员IDmobilevarchar否否手机号real_namevarchar否否真实姓名avatarvarchar否否头像URLemailvarchar是否邮箱lockedchar否否封禁状态passwordvarchar否否密码（3）problem（题目信息表）problem表主要有problem_id、title、desc等字段，如下表3-4所示。表3-4题目信息表字段名类型是否允许为空是否是为主外键描述problem_idint否主键题目IDtitlevarchar否否标题desclongtext否否内容hintvarchar是否提示信息sourcevarchar否否来源input_formattext是否输入格式output_formatvarchar否否输出格式tagsvarchar是否标签visiblechar否否可见状态scorevarchar否否分数levelvarchar否否等级submit_countint是否总提交数pass_countint是否总通过数（4）contest（普通用户信息表）contest表主要有contest_id、title、sponsor等字段，如下表3-5所示。表3-5比赛信息表字段名类型是否允许为空是否是为主外键描述contest_idint否主键比赛IDtitlevarchar否否标题sponsorvarchar否否主办方desclongtext是否简介contest_rulevarchar否否比赛赛制start_timetimestamp否否开始时间end_timetimestamp否否结束时间visiblechar否否可见状态passwordvarchar是否比赛密码durationdouble否否持续时间create_timetimestamp否否创建时间（5）submission（评测信息表）submission表主要有submission_id、user_id、problem_id等字段，如下表3-6所示。表3-6评测信息表字段名类型是否允许为空是否是为主外键描述submission_idint否主键评测IDuser_idint否外键用户IDproblem_idint否外键题目IDcontest_idint否外键比赛IDstatusint否否评测状态/结果codelongtext否否代码languagevarchar否否语言submit_timetimestamp否否提交时间max_run_timeint否否最大运行时间max_run_memoryint否否最大运行内存finish_timetimestamp否否完成评测时间msglongtext是否评测过程信息（6）problem_cell（题单信息表）problem_cell表主要有cell_id、cell_title、cell_desc等字段，如下表3-3所示。表3-2普通用户信息表字段名类型是否允许为空是否是为主外键描述cell_idint否主键题单IDcell_titlevarchar否否题单标题cell_desclongtext否否题单简介create_datetimestamp否否创建时间problemslongtest否否题单题目visiblechar否否可见状态4系统详细设计此部分将在上一章的基础上，对整个系统进行详细设计，介绍系统的总体结构，从程序逻辑角度说明各模块的实现细节。4.1系统开发环境及工具开发环境：Windows64位操作系统，Chrome浏览器，Ubuntu18.04操作系统。开发工具：使用VisualStudioCode进行系统所有模块的编码。4.2系统结构概述本系统结构如图4-1所示。图4-1在线评测系统结构图系统结构最上层为请求层，即用户在客户端中操作过程中产生了所有请求。系统第二层为接入层，主要用来拦截所有请求层发送的请求，并进行IP限制和资源转发的操作。系统第三层为服务层，主要提供给客户端的所有服务，即数据提供层或连接层。低筒最后一层为持久层，即系统中所有使用到的数据的持久存放处，服务于上一层——服务层。4.3前台系统模块流程4.3.1登录和注册进入前台系统首页，未登录的情况下可以点击右上方的“登录”和“注册”按钮进行相关操作。若用户未注册过账户，点击“注册”按钮弹出注册Dialog，用户需输入手机号、密码、真实姓名、邮箱、学号、所在学校共六个信息后方可点击“SignUp”按钮进行下一步验证验证码的操作，后端会发送一个短信验证码给用户进行验证，若输入的验证码是正确的的则最终注册成功，若失败则给出提示，直至验证成功。若用户已经注册过账户，则通过点击“登录”按钮弹出登录的Dialog，用户需输入手机号和密码进行登录，若验证失败则给出对应的提示，验证成功则允许登录。此部分功能流程图如图4-2所示。图4-2前台登录和注册功能流程图4.3.2提交评测和程序Debug用户在编写完一个题目的程序后点击编辑区域上方的“提交评测”按钮即可开始评测流程。首先会弹出评测状态Dialog，本次评测的状态将会实时的展示在Dialog中，从Pending、Compiling、Judging的全过程和测试点详情都会进行相应的展示。若用户的代码是正确的，将会给出“Accepted”的提示，否则将给出其他错误的提示，如“WrongAnswer”、“CompileError”等。除了提交评测外，用户可以点击编辑器区域上方的“Debug”图标进入在线测试运行模块，用户需要输入程序的自测输入，然后点击自测抽屉框右上角的“Run”按钮进行运行，若运行是成功的，将会给出用户对于当前测试输入的对应输出结果。若运行时出错，则会给出对应的错误字样，并不会给出程序输出。此部分功能流程图如图4-3所示。图4-3前台提交评测和程序Debug功能流程图4.3.3修改个人信息用户通过“个人中心”按钮进入个人中心，点击个人资料卡右方的“修改信息”按钮进入编辑页面。用户更改一定的信息，如密码、真实姓名、用户昵称、手机号、邮箱、所在学校、学号、用户简介中的任意一个将会额外在页面下方增加“撤回”按钮，用于撤回用户当前的更改。当用户更改完信息后点击“保存”按钮，将会判断用户更改后的信息是否合法，若不合法将不予保存并给出提示，若合法则保存成功并去除“撤回”按钮。此部分功能流程图如图4-4所示。图4-4修改个人信息流程图4.3.4报名比赛若用户已经报名了某场比赛，将在前台对应的比赛上显示“已报名”的字样，否则将不予显示。这时用户点击该场未报名的比赛打开一个Dialog，Dialog下方将会渲染一个“报名”的按钮。让用户点击“报名”按钮时，判断当前比赛是不是私密的，若是私密的将要求用户输入报名密码，此时若输入的密码正确，则会报名成功，否则将报名失败。若比赛是开放的，则点击报名后将直接报名成功。若整场比赛是已经开始或者已经结束的，将不予再进行报名操作。此部分功能流程图如图4-5所示。图4-5报名比赛流程图4.4后台系统模块流程4.4.1增删改用户管理员或教师用户进入用户管理界面，对普通用户或者管理员用户进行增删改的操作。当点击界面上方的“添加用户”按钮后弹出Dialog窗口，要求填写用户的必要信息后点击Dialog下方的“确定”按钮进行数据验证，若验证失败将提示“添加失败”，否则提示“添加成功”。当选中需要删除的账户时，点击界面上方的“删除”按钮判断是否有选中至少一个账户，没选中则提示“请选择需要删除的账户”，否则将询问用户是否确定删除，点击“确定”则直接删除，点击“取消”则取消删除。通过点击某一行账户的操作列下的“编辑”按钮，将会弹出编辑Dialog，修改任意信息后点击“确定”按钮将核验修改后的数据是否合法，若不合法则给出提示，否则将编辑成功。 该功能流程图如图4-6所示。图4-6增删改查用户功能流程图4.4.2增删改题目管理员或教师用户进入题目列表管理界面，对题库中的所有题目进行增删改的操作。当点击界面上方的“添加题目”按钮后弹出Dialog窗口，要求填写题目的必要信息后点击Dialog下方的“确定”按钮进行数据验证，若验证失败将提示“添加失败”，否则提示“添加成功”。当选中需要删除的题目时，点击界面上方的“删除”按钮判断是否有选中至少一个题目，没选中则提示“请选择需要删除的账户”，否则将询问用户是否确定删除，点击“确定”则直接删除，点击“取消”则取消删除。通过点击某一行题目的操作列下的“编辑”按钮，将会弹出编辑Dialog，修改任意信息后点击“确定”按钮将核验修改后的数据是否合法，若不合法则给出提示，否则将编辑成功使用物品的功能流程图如图4-7所示。图4-7增删改查题目功能流程图4.4.3上传和下载测试数据管理员或教师用户进入测试数据管理界面，点击需要上传测试数据的题目，然后点击列表最后一列的“上传”按钮，即可打开上传Dialog，用户通过拖拽或浏览文件两种方式上传测试数据文件。若上传的文件不是Zip格式，则本次上传无效并提示用户。若上传的文件大小大于限定，同样不予上传并给出提示。当前台的检测通过后将会上传文件到后端服务，后端服务接收到文件后将其解压并判断每个测试文件是否一一对应且文件后缀是否满足固定要求。若任意一项不满足将取消本次上传并给出提示，否则将成功上传。管理员或教师用户通过选择想要下载测试数据的题目，点击改行最后一列的“下载”按钮，若该题并未上传过测试数据，则点击无效，否则提示用户是否确定下载。点击“确定”按钮后将成功完成下载，否则取消本次下载。该的功能流程图如图4-8所示。图4-8上传和下载测试数据功能流程图4.4.4发布比赛广播管理员或教师用户进入比赛广播界面，若无正在进行的比赛，将不予进行任何操作。若有正在进行的比赛，用户可以选择任意一个进入该比赛的广播通信信道。用户通过点击右下角的“广播”图标打开输入框，输入需要广播的信息后点击“发布”按钮，若信道无障碍则发送成功，否则发送失败并给出提示。该的功能流程图如图4-9所示。图4-9发布比赛广播功能流程图5系统实现及测试此章节根据总体设计和详细设计实现在线评测系统的各部分功能，给出部分功能的实现方法并测试这些功能。功能测试测试方法为黑盒测试，通过测试检验是否每个功能都能正常使用。测试环境如下表5-1所示。表5-SEQ表\*ARABIC\s11测试环境字段名类型操作系统Window10服务器Ubuntu18.04数据库MySQL8.0客户端Chrome5.1系统主要功能设计与实现5.1.1前台系统（1）题目检索功能进入题库界面，最上方的部分为检索功能区。用户可以通过题目ID、题目标题、题目等级和题目标签进行题目的筛选。如下图5-2所示。图5-2题目检索区题目标签的选择需要用户自行在所有的标签中进行勾选，在题目标签过多的情况下，用户可通过筛选框上方的检索功能搜索需要的标签。如下图5-3所示。图5-3题目标签选择框（2）提交评测功能在前台系统中，当用户编写完某个题目的代码后，点击编辑区域上方的“提交评测”按钮即可进行评测。如下图5-4所示。图5-4提交评测功能当点击提交评测后将弹出评测状态监控的Dialog，用户可以实时获取到当前提交的评测的运行过程和测试点评判状态。如下图5-5所示。图5-5评测状态监控提交评测功能主要是通过将题目ID、题目最大用时、题目最大使用内存、用户代码等信息通过WebSocket传给判题服务器进行安排判题任务，并实时监听判题服务器返回的判题结果渲染到界面上。（3）登录和注册功能在前台系统中，用户通过点击最上方的导航栏的“登录”和“注册”按钮打开对应的Dialog。如下图5-6所示。图5-6登录和注册按钮当点击“登录”按钮后，将打开一个Dialog，用户输入手机号和密码后点击“SignIn”按钮进行登录。如下图5-7所示。图5-7登录Dialog登录功能的主要实现即发送用户输入的手机号和密码到后端服务器进行检验，若通过则予以登录，否则提示错误。用户点击“注册”按钮同样是打开一个Dialog，用户需要输入手机号、邮箱、密码、学号、所在学校等信息后点击“SignUp”按钮进行注册，同时需要用户接受并验证短信验证码。如下图5-8所示。图5-8注册Dialog（4）报名比赛功能在比赛模块中，用户通过选择需要报名的比赛，点击比赛标题打开相应的Dialog信息框。如下图5-9所示。图5-9打开比赛信息介绍Dialog通过点击Dialog下方的“报名”按钮进行报名。若该场比赛为私密的，需要用户输入报名密码后方可进行报名。如下图5-10所示。图5-10报名密码输入框5.1.2后台系统（1）题库管理功能在后台系统中，题库管理功能是使用最频繁的。为管理员提供了添加、删除、查看、编辑、搜索、上传和下载题目测试数据的功能。如下图5-11所示。图5-11题库管理主要功能模块题目列表管理中提供对所有题目的增删改查的操作，后台系统中的诸如比赛列表管理界面、用户管理界面、管理员管理界面、题单管理界面等均使用同一模板。如下图5-12所示。图5-12题目列表模块界面测试数据管理界面的左侧为题目检索区域，用户可以通过题目编号和题目标题进行所需上传和下载测试数据的题目进行检索，而界面的右侧则显示了当前检索下的所有题目，主要信息为题目标号、题目标题、状态和最近一次上传时间。列表的最后一列提供了“上传”和“下载”两种操作。如下图5-13所示。图5-13测试数据管理模块界面5.1.3判题服务系统判题服务系统的设计主要参考了Nginx中负载均衡的思路，架设一个同客户端和所部属的判题机通信的服务器，将客户端中的信息和判题机中的信息进行双向交互，做到了中间人的效果，从而摆脱了在每个判题机中进行客户端通信功能的冗余操作。负载均衡的思路在于，一个总的服务对多个微服务或任务进行数据传输管控操作，将所有访问压力根据不同的规则分散到下属的所有微服务或任务中执行。而整个通信交互采用Socket技术进行全双工通信，确保了数据的快速交互和通信，提高了整个系统判题过程的通信效率，给用户更直观的快速的判题体验。本文介绍的在线评测系统的判题服务架构设计如下图5-14所示。图5-14判题服务系统的基本架构判题服务器接受所有连接进行的客户端的判题请求，此时判断是否有空闲的判题机，若有则将该判题任务分发给空闲的判题机，并将该判题机移除空闲队列，若空闲的判题机则将当前判题请求存到待判题任务队列中。判题机接受到判题任务后将自己的状态发送给判题服务器进行收集并开始判题，判题过程中的所有步骤，如程序编译、读取测试文件数据、进行测试点的评测、比较结果等获得的结果均会打包成小的过程结果发给判题服务器进行汇总，当判题结束后将判题机发出判题结束信号给判题服务器并将自己的状态置为空闲的，此时判题服务器将所有数据返回到客户端中。若判题服务器收到判题机的空闲信号，则先查询待判题任务队列是否为空，若不空则分配一个任务给当前空闲的判题机，否则将判题机加到判题机空闲队列中进行等待。整体的执行流程如下图5-15所示。图5-15判题服务的运行流程5.2主要功能测试5.2.1前台系统主要功能测试（1）题目检索功能在题目ID的输入框中输入除数字以外的内容、根据不同条件检索题目。测试用例如表5-1所示。表5-1题目检索功能测试用例编号预期输入预期输出实际输入实际输出测试结果1在题目ID输入框中输入数字并检索正确筛选对应ID的题目在题目ID输入框中输入数字并检索正确筛选对应ID的题目测试通过2在题目ID输入框中输入非数字并检索弹出“必须输入数字”的提示在题目ID输入框中输入非数字并检索弹出“必须输入数字”的提示测试通过3选择不同题目等级进行检索列出的所有题目的等级为检索的等级选择不同题目等级进行检索列出的所有题目的等级为检索的等级测试通过4选择不同的题目标签进行检索列出的所有题目的标签均带有选择的标签选择不同的题目标签进行检索列出的所有题目的标签均带有选择的标签测试通过（2）提交评测功能通过提交空的代码、提交错误的代码、提交正确的代码、提交的代码所用的语言和所选择的语言不一致进行测试。测试用例如表5-2所示。表5-2提交评测功能测试用例编号预期输入预期输出实际输入实际输出测试结果1不编写任何代码并提交评测弹出“提交代码为空”的提示不编写任何代码进行提交评测弹出“提交代码为空”的提示测试通过2编写错误的代码并提交评测给出的评测结果为不通过编写错误的代码并提交评测给出的评测结果为不通过测试通过3编写正确的代码并提交评测给出的评测结果为通过编写正确的代码并提交评测给出的评测结果为通过测试通过4选择和编写的代码所用的语言不一致并提交评测给出的评测结果为编译失败选择和编写的代码所用的语言不一致并提交评测给出的评测结果为编译失败测试通过（3）报名比赛功能通过报名公开的比赛、报名私密的比赛、在比赛进行时或结束后尝试报名进行测试。测试用例如表5-3所示。表5-3报名比赛功能测试用例编号预期输入预期输出实际输入实际输出测试结果1报名公开的比赛成功报名报名公开的比赛成功报名测试通过2报名私密的比赛并输入错误的密码弹出”密码错误”提示报名私密的比赛并输入错误的密码弹出”密码错误”提示测试通过3报名私密的比赛并输入正确的密码成功报名报名私密的比赛并输入正确的密码成功报名测试通过4尝试报名正在进行或已结束的比赛不提供报名途径试报名正在进行或已结束的比赛不提供报名途径测试通过（4）登录和注册功能通过输入正确和错误的数据进行登录、输入不同的信息进行注册、输入错误的验证码进行注册、输入正确的验证码进行注册进行测试。测试用例如表5-4所示。表5-4报名比赛功能测试用例编号预期输入预期输出实际输入实际输出测试结果1不输入手机号进行登录提示“输入手机号和密码”不输入手机号进行登录提示“输入手机号和密码”测试通过2输入手机号不输入密码并登录提示“输入密码”输入手机号不输入密码并登录提示“输入密码”测试通过3输入错误的手机号并登录弹出“手机号未注册”提示输入错误的手机号并登录弹出“手机号未注册”提示测试通过4输入正确的手机号和密码进行登录弹出“密码错误”输入正确的手机号和密码进行登录弹出“密码错误”测试通过5输入正确的手机号和密码并登录成功登录输入正确的手机号和密码并登录成功登录测试通过6输入不合法的信息并进行注册提示“信息不合法”输入不合法的信息并进行注册提示“信息不合法”测试通过7输入合法的信息并注册弹出输入验证码的对话框输入合法的信息并注册弹出输入验证码的对话框测试通过8输入错误的验证码进行注