程序設(shè)計(jì)競(jìng)賽實(shí)驗(yàn)室社區(qū)設(shè)計(jì)與實(shí)現(xiàn)

陳哲凡 柯海豐

摘 ?要： 目前，程序設(shè)計(jì)競(jìng)賽變得越來(lái)越熱門，而如何推廣和組織參與這項(xiàng)賽事成了學(xué)校的一個(gè)痛點(diǎn)。開發(fā)一個(gè)程序設(shè)計(jì)競(jìng)賽實(shí)驗(yàn)室社區(qū)是解決該痛點(diǎn)的辦法，既可以使學(xué)校擁有一個(gè)向外展示的渠道，讓更多的學(xué)生了解、加入到程序設(shè)計(jì)競(jìng)賽中，也可以使教練更好地掌握學(xué)生的訓(xùn)練情況。文章將以React和Django REST Framework為技術(shù)基礎(chǔ)，來(lái)介紹程序設(shè)計(jì)競(jìng)賽實(shí)驗(yàn)室社區(qū)的設(shè)計(jì)與實(shí)現(xiàn)。

關(guān)鍵詞： 網(wǎng)頁(yè)開發(fā); 程序設(shè)計(jì)競(jìng)賽; 社區(qū)平臺(tái); 競(jìng)賽訓(xùn)練

中圖分類號(hào)：TP311 ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A ? ? 文章編號(hào)：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 引言

程序設(shè)計(jì)競(jìng)賽，目前在國(guó)內(nèi)正趨于大眾化，越來(lái)越多院校的學(xué)生開始參加程序設(shè)計(jì)競(jìng)賽或者說(shuō)對(duì)其感興趣。目前，已經(jīng)有眾多的Online Judge可供選手使用[1]，但其作用往往只限制于做題，交流往往是作為一個(gè)附屬功能，用戶較為受限，不能充分與他人交流，故并沒有成為一個(gè)活躍的程序設(shè)計(jì)競(jìng)賽網(wǎng)上社區(qū)。如何讓選手們充分交流、積累資料，成為了一個(gè)富有挑戰(zhàn)的問題。

1 實(shí)現(xiàn)技術(shù)

本文將介紹的系統(tǒng)是前后端分離的，也就是說(shuō)，后端不再負(fù)責(zé)所有頁(yè)面的渲染，而是提供API接口，前端通過API接口與后端交互，將后端的數(shù)據(jù)展示給用戶以及將用戶提交的數(shù)據(jù)提供給后端。因此，本文將以React生態(tài)圈[2]作為基礎(chǔ)，借助Webpack打包技術(shù)，開發(fā)單頁(yè)應(yīng)用架構(gòu)的前端。并且以Django REST Framework[3]作為后端框架。

1.1 前端技術(shù)

雖然現(xiàn)在的網(wǎng)頁(yè)前端最終還是依靠HTML、CSS、JavaScript這前端三劍客來(lái)展示。但是在現(xiàn)代的前端開發(fā)中，就像不直接編寫編譯C語(yǔ)言得到的匯編語(yǔ)言那樣，我們并不直接去編寫HTML，而是借助前端框架來(lái)生成它們。

1.1.1 React

React是最初由Facebook開發(fā)的用于構(gòu)建用戶界面的開源JavaScript庫(kù)。React的核心是組件，整個(gè)純React都由組件組成，且每一個(gè)組件擁有一個(gè)描述自己狀態(tài)的State、以及從父組件傳來(lái)的Props。而每個(gè)組件的渲染函數(shù)就是一個(gè)基于State和Props的純函數(shù)，只要State或者Props發(fā)生了變化，那整個(gè)組件就將重新渲染，用戶所見到的就是頁(yè)面發(fā)生了動(dòng)態(tài)的變化。

1.2 后端技術(shù)

作為一個(gè)前后端分離的項(xiàng)目，后端負(fù)責(zé)處理用戶發(fā)來(lái)的請(qǐng)求，與數(shù)據(jù)庫(kù)交互，并返回相應(yīng)數(shù)據(jù)。本文采用Django REST Framework作為后端框架，這個(gè)框架基于Django，又根據(jù)REST[4]的風(fēng)格，封裝了大量的常見的增刪改查操作，達(dá)到快速開發(fā)的目的。

1.2.1 Django

Django是一個(gè)開源的Web應(yīng)用架構(gòu)，由Python寫成，采用了MVT的設(shè)計(jì)模式（Model、View、Template），其中Model表示數(shù)據(jù)模型、View表示視圖，數(shù)據(jù)的控制層，Template是表現(xiàn)層。Django最大的特點(diǎn)就是輕量、簡(jiǎn)單，特別是它還自帶了帶界面的管理員模塊，免去額外開發(fā)一套管理員界面的工作量[5]。

1.2.2 Django REST Framework

Django REST Framework是一款強(qiáng)大且靈活的構(gòu)建網(wǎng)頁(yè)API的工具，用最少的代碼快速構(gòu)建出一套可靠的API，之后簡(jiǎn)稱DRF。DRF最核心的幾塊是Model、Serializer、View、Authentication、Permissions。

2 基本架構(gòu)

用戶模塊：提供用戶登錄注冊(cè)等基本功能，并提供額外的功能，支持用戶填寫真實(shí)姓名、學(xué)號(hào)、入學(xué)年份、個(gè)人簡(jiǎn)介（支持Markdown編輯）、自定義頭像、畢業(yè)去向（如研究生讀入學(xué)校、工作）。此外，還可以查看自己的用戶名、用戶類型（普通用戶、隊(duì)員、教練）。

