基于Django的編程學(xué)習(xí)輔助系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

PAGEPAGE16摘要計(jì)算機(jī)編程的學(xué)習(xí)不僅注重書本的閱讀，更離不開個人的動手實(shí)踐。編寫代碼即動手實(shí)踐，是將知識具體化的過程。而編程能力的評定包括編寫代碼的速度、質(zhì)量和總量等三個維度，其中總量是最直觀和具體的。作者針對廣東東軟學(xué)院本科計(jì)算機(jī)相關(guān)專業(yè)的學(xué)生進(jìn)行調(diào)研，發(fā)現(xiàn)由于學(xué)生的代碼零散地分布于課程作業(yè)、在線判題系統(tǒng)平臺和個人實(shí)踐項(xiàng)目中，導(dǎo)致學(xué)生和老師都難以獲取代碼總量這個指標(biāo)。為了解決這個問題，作者設(shè)計(jì)和開發(fā)了基于Django的編程學(xué)習(xí)輔助在線系統(tǒng)，取名積碼。積碼系統(tǒng)以代碼量統(tǒng)計(jì)分析為核心，將作業(yè)管理、索引在線判題系統(tǒng)平臺、學(xué)習(xí)交流和共享資源進(jìn)行了整合。學(xué)生和授課老師可以通過積碼系統(tǒng)，記錄學(xué)生在大學(xué)本科四年內(nèi)完成的實(shí)踐成果，獲得代碼量統(tǒng)計(jì)報(bào)告，監(jiān)控學(xué)生的學(xué)習(xí)情況，讓拿取資源更加便利，以達(dá)到輔助編程學(xué)習(xí)的效果。關(guān)鍵詞：Django，web系統(tǒng)平臺，代碼量統(tǒng)計(jì)報(bào)告，監(jiān)控學(xué)習(xí)情況，編程學(xué)習(xí)輔助

AbstractThestudyofcomputerprogrammingnotonlypaysattentiontothereadingofbooks,butalsocannotbeseparatedfrompersonalhands-onpractice.Hands-onpracticeiswritingcode,whichistheprocessofmaterializingknowledge.Theevaluationofprogrammingabilityincludesthreedimensions,suchasthespeed,quality,andtotalamountofcodewritten.Thetotalamountisthemostintuitiveandspecific.TheauthorconductedasurveyofundergraduatesmajoringincomputerscienceatGuangdongNeusoftUniversity,andfoundthatstudents'andteachers'difficultyinobtainingtheindicatorofthetotalcodeisduetothescattereddistributionofstudentcodesincoursework,onlineproblemdeterminationsystemplatforms,andpersonalpracticeprojects.Inordertosolvethisproblem,theauthordesignedanddevelopedanonlinesystembasedonDjangoforprogrammingandlearning,namedJiCode.TheJiCodesystemisbasedonthestatisticalanalysisofcodeamount,andintegratesjobmanagement,indexingonlineproblemdeterminationsystemplatform,learningcommunicationandsharedresources.StudentsandlecturerscanusetheJiCodesystemtorecordthepracticalresultsofstudentscompletedwithinfouryearsofcollege,obtaincodeanalysisreports,monitorstudentlearning,andmakeiteasiertoobtainresourcestoachievetheeffectofassistedprogramminglearning.Keywords:Django,WebSystemPlatform,CodeAmountAnalysisReport,MonitoringLearningSituation,ProgrammingLearningAssistance目錄TOC\o"1-4"\h\z\u1.緒論 11.1研究背景及意義 11.2核心成果 11.3論文結(jié)構(gòu) 22.需求分析 32.1業(yè)務(wù)需求分析 32.2用戶及功能需求分析 42.2.1通用模塊 42.2.2學(xué)生模塊 52.2.3教師模塊 52.2.4后臺管理模塊 62.2.5系統(tǒng)總體用例 62.4非功能需求分析 62.4.1性能需求 72.4.2質(zhì)量屬性 72.4.3接口與約束 83.系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) 93.1系統(tǒng)主框架 93.2軟件總體概述 103.3數(shù)據(jù)庫設(shè)計(jì) 133.3.1用戶角色表 143.3.2用戶抽象類表 143.3.3教師表 153.3.4學(xué)生表 153.3.5批量用戶生成文件表 153.3.6課程表 153.3.7文本編輯抽象類表 163.3.8作業(yè)表 163.3.9作答表 173.3.10評論表 173.3.11組隊(duì)表 173.3.12代碼表 183.3.13郵箱驗(yàn)證 183.3.14總體數(shù)據(jù)ER關(guān)系圖 193.4業(yè)務(wù)流程 203.4.1用戶端主流程和基本業(yè)務(wù) 203.4.2特定用戶業(yè)務(wù)流程 243.5項(xiàng)目目錄結(jié)構(gòu) 333.6系統(tǒng)界面設(shè)計(jì) 363.6.1用戶端界面 363.6.2后臺管理端界面 393.7具體實(shí)現(xiàn) 403.7.1代碼量分析 403.7.2代碼量可視化 443.7.3后臺系統(tǒng) 493.7.4作業(yè)提交管理 504.系統(tǒng)部署 564.1阿里云部署 564.2生產(chǎn)環(huán)境 575.結(jié)論 595.1總結(jié)課題及成果 595.2未來展望 59參考文獻(xiàn) 60附錄：積碼系統(tǒng)依賴的工具包 61致謝 62廣東東軟學(xué)院本科生畢業(yè)設(shè)計(jì)（論文）1.緒論1.1研究背景及意義在信息時代，計(jì)算機(jī)編程是教育和學(xué)習(xí)的熱點(diǎn)，對計(jì)算機(jī)專業(yè)人才的培養(yǎng)在效率和質(zhì)量方面要有所提高[1]。根據(jù)2018年我國教育部發(fā)布的計(jì)算機(jī)類專業(yè)教學(xué)質(zhì)量國家標(biāo)準(zhǔn)，計(jì)算機(jī)專業(yè)大學(xué)生在四年內(nèi)總的實(shí)踐代碼量要超過兩萬行。我作為軟件工程本科專業(yè)的學(xué)生，經(jīng)過四年學(xué)習(xí)計(jì)算機(jī)類相關(guān)知識，在學(xué)習(xí)過程中與學(xué)生和老師進(jìn)行了溝通和討論后，發(fā)現(xiàn)授課老師很難全面地掌握同學(xué)們的學(xué)習(xí)情況，學(xué)生自己也不是很準(zhǔn)確地評判自身的編程水平。針對編程水平判斷進(jìn)一步研究發(fā)現(xiàn)，要判斷個人編程的水平能力，除了考查對知識體系的掌握情況，還必須依據(jù)個人實(shí)際編寫的代碼，包括編寫速度、程序質(zhì)量以及代碼總量。其中速度和質(zhì)量的判定需要特定的環(huán)境和條件來限定，同樣一段代碼程序解決的問題可能不同，需要達(dá)到的目標(biāo)也會隨具體問題而改變。而代碼總量是最直觀和具體的一個維度，也經(jīng)常被用作編程能力的評判標(biāo)準(zhǔn)，根據(jù)2018年我國教育部發(fā)布的計(jì)算機(jī)類專業(yè)教學(xué)質(zhì)量國家標(biāo)準(zhǔn)，計(jì)算機(jī)專業(yè)大學(xué)生在四年內(nèi)總的實(shí)踐代碼量要超過兩萬行。但出現(xiàn)掌握學(xué)習(xí)情況這個現(xiàn)象的一個很大原因就是學(xué)生們編寫的代碼零散地分布于課程作業(yè)、在線判題系統(tǒng)平臺和個人實(shí)踐項(xiàng)目當(dāng)中。學(xué)生和老師們不便于記錄代碼以及統(tǒng)計(jì)和分析代碼總量。為了解決這個問題，本課題構(gòu)思和設(shè)計(jì)了一種系統(tǒng)，它能夠記錄、統(tǒng)計(jì)和動態(tài)分析學(xué)生們的代碼，并且與課程作業(yè)管理、在線判題系統(tǒng)的索引、學(xué)習(xí)交流和資源共享等功能相結(jié)合，作為一個在線平臺來輔助計(jì)算機(jī)編程的學(xué)習(xí)。通過這個系統(tǒng)平臺，學(xué)生可以將自己編寫的代碼隨時隨地上傳，來記錄和分析自己的編程學(xué)習(xí)歷程，授課老師則可以隨時隨地分發(fā)作業(yè)和資源，查看和統(tǒng)計(jì)學(xué)生們的代碼量，以了解其編程學(xué)習(xí)的進(jìn)展情況。計(jì)算機(jī)編程的學(xué)習(xí)，離不開積累代碼量，就像一座大廈不能沒有磚塊的堆砌。由此，我將此系統(tǒng)取名為積碼。1.2核心成果經(jīng)過需求分析、系統(tǒng)框架分析、系統(tǒng)設(shè)計(jì)、編碼實(shí)現(xiàn)、云端部署和驗(yàn)收測試，系統(tǒng)最終被構(gòu)建和完善。積碼系統(tǒng)的基本組件包括MySQL數(shù)據(jù)庫，由Python編程語言開發(fā)的Django重量級web框架，搭配Bootstrap和jQuery前端框架。部署于阿里云輕量應(yīng)用服務(wù)器，使用Nginx，uWSGI等web服務(wù)器進(jìn)行搭建生產(chǎn)環(huán)境。用戶能夠通過互聯(lián)網(wǎng)設(shè)備，如電腦、平板或手機(jī)客戶端對系統(tǒng)網(wǎng)站進(jìn)行訪問。系統(tǒng)包括五大核心功能：積碼系統(tǒng)包括六大核心功能：用戶信息管理（如注冊，登錄和查看個人信息等）、代碼統(tǒng)計(jì)報(bào)告、自主練習(xí)、課程管理和作業(yè)管理，以及一個后臺管理系統(tǒng)（涵蓋用戶管理，權(quán)限管理，課程管理，作業(yè)管理等）。用戶分為學(xué)生和老師兩種身份。老師可以管理課程和作業(yè)，上傳資源文件和查看學(xué)生的代碼量統(tǒng)計(jì)報(bào)告。學(xué)生可以提交課程作業(yè)，下載課程資源，在個人自主練習(xí)區(qū)提交每日練習(xí)或每月項(xiàng)目，查看自己的代碼量統(tǒng)計(jì)報(bào)告。管理員可以自由設(shè)置權(quán)限、管理用戶、課程和作業(yè)等。1.3論文結(jié)構(gòu)本文以構(gòu)建積碼系統(tǒng)為主線，從設(shè)計(jì)到開發(fā)順序地講解系統(tǒng)的實(shí)現(xiàn)，包含了大部分重要的開發(fā)過程，下面我將簡要地對全文章節(jié)的內(nèi)容結(jié)構(gòu)進(jìn)行說明。第一章，緒論。首先主要介紹課題項(xiàng)目的研究背景和意義，提出要完成的目標(biāo)和要求。然后展示核心研究成果，介紹系統(tǒng)的主要構(gòu)成，包括底部框架、數(shù)據(jù)庫、部署平臺、核心功能以及用戶對象等。最后闡述說明論文的結(jié)構(gòu)。第二章，需求分析。對于任何一個系統(tǒng)開發(fā)都從需求分析開始，本章內(nèi)容包括業(yè)務(wù)需求分析、用戶需求分析、功能需求分析和非功能需求分析，全面展現(xiàn)系統(tǒng)要完成的目標(biāo)和要求。第三章，系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)。這一章屬于核心內(nèi)容，包括系統(tǒng)主體框架，總體架構(gòu)、數(shù)據(jù)庫設(shè)計(jì)、業(yè)務(wù)流程、系統(tǒng)界面以及具體的代碼實(shí)現(xiàn)。詳細(xì)全面地講解積碼系統(tǒng)的構(gòu)建和結(jié)構(gòu)。此外說明一下，本文主要涉及積碼系統(tǒng)的整體設(shè)計(jì)與實(shí)現(xiàn)，對測試部分不做述說。第四章，系統(tǒng)部署。本章主要講述在阿里云平臺的系統(tǒng)部署，以及使用Nginx搭配uWSGI的軟件負(fù)載均衡方案。第五章，結(jié)論和未來應(yīng)用。討論積碼系統(tǒng)擴(kuò)展功能的更多可能性，以及與人工智能API和結(jié)合應(yīng)用。附錄，是積碼系統(tǒng)的依賴第三方包。

