快捷收作業(yè)系統(tǒng)的設(shè)計與實(shí)現(xiàn)

摘要隨著最近幾年互聯(lián)網(wǎng)的發(fā)展，人們的生活因此改變?？梢哉f互聯(lián)網(wǎng)的出現(xiàn)是人類歷程發(fā)展歷程中最重要改變之一，給世界帶來翻天覆地的改變，資源的廣泛傳播賦予人們娛樂；同時它也改變了人們的工作方式：人們傳遞辦公的文件不再只是紙質(zhì)化，更多的是使用OA系統(tǒng)在線傳遞；甚至還有人使用電腦在家辦公，也成了一種新型的辦公方式。以上這些，都要?dú)w功于信息技術(shù)的發(fā)展。本研究以軟件開發(fā)為基礎(chǔ)，采用理論與實(shí)際相結(jié)合的方法，開發(fā)收取電子版作業(yè)的Webapp。包括對網(wǎng)站app的功能分析，編寫對應(yīng)功能代碼；還有網(wǎng)頁前端的設(shè)計和優(yōu)化，包括html、CSS、JS以及前端框架的運(yùn)用，對網(wǎng)頁進(jìn)行簡單的軟件測試，包括編寫測試用例，按照測試用例進(jìn)行嚴(yán)格的多方位測試，確保網(wǎng)頁app的功能正常實(shí)現(xiàn)等。在設(shè)計的過程中主要選取python的django框架進(jìn)行設(shè)計并完成了文件上傳功能、記錄顯示上傳名單功能、文件壓縮下載功能、圖標(biāo)展示等功能的功能，事實(shí)上表明了自動化的網(wǎng)頁app的工作效率相對于手動收取作業(yè)說確實(shí)是提高了很多。節(jié)省了很多人力和時間。關(guān)鍵詞：Django，收電子作業(yè)，網(wǎng)頁app，html，pythonAbstractInrecentyears,theITindustryhasdevelopedrapidly.

Computertechnologyhaschangedpeople'ssinglewayoflife.itcannotonlysimplifytheworkflow,improveworkefficiency,achievethesharinganddisseminationofresources,butalsohasentertainmentfunctionsandinteraction,whichhasbroughtgreatchangestohumansociety.

Thispapermainlydiscusseshowtosimplifythestepsofcollectingelectronicversionofthejobthroughthewebpageapp.

Includingthefunctionanalysisofthewebsiteapp,writingthecorrespondingfunctioncode;aswellasthedesignandoptimizationofthefrontendofthewebpage,includingtheuseofhtml,CSS,JSandthefront-endframework,carryingoutsimplesoftwaretestingofthewebpage,includingwritingtestcases,

Accordingtothetestcasetocarryoutstrictmulti-directionaltestingtoensurethenormalimplementationofthefunctionofthewebpageapp,andsoon.

Intheprocessofdesign,thedjangoframeworkofpythonismainlyselectedtodesignandcompletethefunctionsoffileuploadfunction,recorddisplayuploadlistfunction,filecompressionanddownloadfunction,icondisplayfunctionandsoon.

Infact,itshowsthattheefficiencyofautomatedwebappisindeedmuchhigherthanthatofmanuallycollectingjobs.