題解模塊：支持登錄用戶自行編寫（支持Markdown在線編輯預(yù)覽），并設(shè)置標(biāo)題、對(duì)應(yīng)OJ、題號(hào)，發(fā)布題解。已登錄的用戶可以根據(jù)標(biāo)題、OJ、題號(hào)、發(fā)布人等信息搜索題解并查看。

模版模塊：目前程序設(shè)計(jì)競(jìng)賽選手一般以Word或者PDF的形式保存模版并在賽前打印成紙質(zhì)版，因此系統(tǒng)也支持這兩個(gè)格式，用戶可以上傳本地的模版到系統(tǒng)與其他用戶分享。

成員模塊：該模塊根據(jù)數(shù)據(jù)庫(kù)中的用戶類型、用戶所填寫的自定義信息以及頭像自動(dòng)生成，用于向外展示程序設(shè)計(jì)競(jìng)賽實(shí)驗(yàn)室的成員信息，成員詳情為用戶在用戶模塊填寫的個(gè)人簡(jiǎn)介（支持Markdown）。

故事模塊：該模塊的添加需要依靠管理員模塊，因?yàn)槠胀ㄓ脩襞c隊(duì)員并沒有添加實(shí)驗(yàn)室故事的權(quán)限。管理員可以填寫故事的類型（大事件、各種競(jìng)賽賽事）、時(shí)間等信息，系統(tǒng)將自動(dòng)生成故事的時(shí)間線，展示給所有用戶。

管理員模塊：得益于DRF所自帶的管理員模塊，管理員可以直接以網(wǎng)頁(yè)頁(yè)面的形式進(jìn)入后臺(tái)管理，修改用戶的類型、或者故事模塊中的故事等信息。

3 部分功能實(shí)現(xiàn)

本章將從系統(tǒng)具體界面出發(fā)，描述每個(gè)模塊的功能以及使用方法，更好地幫助讀者以及用戶理解如何使用系統(tǒng)。針對(duì)涉及關(guān)鍵業(yè)務(wù)的模塊，本章還將補(bǔ)充闡述該功能實(shí)現(xiàn)的流程。

3.1 登錄

在本應(yīng)用中，采用服務(wù)器端驗(yàn)證用戶提交的表單信息，如果賬號(hào)密碼正確，則由服務(wù)器通過請(qǐng)求響應(yīng)中的Set-Cookie字段將Token存入客戶端的Cookie中。之后每次客戶端發(fā)出的請(qǐng)求都將帶著Token，服務(wù)器端通過Token來(lái)獲取用戶的身份。此外，可以在服務(wù)器端，也就是DRF的設(shè)置中修改Token過期的時(shí)間。

3.2 個(gè)人信息

3.2.1 基本信息

在基本信息中，用戶名和用戶類型是在用戶登錄之后，存儲(chǔ)在React Redux的Store中的，每當(dāng)用戶打開基本信息，就將Store中的數(shù)據(jù)展示給用戶，因此這些數(shù)據(jù)是直接從后臺(tái)服務(wù)器給的，用戶無(wú)法修改。

剩下的表單為真實(shí)姓名、學(xué)號(hào)、入學(xué)年份、個(gè)人簡(jiǎn)介。其中真實(shí)姓名、學(xué)號(hào)。入學(xué)年份都是必填項(xiàng)，這也就意味著一個(gè)用戶只有可能這三項(xiàng)信息都是空的，或者都是有填寫的，因此前端在顯示用戶信息時(shí)，只需要判斷某一項(xiàng)是否填寫就可以知道其他項(xiàng)有沒有填寫。個(gè)人簡(jiǎn)介是選填的，點(diǎn)擊“使用MARKDOWN編輯器”，就可以實(shí)時(shí)預(yù)覽編輯Markdown文本保存為個(gè)人簡(jiǎn)介。

3.2.2 頭像設(shè)置

頭像剪裁是每一個(gè)上傳頭像功能中最重要的功能。本項(xiàng)目借助React組件react-avatar-editor完成了此功能。頭像剪裁有兩個(gè)步驟，第一步是選擇縮放尺度Scale，因此本文使用了Material UI庫(kù)中的滑動(dòng)條組件Slider，并設(shè)置Slider的最小值為1，最大值為2。同時(shí)用回調(diào)函數(shù)監(jiān)聽Slider的變化，每當(dāng)其變化，就將其值更新到React組件的State中的Scale中。同時(shí)react-avatar-editor中Scale的值指定為State中的Scale，這樣就實(shí)現(xiàn)了修改頭像的縮放。第二步是移動(dòng)蒙版，以選擇想要剪裁頭像的區(qū)域，react-avatar-editor組件已經(jīng)幫我們實(shí)現(xiàn)完畢。

因此用戶的使用流程如下，點(diǎn)擊上傳按鈕上傳原始的圖片文件，然后拉動(dòng)滑動(dòng)條決定縮放大小，移動(dòng)蒙版決定剪裁的位置，最后點(diǎn)擊保存將剪裁完成的頭像上傳。

3.3 題解

用戶登錄之后首先會(huì)進(jìn)入題解列表。列表由標(biāo)題、OJ、題號(hào)、作者、發(fā)布時(shí)間組成。用戶點(diǎn)擊這五個(gè)列標(biāo)題任意一個(gè)旁的小箭頭都可以根據(jù)這一列的字典序正序或者倒序排列?；蛘咴谠摿袠?biāo)題下的下劃線處輸入文本，就可以根據(jù)該列是否包含輸入的文本進(jìn)行過濾。

同時(shí)，用戶可以新建題解，如圖1所示，其中內(nèi)容字段可以使用開源庫(kù)StackEdit所提供的Markdown在線編輯器進(jìn)行編輯。StackEdit將編輯器放入一個(gè)新的