2.需求分析需求分析是系統(tǒng)開發(fā)的第一步，也是最重要的步驟之一。通過需求分析，可以確定系統(tǒng)需要完成的功能，達(dá)到的性能，以及測試和驗(yàn)收的標(biāo)準(zhǔn)。在開發(fā)過程中，可能由于技術(shù)、市場或成本等問題，使需求發(fā)生更改。那么一定要有文檔作為記錄，保證系統(tǒng)開發(fā)的有序性和準(zhǔn)確性。本章節(jié)將從積碼系統(tǒng)的業(yè)務(wù)需求、用戶需求和功能需求等三個角度進(jìn)行分析[2]，制定系統(tǒng)開發(fā)的目標(biāo)，給客戶和開發(fā)人員描繪出整個系統(tǒng)的輪廓。2.1業(yè)務(wù)需求分析業(yè)務(wù)需求的提出對象是客戶和項(xiàng)目負(fù)責(zé)人等部門領(lǐng)導(dǎo)，通過溝通和積極提問，引導(dǎo)他們提出需求，但不能直接使用技術(shù)話語詢問具體的技術(shù)要求。這是因?yàn)榭蛻艉皖I(lǐng)導(dǎo)這類群體未必是專業(yè)的技術(shù)開發(fā)者，但在他們腦海里一定有大概的系統(tǒng)藍(lán)圖，需求分析人員要做的是引導(dǎo)他們幫助自己將藍(lán)圖繪制出來。經(jīng)過與計(jì)算機(jī)專業(yè)的老師和學(xué)生們進(jìn)行討論分析后，得出了以下三點(diǎn)業(yè)務(wù)的需求。1.背景由于教育部提出的計(jì)算機(jī)類專業(yè)教學(xué)質(zhì)量國家標(biāo)準(zhǔn)，要求計(jì)算機(jī)專業(yè)大學(xué)生在四年內(nèi)總的實(shí)踐代碼量超過兩萬行。因此某高校的軟件工程以及其他計(jì)算機(jī)相關(guān)專業(yè)的授課老師提出，要監(jiān)控專業(yè)學(xué)生本科四年的代碼總量，其中包括分布在課程作業(yè)、在線判題系統(tǒng)和個人項(xiàng)目的全部代碼。輔助老師和學(xué)生監(jiān)控學(xué)生的編程學(xué)習(xí)情況。2.系統(tǒng)目標(biāo)搭建一個基于B/S的在線編程學(xué)習(xí)輔助網(wǎng)站，以供全院3000名學(xué)生和老師進(jìn)行使用，順暢運(yùn)行并統(tǒng)計(jì)出每個學(xué)生四年的總代碼量就可認(rèn)為項(xiàng)目成功。3.市場需求當(dāng)前學(xué)校沒有一個平臺或系統(tǒng)能夠收集學(xué)生在練習(xí)過程中所產(chǎn)生的代碼，使得老師和學(xué)生難以宏觀地掌握學(xué)生的學(xué)習(xí)情況，不能滿足監(jiān)控計(jì)算機(jī)專業(yè)學(xué)生四年代碼總量超過兩萬行的需求，需要一個專門的平臺系統(tǒng)實(shí)現(xiàn)計(jì)算機(jī)專業(yè)老師和學(xué)生的需求。2.2用戶及功能需求分析在業(yè)務(wù)需求分析后，我們可以分析出系統(tǒng)的用戶需求，用戶需求是指項(xiàng)目服務(wù)的主體人群的使用需求，圍繞用戶進(jìn)行調(diào)查和挖掘，得出系統(tǒng)的主要功能模塊，為系統(tǒng)設(shè)計(jì)、開發(fā)、完善和維護(hù)提供重要依據(jù)。積碼系統(tǒng)主要為三種用戶進(jìn)行服務(wù)：學(xué)生、老師和管理員。他們擁有不同的業(yè)務(wù)和權(quán)限，據(jù)此將系統(tǒng)分為了用戶端和后臺管理端，兩個客戶端擁有不同的訪問入口。然后經(jīng)過與計(jì)算機(jī)專業(yè)的學(xué)生和老師討論后，得出積碼系統(tǒng)應(yīng)具有六大核心功能：用戶信息管理（如注冊，登錄和查看個人信息等）、代碼統(tǒng)計(jì)報(bào)告、自主練習(xí)、課程管理，作業(yè)管理，以及后臺管理系統(tǒng)（包括用戶管理，權(quán)限管理，課程管理，作業(yè)管理等）。根據(jù)業(yè)務(wù)和用戶的需求，可以進(jìn)一步具體分析功能需求。功能需求是開發(fā)者在系統(tǒng)開發(fā)過程中實(shí)際硬性要求實(shí)現(xiàn)的功能模塊，用戶通過使用這些功能來和操作系統(tǒng)完成指定的事務(wù)。下面將闡述積碼系統(tǒng)主要的功能模塊：通用模塊、學(xué)生模塊、教師模塊和后臺管理模塊，具體的代碼實(shí)現(xiàn)將在第三章繼續(xù)講解。2.2.1通用模塊此模塊包括登錄、找回密碼、個人信息管理等子模塊，詳見表2-1通用模塊表。表2-1通用模塊模塊功能描述登錄登錄登錄賬號退出退出賬號注冊注冊賬號找回密碼驗(yàn)證郵箱驗(yàn)證填寫的用戶郵箱發(fā)送驗(yàn)證碼并驗(yàn)證系統(tǒng)向用戶郵箱發(fā)送驗(yàn)證碼并驗(yàn)證用戶所填寫的驗(yàn)證碼驗(yàn)證新密碼用戶填寫新密碼，系統(tǒng)驗(yàn)證是否符合標(biāo)準(zhǔn)個人信息管理個人信息展示賬號的個人信息修改郵箱修改賬號郵箱修改密碼修改賬號密碼修改個人描述修改個人信息中的個人描述2.2.2學(xué)生模塊此模塊包括代碼量統(tǒng)計(jì)、加入課程、作業(yè)提交等子模塊，詳見表2-2學(xué)生模塊表。表2-2學(xué)生模塊模塊功能描述代碼量統(tǒng)計(jì)總量統(tǒng)計(jì)按時間統(tǒng)計(jì)代碼總增長量編程語言統(tǒng)計(jì)統(tǒng)計(jì)代碼的編程語言種類課程代碼統(tǒng)計(jì)統(tǒng)計(jì)不同課程的代碼提交量查看自我報(bào)告查看自己代碼量統(tǒng)計(jì)報(bào)告加入課程選擇選擇公開課程加入加入公開課程查看查看自己課程內(nèi)容詳情作業(yè)提交查看查看自己作業(yè)列表及詳情選擇選擇自己的作業(yè)填寫填寫文本內(nèi)容和上傳文件壓縮包提交點(diǎn)擊提交2.2.3教師模塊此模塊包括課程管理、作業(yè)管理、查看學(xué)生情況等子模塊，詳見表2-3教師模塊表。表2-3教師模塊模塊功能描述課程管理查看查看自己課程列表及詳情創(chuàng)建創(chuàng)建課程修改修改自己課程內(nèi)容刪除刪除自己課程作業(yè)管理查看查看自己課程作業(yè)列表及詳情創(chuàng)建創(chuàng)建自己課程作業(yè)修改修改自己課程作業(yè)內(nèi)容刪除刪除自己課程作業(yè)查看學(xué)生情況查看列表查看自己課程學(xué)生列表及簡要信息查看報(bào)告查看自己課程學(xué)生的代碼量統(tǒng)計(jì)報(bào)告2.2.4后臺管理模塊此模塊包括用戶管理、權(quán)限管理、項(xiàng)目管理等子模塊，詳見表2-4后臺管理表。表2-4后臺管理模塊模塊功能描述用戶管理查看查看用戶列表及詳情創(chuàng)建創(chuàng)建用戶修改修改用戶個人信息內(nèi)容刪除刪除用戶權(quán)限管理查看查看用戶權(quán)限創(chuàng)建創(chuàng)建用戶權(quán)限修改修改用戶權(quán)限刪除刪除用戶權(quán)限項(xiàng)目管理課程管理對課程的增刪查改作業(yè)管理對作業(yè)的增刪查改教師管理對教師角色的增刪查改學(xué)生管理對學(xué)生角色的增刪查改2.2.5系統(tǒng)總體用例根據(jù)上述模塊，可以用連線的方式將學(xué)生、教師和管理員對應(yīng)的用戶需求模塊進(jìn)行相連，繪制出積碼系統(tǒng)的總體用例圖，詳情如圖2-1所示。圖2-1積碼系統(tǒng)總體用例圖