Savedalotofmanpowerandtime.Keywords：Django，ReceivingElectronicoperation，Webapp，Html，Python目錄1緒論 61.1題目背景 61.2選題緣由 61.3題目研究方法 61.4論文構(gòu)成及研究內(nèi)容 72系統(tǒng)的相關(guān)概述 82.1python語言簡介 82.2django簡介 92.3Bootstrap簡介 92.4JQuery簡介 103系統(tǒng)開發(fā)和環(huán)境介紹 113.1開發(fā)基本環(huán)境 111.安裝，配置python 112.安裝django 123.編輯器選擇sublime 124.虛擬環(huán)境virtualenv 134系統(tǒng)分析 144.1開發(fā)背景 144.2系統(tǒng)功能需求分析 144.3需要實(shí)現(xiàn)的幾個頁面功能 144.4系統(tǒng)的功能圖 145系統(tǒng)的設(shè)計與實(shí)現(xiàn) 155.1開發(fā)模式 155.2數(shù)據(jù)庫設(shè)計 151.名字列表 152.實(shí)習(xí)報告周小結(jié)的作業(yè)表 163.指導(dǎo)老師聯(lián)系表的作業(yè)表 164.訪問數(shù)量記錄表 165.3部分功能代碼 175.4系統(tǒng)前臺設(shè)計 331.網(wǎng)頁的標(biāo)題欄代碼解析 332.背景圖的代碼解析 352.白色微透明背景代碼解析 365.5頁面打開速度優(yōu)化 366項目文件的簡單部署 376.1選擇部署方式 376.2開始部署 377對網(wǎng)頁進(jìn)行系統(tǒng)的軟件測試 427.1軟件測試的目的 427.2測試環(huán)境 427.3系統(tǒng)測試 42總結(jié)與展望 43參考文獻(xiàn) 44致謝 451緒論1.1題目背景伴隨著IT行業(yè)的發(fā)展，軟件在人們?nèi)粘Ｉ畹牡淖饔迷絹碓酱?。在軟件開發(fā)和運(yùn)用的過程中，為了實(shí)現(xiàn)一些小功能，可以開發(fā)出小工具來幫助完成一些重復(fù)或者復(fù)雜的事情，而軟件開發(fā)在語音的選擇方面有多樣化的選擇，不僅僅要考慮到對語音的掌握程度，還有考慮到自身的需求。軟件在工作時不光保障了工作質(zhì)量，并且還降低了工作的時間和金錢成本成本，隨之帶來的效益非?？捎^。1.2選題緣由計算機(jī)技術(shù)改變了人們單一的生活方式，不僅能夠簡化工作流程，提高工作效率，實(shí)現(xiàn)資源的共享和傳播，還具有娛樂功能和互動性，對人類社會帶來了巨大的變革。在實(shí)習(xí)的期間，大家都在忙著工作，收作業(yè)這種事情會很累人。組長需要收齊作業(yè)并記錄交作業(yè)的順序，以此作為評分標(biāo)準(zhǔn)組長要收取作業(yè)后統(tǒng)計出誰還沒有交，還要再去催對應(yīng)的同學(xué)交作業(yè)，最后交到一個同學(xué)那里匯總之后才交給老師。這個過程非常的漫長和復(fù)雜，我覺得同學(xué)們都出去實(shí)習(xí)了，各自的時間都很寶貴。如果可以讓同學(xué)們交作業(yè)到一個地方，并自動統(tǒng)計出同學(xué)們上交作業(yè)的情況以及上交順序，這樣將會在每次收作業(yè)的時候節(jié)約大量的時間和精力。針對以上實(shí)習(xí)階段收取實(shí)習(xí)報告的情況，本著節(jié)約時間和簡化步驟的想法，這個快捷收作業(yè)系統(tǒng)誕生了。這個系統(tǒng)是一個建立在網(wǎng)頁上的系統(tǒng)，可以滿足同學(xué)們在不同環(huán)境下提交作業(yè)。1.3題目研究方法本研究以軟件開發(fā)為基礎(chǔ)，采用理論與實(shí)際相結(jié)合的方法，以Django為來說，這是由python封裝的Web開發(fā)框架，用來開發(fā)Webapp。在這里我們主要涉及的功能包括：同學(xué)們選擇自己的名字后選擇作業(yè)文件即可上傳作業(yè)，無需登錄。同學(xué)們要重新上傳文件可以直接覆蓋上傳。網(wǎng)頁即時刷新已交名單以及未交名單。網(wǎng)頁微后臺顯示同學(xué)們上交作業(yè)的順序，方便統(tǒng)計評分。網(wǎng)頁微后臺有下載作業(yè)文件功能，方便后臺提取文件整理上交。圖表展示頁面可以很清晰地看到網(wǎng)站的前七天的訪問量以及每天提交文件的數(shù)量。本文主要介紹針對WebAPP的開發(fā)，由于代碼量較多，所以只介紹重要的功能部分的實(shí)現(xiàn)。1.4論文構(gòu)成及研究內(nèi)容第一章為緒論，介紹這個課題是什么，為什么要選擇這個課題，以及介紹本文將以什么方法進(jìn)行研究。第二章介紹了開發(fā)軟件所涉及的技術(shù)的相關(guān)概述。在此基礎(chǔ)上才能進(jìn)行webapp的開發(fā)和設(shè)計。第三章為系統(tǒng)開發(fā)和環(huán)境介紹。介紹了所需的開發(fā)環(huán)境以及開發(fā)環(huán)境的安裝和配置過程步驟。第四章為系統(tǒng)功能分析。重點(diǎn)對Webapp的需求進(jìn)行分析，并通過流程圖和功能圖展示。第五章為系統(tǒng)的設(shè)計和實(shí)現(xiàn)。介紹了本文設(shè)計的開發(fā)模式，數(shù)據(jù)庫表單設(shè)計，最后展示了部分功能實(shí)例的實(shí)現(xiàn)界面及代碼。第六章介紹了項目文件的簡單部署。通過網(wǎng)站進(jìn)行簡單部署第七章為系統(tǒng)測試。設(shè)計若干個測試用例，對系統(tǒng)主要功能進(jìn)行檢測。

