程序設計競賽實驗室社區設計與實現

陳哲凡 柯海豐

摘 ?要： 目前，程序設計競賽變得越來越熱門，而如何推廣和組織參與這項賽事成了學校的一個痛點。開發一個程序設計競賽實驗室社區是解決該痛點的辦法，既可以使學校擁有一個向外展示的渠道，讓更多的學生了解、加入到程序設計競賽中，也可以使教練更好地掌握學生的訓練情況。文章將以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將編輯器放入一個新的