2.4非功能需求分析圖2-1積碼系統(tǒng)總體用例圖系統(tǒng)除了要滿足客戶指定的業(yè)務(wù)需求外，還要達(dá)到一定的性能、易維護(hù)、可靠性等非功能性需求。下面具體說明項(xiàng)目的性能需求、質(zhì)量屬性、接口和約束等四個方面的非功能需求。2.4.1性能需求1.數(shù)據(jù)精確度積碼系統(tǒng)主要包括的數(shù)據(jù)有代碼量、作業(yè)評分、日期等三個主要的數(shù)據(jù)，他們的精確要求詳見表2-7。表2-7數(shù)據(jù)精確度數(shù)據(jù)類型數(shù)據(jù)類型精度代碼量整數(shù)型0~10000000000作業(yè)評分整數(shù)型0~100日期YY-MM-DD2.時間特性積碼系統(tǒng)對應(yīng)的數(shù)據(jù)處理及響應(yīng)時間要求，詳見表2-8。表2-8時間特性數(shù)據(jù)類型時間特性要求響應(yīng)時間小于2500毫秒更新處理時間小于4000毫秒數(shù)據(jù)轉(zhuǎn)換與傳輸時間小于2000毫秒運(yùn)行時間全年7*24小時在線3.兼用可適應(yīng)性這一特性共要求五點(diǎn)，一、系統(tǒng)人性化交互，操作簡單；二、運(yùn)行環(huán)境，包括依賴的硬件和軟件，其規(guī)格應(yīng)中等偏下，讓系統(tǒng)能夠有較高的適應(yīng)能力；三、系統(tǒng)內(nèi)部代碼要求按標(biāo)準(zhǔn)進(jìn)行注釋，使后期易于進(jìn)行維護(hù)和擴(kuò)展；五、兼容先各大主流瀏覽器包括谷歌、火狐、Safari、IE以及Opera，具體的版本號限制見下一小節(jié)的接口與約束。2.4.2質(zhì)量屬性質(zhì)量屬性包括安全、正確、可移植、健壯、可靠和易用等6個維度，詳見表2-9。表2-9質(zhì)量屬性屬性名具體要求安全性防止跨站請求偽造，用戶密碼加密。正確性系統(tǒng)站點(diǎn)正常顯示，不會出現(xiàn)報(bào)錯、頁面缺失、亂碼、數(shù)據(jù)錯誤等問題可移植性系統(tǒng)兼容現(xiàn)各大主流服務(wù)器平臺以及操作系統(tǒng)健壯性系統(tǒng)同時支持3000人的并發(fā)操作，不導(dǎo)致崩潰。穩(wěn)定運(yùn)行1年以上可靠性系統(tǒng)出現(xiàn)異常報(bào)錯和崩潰的概率小于5%易用性頁面交互人性化、操作簡單易懂，用戶只需通過瀏覽器訪問即可。2.4.3接口與約束接口是指系統(tǒng)在運(yùn)行環(huán)境中，需要依賴使用的主要硬件和軟件以及要求兼容的瀏覽器版本，詳見表2-10。表2-10接口接口類型具體要求硬件CPU不低于1核；內(nèi)存不小于1GB；支持1M以上寬帶；40G以上SSD固態(tài)硬盤；軟件操作系統(tǒng)：Linux；數(shù)據(jù)庫：MySQL5.7.20；運(yùn)行環(huán)境：Python3+；開發(fā)語言：Python,JavaScript,HTML/HTML5,CSS/CSS3；使用框架：Django2.0，Bootstrap3+，jQuery2+應(yīng)用服務(wù)器：Nginx1.5+網(wǎng)關(guān)：uWSGI2+瀏覽器谷歌（版本10以上）、火狐（版本4以上）、Safari（版本5以上）、IE（版本9以上）以及Opera（版本11.1以上）注：項(xiàng)目額外需要的第三方依賴見附錄的積碼系統(tǒng)完整依賴的工具包

3.系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)本章將分為兩個部分。第一部分講述積碼系統(tǒng)的設(shè)計(jì)，包含系統(tǒng)主框架、系統(tǒng)總體概述、數(shù)據(jù)庫設(shè)計(jì)、業(yè)務(wù)流程、項(xiàng)目目錄結(jié)構(gòu)和系統(tǒng)界面等六個小節(jié)。第二部分為具體實(shí)現(xiàn)，重點(diǎn)講解后端的代碼量分析及可視化、后臺系統(tǒng)、作業(yè)提交管理等三個部分模塊的實(shí)現(xiàn)。3.1系統(tǒng)主框架積碼系統(tǒng)采用基于由Python語言編寫的Django框架[3],其特點(diǎn)包括有完善的ORM關(guān)系映射、強(qiáng)大的路由映射、完善的視圖模板的實(shí)現(xiàn)、健全的后臺管理系統(tǒng)、強(qiáng)大的緩存支持、防止跨站請求偽造(CSRF)工具。由于這些特點(diǎn)，網(wǎng)站的搭建能夠快速的實(shí)現(xiàn)。Django采用MTV模式，與MVC不同，它由模型、模板和視圖三部分組成。模型被稱為Model，是數(shù)據(jù)存取層，處理與數(shù)據(jù)相關(guān)的所有事件，包括如何存取、如何驗(yàn)證有效。模板被稱為Template，是表現(xiàn)層，負(fù)責(zé)如何把頁面展示給用戶。視圖被稱為View，是數(shù)據(jù)存取層，用于存取模型及調(diào)取恰當(dāng)模板的相關(guān)邏輯，處于模型與模板的之間。除了以上基本三層，還有有一個表單文件，稱為Form，負(fù)責(zé)驗(yàn)證一切用戶輸入的數(shù)據(jù)是否符合規(guī)定格式，以及保留用戶上次輸入的數(shù)據(jù)。使用Django構(gòu)建項(xiàng)目，需要通過配置文件(settings.py)和主路由（urls.py）來連接各個功能模塊（app）,十分注重高內(nèi)聚低耦合。下面講述各個部件的作用。settings.py作為配置文件，用于設(shè)定功能模塊路徑、數(shù)據(jù)庫連接、靜態(tài)文件地址、用戶媒體文件地址、中間件、session存儲、系統(tǒng)語言和時間等，可以看做是連接外部和內(nèi)部的庭院。urls.py主路由文件是一個分發(fā)器，指向頁面或者功能模塊，方便集中管理。功能模塊也叫APP是由一個migrations文件夾和八個文件，分別是init、admin、apps、forms、models、tests、urls、views組成。八個文件分別對應(yīng)的是初始化、管理員、應(yīng)用名、表單、模型、測試、子路由、視圖，而migrations文件夾是用來存放自動生成數(shù)據(jù)庫更新的命令文件。整個Django項(xiàng)目可以通過一個manage.py文件來統(tǒng)一調(diào)度：運(yùn)行項(xiàng)目、創(chuàng)建超級用戶、生成數(shù)據(jù)庫、創(chuàng)建應(yīng)用等。除了主要的文件以外，還有一個wsgi.py文件，其中WSGI是web服務(wù)器網(wǎng)關(guān)接口（WebServerGatewayInterface）的縮寫，它是python所選擇的服務(wù)器和應(yīng)用標(biāo)準(zhǔn)，一般用于開發(fā)模式的臨時web服務(wù)器。圖3.1Django-MTV模式示意圖，可以直觀地說明Django各應(yīng)用如何相互作用。圖3-1Django-MTV模式示意圖3.2軟件總體概述積碼系統(tǒng)主要功能包括：代碼量分析、課程管理、作業(yè)管理、作業(yè)提交、用戶管理、后臺管理。代碼量分析，包括作業(yè)代碼量、課程代碼量、總代碼量，共分為三級，逐級累加。每次作業(yè)文件上交后，系統(tǒng)自動提取代碼文件，識別編程語言，統(tǒng)計(jì)代碼行數(shù)（除去空行）后，將代碼量、時間、課程名、編程語言一并存入數(shù)據(jù)庫。與學(xué)生用戶的舊數(shù)據(jù)一起形成代碼量報(bào)告，將數(shù)據(jù)可視化，包括總代碼量-時間折線圖、編程語言占比餅狀圖、課程占比柱狀圖。課程管理，可以增加、刪除、查找、更改課程。每個課程屬于一個老師，多個學(xué)生，可以選擇公開或不公開（公開則所有學(xué)生都可加入，不公開則選定學(xué)生才能加入）。作業(yè)管理，可以增加、刪除、查找、更改作業(yè)。每個作業(yè)屬于一個課程；每個作業(yè)都可以進(jìn)行用戶評論；老師可以對學(xué)生提交的作業(yè)進(jìn)行評價和打分，并下載課程學(xué)生作業(yè)成績表作業(yè)提交，學(xué)生選擇一個作業(yè)，進(jìn)行文字編輯和上傳文件；一個提交的作業(yè)屬于一個學(xué)生，一個學(xué)生可以提交多個作業(yè)；課程團(tuán)隊(duì)一人提交，則認(rèn)定全員提交用戶管理，可以增加、刪除、查找、更改用戶?？偣?個用戶角色：學(xué)生、老師、管理員。用戶基礎(chǔ)屬性：用戶名、密碼、郵箱、性別、創(chuàng)建時間、最后更改時間、個人描述；老師額外屬性：職稱，可以進(jìn)行課程管理，作業(yè)管理，查看學(xué)生代碼量報(bào)告，更改密碼、郵箱和個人描述；學(xué)生額外屬性：班級，可以加入課程，提交作業(yè)，查看代碼量報(bào)告，更改密碼、郵箱和個人描述；管理員分為超級管理員、一般管理員，可以進(jìn)行課程管理、作業(yè)管理、用戶管理，此外超級管理員還可以更改用戶權(quán)限。由上述功能，我們可以繪制出系統(tǒng)總體架構(gòu)，如圖3-2所示，共分為六級，和用戶模塊、管理員模塊兩大類。