2系統(tǒng)的相關(guān)概述2.1python語言簡介在本文涉及的快捷收作業(yè)系統(tǒng)中我們使用Python語言作為后臺實(shí)現(xiàn)的腳本。Python語言面向?qū)ο螅绕涫窃赪eb開發(fā)方面，Python語言憑借它的易用性和強(qiáng)大的泛化能力，深受開發(fā)人員的歡迎。干凈利索，簡單直接，Python編寫代碼的速度非常的快，而且非常注重代碼的可讀性，非常適合多人參與的項目。作為一種解釋性語言Python始終貫徹了一種簡潔清晰的方針，這樣使得它的維護(hù)性以及可閱讀性大大提升，因而受到大量的編程人員的歡迎。并且在實(shí)際應(yīng)用中也得到大量地使用，與此同時，作為用于Web開發(fā)，Python具有下優(yōu)點(diǎn):由于Python面向Web和開源特性，所以它運(yùn)行的是動態(tài)內(nèi)容，當(dāng)數(shù)據(jù)庫經(jīng)常與網(wǎng)站交互時，Python十分高效。與其他的高級編程語言最大的區(qū)別就是Python語言是一種不含有那些語言所包含的簡單意義的語言，這種方式使得編程人員在進(jìn)行Python項目編寫的時候只需要解決項目“做什么”的問題，而是花費(fèi)多余的時間理解語言。此外，Python語言在編寫的時候不是采用以分號結(jié)尾的方式，而是直接縮進(jìn)，這種方式使得Python的源代碼編寫更加方便快捷和具有更好的可閱讀性。Python在眾多編程語言中脫穎而出的另一個重要原因就是它的編譯速度以及運(yùn)行速度都很快，在開發(fā)人員編寫程序代碼的時候，往往希望能夠盡快看到程序的運(yùn)行結(jié)果，而Python較為快速的運(yùn)行速度因此受到開發(fā)人員的歡迎。因?yàn)镻ython是由C語言編寫的，而又由于C語言的可移植性這樣使得Python語言可以運(yùn)行安裝有ANSIC編譯器的任意平臺上.這樣使得程序更加容易的移植到在現(xiàn)今流行的任意的主流平臺上，都可以進(jìn)行編譯運(yùn)行而不會造成運(yùn)行的差異性.由于Python這種可以自動化編譯成字節(jié)碼的可移植性使Python可以無差別的在不同的系統(tǒng)上運(yùn)行Python在訪問模塊的語法是一致的，這種特性使得由Python編寫的程序可以容易方便的與用其他編程語言編寫的程序模塊輕松的“粘連”起來。這種特性也使得Python具有較高的可擴(kuò)展性，從而依據(jù)自己的需要來編寫模塊進(jìn)行組織搭配，或者在其他環(huán)境中使用Python.Python不單單是像JAVA一樣單純的面向?qū)ο笳Z言，而又由于Python是由C語言為基礎(chǔ)編寫的，所以它同樣擁有C語言的面向過程的特質(zhì).事實(shí)上Python融合了多種編程風(fēng)格。2.2django簡介Django是一個Web框架，最初被用來制作在線新聞的Web站點(diǎn)。Django的各模塊之間結(jié)合得比較緊密，所以在功能強(qiáng)大的同時又是一個相對封閉的系統(tǒng)（依然是可以自定義的），但是其健全的在線文檔及開發(fā)社區(qū)，使開發(fā)者在遇到問題時能找到解決辦法。在編程開發(fā)方面，Django對編程初學(xué)者和編程老手都十分友好。對于新手，Django集成好的工具和部件，無須再費(fèi)腦力去學(xué)習(xí)如何安裝、調(diào)試、集成、兼容別的工具。Django把這些都集成好了，而且保證兼容性、可用性和方便性，就好比聯(lián)想一體機(jī)，開機(jī)即用，效率也高。而一些如flask的框架，雖然精簡，但是你要自己安裝各種工具、ORM、插件等等，好比DIY電腦，在用之前，要知道買什么配件，怎么搭配，怎么組裝，怎么配置效率才高，將新手的熱情大量消耗在非關(guān)鍵性的內(nèi)容上。其次，對于老手，Django也是開放的，完全可以關(guān)閉不必要的功能，忽略不使用的組件，或者自定義希望的組件，包括ORM和Template在內(nèi)，都可以自由選擇。2.3Bootstrap簡介Bootstrap是一種前端開發(fā)框架，它使得Web前端的開發(fā)更加便捷，對于前端開發(fā)人員來說，使用Bootstrap框架開發(fā)前端，靈活簡潔，可以拿來直接用，只需要把里面想換成自己的內(nèi)容替換掉，即bootstrap=樣式庫+一堆jQuery插件。由于Bootstrap是完全開源的，因此在一定程度上降低了前段開發(fā)者的工作量，并且讓初學(xué)者也可以開發(fā)出想要的效果。其組成是：1.基本結(jié)構(gòu)：bootstrap就是樣式庫和一堆jQuery插件的集合。2.CSS：因?yàn)锽ootstrap使用的某些HTML和CSS需要的文檔類型為HTML5doctype，所以要創(chuàng)建html5文檔，以確保CSS組件能夠正確使用。然后在<head>里引入jquery.js、bootstrap.js、bootstrap.css文件。3.組件：為了讓開發(fā)人員更加容易進(jìn)行一些常規(guī)性的開發(fā)，開發(fā)人員可以利用這些組件很輕易地實(shí)現(xiàn)這些常規(guī)功能。4.JavaScript插件：在Bootstrap中可以安裝JS插件，這些插件依賴于JQuery庫，包括動畫過渡、彈出框等一系列效果。2.4JQuery簡介jquery是基于js的框架，js的作用就是動態(tài)處理css和html的相關(guān)過程。其主要目的是為了動態(tài)的處理靜態(tài)頁面的元素，屬性等，讓靜態(tài)頁面富有生命力。說起框架，jQuery應(yīng)該是最早開始做框架的，jQuery主要是簡化了操作DOM的方法，并提供了簡單的動畫效果。開發(fā)人員也通過JQuery構(gòu)造了一個個頁面特效、頁面事件等，賦予瀏覽者更好的體驗(yàn)度。3系統(tǒng)分析3.1開發(fā)背景Python語言是當(dāng)前非常流行的一種編程語言，它面向Web和開源特性，運(yùn)行動態(tài)內(nèi)容，在與數(shù)據(jù)庫交互時，使用Python十分高效。相對于java和C#.net，Python語言的維護(hù)性以及可閱讀性甚至更高，幾乎可以在任何場合使用，因而受到大量的編程人員的歡迎。現(xiàn)在最火的人工智能和機(jī)器學(xué)習(xí)都少不了這種語言。因此我選擇python語言作為本次開發(fā)網(wǎng)頁應(yīng)用的基本語言。3.2系統(tǒng)功能需求分析一個好的網(wǎng)頁，不僅需要前端美觀耐看，還需要完整的后臺。本系統(tǒng)運(yùn)用Django+Booststrap架構(gòu)與mvc設(shè)計思想，同學(xué)們可以選擇自己的姓名上傳作業(yè)，并看到上交作業(yè)的情況。管理者可以進(jìn)入后臺查看同學(xué)們上交作業(yè)的詳細(xì)情況，或者下載作業(yè)文件進(jìn)行整理上交老師，還有圖表進(jìn)行數(shù)據(jù)展示3.3需要實(shí)現(xiàn)的幾個頁面功能由于追求方便和快捷，沒有設(shè)計注冊登錄賬號等功能。第一個上傳作業(yè)頁面中，同學(xué)們只需要選擇自己的姓名之后，選擇作業(yè)提交即可。然后可以看到已交名單出現(xiàn)自己的姓名。說明提交成功。如果提交錯誤可以二次提交。第二個微后臺頁面中，可以讓管理者查看詳細(xì)的提交順序用于評分，最后可以下載作業(yè)文件提交老師。第三個圖表展示頁面中，可以清楚的看到前七天的網(wǎng)站訪問量和每天的作業(yè)提交情況3.4系統(tǒng)的功能圖3.5系統(tǒng)的開發(fā)環(huán)境在windows10系統(tǒng)下，以python語言為基本開發(fā)語言，通過運(yùn)用django框架，sqlite數(shù)據(jù)庫等相關(guān)知識，利用python語言的便于開發(fā)的特性以及MVC設(shè)計思路，來設(shè)計快捷收作業(yè)網(wǎng)站。安裝，配置python在python官網(wǎng)（/）上下載安裝python這里需要注意的是，Python安裝在PC機(jī)上時，我們需要在電腦上設(shè)置環(huán)境變量，在其中加入其安裝路徑。我們需要在安裝完畢后檢查PC機(jī)是否已經(jīng)安裝好Python，檢測的方法很簡單，在命令提示符中輸入python，如果能夠出現(xiàn)它的版本號就表示Python已經(jīng)安裝完畢。2.安裝django先把pip也添加進(jìn)環(huán)境變量，在cmd中輸入pipinstalldjango3.編輯器選擇sublime特點(diǎn)：輕便，運(yùn)行速度快，適配很多種語言的語法高亮，自動保存缺點(diǎn)：無法直接運(yùn)行，只是編輯文件使用4.虛擬環(huán)境virtualenv在Python中有一個虛擬環(huán)境的概念，這個使得Python語言和其他變成語言相比效率更高。虛擬環(huán)境概念的提出是為了避免不同程序之間的影響，如果每個Python程序都共用同一個庫和解釋器，這就有可能導(dǎo)致程序之間執(zhí)行。如一個程序A使用了一個Python庫的一個版本，一個程序B使用了該庫的另一個版本，盡管這兩個程序獨(dú)立運(yùn)行并沒有問題，但是如果程序B想要執(zhí)行程序A時就會出現(xiàn)問題?；谶@個問題，提出虛擬環(huán)境，即每個Python程序都會擁有自己的Python庫和解釋器，這樣每個Python程序之間就不會互相干擾。安裝只需要在cmd中輸入pipinstallvirtualenv創(chuàng)建虛擬環(huán)境Virtualenv（）進(jìn)入虛擬環(huán)境Scripts\activate退出虛擬環(huán)境deactivate4系統(tǒng)的設(shè)計與實(shí)現(xiàn)4.1開發(fā)模式我們采用django技術(shù)進(jìn)行開發(fā)，在本文設(shè)計的快捷收作業(yè)系統(tǒng)中，對于接受用戶輸入的功能，不同于Java開發(fā)中使用控制器servlet進(jìn)行操作，Django由框架自動處理。因此django技術(shù)使用的設(shè)計模式不是我們常見的MVC設(shè)計模式，而是MTV設(shè)計模式，模型和視圖與MVC設(shè)計模式一致。簡述請求過程：1.http向服務(wù)器發(fā)送請求，服務(wù)器接收請求。2.Django框架開始處理請求，調(diào)用視圖函數(shù)進(jìn)行處理。3.框架處理并存放數(shù)據(jù)的。

