程序设计竞赛实验室社区设计与实现

陈哲凡 柯海丰

摘  要： 目前，程序设计竞赛变得越来越热门，而如何推广和组织参与这项赛事成了学校的一个痛点。开发一个程序设计竞赛实验室社区是解决该痛点的办法，既可以使学校拥有一个向外展示的渠道，让更多的学生了解、加入到程序设计竞赛中，也可以使教练更好地掌握学生的训练情况。文章将以React和Django REST Framework为技术基础，来介绍程序设计竞赛实验室社区的设计与实现。

关键词： 网页开发; 程序设计竞赛; 社区平台; 竞赛训练

中图分类号：TP311          文献标识码：A     文章编号：1006-8228（2020）01-50-03

Abstract： At present， programming contest is becoming more and more popular， and how to promote and organize to participate in this event has become a pain point for the school. Developing a programming contest laboratory community is the way to solve the pain point. It can not only make the school have a channel to show， let more students know and join in the programming contest， but also make the coaches master the training situation of students better. Based on React and Django REST framework， the design and implementation of programming contest lab community are introduced in this paper.

Key words： Web development; programming contest; community; competition training

0 引言

程序设计竞赛，目前在国内正趋于大众化，越来越多院校的学生开始参加程序设计竞赛或者说对其感兴趣。目前，已经有众多的Online Judge可供选手使用[1]，但其作用往往只限制于做题，交流往往是作为一个附属功能，用户较为受限，不能充分与他人交流，故并没有成为一个活跃的程序设计竞赛网上社区。如何让选手们充分交流、积累资料，成为了一个富有挑战的问题。

1 实现技术

本文将介绍的系统是前后端分离的，也就是說，后端不再负责所有页面的渲染，而是提供API接口，前端通过API接口与后端交互，将后端的数据展示给用户以及将用户提交的数据提供给后端。因此，本文将以React生态圈[2]作为基础，借助Webpack打包技术，开发单页应用架构的前端。并且以Django REST Framework[3]作为后端框架。

1.1 前端技术

虽然现在的网页前端最终还是依靠HTML、CSS、JavaScript这前端三剑客来展示。但是在现代的前端开发中，就像不直接编写编译C语言得到的汇编语言那样，我们并不直接去编写HTML，而是借助前端框架来生成它们。

1.1.1 React

React是最初由Facebook开发的用于构建用户界面的开源JavaScript库。React的核心是组件，整个纯React都由组件组成，且每一个组件拥有一个描述自己状态的State、以及从父组件传来的Props。而每个组件的渲染函数就是一个基于State和Props的纯函数，只要State或者Props发生了变化，那整个组件就将重新渲染，用户所见到的就是页面发生了动态的变化。

1.2 后端技术

作为一个前后端分离的项目，后端负责处理用户发来的请求，与数据库交互，并返回相应数据。本文采用Django REST Framework作为后端框架，这个框架基于Django，又根据REST[4]的风格，封装了大量的常见的增删改查操作，达到快速开发的目的。

1.2.1 Django

Django是一个开源的Web应用架构，由Python写成，采用了MVT的设计模式（Model、View、Template），其中Model表示数据模型、View表示视图，数据的控制层，Template是表现层。Django最大的特点就是轻量、简单，特别是它还自带了带界面的管理员模块，免去额外开发一套管理员界面的工作量[5]。

1.2.2 Django REST Framework

Django REST Framework是一款强大且灵活的构建网页API的工具，用最少的代码快速构建出一套可靠的API，之后简称DRF。DRF最核心的几块是Model、Serializer、View、Authentication、Permissions。

2 基本架构

用户模块：提供用户登录注册等基本功能，并提供额外的功能，支持用户填写真实姓名、学号、入学年份、个人简介（支持Markdown编辑）、自定义头像、毕业去向（如研究生读入学校、工作）。此外，还可以查看自己的用户名、用户类型（普通用户、队员、教练）。

题解模块：支持登录用户自行编写（支持Markdown在线编辑预览），并设置标题、对应OJ、题号，发布题解。已登录的用户可以根据标题、OJ、题号、发布人等信息搜索题解并查看。

模版模块：目前程序设计竞赛选手一般以Word或者PDF的形式保存模版并在赛前打印成纸质版，因此系统也支持这两个格式，用户可以上传本地的模版到系统与其他用户分享。

成员模块：该模块根据数据库中的用户类型、用户所填写的自定义信息以及头像自动生成，用于向外展示程序设计竞赛实验室的成员信息，成员详情为用户在用户模块填写的个人简介（支持Markdown）。

故事模块：该模块的添加需要依靠管理员模块，因为普通用户与队员并没有添加实验室故事的权限。管理员可以填写故事的类型（大事件、各种竞赛赛事）、时间等信息，系统将自动生成故事的时间线，展示给所有用户。

管理员模块：得益于DRF所自带的管理员模块，管理员可以直接以网页页面的形式进入后台管理，修改用户的类型、或者故事模块中的故事等信息。

3 部分功能实现

本章将从系统具体界面出发，描述每个模块的功能以及使用方法，更好地帮助读者以及用户理解如何使用系统。针对涉及关键业务的模块，本章还将补充阐述该功能实现的流程。

3.1 登录

在本应用中，采用服务器端验证用户提交的表单信息，如果账号密码正确，则由服务器通过请求响应中的Set-Cookie字段将Token存入客户端的Cookie中。之后每次客户端发出的请求都将带着Token，服务器端通过Token来获取用户的身份。此外，可以在服务器端，也就是DRF的设置中修改Token过期的时间。

3.2 个人信息

3.2.1 基本信息

在基本信息中，用户名和用户类型是在用户登录之后，存储在React Redux的Store中的，每当用户打开基本信息，就将Store中的数据展示给用户，因此这些数据是直接从后台服务器给的，用户无法修改。

剩下的表单为真实姓名、学号、入学年份、个人简介。其中真实姓名、学号。入学年份都是必填项，这也就意味着一个用户只有可能这三项信息都是空的，或者都是有填写的，因此前端在显示用户信息时，只需要判断某一项是否填写就可以知道其他项有没有填写。个人简介是选填的，点击“使用MARKDOWN编辑器”，就可以实时预览编辑Markdown文本保存为个人简介。

3.2.2 头像设置

头像剪裁是每一个上传头像功能中最重要的功能。本项目借助React组件react-avatar-editor完成了此功能。头像剪裁有两个步骤，第一步是选择缩放尺度Scale，因此本文使用了Material UI库中的滑动条组件Slider，并设置Slider的最小值为1，最大值为2。同时用回调函数监听Slider的变化，每当其变化，就将其值更新到React组件的State中的Scale中。同时react-avatar-editor中Scale的值指定为State中的Scale，这样就实现了修改头像的缩放。第二步是移动蒙版，以选择想要剪裁头像的区域，react-avatar-editor组件已经帮我们实现完毕。

因此用户的使用流程如下，点击上传按钮上传原始的图片文件，然后拉动滑动条决定缩放大小，移动蒙版决定剪裁的位置，最后点击保存将剪裁完成的头像上传。

3.3 题解

用户登录之后首先会进入题解列表。列表由标题、OJ、题号、作者、发布时间组成。用户点击这五个列标题任意一个旁的小箭头都可以根据这一列的字典序正序或者倒序排列。或者在该列标题下的下划线处输入文本，就可以根据该列是否包含输入的文本进行过滤。

同时，用户可以新建题解，如图1所示，其中内容字段可以使用開源库StackEdit所提供的Markdown在线编辑器进行编辑。StackEdit将编辑器放入一个新的