圖3-2積碼系統(tǒng)總體架圖3.3數(shù)據(jù)庫設(shè)計(jì)數(shù)據(jù)庫是作為系統(tǒng)數(shù)據(jù)存儲的一個數(shù)據(jù)倉庫，可以方便系統(tǒng)調(diào)用、添加、修改、刪除數(shù)據(jù)。往往數(shù)據(jù)庫的輸入和輸出是影響系統(tǒng)性能的關(guān)鍵因素之一，好的數(shù)據(jù)庫設(shè)計(jì)結(jié)構(gòu)可以減少不必要的冗余，提高系統(tǒng)性能。常見的數(shù)據(jù)庫類型有關(guān)系型、非關(guān)系型和鍵值數(shù)據(jù)庫，這里采用的是社區(qū)版的關(guān)系型MySQL數(shù)據(jù)庫。簡單介紹一下，MySQL現(xiàn)屬于Oracle旗下產(chǎn)品，分為社區(qū)版和商業(yè)版，具有開放源碼的特點(diǎn)，較靈活，使用成本低，所以非常主流。數(shù)據(jù)庫是作為系統(tǒng)數(shù)據(jù)存儲的一個數(shù)據(jù)倉庫，可以方便系統(tǒng)調(diào)用、添加、修改、刪除數(shù)據(jù)。往往數(shù)據(jù)庫的輸入和輸出是影響系統(tǒng)性能的關(guān)鍵因素之一，好的數(shù)據(jù)庫設(shè)計(jì)結(jié)構(gòu)可以減少不必要的冗余，提高系統(tǒng)性能。常見的數(shù)據(jù)庫類型有關(guān)系型、非關(guān)系型和鍵值數(shù)據(jù)庫，這里采用的是社區(qū)版的關(guān)系型MySQL數(shù)據(jù)庫。簡單介紹一下，MySQL現(xiàn)屬于Oracle旗下產(chǎn)品，分為社區(qū)版和商業(yè)版，具有開放源碼的特點(diǎn)，較靈活，使用成本低，所以非常主流。數(shù)據(jù)庫最重要的組成是表，就像一個一個的表，所有的數(shù)據(jù)都被存放在這樣的結(jié)構(gòu)當(dāng)中。表是由列和行組成的，每一列有一個列名，它代表一類數(shù)據(jù)，每類數(shù)據(jù)都要求設(shè)置數(shù)據(jù)類型，包括字符、整數(shù)、浮點(diǎn)數(shù)或文本等。每一行則是一個記錄，構(gòu)成記錄的某一個數(shù)據(jù)被稱為字段。字段可以設(shè)置為允許空值或必填。主建，是一個表的唯一標(biāo)識，通過它可以找到所在的表。外鍵則是關(guān)系其他表的不唯一標(biāo)識。下面介紹積碼系統(tǒng)所需要用到的數(shù)據(jù)表單，包括數(shù)據(jù)名、列名和數(shù)據(jù)類型。為了便于讀者更好地理解，這里對下列會用到的數(shù)據(jù)庫字段的類型先做出詳細(xì)的說明，詳見表3-1。表3-1Django數(shù)據(jù)庫字段類型數(shù)據(jù)類型表示含義AutoField指一個能夠根據(jù)可用ID自增的IntegerField，系統(tǒng)默認(rèn)主鍵BooleanField一個真／假（true/false）字段CharField一個字符串字段，適用于中小長度的字符串DateField日期字段DateTimeField時間日期字段，額外選項(xiàng)同DateFieldFileField文件上傳字段FloatField浮點(diǎn)數(shù)ImageField同F(xiàn)ileField要驗(yàn)證上傳的對象是一個有效的圖片IntegerField整數(shù)SmallIntegerField和IntegerField類似，但是只允許在一個數(shù)據(jù)庫相關(guān)的范圍內(nèi)的數(shù)值（通常是-32,768到+32,767）TextField不限長度的文字長度TimeField時分秒的時間顯示ForeignKey外鍵，關(guān)聯(lián)其它模型，創(chuàng)建關(guān)聯(lián)索引ManyToManyField多對多，關(guān)聯(lián)其它模型，創(chuàng)建關(guān)聯(lián)表OneToOneField一對一，字段關(guān)聯(lián)表屬性RichTextUploadingField富文本，需要安裝第三方依賴包PositiveIntegerField正整數(shù)SlugField嵌條就是一段內(nèi)容的簡短標(biāo)簽，這段內(nèi)容只能包含字母、數(shù)字、下劃線或連字符EmailField一個能檢查值是否是有效的電子郵件地址的CharField3.3.1用戶角色表表3-1是角色表，包含角色類型和用戶id兩類數(shù)據(jù)。角色包括學(xué)生和老師兩個選項(xiàng)，用戶id作為外鍵，關(guān)聯(lián)對應(yīng)的用戶信息。表31角色表序號數(shù)據(jù)名列名數(shù)據(jù)類型1角色RoleSmallIntegerField2用戶UserForeignKey3.3.2用戶抽象類表表3-2是用戶抽象類表，包含姓名、性別、創(chuàng)建時間、最后更改時間、個人描述等五類數(shù)據(jù)，用于記錄用戶的基本信息，作為抽象類不單獨(dú)儲存在數(shù)據(jù)庫當(dāng)中。其實(shí)Django框架自帶有用戶表，包括了賬號、密碼、郵箱等基礎(chǔ)信息。但往往這些信息不能滿足業(yè)務(wù)實(shí)際需要，所以需要增加自定義用戶表，可以定制業(yè)務(wù)角色所需的信息。這里就增加了姓名、性別、創(chuàng)建時間和個人描述等特殊信息。表32用戶抽象類表序號數(shù)據(jù)名列名數(shù)據(jù)類型1姓名NameCharField2性別GenderSmallIntegerField3創(chuàng)建時間CreatedDateTimeField4最后更改時間ModifiedDateTimeField5個人描述DescriptionTextField3.3.3教師表表3-3是教師表，在引用用戶抽象類表的基礎(chǔ)信息外，增添職稱信息。表33教師表序號數(shù)據(jù)名命名類型1用戶UserForeignKey2職稱RankCharField3.3.4學(xué)生表表3-4是學(xué)生表，在引用用戶抽象類表的基礎(chǔ)信息外，增添班級信息。表34學(xué)生表序號數(shù)據(jù)名命名類型1用戶UserForeignKey2班級ClassesCharField3.3.5批量用戶生成文件表表3-5是批量用戶生成文件表，包括文件路徑、文件名、創(chuàng)建狀態(tài)等三類數(shù)據(jù)。此表用于存儲批量創(chuàng)建用戶的文件，如果文件上傳后被使用，創(chuàng)建狀態(tài)就會改被已被創(chuàng)建。表35批量用戶生成文件表序號數(shù)據(jù)名命名類型1文件路徑FileFileField2文件名稱NameCharField3創(chuàng)建狀態(tài)Is_createCharField3.3.6課程表表3-6是課程表，包括課程名稱、班級、課程描述、公開狀態(tài)、老師和學(xué)生等六類數(shù)據(jù)。課程表的特點(diǎn)是：每個課程屬于一個老師，一個老師擁有多個課程，所以老師作為外鍵。一個課程包含多個學(xué)生，一個學(xué)生有多個課程，所以數(shù)據(jù)類型設(shè)置類多對多。表36課程表序號數(shù)據(jù)名命名類型1課程名稱CnameCharField2班級ClassesCharField3課程描述DescriptionTextField4公開狀態(tài)OpenedSmallIntegerField5老師TeacherForeignKey6學(xué)生StudentManyToManyField3.3.7文本編輯抽象類表表3-7是文本編輯抽象類表，包括正文，創(chuàng)建時間，修改時間和文件路徑等四類數(shù)據(jù)。這個表的信息需要被作業(yè)表、作答表所引用，因此作為抽象類，不單獨(dú)儲存在數(shù)據(jù)庫當(dāng)中。表37文本編輯抽象類表序號數(shù)據(jù)名命名類型1正文BodyRichTextUploadingField2創(chuàng)建時間CreatedDateTimeField3修改時間ModifiedDateTimeField4文件路徑FileFileField3.3.8作業(yè)表表3-8是作業(yè)表，包括標(biāo)題，摘要，發(fā)布時間，作業(yè)狀態(tài)，組隊(duì)狀態(tài)，瀏覽量和課程id等七類數(shù)據(jù)。作業(yè)表的特點(diǎn)是，每個課程有多個作業(yè)，一個作業(yè)屬于一個課程，所以課程作為外鍵。表38作業(yè)表序號數(shù)據(jù)名命名類型1標(biāo)題TitleCharField2摘要SlugSlugField3發(fā)布時間PublishedDateTimeField4作業(yè)狀態(tài)StatusCharField5組隊(duì)狀態(tài)GroupSmallIntegerField6瀏覽量ViewsPositiveIntegerField7課程CourseForeignKey3.3.9作答表表3-9是作答表，包括作者，課程，作業(yè)和分?jǐn)?shù)等四類數(shù)據(jù)。作答表的特點(diǎn)是，一個作業(yè)有可以多次作答，一次作答屬于一個作業(yè)，對應(yīng)的作者和課程也是如此。分?jǐn)?shù)是由老師評定。表39作答表序號數(shù)據(jù)名命名類型1作者AuthorForeignKey2課程CourseForeignKey3作業(yè)HomeworkForeignKey4分?jǐn)?shù)ScoreIntegerField3.3.10評論表表3-10是評論表，包括用戶名稱，評論內(nèi)容，作業(yè)id和評論時間等四類數(shù)據(jù)。評論表的特點(diǎn)是每份作業(yè)可以有多人評論，每條評論屬于一個作業(yè)，因此作業(yè)設(shè)為外鍵。表310評論表序號數(shù)據(jù)命名類型1用戶名稱UsernameCharField2評論內(nèi)容TextTextField3作業(yè)HomeworkForeignKey4評論時間CreatedDateTimeField3.3.11組隊(duì)表表3-11是分組表，包括領(lǐng)隊(duì)，課程，成員和編輯狀態(tài)等四類數(shù)據(jù)。老師可以給課內(nèi)的學(xué)生分組，老師相當(dāng)于領(lǐng)隊(duì)，成員是多個,可以設(shè)置為不可編輯和可編輯兩種狀態(tài)。表311組隊(duì)表序號數(shù)據(jù)命名類型1領(lǐng)隊(duì)LeaderForeignKey2課程CourseForeignKey3成員MemberManyToManyField4編輯狀態(tài)EditSmallIntegerField3.3.12代碼表表3-12是代碼表，包括學(xué)生、課程、作業(yè)、創(chuàng)建時間、最后更改時間。代碼量、編程語言等七類數(shù)據(jù)。和作答表邏輯類似，每份作業(yè)有一個代碼表。但積碼系統(tǒng)最常用到的功能就是代碼量統(tǒng)計(jì)報(bào)告，對數(shù)據(jù)庫的調(diào)用也最頻繁，所將代碼信息單獨(dú)成表，用空間換時間提高檢索速度。表312代碼表序號數(shù)據(jù)命名類型1學(xué)生StudentForeignKey2課程CourseForeignKey3作業(yè)HomeworkForeignKey4創(chuàng)建時間CreatedDateTimeField5最后更改時間ModifiedDateTimeField6代碼量CodeIntegerField7編程語言LanguageCharField3.3.13郵箱驗(yàn)證表3-13是郵箱驗(yàn)證，包括驗(yàn)證碼、郵箱、發(fā)送時間和是否有效等五類數(shù)據(jù)。其實(shí)Django自帶有郵件發(fā)送的函數(shù)功能，但這里想更加自定義，所以創(chuàng)建了對應(yīng)的郵箱驗(yàn)證表。驗(yàn)證碼用于存儲發(fā)送給目標(biāo)郵箱的隨機(jī)驗(yàn)證碼，郵箱是目標(biāo)郵箱，發(fā)送時間用于記錄有效時間，用戶名及用戶的姓名。如果發(fā)送的驗(yàn)證碼過了有效時間，有效狀態(tài)則修改為False。表313郵箱驗(yàn)證表序號數(shù)據(jù)命名類型1驗(yàn)證碼CodeCharField2郵箱EmailEmailField3發(fā)送時間Send_timeDateTimeField4用戶名稱UsernameCharField5有效狀態(tài)ActiveBooleanField