3.調(diào)用模板進(jìn)行界面的展示。

4.視圖函數(shù)返回響應(yīng)至服務(wù)器。5.Web服務(wù)器將響應(yīng)發(fā)送給客戶端。4.2數(shù)據(jù)庫設(shè)計在django框架中，每建立一個數(shù)據(jù)表，就有一個模型類與之對應(yīng)。每個模型相當(dāng)于單個數(shù)據(jù)庫表，每個屬性也是這個表中的一個字段。屬性名就是字段名。Django與數(shù)據(jù)庫進(jìn)行交互的過程如下：?1)連接到指定的數(shù)據(jù)庫??2)定義數(shù)據(jù)庫模型??3)同步數(shù)據(jù)庫,執(zhí)行CRUD操作接下來，我們將展示在在py文件中創(chuàng)建數(shù)據(jù)庫。在這個model.py文件中需要引入的文件或者庫是：importosimportdjango.utils.timezoneastimezonefromdjango.dbimportmodelsfromdjango.db.models.fields.relatedimportManyToManyFieldfromdjango.db.models.fieldsimportDateTimeField這里設(shè)計了四個數(shù)據(jù)庫表分別是：名字列表，實(shí)習(xí)報告周小結(jié)的作業(yè)表，指導(dǎo)老師聯(lián)系表的作業(yè)表和每天訪問人數(shù)的表。1.名字列表其中包括名字和分組：classNameList(models.Model): name=models.CharField(max_length=20) group_of_student=models.CharField(max_length=10,default=None) classMeta: verbose_name_plural="名字列表" def__str__(self): return2.實(shí)習(xí)報告周小結(jié)的作業(yè)表其中包括id，名字（名字列表中的主鍵），文件，上傳時間，修改時間：classFilesList(models.Model): id=models.IntegerField(primary_key=True) name=models.ForeignKey(NameList,on_delete=models.CASCADE) file=models.FileField(upload_to='shixibaogaozhouxiaojie',null=True) upload_time=models.DateTimeField(auto_now_add=True) change_time=models.DateTimeField(auto_now_add=True) classMeta: verbose_name_plural="實(shí)習(xí)報告周小結(jié)" def__str__(self): return3.指導(dǎo)老師聯(lián)系表的作業(yè)表其中包括id，名字（名字列表中的主鍵），文件，上傳時間，修改時間：classCotactTableList(models.Model): id=models.IntegerField(primary_key=True) name=models.ForeignKey(NameList,on_delete=models.CASCADE) file=models.FileField(upload_to='zhidaolaoshilianxibiao',null=True) upload_time=models.DateTimeField(auto_now_add=True) change_time=models.DateTimeField(auto_now_add=True) classMeta: verbose_name_plural="指導(dǎo)老師聯(lián)系表" def__str__(self): return4.訪問數(shù)量記錄表其中包括每天訪問數(shù)量和時間4.3部分功能代碼上傳文件功能代碼解析提交文件頁面：前端頁面代碼：通過ajax動態(tài)上傳數(shù)據(jù)，如果接收到error_msg的錯誤信息，則在頁面中渲染出“出問題啦”的提示，如果未收到error_msg的錯誤信息，則彈窗提示上傳成功。解析：通過form.py文件渲染前端頁面對應(yīng)form.py代碼：后臺的處理方法：后臺接收到前臺傳遞來的數(shù)據(jù)信息，會先進(jìn)行一個判斷。判斷該數(shù)據(jù)是否合法，如果數(shù)據(jù)合法則調(diào)用save（）函數(shù)進(jìn)行保存；否則系統(tǒng)將直彈出警告，提醒用戶數(shù)據(jù)錯誤。上傳作業(yè)頁面下的已交名單與未交名單的代碼解析頁面展示：前端頁面代碼：通過后臺傳遞過來的數(shù)據(jù)，用for循環(huán)遍歷顯示出來，就可以看到已交的名單和未交的名單后臺處理方法：用django中的queryset查詢集來獲取數(shù)據(jù)庫中的數(shù)據(jù)，queryset具有條件篩選的功能，可以輕松的篩選出需要的數(shù)據(jù)。Queryset具有懶惰的特點(diǎn)，創(chuàng)建了一個QuerySet對象，它不會直接返回數(shù)據(jù)集。等到使用它的時候，才解析該對象得到數(shù)據(jù)集。而且解析過一次會被緩存起來，下次使用時直接返回緩存中的數(shù)據(jù)，緩存的使用提高多次查詢的效率。通過循環(huán)遍歷篩選出需要的數(shù)據(jù)，用字典的方式傳到對應(yīng)的前端頁面渲染數(shù)據(jù)。其中另一個作業(yè)界面的處理邏輯相同：微后臺頁面中分組排名的代碼解析頁面展示：前端頁面代碼：下面是實(shí)習(xí)報告周小結(jié)作業(yè)的前端代碼，其中指導(dǎo)老師聯(lián)系表作業(yè)的代碼邏輯與其相同。通過后臺發(fā)送的數(shù)據(jù)進(jìn)行分組遍歷展示出已交名單和未交名單，通過html的ol標(biāo)簽來展示排名后臺處理方法：這里包括了兩個作業(yè)的數(shù)據(jù)的后臺處理同樣是使用django中的queryset來完成數(shù)據(jù)的篩選，然后發(fā)送到前端頁面渲染出來，這里的難點(diǎn)是數(shù)據(jù)比較多，需要保持清醒的頭腦來思考其中的邏輯處理，還有數(shù)據(jù)的格式需要注意，不然無法提取出需要的數(shù)據(jù)來使用。微后臺中下載整理文件的代碼解析頁面展示：前端頁面代碼：<ahref="/file_download/"download="category.zip"class="btnbtn-warningbtn-lgactive"role="button">下載文件</a><buttononclick='zhengliwenjian()'style="margin-left:9rem;"class="btnbtn-warningbtn-lgactive"role="button">整理文件</button>JS代碼：解析：通過ajax來獲取后臺的參數(shù)，當(dāng)成功獲取后臺的傳遞的JSON參數(shù)1時，證明后臺的整理壓縮文件操作完成，前端頁面彈框提示“整理完畢”。若是未接收到，則彈框提示“整理失敗”。 functionzhengliwenjian(){ $.ajax({ url:'/collate_files/', type:'GET',//請求類型，常用的有GET和POST data:{}, dataType:'JSON', success:function(date){ console.log(date) if(date[0]==1){ alert("整理完畢"); }else{ alert("整理失敗"); } } }) }整理并壓縮文件的后臺處理方法：解析：整理文件首先對重復(fù)上傳的文件進(jìn)行去重，通過正則來查找對應(yīng)的名字上傳的文件，若是有多個文件則刪除時間較早上傳的文件，留下一個上傳時間較晚的文件。在一系列的去重操作完成后再對文件進(jìn)行重命名，讓文件名保持規(guī)范整潔。當(dāng)所有文件都整理完成后，就對指定文件進(jìn)行壓縮放到指定位置。最后向前端頁面?zhèn)鬟f一個JSON參數(shù)。

對實(shí)習(xí)作業(yè)文件的整理邏輯：對指導(dǎo)老師聯(lián)系表文件的整理邏輯：下載文件的后臺處理方法：解析：通過相對地址下載制定zip壓縮文件同學(xué)們在上傳文件之后，并不會自動生成壓縮包，文件夾文件無法直接下載，所以還要壓縮文件的代碼。考慮到系統(tǒng)的簡便性，決定將壓縮文件的功能添加到整理文件的時候，也就是點(diǎn)擊整理文件按鈕時都會生成一次最新的整理后的壓縮文件，舊的壓縮文件會被新的覆蓋，這時點(diǎn)擊下載就可以下載到最新的壓縮文件。其中后臺邏輯處理代碼：數(shù)據(jù)圖表展示頁面的代碼展示頁面展示：前端頁面代碼：前端js代碼：表格是有highcharts提供的js插件渲染出來的，其中接收數(shù)據(jù)也是用ajax來獲取后臺處理方法：解析：通過后臺用queryset查詢集來獲取數(shù)據(jù)庫中的數(shù)據(jù)，構(gòu)造出前七天的日期，前七天每天各個作業(yè)的提交數(shù)量，前七天每天的網(wǎng)頁訪問數(shù)量網(wǎng)頁的url解析Django中采用正則表達(dá)式來匹配所請求的url，這個叫做URLconf，作為MVC中的C(控制器)，這樣再調(diào)用相應(yīng)的試圖，達(dá)到控制器控制試圖的顯示的效果。Django的后臺系統(tǒng)Django有自帶的后臺系統(tǒng)，我們需要將設(shè)計好的model注冊上去才可以在后臺系統(tǒng)中看到，并且可以對其進(jìn)行增刪改查，在admin.py文件中：填入model的想要顯示的字段，就可以在后臺系統(tǒng)中看到后臺頁面詳情：可以看出django的自帶后臺功能齊全，方便管理數(shù)據(jù)4.4系統(tǒng)前臺設(shè)計網(wǎng)頁的標(biāo)題欄代碼解析頁面展示：采用了透明的標(biāo)題欄，通過不同文字的顏色展示出標(biāo)題選項響應(yīng)式頁面展示：如果是手機(jī)打開的頁面，標(biāo)題欄會如下圖顯示，點(diǎn)擊標(biāo)題欄右邊的按鈕可以看到其他選項前端代碼：這是通過bootstrap前端框架來完成的標(biāo)題欄，擁有響應(yīng)式布局我們不能直接調(diào)用bootstrap的框架，在使用之前還需引入一些文件：<scriptsrc="/npm/jquery@1.12.4/dist/jquery.min.js"></script><scriptsrc="/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>CSS代碼展示：主要是用于修改顏色2.背景圖的代碼解析背景圖展示:用這個背景來當(dāng)做所有頁面的統(tǒng)一背景前端代碼：<divclass="background"></div>CSS代碼：通過樣式來調(diào)整圖片充滿整個頁面.background{position:fixed;height:100%;width:100%;max-width:100%;top:0;overflow:hidden;z-index:-1;pointer-events:none;background-color:#F1F1F1;background-image:url(:8000/photo/);background-size:100%100%;}后臺處理方法：返回圖片到前端頁面defphoto(self): image_data=open('./myapp/11.jpg',"rb").read() returnHttpResponse(image_data,content_type="image/png")Url設(shè)置：path('photo/',views.photo,name='photo'),3.白色微透明背景代碼解析頁面展示：前端代碼：<divclass="container"></div>CSS代碼：通過瀏覽器F12調(diào)試，選擇出合適的顏色和透明度，讓頁面更加好看.container{background-color:#ffffffc4;height:100%;}4.5頁面打開速度優(yōu)化5項目文件的簡單部署5.1選擇部署方式在學(xué)習(xí)web開發(fā)過程中，比如Django、Flask、webpy等框架的過程中，我們會有將網(wǎng)站上線的需求，用來測試或展示。PythonAnywhere是一個免費(fèi)的托管python的代碼，為了節(jié)省開發(fā)成本，我們選擇在這上面進(jìn)行django程序的開發(fā)。PythonAnywhere可以測試你的web應(yīng)用，首先要在PythonAnywhere的官網(wǎng)()上注冊賬號，并根據(jù)自己的開發(fā)環(huán)境選擇對應(yīng)的環(huán)境，需要注意的是PythonAnywhere中的后臺是linux系統(tǒng)，跟我進(jìn)行的開發(fā)的windows系統(tǒng)的命令有一些不同。5.2開始部署1.用qq郵箱注冊pythonanywhere的賬號，用戶名將是域名的前綴2.用在python項目文件中打開cmd輸入pipfreeze>1.txt，將會生成1.txt文件，里面是項目所需要的庫然后把python項目打包（zip格式）,上傳pythonanywhere網(wǎng)站（放在自己用戶名的文件夾下）。在pythonanywhere的console中選擇bash進(jìn)入linux終端，輸入virtualenv--python=python3.6venv創(chuàng)建虛擬環(huán)境。s（虛擬環(huán)境和python項目文件可以分開放）在linux終端解壓打包的python項目文件（在虛擬環(huán)境中）：進(jìn)入對應(yīng)文件夾后用命令unzipmytask.zip解壓,進(jìn)入解壓后的項目文件下用命令：pipinstall-r1.txt安裝所需要的庫6.進(jìn)入pythonanywhere網(wǎng)站的web頁面，選擇創(chuàng)建一個新的webapp，選擇Manualconfiguration（includingvirtualenvs），選擇python3.6，下一步即可。7.在Web頁面中Code中的Sourcecode:/home/szy/mytask（其中szy是創(chuàng)建的用戶名，mytask是項目文件）Workingdirectory:/home/szy/mytask8.Code中WSGIconfigurationfile:/var/www/szy_pythonanywhere_com_wsgi.py文件修改：9.Virtualenv:/home/szy/venv #這里填虛擬環(huán)境的位置Staticfiles:/static/ /home/szy/mytask/static #這里填靜態(tài)文件的位置和路徑10.在settings.py文件中改成ALLOWED_HOSTS=['',]，DEBUG改成DEBUG=False最后加上STATIC_URL='/static/'STATICFILES_DIRS=[os.path.join(BASE_DIR,'static'),]完成修改后reload網(wǎng)站，可以正常訪問了，（需要