3.3.14總體數(shù)據(jù)ER關(guān)系圖根據(jù)以上13個小節(jié)所述的數(shù)據(jù)表結(jié)構(gòu)及其關(guān)系，我們可以繪制出積碼系統(tǒng)的總體數(shù)據(jù)ER關(guān)系圖[4]，詳見圖3-3圖3-3積碼系統(tǒng)總體數(shù)據(jù)ER圖

3.4業(yè)務(wù)流程用戶端的流程與后臺管理員端流程相比，顯得更為重要，因此本節(jié)主要討論用戶端流程，包括用戶端主流程、用戶基本業(yè)務(wù)流程和特定角色業(yè)務(wù)流程。通過對這些流程的闡述，進(jìn)一步讓讀者對整個系統(tǒng)有基本的認(rèn)識。3.4.1用戶端主流程和基本業(yè)務(wù)用戶端主要流程按角色可分為兩條支線，可參照圖3-4用戶端主流程圖，從用戶登錄開始，到用戶進(jìn)入主頁，系統(tǒng)根據(jù)用戶身份可分為學(xué)生業(yè)務(wù)和老師業(yè)務(wù)。兩個業(yè)務(wù)有共同點(diǎn)，我稱其為用戶基本業(yè)務(wù)，包括用戶登錄和登出、查看個人信息、修改自我描述、修改密碼、修改郵箱等五大業(yè)務(wù)。圖3-4用戶端主流程圖圖3-5描述了查看個人信息業(yè)務(wù)，從用戶選擇本業(yè)務(wù)開始、頁面顯示個人信息，包括用戶名、郵箱、自我描述、性別、用戶角色，若用戶為學(xué)生則還有班級和總代碼量，若用戶為老師則還有職稱。進(jìn)入本業(yè)務(wù)后還可以選擇修改個人信息。圖3-5查看個人信息業(yè)務(wù)流程圖圖3-6為修改密碼流程圖，選擇業(yè)務(wù)后，先輸入原密碼并判斷是否正確，若正確則進(jìn)入下一步填寫新密碼，但錯誤則選擇重新輸入或退出。填寫新密碼需要符合三個標(biāo)準(zhǔn)：1.至少6個字符；2.小于20個字符；3.確認(rèn)密碼與新密碼一致，若有任意一項(xiàng)不符合規(guī)定，則修改失敗出現(xiàn)錯誤提示后，選擇繼續(xù)修改或結(jié)束業(yè)務(wù)。當(dāng)輸入的新密碼符合了三項(xiàng)規(guī)定后，系統(tǒng)更新密碼，結(jié)束業(yè)務(wù)。圖3-6修改密碼流程圖圖3-7是修改郵箱業(yè)務(wù)，此項(xiàng)業(yè)務(wù)還涉及了外部第三方程序，不過我們重點(diǎn)講解系統(tǒng)內(nèi)部業(yè)務(wù)。首先同修改密碼一樣，我們需要輸入用戶原密碼，以保證為用戶本人進(jìn)行操作。當(dāng)密碼驗(yàn)證通過后，可以輸入要更換的新郵箱，這時系統(tǒng)會先驗(yàn)證輸入的郵箱格式是否正確，如XXX@XXX.XXX。之后用戶點(diǎn)擊發(fā)送按鈕，系統(tǒng)將隨機(jī)生成驗(yàn)證碼并發(fā)送至新郵箱，用戶在外部通過登錄新郵箱打開驗(yàn)證碼郵件后獲得驗(yàn)證碼，再至頁面輸入驗(yàn)證碼，然后系統(tǒng)判斷驗(yàn)證碼是否有效，若有效則系統(tǒng)更新用戶郵箱信息后結(jié)束業(yè)務(wù)，否則提示錯誤，用戶可以選擇重新填寫、重新發(fā)送驗(yàn)證碼、重新填寫新郵箱地址或者結(jié)束業(yè)務(wù)。圖3-7修改密碼流程圖圖3-8為修改自我描述流程圖，進(jìn)入修改頁面后，有一個文本輸入框，用于填寫自我描述，默認(rèn)顯示為原內(nèi)容，修改后字?jǐn)?shù)不能超過200個，否則修改失敗，顯示錯誤提示，用戶可以選擇繼續(xù)修改或結(jié)束業(yè)務(wù)。修改成功后，數(shù)據(jù)庫更新數(shù)據(jù)，然后自動跳轉(zhuǎn)到個人信息頁面，結(jié)束業(yè)務(wù)。圖3-8修改自我描述流程圖3.4.2特定用戶業(yè)務(wù)流程所有用戶角色都擁有基本業(yè)務(wù)。學(xué)生用戶還可以進(jìn)行加入課程、上交作業(yè)和查看代碼量報(bào)告等業(yè)務(wù)。老師用戶則可以創(chuàng)建課程、發(fā)布作業(yè)、上傳視頻等業(yè)務(wù)。下面將選取部分業(yè)務(wù)進(jìn)行講解，讀者可以類比剩余業(yè)務(wù)流程。圖3-9是加入課程業(yè)務(wù)，學(xué)生可以加入公開的課程。圖3-10是上交作業(yè)業(yè)務(wù)，這里學(xué)生需要填寫正文和上傳作業(yè)文件，若沒有文本空缺或文件空缺，系統(tǒng)則自動分析文件里所有代碼文件的代碼量。圖3-11是查看代碼量報(bào)告業(yè)務(wù)，學(xué)生用戶可以查看自己的代碼量報(bào)告。兩者流程較為簡單。圖3-12是創(chuàng)建課程業(yè)務(wù)，老師填寫對應(yīng)的課程信息，然后發(fā)布。圖3-12創(chuàng)建課程流程圖

3.5項(xiàng)目目錄結(jié)構(gòu)構(gòu)建項(xiàng)目的過程中，設(shè)計(jì)目錄結(jié)構(gòu)是十分重要的。Django框架主要包含主應(yīng)用文件夾(項(xiàng)目名)、子應(yīng)用文件夾（apps）、靜態(tài)文件夾（static）、媒體文件夾（media）、模板（templates）、管理文件（manage.py）和外加一個第三方插件管理文件夾或文本（requirements）積碼系統(tǒng)的在項(xiàng)目中的英文命名為：jicode，所以項(xiàng)目的主目錄如圖3-13所示，共分為8個文件。圖3-13項(xiàng)目主目錄圖首先是子應(yīng)用文件夾（apps），內(nèi)部包含項(xiàng)目的所有功能模塊：代碼量分析（codeAnalysis），評論（comment），課程（course），郵箱驗(yàn)證（emailVerify），學(xué)生分組（group），提交作業(yè)（handin），作業(yè)（homeworkapp），后臺管理員（myadmin），用戶基本（userBase），視頻（video），詳見圖3-10。這些應(yīng)用功能的劃分遵循一個重要原則：單一化，使得功能之間復(fù)用性提高，達(dá)到高內(nèi)聚低耦合的效果。圖3-14中紅框內(nèi)部分就是每個應(yīng)用功能的組成文件，包括：python文件初始化（init），管理員控制（admin），應(yīng)用命名（apps），表單驗(yàn)證（forms），數(shù)據(jù)模型（models），測試（tests），路由分發(fā)（urls），視圖邏輯（views）。其中forms、models、urls、views四個部件尤為重要，一般開發(fā)過程是由model開始創(chuàng)建數(shù)據(jù)模型，然后views編寫功能函數(shù)，forms用于輸入數(shù)據(jù)驗(yàn)證，最后在urls里創(chuàng)建對應(yīng)views功能函數(shù)的路由地址，讀者可以回顧圖3-1Django的MTV模式。圖3-14項(xiàng)目apps目錄圖接下來是主app目錄，這里是項(xiàng)目功能的一個集中點(diǎn)，通常在項(xiàng)目創(chuàng)建之初就被建立，可以說是首要設(shè)置的文件夾，通常被命名為項(xiàng)目的名字。其中settings.py是首要被編寫的文件。在settings.py中你可以設(shè)置項(xiàng)目apps路徑，數(shù)據(jù)庫連接，系統(tǒng)語言和時間，媒體路徑，靜態(tài)文件路徑，第三方插件的屬性等重要內(nèi)容。因?yàn)檫@一文件比較重要，且容易出錯，所以我在下一節(jié)會將積碼系統(tǒng)的setting內(nèi)容與讀者們分享，它目錄結(jié)構(gòu)可以見圖3-15。圖3-15項(xiàng)目主app目錄圖再往下是媒體和靜態(tài)文件，媒體文件夾通常就是負(fù)責(zé)集中用戶上傳的文件，靜態(tài)文件夾（static）則是模板頁面會用到的腳本語言（js）、樣式表（css）、圖片（img）、字體（fonts）和第三方插件所用到的靜態(tài)文件，如圖3-16所所示。圖3-16項(xiàng)目主static目錄圖下面一個較為重要的文件就是模板文件（templates），這里負(fù)責(zé)的是系統(tǒng)前端頁面，按apps內(nèi)應(yīng)用功能劃分，不同的功能會調(diào)用不同的頁面，這些頁面都為html文件。在html頁面內(nèi)通過應(yīng)用功能的urls地址來調(diào)用所需要的函數(shù)，以及通過{%loadstatic%}行命令來載入靜態(tài)文件?，F(xiàn)在有很多開源的前端框架[5]，比如Vue、React、Bootstrap[6]和Angular等等，可以令項(xiàng)目開發(fā)快速進(jìn)行，積碼系統(tǒng)采用的是基于Bootstrap和jQuery制作的hAdmin前端框架。圖3-17就是templates的目錄圖。最后是還有三個文件虛擬環(huán)境（venv）、Django管理文件（manage）和第三方依賴插件（requirements）。Venv是Django的python虛擬環(huán)境，構(gòu)建項(xiàng)目時產(chǎn)生的。Manage也是最初自動生成的文件之一，用于管理Django項(xiàng)目的基本功能，如：創(chuàng)建項(xiàng)目、創(chuàng)建應(yīng)用app、開啟服務(wù)器、更新數(shù)據(jù)庫等等基礎(chǔ)操作。Requirements則是用于記錄項(xiàng)目所需要用到的全部第三方依賴插件，便于項(xiàng)目遷移時重新安裝環(huán)境。圖3-17項(xiàng)目主templates目錄圖一個好的系統(tǒng)項(xiàng)目目錄，可以讓開發(fā)人員們明確分工，減少沖突，從而調(diào)高開發(fā)效率。此外系統(tǒng)界面設(shè)計(jì)是另一個藍(lán)圖，當(dāng)我們進(jìn)行開發(fā)之前一定要有整個系統(tǒng)的界面或草圖。好比建造一個大廈，沒有施工圖那么工人是無法開工的。所以下一章我們將繼續(xù)講解積碼系統(tǒng)的界面設(shè)計(jì)。3.6系統(tǒng)界面設(shè)計(jì)本節(jié)將講述系統(tǒng)八個重要模塊的界面設(shè)計(jì)，其中涉及到用戶端登錄、課程詳情、提交作業(yè)、學(xué)生情況、代碼量統(tǒng)計(jì)報(bào)告、后臺登錄、后臺主頁和后臺增加作業(yè)，以此來描繪整個系統(tǒng)的風(fēng)格和給讀者帶來用戶體驗(yàn)。在這說明一下，積碼系統(tǒng)后續(xù)會有更新，所以下列展現(xiàn)的界面可能不是積碼系統(tǒng)實(shí)際部署時的樣貌，不過大致風(fēng)格相同。3.6.1用戶端界面用戶進(jìn)入系統(tǒng)前，首先要進(jìn)行登錄，如圖3-18。風(fēng)格按流行的扁平化設(shè)計(jì)，以白色線條作為背景打底，附加磁吸棒作為點(diǎn)綴。頁面正中為登錄窗口，包含登錄，用戶名，密碼，忘記密碼等字樣，顏色為藍(lán)色。系統(tǒng)名字‘JiCode’在登錄框頂部居中，顏色為藍(lán)色。通體以藍(lán)白為主色調(diào)，顯得比較簡約自然。圖3-18圖3-18用戶端登錄界面用戶進(jìn)入系統(tǒng)后，頁面主要由三部分組成，一個是左側(cè)導(dǎo)航欄，另一個為頂部信息欄，以及右端主體。其中左側(cè)導(dǎo)航欄和頂部信息欄在系統(tǒng)中恒定不變，當(dāng)切換頁面時，只有右端主體發(fā)生變化。在課程詳細(xì)頁面中，分為兩部分：導(dǎo)航和主體。課程導(dǎo)航根據(jù)用戶身份不同，分為教師導(dǎo)航和學(xué)生導(dǎo)航。其中教師導(dǎo)航為：已發(fā)布作業(yè)、待發(fā)布作業(yè)、添加作業(yè)、分組情況、創(chuàng)建分組、所有學(xué)生、已發(fā)布視頻、待發(fā)布視頻和添加視頻；學(xué)生導(dǎo)航只有：所有作業(yè)、以提交作業(yè)和全部視頻。圖3-19老師課程詳情界面老師進(jìn)入課程詳細(xì)頁面，默認(rèn)選擇已發(fā)布作業(yè)，而學(xué)生默認(rèn)選擇所有作業(yè)。這時，右端主體會以列表式顯示所有已發(fā)布的作業(yè)詳情，并可以對某個作業(yè)進(jìn)行操作，如圖圖3-19老師課程詳情界面

學(xué)生進(jìn)入提交作業(yè)頁面，有正文填寫本文框，選擇文件和提交按鈕。圖3-20學(xué)生提交作業(yè)界面積碼系統(tǒng)最重要的特點(diǎn)就是代碼量統(tǒng)計(jì)報(bào)告，是系統(tǒng)根據(jù)用戶提交的代碼文件而產(chǎn)生的數(shù)據(jù)，進(jìn)行統(tǒng)計(jì)分析，并通過基于echarts的pyecharts第三方插件形成可視化報(bào)告。報(bào)告內(nèi)容包括總代碼量增長圖、慣用編程語言分布餅圖和課程代碼量分布直方圖。這三個不同方面可以為學(xué)生提供很好地參考價值，判斷自己編程學(xué)習(xí)的廣度和寬度，詳見圖3-21。圖3-21學(xué)生代碼量統(tǒng)計(jì)報(bào)告界面

3.6.2后臺管理端界面積碼系統(tǒng)的后臺端是Django框架自帶的后臺管理，并通過第三方插件simpleui優(yōu)化了界面。simpleui是一個tompeppa基于element-ui+vue開發(fā)的djangoadmin主題插件。其重寫和優(yōu)化90%以上的頁面，讓djangoadmin更符合國人的使用習(xí)慣，不需要修改原admin任何代碼，100%兼容原生admin。登錄界面如圖3-22所示。圖3-22后臺管理端登錄界面如圖3-23所示，在后臺主頁，側(cè)欄顯示可以管理的應(yīng)用功能(app)，以及基本用戶認(rèn)證和授權(quán)，而主體首頁顯示快捷操作和最近動作。頂欄包括用戶信息，用戶端跳轉(zhuǎn)，主題更換，字體更換，全屏顯示等。圖3-23后臺管理端主頁界面以創(chuàng)建學(xué)生信息為例，選擇學(xué)生表一欄，主體就會出現(xiàn)搜索欄，增加和刪除按鈕。然后所有學(xué)生信息以列表式顯示，點(diǎn)擊名字可以進(jìn)行修改，十分方便，見圖3-24。圖3-24后臺管理端創(chuàng)建學(xué)生信息界面前端界面如上所示，那么后臺是如何為前端提供數(shù)據(jù)和計(jì)算？計(jì)算邏輯又是如何？在下一章節(jié)我們將繼續(xù)討論積碼系統(tǒng)核心代碼的設(shè)計(jì)思路和實(shí)現(xiàn)。3.7具體實(shí)現(xiàn)本節(jié)對積碼系統(tǒng)部分核心代碼的設(shè)計(jì)思路和具體實(shí)現(xiàn)的講解，共分為三個部分，一、代碼量分析及可視化，二、后臺系統(tǒng)，三、作業(yè)提交管理3.7.1代碼量分析為了進(jìn)行代碼量的分析，我們需要先在數(shù)據(jù)庫記錄學(xué)生代碼量數(shù)據(jù)，那么我們要考慮數(shù)據(jù)模型的形式。經(jīng)過討論分析，我們得出三種形式：一、將每次作業(yè)量代碼累加，作為學(xué)生的一個屬性，并入學(xué)生表中；二、每個學(xué)生擁有屬于自己的代碼表，記錄每一項(xiàng)新增代碼量記錄；三、將所有代碼量新增記錄聚集為一張表，每條記錄包括作業(yè)、課程和學(xué)生信息。進(jìn)而我們需要思考數(shù)據(jù)可視化呈現(xiàn)的結(jié)果，是要包含有新增代碼量的數(shù)目、時間、所屬課程和所屬編程語言。因此形式一被排除，我們不能在學(xué)生屬性中加入過多代碼屬性；至于形式二，在學(xué)生數(shù)量大于2的情況下非常不可取，會造成數(shù)據(jù)庫冗余和擁擠；所以我們選擇形式三，將所有代碼量新增數(shù)據(jù)匯聚成一張表代碼量表，雖然這樣會增加查找時間，但查找的時間復(fù)雜度只是O(n)。通過分析提交的代碼作業(yè)，每份作業(yè)可能提交多種類型的編程語言文件，這里采用字符串來記錄這類數(shù)據(jù)。下面是代碼量分析的模型源碼：#codeAnalysis/models.pyfromdjango.dbimportmodelsfromapps.course.modelsimportCoursefromapps.homeworkapp.modelsimportHomeworkfromapps.userBase.modelsimportStudent#按一份作業(yè)為一條數(shù)據(jù)插入classFileCodes(models.Model):student=models.ForeignKey(Student,on_delete=models.CASCADE)course=models.ForeignKey(Course,on_delete=models.CASCADE)homework=models.ForeignKey(Homework,related_name="filecodes",on_delete=models.CASCADE)created=models.DateTimeField('創(chuàng)建時間',auto_now_add=True)modified=models.DateTimeField('最后更改時間',auto_now=True)code=models.IntegerField('文件總代碼量',default=0)language=models.TextField('編程語言代碼量',null=True)classMeta:verbose_name="作業(yè)代碼量"verbose_name_plural=verbose_name#自定義編程語言代碼文件后綴file_ext={'py':'Python','java':'Java','c':'C','cpp':'C++','cc':'C++','cs':'C#','bas':'VisualBasic','js':'JavaScript','php':'PHP','html':'HTML','sql':'SQL數(shù)據(jù)庫','mdb':'SQL數(shù)據(jù)庫','dbf':'SQL數(shù)據(jù)庫','mdf':'SQL數(shù)據(jù)庫','swift':"Swift",'rb':'Ruby','m':'Objective-C','mm':'Objective-C++'}#關(guān)聯(lián)文件格式對應(yīng)的編程語言defget_language(file_name):language=file_extiffile_nameinlanguage:returnlanguage[file_name]else:return'other'將常用編程語言單獨(dú)做一個自定義字典，方便增加和修改。用一個實(shí)際作業(yè)文件舉個例子，見圖3-25。圖3-25舉例文件目錄假設(shè)test.php文件代碼量為100行，test.java文件代碼量為100行，test.py文件代碼量為100行，那么將會在FileCodes表中插入一條數(shù)據(jù)，其中l(wèi)anguage屬性值為：py_100;java_100;c_0;cpp_0;cc_0;cs_0;bas_0;js_0;php_100;html_0;sql_0;mdb_0;dbf_0;mdf_0;swift_0;rb_0;m_0;mm_0;nofind_0;再通過python字符串分割(split)既可以得到對應(yīng)的編程語言代碼量。對于作業(yè)文件，要求上傳的是經(jīng)過ZIP壓縮的文件，一是可以減少存儲空間，二來統(tǒng)一格式。這里共分為三個函數(shù)：1.codes_create函數(shù)，獲取作業(yè)文件、學(xué)生號、作業(yè)號、課程號，然后判斷是否為可更新的數(shù)據(jù)，再更新數(shù)據(jù)庫。代碼如下：defcodes_create(files,course_id,student_id,homework_id):pl={'code':0} #編程語言代碼量累計(jì)字典forextinfile_ext:pl[ext]=0filetocode(files,pl)#搜尋函數(shù)#若壓縮包含代碼文件增增加數(shù)據(jù)庫記錄ifpl['code']>0:language=''forextinfile_ext:#以文本格式存儲編程代碼量language+=ext+'_'+str(pl[ext])+';'#新增數(shù)據(jù)FileCodes.objects.create(course_id=course_id,student_id=student_id,homework_id=homework_id,code=pl['code'],language=language)2.filetocode函數(shù)，解壓zip包，然后搜尋代碼文件，遇見壓縮包繼續(xù)解壓，若為代碼文件則通過計(jì)算函數(shù)獲得代碼量。代碼如下：deffiletocode(files,language):

f=ZipFile(files,'r')

forfileinlist():

ext=file.split('.')[-1].lower()

ifext=='zip':

filetocode(f.open(name=file),language)#遞歸查找

elifextinfile_ext:

#以讀方式打開文件，并依次讀取每行

codeline=f.open(name=file).readlines()#調(diào)用代碼行計(jì)算函數(shù)language[ext]+=countcode(codeline)#累加作業(yè)總代碼量language['code']+=language[ext]3.countcode函數(shù)，按一定規(guī)則來計(jì)算代碼行量，不同編程語言有不同的書寫規(guī)則，這里就簡單地判斷非空行來計(jì)算，若有實(shí)際需求還可繼續(xù)更改。代碼如下：defcountcode(codeline):temp=0forlineincodeline:#去掉每行頭尾空白line=line.strip()ifnotlen(line):continuetemp+=1returntemp3.7.2代碼量可視化有了代碼量數(shù)據(jù)后，下一步就是將數(shù)據(jù)可視化[7]。Matplotlib是Python做可視化最傳統(tǒng)的工具[8]，優(yōu)點(diǎn)是快速簡潔，缺點(diǎn)是圖形樣式固定不可交互。經(jīng)過對比效果，最終我選定了用pyecharts，這是一個用于生成Echarts圖表的類庫。而Echarts是百度開源的一個數(shù)據(jù)可視化JS庫，主要用于數(shù)據(jù)可視化。這個圖表庫樣式精美可交互，非常適合用于展示數(shù)據(jù)。前面章節(jié)有提及代碼量報(bào)告有三個部分：總代碼量增長折線圖、編程語言分布餅圖和課程代碼量分布直方圖。下面將具體講解這三個部分的代碼實(shí)現(xiàn)。1.總代碼量增長折線圖，效果見圖3-26，這里我們要用到的數(shù)據(jù)是學(xué)生按天為單位的代碼量，然后需要計(jì)算出增長量和累計(jì)量，并按時間順序從早到晚。下面是具體代碼實(shí)現(xiàn)：user=get_object_or_404(User,pk=pk)#獲得用戶idstudent=user.role.student.id #獲得用戶的學(xué)生idcodes=FileCodes.objects.filter(student=student)#獲得學(xué)生的全部代碼量數(shù)據(jù)'''折線圖'''#設(shè)置折線圖標(biāo)題位置data_total=[]data_increment=[]data_time=[]data_tem={}#數(shù)據(jù)預(yù)處理fordataincodes:ifdata.created.date()notindata_tem:data_tem[data.created.date()]=0data_tem[data.created.date()]+=data.code#日期按從早到晚排序data_tem=sorted(data_tem.items(),key=lambdax:x[0])total=0#數(shù)據(jù)封裝foriindata_tem:total+=i[1]data_total.append(total)data_increment.append(i[1])data_time.append(i[0])line=Line("總體",'代碼量(行)統(tǒng)計(jì)圖',title_top='45%',title_pos='1%',title_text_size=20)#總量線line.add("累計(jì)總量",data_time,data_total,is_datazoom_show=True,datazoom_type='both',line_width=2)#增量線line.add("每日增量",data_time,data_increment,is_label_show=False,legend_top='49%',legend_pos='18%',is_smooth=True,mark_point=["max"],line_width=2)圖3-26代碼量可視化-折線圖2.編程語言分布餅圖，效果見圖3-27，這里我們要用到的數(shù)據(jù)是學(xué)生按編程語言為單位的代碼量，然后需要從FileCodes數(shù)據(jù)屬性的language里分割出編程語言的代碼分布情況，下面是代碼實(shí)現(xiàn)：'''餅圖'''#設(shè)置數(shù)據(jù)data_language=[]data_language_code=[]data_tem={}#數(shù)據(jù)預(yù)處理fordataincodes:#編程語言記錄格式為：'編程語言文件后綴名'+'_'+';'language=data.language.split(';')language.pop()forplinlanguage:ext=file_ext[pl.split('_')[0]]#將后綴轉(zhuǎn)換為名稱code=int(pl.split('_')[1])ifextnotindata_tem:data_tem[ext]=0data_tem[ext]+=code#數(shù)據(jù)封裝foriindata_tem:ifdata_tem[i]!=0:data_language.append(i)data_language_code.append(data_tem[i])#設(shè)置主標(biāo)題與副標(biāo)題，標(biāo)題設(shè)置居中，設(shè)置寬度為900pie=Pie("編程語言","代碼量分布圖",title_top='1%',title_pos='49%',title_text_size=20)#加入數(shù)據(jù)，設(shè)置坐標(biāo)位置為【75，50】，上方的colums選項(xiàng)取消顯示，顯示label標(biāo)簽pie.add("編程語言代碼量",data_language,data_language_code,center=['75%','28%'],is_legend_show=True,is_label_show=True,

radius=[0,'37%'],legend_orient="vertical",legend_pos='48%',legend_top='12%')圖3-27代碼量可視化-餅圖3.課程代碼量分布直方圖，效果見圖3-28，這里我們要用到的數(shù)據(jù)是學(xué)生按課程為單位的代碼量，簡單地讀取FileCodes數(shù)據(jù)的course和code屬性即可，下面是代碼實(shí)現(xiàn)：'''柱狀圖'''data_course=[]data_course_code=[]data_tem={}#數(shù)據(jù)預(yù)處理fordataincodes:ifamenotindata_tem:data_tem[ame]=0data_tem[ame]+=data.code#數(shù)據(jù)封裝foriindata_tem:data_course.append(i)data_course_code.append(data_tem[i])#設(shè)置柱狀圖的主標(biāo)題與副標(biāo)題

bar=Bar("課程","代碼量(行)分布圖",title_top='45%',title_pos='50%',title_text_size=20)#添加柱狀圖的數(shù)據(jù)及配置項(xiàng)bar.add("課程代碼量",data_course,data_course_code,is_legend_show=False,mark_line=["average"],mark_point=["max","min"],xaxis_rotate=20)圖3-28代碼量可視化-直方圖4.統(tǒng)一布局，按折線圖左下，餅圖右上，直方圖右下，學(xué)生簡要信息左上，并定位到code_analysis.html頁面。#設(shè)置三個圖表的相對位置grid=Grid(page_title='代碼量統(tǒng)計(jì)報(bào)告',width='100%',height='100%')grid.add(line,grid_height='35%',grid_width='40%',grid_bottom='10%',grid_right='54%')grid.add(bar,grid_height='35%',grid_width='40%',grid_bottom='10%',grid_right='5%')grid.add(pie)grid.add(info)template=loader.get_template('codeAnalysis/code_analysis.html')context=dict(myechart=grid.render_embed(),script_list=grid.get_js_dependencies(),

3.7.3后臺系統(tǒng)積碼后臺管理使用的是Django自帶的admin模塊[9]，操作十分便捷，再加上simpleui的主題優(yōu)化，使得整個后臺管理界面優(yōu)美，交互性良好。首先是更換語言和時間，因?yàn)槟J(rèn)是英文，所以需要通過在settings.py里進(jìn)行設(shè)置，代碼如下：LANGUAGE_CODE='zh-hans'TIME_ZONE='Asia/Shanghai安裝django-simpleui==3.9第三方插件，再添加至settings.py的INSTALLED_APPS一欄，代碼如下：#ApplicationdefinitionINSTALLED_APPS=['simpleui',#插入在admin上面'django.contrib.admin','django.contrib.auth',………,]'apps.emailVerify','apps.group','apps.handin','apps.homeworkapp','apps.userBase','apps.video','apps.myadmin','ckeditor','ckeditor_uploader',]然后通過命令：pythonmanage.pycreatesuperuser創(chuàng)建超級管理員賬號后，啟動服務(wù)器可以通過默認(rèn)地址:8000/admin進(jìn)入后臺管理端。這里為了增加后臺安全，我在主應(yīng)用url里更改了admin的地址為：path('738663luanma/myadmin/',admin.site.urls)。下一步進(jìn)行管理配置，積碼系統(tǒng)后臺主要管理的是用戶、課程、作業(yè)和視頻，這里我們以用戶管理為例。用戶管理又分為基礎(chǔ)用戶（無身份），老師用戶，學(xué)生用戶。我單獨(dú)將后臺設(shè)置作為一個應(yīng)用功能叫myadmin，便于修改，直接在admin.py文件內(nèi)操作。下面老師信息管理的設(shè)置，代碼如下：classTeacherAdmin(admin.ModelAdmin):list_display=('name','ranks','gender','created','modified',)list_per_page=5#設(shè)置每頁顯示多少條記錄，默認(rèn)是100條list_editable=()#設(shè)置默認(rèn)可編輯字段date_hierarchy='created'#詳細(xì)創(chuàng)建分層篩選ordering=('-created',)#設(shè)置默認(rèn)排序字段，負(fù)號表示降序排序inlines=[CourseInline,#Inline把CourseInline關(guān)聯(lián)進(jìn)來]search_fields=('name',)#搜索字段admin.site.register(Teacher,TeacherAdmin)#注冊到管理器上面代碼表明在后臺端的顯示老師表的管理，管理對老師的增刪查改，然后在主體顯示所有老師的信息包括姓名、職稱、性別、創(chuàng)建時間和修改時間，每個主體頁面顯示5行記錄，按創(chuàng)建時間排序,可編輯所有字段等等。此外還可以將注冊到管理器變?yōu)檠b飾器：@admin.register(Teacher)加在類名上面。3.7.4作業(yè)提交管理作業(yè)提交管理分為創(chuàng)建提交、修改提交、刪除提交、提交作業(yè)列表。1.創(chuàng)建提交。當(dāng)學(xué)生共有兩種類型作業(yè)可以提交：個人或小組。當(dāng)作業(yè)屬于個人時，提交成功后會新增自己提交的記錄；當(dāng)作業(yè)屬于小組時，只要其中一個組員創(chuàng)建提交后，就會新增全部組員的提交記錄。并在提交過程中調(diào)用代碼量分析模塊。代碼如下：@method_decorator(login_required,name='dispatch')classHandinCreate(CreateView):model=Handinform_class=HandinFormtemplate_name='handin/handin_form.html'defform_valid(self,form):homework=Homework.objects.get(id=self.kwargs['pk'])course=Course.objects.get(id=self.kwargs['pkr'])file=form.cleaned_data['file']student=self.request.user.role.student.idifhomework.group==0:form.instance.course=courseform.instance.homework=homeworkform.instance.author=self.request.user.role.student#更新課程代碼量和總代碼量#代碼表增加codes_create(file,course_id=course.id,student_id=student,homework_id=homework.id)returnsuper().form_valid(form)else:#小組作業(yè)，一人提交則全部提交form.instance.course=courseform.instance.homework=homeworkform.instance.author=self.request.user.role.studentifGroup.objects.filter(course=course,member=self.request.user.role.student):group=Group.objects.get(course=course,member=self.