辦公協(xié)同管理系統(tǒng)

辦公協(xié)同管理系統(tǒng)OfficeCoordinationManagementSystem摘要網(wǎng)絡科技高速發(fā)展下，許多企業(yè)都轉(zhuǎn)向無紙化辦公。本系統(tǒng)滿足基本的公司辦公需求，操作簡便易上手，無紙化辦公管理系統(tǒng)成為眾多企業(yè)對日常業(yè)務管理的首選方法。實現(xiàn)辦公管理系統(tǒng)是本項目主要內(nèi)容。本系統(tǒng)以Pycharm和Vscode兩個工具進行項目開發(fā)，數(shù)據(jù)庫使用MySQL，用于數(shù)據(jù)存儲和調(diào)用。前端頁面主要利用Vue.js進行搭建，通過此漸進式框架對前臺界面的展示。后端主要利用Django的MVT模式，對前端請求的數(shù)據(jù)進行與數(shù)據(jù)庫的對接并且響應。實現(xiàn)的功能包括：員工的管理，合同的管理，項目的創(chuàng)建與進行，辦公用品的統(tǒng)計，公共信息的通知等。關鍵詞：漸進式框架；無紙化；辦公管理系統(tǒng)；AbstractWiththerapiddevelopmentofnetworktechnology,manyenterpriseshaveturnedtopaperlessoffice.Thissystemsatisfiesthebasicofficeneedsofthecompanyandiseasytooperate.Thepaperlessofficemanagementsystemhasbecomethepreferredmethodofdailybusinessmanagementformanyenterprises.Therealizationofanofficemanagementsystemisthemaincontentofthisproject.ThissystemusesPycharmandVscodetoolsforprojectdevelopment.ThedatabaseusesMySQLfordatastorageandrecall.Thefront-endpageismainlybuiltusingVue.js,andthefront-endinterfaceisdisplayedthroughthisprogressiveframework.ThebackendmainlyusesDjango'sMVTmodetoconnectandrespondtothedatarequestedbythefrontendwiththedatabase.Therealizedfunctionsinclude:employeemanagement,contractmanagement,projectcreationandprogress,officesuppliesstatistics,publicinformationnotification,etc.Keywords:Progressiveframework;officemanagementsystem目錄第一章緒論 第一章緒論1.1研究動機與目的當前中國的快速發(fā)展，促使了多數(shù)人產(chǎn)生了創(chuàng)業(yè)的想法。根據(jù)中國新聞網(wǎng)的一篇關于浙江中小微企業(yè)的報告，2019年浙江中小微企業(yè)新增40.8萬。中國除了浙江，還有22個省份，這充分表明目前在中國每時每刻都有大量的中小微企業(yè)在生根發(fā)芽?？茖W管理技術成為了辦公自動化的主要憑據(jù)，計算機網(wǎng)絡與通信技術的廣泛使用，將傳統(tǒng)的企業(yè)工作面貌徹底改變，完成了對日常辦公的自動化，縮短了每個業(yè)務的周期，大幅度提升了辦公效率，減少辦公用品的使用，改進了辦公質(zhì)量【12】。在每個企業(yè)中都會存在著專屬于自身企業(yè)的辦公模式，不同的企業(yè)有著不同的方式來處理辦公事務與整理信息。在21世紀的網(wǎng)絡信息科技高速發(fā)展下，許多企業(yè)都拋棄了以往的傳統(tǒng)辦公模式，紛紛轉(zhuǎn)向于無紙化辦公管理系統(tǒng)，相比于傳統(tǒng)模式下，無紙化辦公大大節(jié)省了日常紙張的消耗，降低了企業(yè)辦公成本，讓信息在系統(tǒng)中更加準確無誤的傳輸?shù)街付ǖ膯T工或文檔里，使辦公過程中文件傳遞更加便捷，提高了各部門員工的工作質(zhì)量。在辦公中有緊急通知的時候，不再需要逐個部門或向逐個員工傳遞相關通知，可直接在系統(tǒng)中查詢。公司管理變得比傳統(tǒng)辦公模式下更加規(guī)范操作性，在更加規(guī)范對員工進行監(jiān)督和控制同時也節(jié)約了本無必要的人力物力資源,提高了各部門員工的工作效率。1.2設計思路此項目所對應的公司屬于新創(chuàng)建的公司，單位規(guī)模屬于初小型企業(yè)，經(jīng)過實用性與合適性的角度分析，并不需要完整的大而全企業(yè)管理系統(tǒng)，只需要建立適用于此初步建立的企業(yè)地辦公管理系統(tǒng)根據(jù)總結(jié)與統(tǒng)計公司辦公管理的需要，通過分析與整合，建立適用于此公司辦公的實際功能，根據(jù)此功能出發(fā)，因此建立人事管理，合同管理，行政管理，項目管理，公共信息管理主要功能應用。根據(jù)不同的員工崗位，給予與之相對應的管理權利，以便更為快捷的管理員工。本論文以基礎辦公系統(tǒng)為基準，利用Django與vue.js的相結(jié)合【9】，對小型企業(yè)管理系統(tǒng)進行了設計與開發(fā)，詳細說明開發(fā)與測試的整個過程。該系統(tǒng)的實現(xiàn)會促進并且提高公司的工作效率，改善辦公質(zhì)量，大大減少了對辦公用品的支出。在數(shù)據(jù)庫方面運用了MySQL數(shù)據(jù)庫【11】，可大程度地解決公司各方面的數(shù)據(jù)存儲與調(diào)用，也可以在將來或許出現(xiàn)安全性的問題時，能夠第一時間去處理解決出現(xiàn)的各種問題，方便超級管理者的使用與維護。對已完成實現(xiàn)的系統(tǒng)進行測試，查找系統(tǒng)中未被尋找到的bug或問題進而完善該系統(tǒng)的功能。1.3論文整體結(jié)構論文整體結(jié)構分為七個部分：第一章：緒言，對辦公管理系統(tǒng)進行了研究動機與目的的介紹；設計思路中簡單介紹了為何要開發(fā)此系統(tǒng)且功能線路。第二章：相關技術與文獻綜述，初步介紹本文中涉及的相關技術，尤其是開發(fā)關鍵技術與數(shù)據(jù)庫的配置技術，介紹了相關后臺的響應請求模式，并且對其關鍵技術進行了說明，對本系統(tǒng)成功開發(fā)起關鍵性的作用。第三章：系統(tǒng)總體設計，此章為論文的核心章節(jié)，對系統(tǒng)需求進行\(zhòng)o"闡述"闡述，分析本次項目所對應的系統(tǒng)功能性及非功能性需求，并\o"闡明"闡明本次系統(tǒng)開發(fā)所需要的數(shù)據(jù)庫。著重于對系統(tǒng)的總體架構設計，設計系統(tǒng)界面的樣式，系統(tǒng)功能模塊的設計，并且闡述模塊與模塊之間的關聯(lián)，且每個模塊所對應的數(shù)據(jù)庫設計等。第四章：辦公管理系統(tǒng)的實現(xiàn)與測試，此章節(jié)為第四章所設計的內(nèi)容進行實現(xiàn)測試，列出與之相關的開發(fā)配置文件，通過此測試確認是否達到預期的目標內(nèi)容，對不同操作系統(tǒng)或瀏覽器進行測試。第五章：對此次項目進行總結(jié)并表述未來展望。第六章：項目中所引用的文獻綜述。第二章相關技術與文獻綜述2.1MVT模式與MVC模式2.1.1MVT模式Django所使用的模式是MTV模式，即便其本身是遵循MVC模式【2-4】。視圖,模板,模型三個模塊構成MVT框架。兩個模式中的模型層功能一致，數(shù)據(jù)庫的封裝，進行與數(shù)據(jù)庫之間的交互，處理請求數(shù)據(jù)都在作用于模型層中；視圖層是MVC中的核心，進行數(shù)據(jù)的獲取，對模型層和視圖層返回的數(shù)據(jù)進行進一步的業(yè)務處理,對請求進行處理并且返回所對應的結(jié)果。與MVC模式的差別就在此。模板層（template）用于向用戶展示結(jié)果與內(nèi)容。除卻這三層之外，Django額外配置一個URL路徑分發(fā)器，將頁面的請求按照不同的url路徑分發(fā)給不同的Views層，再通過Views層里的函數(shù)調(diào)用與之匹配的模型層與模板層。MVT模式（如圖2-1）運行中，分為客戶端與服務端，兩者之間的請求與響應分為幾個步驟:圖2-1MVT模式（1）客戶端在瀏覽器發(fā)送數(shù)據(jù)表單請求（request）。（2）請求（request）會進入到URL路勁分發(fā)器，路勁分發(fā)器會根據(jù)請求上配置的url路徑分配到指定的views層。（3）views層接收到客戶端所發(fā)出的請求，進行相關的業(yè)務處理，并向model層發(fā)出數(shù)據(jù)請求。（4）model層收到views層發(fā)出的請求數(shù)據(jù)后，向所屬數(shù)據(jù)庫中提取到所需要的數(shù)據(jù)，model層內(nèi)嵌ORM框架。model層整理交互好數(shù)據(jù)后，就將數(shù)據(jù)返回給views層。（5）views層接收到model層的返回的數(shù)據(jù)后，再業(yè)務處理數(shù)據(jù)，最后向模板層（Template）傳輸數(shù)據(jù)。（6）模板層收到數(shù)據(jù)后，將所有數(shù)據(jù)渲染生成html界面并且返回給視圖層（views）。（7）視圖層接收返回的數(shù)據(jù)后并將所有數(shù)據(jù)返回HttpResponse。瀏覽器頁面展示最終響應結(jié)果。2.1.2MVC模式MVC（Model-View-Controller）模式【1】在20世紀70年代通過Smalltalk-80的GUI設計中提出。MVC分離數(shù)據(jù)處理，數(shù)據(jù)顯示和程序I/O控制。并且對對象之間通信方式的不同進行闡述,使它們不必卷入彼此的數(shù)據(jù)模型和方法中,使程序結(jié)構變得清晰而靈活。在MVC模式中，M代表model（模型），數(shù)據(jù)庫的封裝，進行與數(shù)據(jù)庫之間的交互，處理請求數(shù)據(jù)都在作用于模型層中；V表示view（視圖），為控制器傳遞過來的數(shù)據(jù)進行渲染并將渲染后的頁面返回控制器中；C表示controller（控制器），controller是MVC中的核心，進行數(shù)據(jù)的獲取，對模型層和視圖層返回的數(shù)據(jù)進行進一步的業(yè)務處理,對請求進行處理并且返回所對應的結(jié)果。處理解決各個模塊之前的關聯(lián)程度是MVC框架中最主要的核心思想【1】。在項目中使用MVC框架，將model層與view層，controller層實現(xiàn)代碼之間的分離，不再需要因為更改視圖層而修改模型層與控制層相關的代碼，降低每個功能模塊之間的耦合性。一個模型層能適用于多個不同的視圖得益于模型層與視圖層的分離，正因為兩者之間的分離從而能被不同的界面所使用。將視圖層與控制器分離，能便于工作人員的維護與修改，提高工作效率。MVC模式（如圖2-2）運行中，分為客戶端與服務端，兩者之間的請求與響應分為幾個步驟：圖2-2MVC模式（1）客戶端在瀏覽器發(fā)送數(shù)據(jù)表單請求（request）。（2）請求（request）會到達一個前端控制器，前端控制器根據(jù)請求上配置的所對應的控制器來將此請求分發(fā)到controller層中（3）controller層接收到前端控制器分發(fā)過來的請求后，向model層發(fā)出指定的數(shù)據(jù)請求并進行相對應的業(yè)務邏輯處理（4）model層收到controller層的指令后，會與數(shù)據(jù)庫交互，并從數(shù)據(jù)庫中提取與之相對應的數(shù)據(jù)，將交互得來的數(shù)據(jù)響應給controller層。（5）控制器（controller）接收到模型層（model）返回后的數(shù)據(jù)，由于此時的數(shù)據(jù)屬于原始數(shù)據(jù)，展現(xiàn)出來的數(shù)據(jù)并不清晰，所以控制器（controller）就會將數(shù)據(jù)傳遞到視圖層（view）。（6）視圖層（view）收到控制器（controller）返回的數(shù)據(jù)后，就會將這些原始數(shù)據(jù)填充到已經(jīng)寫好的html文件里的眾多數(shù)據(jù)坑。當填充好這些數(shù)據(jù)后就將渲染好的html返回到控制器（controller）中。（7）控制器把視圖層填充好的數(shù)據(jù)接收后，并將渲染好的html響應給客戶端，客戶端上就會顯示渲染后的html，或者是json,xml數(shù)據(jù)。2.2系統(tǒng)開發(fā)關鍵技術與開發(fā)環(huán)境2.2.1Django在2005年7月，一個基于MVC構造的Python定制框架在堪薩斯州誕生--Django，適用于高性能網(wǎng)站的快速搭建。從誕生開始，Django逐步擁有數(shù)以百萬計的用戶，并且每個用戶都會進行開源完整項目；Django是因為當時開發(fā)小組要對當?shù)氐男侣務军c進行維護，并且迎合記者或管理層的要求從而開發(fā)出來的網(wǎng)絡開發(fā)框架，節(jié)省了一部分的時間，并在新聞界中獲得好評。正因誕生于新聞界，獨特的管理后臺也誕生于此。不過在當時，也有部分人認為Django建立的目的是對在線報刊需求的處理而只適用于出版業(yè)中。Django框架遵循MVC設計【2-4】，但是Django更加關注于模型，視圖和模板簡稱（MVT），具體說來它具有以下特點：1.自帶后臺：正如上文所說，創(chuàng)建Django項目的同時會讓自動幫你新建一個后臺管理功能，admin文件中只需要幾行代碼，就能輕松控制數(shù)據(jù)。2.模板系統(tǒng)：遵循了MVC的設計同時又有自己獨特的一面，將以往的MVC架構變成MVT架構，模型視圖模板層的相互分離使業(yè)務與數(shù)據(jù)能夠分離操作，節(jié)省了將來可能需要更改代碼的時間。3.數(shù)據(jù)庫功能：由于MVT模式中，model層為Django提供了一個ORM功能，有了這個功能后，模型層的設計不再需要特定的數(shù)據(jù)庫，解決了以往面向?qū)ο蠛蛿?shù)據(jù)庫之間的不匹配現(xiàn)象，可以讓代碼直接訪問對象而不需要訪問數(shù)據(jù)庫表，因為model層已經(jīng)幫忙實現(xiàn)好一切的匹配，不需要再額外編寫SQL語句。4.URL路徑中使用正則匹配，將對應的信息傳遞到函數(shù)中。創(chuàng)建Django項目后目錄會有以下這幾個文件（如圖2-3）：圖2-3Django項目目錄從上往下看：App：App在項目中代表著各式各樣的功能組件，正如手機App與手機的關系，當需要使用某一個App的時候就會調(diào)用這App中的函數(shù)方法。創(chuàng)建App的方法：在manage.py中輸入startappApp名稱即可，當然了一個項目中肯定不止一個App，所以就要在項目的根目錄下創(chuàng)建一個新的文件夾apps，并將所需要的app組件放進去，重要的是要把這個apps文件夾設置為sourcesroot。App下文件：（1）migrations：記錄對模型層的改動并用于對數(shù)據(jù)庫遷移，產(chǎn)生你在模型層中所定義的數(shù)據(jù)庫表。（2）admin.py：這頁面就能生成與這App相對應的后臺管理頁面，可以對數(shù)據(jù)進行修改與編譯。（3）model.py：在這頁面里，可以編寫此App所應用到的數(shù)據(jù)庫表，模型層會通過ORM自動轉(zhuǎn)換SQL語句，不需要自行編寫SQL語句，這就是MVT模式的方便之處。（4）test.py：在這文件里，可以編寫所想要的測試來對此App進行測試是否出現(xiàn)問題。（5）urls.py：這文件在App應用中可有可無，因為即使不應用中設置url路徑，也能在項目目錄的urls中配置相對應的視圖層的路徑，在項目目錄配置App的路徑是必不可少的，在項目目錄配置后，一定要在項目目錄settings.py中的INSTALLED_APPS中設置App的名稱，如果缺少配置路徑與設置名稱，就不會出現(xiàn)這個App的數(shù)據(jù)頁面。（6）views.py：Django項目中最重要的一部分，視圖層里編寫方法，用于接收客戶端請求的數(shù)據(jù)并進行一系列規(guī)范的業(yè)務處理，最后返回相對應的數(shù)據(jù)或頁面。Project：project目錄就是根目錄下的Django目錄，往往創(chuàng)建新Django項目的時候就會自動生成一個與項目名稱相同的project目錄，Project目錄下分為多個py文件以至于構建一個基本的Django項目。Project下的文件：（1）__init__.py：通常情況下，如果要使用MySQL數(shù)據(jù)庫，就要在里面配置，將其文件定義為一個python的包。（2）settings.py：里面配置了許多基礎信息，能夠修改使用哪種數(shù)據(jù)庫，也能修改MVT中模板的指定文件夾或文件。（3）urls.py：作為項目里的URL路徑分發(fā)器，里面填寫了許多應用的路徑，當前端請求數(shù)據(jù)時，就能根據(jù)此文件，進入到不同應用中，并實現(xiàn)返回數(shù)據(jù)，展示內(nèi)容。（4）Templates：MVT模式中的T（模板層），用于接受視圖層請求的數(shù)據(jù)并且渲染與之相對應的頁面，最后返回給視圖層，并由視圖層將頁面返回給前端，最后展示頁面。2.2.2Vue.jsVue是當今前端主流三大框架之一【6-8】。編譯前端代碼時運用了MVVM模式【5】并且能運用多數(shù)組件。降低了更換框架的維護成本。剛公布出來的時候，以運行速率和輕量級獲得了大眾前端開發(fā)人員的喜愛。Vue是一套自底向上且創(chuàng)建于用戶界面的漸進式框架【7】。響應數(shù)據(jù)綁定與組件系統(tǒng)就是它的核心功能，通過簡單的API接口就能實現(xiàn)數(shù)據(jù)的雙向綁定。Vue利用了MVVM模式來進行對View和ViewModel雙向綁定【10】。View層與Model層能進行緊密的交互，正是因為ViewModel這個中間件的存在，能保證視圖與數(shù)據(jù)的統(tǒng)一性。MVVM模式的基本模式【5】：（如圖2-4）,同時MVVM模式還能降低DOM操作且沒有增加渲染的性能。圖2-4MVVM模式在Vue項目中，有兩種方法可以快速的運用開發(fā)vue項目:（1）可以在html文件上利用script標簽引用，可引用開發(fā)環(huán)境版本或者生產(chǎn)環(huán)境版本，根據(jù)不同的需要進行不同的引用，并且引用后可以在瀏覽器上直接使用vue的實例。（如圖2-5）圖中列出了MVVM每個層次所代表的部位圖2-5Html中MVVM中層次（2）可以創(chuàng)建一個基于webpack的vue開發(fā)項目,可以在項目里直接創(chuàng)建.vue文件，一個.vue文件代表一個組件。（如圖2-6）圖2-6基于webpack的Vue項目當然，各有各的優(yōu)點，利用script標簽引用直接編寫代碼，適用于初步學習者，官方文檔不推薦新手直接使用vue-cli，初步學習的時候，適用于第一種方法。當自身接觸的項目越來越多，且項目變得越來越大，項目變成中大型的同時，所需要的頁面也會增多，這樣繼續(xù)第一種方法的話，就會存在了代碼重復，浪費時間的問題，對后期的維護和代碼公用有著不好的發(fā)展。2.3MySQL數(shù)據(jù)庫MySQL創(chuàng)建于1995年。在發(fā)布后的幾年，發(fā)行了第一個關系型數(shù)據(jù)庫版本，提供了大量面向編程語言的API。在往后的一段時間里，性能高，可靠性強，成本低使MySQL成為了最深受開發(fā)人員喜愛的開源數(shù)據(jù)庫。MySQL充分利用處理器資源，支持多線程，并支持多個用戶?？上鄬τ谄渌拇笮蛿?shù)據(jù)庫相比，MySQL的功能和規(guī)模就沒有那么占優(yōu)勢，不過MySQL提供的功能對于個人或中小型企業(yè)卻是有著非常大的幫助【11】。MySQL在使用資源方面有著大量的伸縮性，可以正常運行在資源充足的環(huán)境下，也可正常運行在資源少量的情況下【11】。MySQL能擁有這么大批用戶的，是因為它有著幾個特點：（1）在運動C和C++編譯的同時也運用了多種編譯器進行測試，確保了往后可移植源代碼。（2）充分利用處理器資源，在支持眾多用戶的同時也支持多線程。（3）對SQL查詢算法經(jīng)行了改善，大大提高了查詢速率。2.4本章小結(jié)在本章節(jié)中闡述了此論文中開發(fā)設計到的相關技術，包括MVT模式，Django，Vue和MySQL數(shù)據(jù)庫的相關簡介。以起到為本次研究分析設計實現(xiàn)奠定了基礎。第三章系統(tǒng)分析與設計3.1系統(tǒng)功能性需求分析3.1.1功能性分析依照對研究對象的初步了解與分析，其公司的系統(tǒng)所具備項目，人事，合同，行政與公共通知等功能，在需要這些功能的同時也需要具備一個登錄模塊，以防止不是本司的人員對此系統(tǒng)進行破壞或者竊取重要文件。（如圖3-1）圖3-1管理系統(tǒng)功能模塊登錄模塊：在網(wǎng)站的首頁設置為登錄界面，通過輸入賬號密碼驗證是否工作于本公司的人員，如果不是，就禁止訪問。人事模塊：人事管理能根據(jù)對員工的辭職進行在員工表中刪除和增加新入職的員工的個人信息，也能通過著頁面及時修改員工個人信息的變化。合同模塊：主要是上傳員工與公司的之間的合同文件或者合同信息。行政模塊：能對辦公用品的統(tǒng)計與添加刪除修改，能夠讓員工查看當前辦公用品的剩余存量，以便及時補充存量。公共模塊：遵循系統(tǒng)設計的公告發(fā)表規(guī)則，能夠及時地更新每日的通告和緊急通知，對信息進行適當?shù)木S護與更新。在頒布通知的同時，記錄頒布者的記錄。項目模塊：在此模塊里，可以創(chuàng)建新的項目；查看已經(jīng)完成或者過期的項目，也能對項目進行查看每個人的周報，項目運行過程中產(chǎn)生的問題，項目負責人分配的任務情況。3.1.2用戶功能性在本系統(tǒng)里，將用戶區(qū)分為普通員工與領導者，項目負責人三種類型。普通員工能夠查詢修改自己的個人信息，允許員工在合同模塊下載與查看所有合同，但是無權修改或者自行增加合同內(nèi)容。為了方便辦公室的維護，員工被允許添加辦公用品的貨量信息，也能查看每日餐飲和公共通知。在項目業(yè)務里，可以申請參加指定項目，項目確定后，能參與其中的任務，編寫周報中，也能及時添加在項目運行中遇到的問題，讓其他用戶進行幫忙解決問題。項目完成后，能夠下載項目過程中上傳的文檔。領導者擁有的權限比普通員工多，可以在人事模塊根據(jù)對員工的辭職進行在員工表中刪除和增加新入職的員工的個人信息。對于每個員工的考勤或請假申請有著審批的功能，能對系統(tǒng)中所有功能的內(nèi)容數(shù)據(jù)進行修改，刪除，增加。項目負責人在項目里，能夠添加刪除成員，修改項目的業(yè)務處理，也有權修改與自身相符合的項目的完成狀態(tài)。3.2系統(tǒng)非功能需求分析辦公系統(tǒng)開發(fā)中，既需要滿足技術上的需求功能，也要在系統(tǒng)的非功能性作出一系列的設計。這樣不僅能提高日常工作地辦公效率，也能方便系統(tǒng)的維護與完善。（1）實際應用性：滿足辦公系統(tǒng)的性能首先應有實際應用性，根據(jù)項目合同人員的不同，進行著不同的操作。同時在開發(fā)中應該設計間便容易的操作界面，使工作人員能夠輕易的駕馭此系統(tǒng)（2）權限控制：系統(tǒng)將不同用戶采取不同的權限控制，不僅能讓系統(tǒng)容易辨識身份，也能防止部分重要的文件被惡意修改刪除，即便發(fā)生了也能快速找到是哪個用戶操作的。（3）易維護：維護人員可以在后臺中維護，不影響工作人員日常辦公。（4）環(huán)境需求：可在多種操作系統(tǒng)中運行此系統(tǒng)，只要環(huán)境配置符合，就會系統(tǒng)兼容，不影響工作。（5）環(huán)境配置：本次系統(tǒng)使用了Vue.js與Django進行開發(fā)。Vue所需的瀏覽器系統(tǒng)版本環(huán)境如表3-2所示：

表3-2Vue.js環(huán)境配置表Vue.js環(huán)境配置系統(tǒng)語言版本兼容瀏覽器瀏覽器版本Vue.js2.X版本IE10版本，11版本MicrosoftEdge12版本以上FireForx21版本以上Chrome23版本以上Safari6.1版本以上Opera15版本以上在2.X版本中的Vue.js中，由于其使用了IE8無法模擬的ECMASCript5特性導致無法支持IE8和IE8以下版本。在配置的時候，需要注意所下載的版本。Django所配置的版本與環(huán)境如表3-3所示：表3-3Django環(huán)境配置表Django的環(huán)境配置系統(tǒng)語言版本基于python版本適用的操作系統(tǒng)Django3.43.5OSXLinuxWindows本次使用低版本Django，由于本機所安裝的python版本為3.8，如果直接運行Django的話會出現(xiàn)報錯，需要在當前虛擬環(huán)境的Django目錄下尋找base.py進行相對應的配置。3.3數(shù)據(jù)庫需求分析經(jīng)過實際的考察與分析，本系統(tǒng)采用MySQL數(shù)據(jù)庫作為數(shù)據(jù)的存儲與調(diào)用，利用Navicat對數(shù)據(jù)庫進行管理。這兩個工具都是快速，便宜且可靠，符合這次項目對應的公司企業(yè)。首先根據(jù)上文分析的功能來決定所需要的數(shù)據(jù)庫表：第一：從登錄與人事模塊來看，數(shù)據(jù)庫中需要保存用戶的基本個人信息與登錄密碼，因此需要用戶的用戶名密碼表和個人信息表。第二：公司有這員工的同時，也會有著員工需要請假或者考勤的情況，因此需要在數(shù)據(jù)庫中增加員工的考勤表和請假申請表。第三：從合同的模塊來看，數(shù)據(jù)庫中需要保存與合同相關的信息，因此需要一個合同信息表。第四：在公共模塊中，要創(chuàng)建新的通知或者餐飲消息，就需要一個關于信息的數(shù)據(jù)表。第五：根據(jù)項目管理的正常流程來說，分為創(chuàng)建項目，審批項目，審批項目過后，項目就應該存在項目中遇到的問題，負責人發(fā)表的任務，項目相關文檔，且每個項目成員的周報，因此需要建立項目表，項目申請表，項目成員表，項目的任務表，任務成員表，任務進度匯報，周報表，項目問題表，項目相關文檔表。第六：根據(jù)上述說的行政需求分析，需要建立辦公用品表。最后，每個用戶都有不同的分級與權限，因此需要創(chuàng)建一個角色權限分級表。3.4系統(tǒng)總體架構設計在辦公企業(yè)管理系統(tǒng)中，系統(tǒng)總體架構設計是核心部分，能很清晰的辨識到整個辦公系統(tǒng)的整體架構。通過上文對整個系統(tǒng)的詳細需求分析，本次辦公管理系統(tǒng)由人事管理，項目管理，行政管理，公共通知管理等幾大模塊組成。每個模塊也包含了屬于自己的子模塊在這次項目中，使用了Django框架，也運用了其特有的MVT設計：瀏覽器發(fā)送請求-通過請求中間件進入正則URL路徑-匹配合適的視圖中間件再通過視圖中間件進入到指定視圖中-視圖接收請求進行業(yè)務處理同時向數(shù)據(jù)層請求指定數(shù)據(jù)-數(shù)據(jù)層收到請求訪問數(shù)據(jù)庫數(shù)據(jù)最后返回給視圖層-視圖層將接收到的數(shù)據(jù)業(yè)務處理后將數(shù)據(jù)傳入模板層-模板層收到數(shù)據(jù)并對html文件進行渲染再返回給視圖-最后視圖將渲染好的頁面通過響應中間件返回給瀏覽器。3.5系統(tǒng)界面設計本次項目是以Vue.js框架來取代Django框架的MVT模式中的模型層，放棄了Django自帶較為羸弱模板。由于Vue.js的學習成本較低，且其在模板中能夠方便快捷的操作DOM，組件引用十分廣泛且容易使用，在操作單頁面的程度來說，使用Vue是一個很好的選擇。把頁面分為兩種，一種是登錄界面，一種是登錄成功后重定向的頁面（管理系統(tǒng)的主頁）。登錄界面就擁有一個賬號密碼輸入框，下方還有著一個登錄按鈕，形成了一個表單。當輸入賬號密碼后，點擊按鈕，瀏覽器就會將表單提交到后端，后端進行驗證處理，隨后根據(jù)密碼正確錯誤決定響應哪些內(nèi)容。文字下面顯示該界面的模板設計圖（圖3-4）。圖3-4登錄界面設計進入主頁后，在瀏覽器頁面的左邊，就顯示每個功能的路由跳轉(zhuǎn)鏈接，能跳轉(zhuǎn)到指定功能的頁面。右邊就會顯示相關內(nèi)容，主頁的頭部右邊角落，就會顯示當前登錄的用戶是誰。文字下面顯示該界面的模板設計圖（圖3-5）。圖3-5進入系統(tǒng)后的頁面設計3.6系統(tǒng)功能模塊設計3.6.1用戶的權限設計本次項目中如上文功能性分析需求中所說，設置了用戶之間的權限控制，分為了領導層，員工層與項目負責人層。通過權限控制進行對管理系統(tǒng)的日常操作與管理。

具體核心代碼如下:===========================代碼開始==========================definit():

role=Roles.objects.all()

ifnotrole:

role=Roles(role="manager")

role.save()

role=Roles(role="staff")

role.save()

user=User.objects.filter(username='admin')

ifnotuser:

role=Roles.objects.get(role="manager")

user=User(username="admin",password=md5_encode("admin"),role=role)

user.save()===========================代碼結(jié)束==========================當新打開遷移數(shù)據(jù)庫的時候，判斷是否有賬號在此里面，如果沒有，就需要創(chuàng)建一個領導級的賬號，以便后期進入系統(tǒng)中能夠正常運行。3.6.2登錄驗證頁面模塊設計登錄頁面是本系統(tǒng)中最為重要的一部分。對每個有登錄進系統(tǒng)的用戶有著嚴格的把關與控制，通常情況下只允許本公司的工作人員進入此系統(tǒng)內(nèi)。當瀏覽器進入到登錄頁面時，會讓登陸者輸入屬于自己的賬號與密碼，點擊登錄的按鈕，瀏覽器會將數(shù)據(jù)表單提交到后端服務端中，服務端接收過來的請求收取數(shù)據(jù)后，會根據(jù)前端js部分寫好的url設置與后端指定的視圖層接口進行拼接。本系統(tǒng)將登錄相關的視圖層寫在了應用中的用戶應用。當視圖層接收到請求后，對此賬號密碼進行驗證。通過對密碼進行MD5的加密驗證后，視圖層會將最終結(jié)果返回給瀏覽器（客戶端），如果登錄驗證成功，就會生成一個2周的緩存session，并返回cookie給瀏覽器。當要退出賬號的時候，就會刪除這個session，再想進入系統(tǒng)訪問本賬戶的信息時就需要重新進行登錄驗證了。（如圖3-6）圖3-6登錄驗證頁面流程設計3.6.3人事頁面管理模塊設計根據(jù)上文需求分析。人事頁面分為兩個不同權限的展示頁面，如果登錄用戶為員工，則無法瀏覽器頁面，即便打開人事管理頁面，也會顯示并無權限，只有領導層給予他升職的之后的權限，才能允許查看此頁面的信息。（如圖3-7）圖3-7角色權限查看人事頁面領導層則可以在此頁面進行對人員的增加刪除以及更改指定用戶的權限，不過同為管理層的人則無法修改管理層的人。當有新員工進入公司后，領導層就會創(chuàng)建一個初始密碼與名字的賬號給新員工，此處增加了員工賬號的重名規(guī)則，不允許擁有相同的賬號（如圖3-8）。圖3-8添加新用戶流程當新員工拿到了賬號登陸后，可以在右上角的角色欄進行對本人賬號的個人信息修改，也可以對密碼進行修改，視圖層則會將新修改的密碼進行md5加密，存入數(shù)據(jù)庫中。此處也設置了手機號碼無法與他人相同的限制。（如圖3-9）圖3-9修改信息流程3.6.4合同頁面管理模塊設計在合同模塊里，也一樣的分為領導頁與用戶頁不同的顯示（圖3-10）。圖3-10合同頁面下的角色權限顯示領導層能夠增加指定員工與公司之間的合同，或者其為代表的與外界公司合作的合同，合同分為標題內(nèi)容與上傳文件，文件屬于附件，屬于可上傳可不上傳，暫時支持上傳pdf格式，并對非pdf格式的文件進行了提示，最大上傳容量為10Mb。普通員工只能看到自己相關的合同，能對此合同進行下載附件，卻沒有修改的權限。頁面的右上角，具有一個通過合同標題進行搜索的搜索框，能夠查詢指定標題的合同并進行查看或者修改（添加合同流程如圖3-11）。圖3-11合同的添加流程3.6.5行政頁面管理模塊設計在此模塊中，普通用戶擁有一個增加，修改辦公用品的權限，但卻無法擁有刪除的權限。防止個別員工惡意篡改數(shù)據(jù)。管理層擁有著對辦公用品的修改增加刪除權限，并且對不同種類的辦公用品進行分類。右上角一個搜索框，通過用品的關鍵詞名稱來進行搜索查找。3.6.6項目頁面管理模塊設計在項目管理模塊中，分為全部項目，項目審核，人員申請審核，項目中的任務管理，周報管理與文檔管理。在此模塊中，也同樣的設定了用戶之間的權限設置。只允許領導層的人創(chuàng)建項目，在創(chuàng)建項目的時候，能夠指定本項目的項目負責人，給予其一定的權利，添加本項目的項目名稱，項目內(nèi)容，必要時可上傳此項目的創(chuàng)建文檔（只限于pdf），可以設定項目組成員，也可以等項目審核通過的時候，再由員工來決定是否申請參加此項目的開發(fā)中。創(chuàng)建項目之后，會通過一個審核的過程，領導層的人通過審核，使此項目是否能繼續(xù)進行開發(fā)，在審核的過程中，員工不能向這項目進行申請進組的權利，需要此項目通過審核后，方能申請進入項目。員工申請參加項目開發(fā)后，項目負責人或者領導階級的人員能通過項目申請頁面進行對申請人員的確認或拒絕。如果某個員工被拒絕后，允許再一次發(fā)出申請；項目負責人也可以通過全部項目頁面中進行編輯，自行添加自己所需要的人員，被添加到的人員無法拒絕也無權限不參加此項目。項目的開發(fā)過程中，提供了項目的任務界面，周報頁面，問題頁面與文檔頁面。項目負責人可以通過任務界面，指定任務負責人添加任務組成員并發(fā)表任務，讓任務組進行處理解決。任務狀態(tài)分為一般與緊急，并且成員需要提交完成情況，負責人對任務進行每個人的任務情況審核并根據(jù)完成情況調(diào)整顯示任務進度。在項目進行的過程中，每個人每周都需要提交一篇關于這次項目的周報，一周只能提交一次，重復提交會提示”本周已經(jīng)提交“。員工只能查看到自己的周報，項目負責人與項目創(chuàng)建人則可以查看該項目中所有成員所提交的周報，如果對某員工的周報不滿意就對此進行刪除，員工能再一次提交周報。員工還能查看所參加過的項目中提交的所有周報。項目開發(fā)過程中難免會遇到某些問題，問題頁面就能提交所遇到的問題，讓項目組里的其他成員進行查看，并對其進行實施解決，當解決過后，就更新已解決狀態(tài)。文檔頁面提供了上傳與此項目相關的文檔或者遇到的bug文檔日志等。在項目結(jié)束后，以上項目任務，項目文檔，項目周報的增加、修改、刪除不能使用。當想刪除某個項目時，所對應的周報，問題，任務和文檔，也會一一的刪除。項目的基本流程圖如下圖3-12：圖3-12項目管理基本流程3.6.7公共信息頁面管理模塊設計由上章節(jié)項目需求分析中得知，公共信息管理頁面分為了3個種類，緊急通知，放假通知與每日餐飲通知。在此模塊中也應分為用戶權限控制，防止員工惡意發(fā)布與實際不符的信息，導致進一步的執(zhí)行錯誤。領導級可以通過此公布各種信息，也可以對此信息進行修改刪除。3.7數(shù)據(jù)庫設計本次項目中，總共生成了17張數(shù)據(jù)庫的表，由于創(chuàng)建的數(shù)據(jù)表眾多，在這里只展示其中較為重要的幾張表如：權限表如表3-13所示：表3-13權限表權限表（tb_roles）字段名注釋類型長度是否為null主鍵id自增長序號int0否√role權限等級Varchar20否權限表作用于存儲辦公系統(tǒng)中權限等級。在全部用戶中，不同的用戶擁有著不同的權限。在用戶通過登錄頁面驗證登錄的時候，后臺就已經(jīng)分辨出此次登錄的用戶的具體權限，并將在往后的頁面操作時給予不同的操作頁面。用戶表如表3-14所示：表3-14用戶表用戶表（tb_user）字段名注釋類型長度是否為null主鍵id自增長序號int0否√username用戶名varchar20否password密碼varchar128否age年齡int0是email郵箱varchar50是tel電話號碼Varchar20是role_id權限等級關聯(lián)int0否用戶表用于存放全部員工的賬號密碼以及個人信息，密碼由MD5加密，當前臺登錄的時候，瀏覽器通過接口提交表單數(shù)據(jù)與后臺相對接，后臺接收到數(shù)據(jù)后會根據(jù)視圖中已經(jīng)寫好的方法進行與數(shù)據(jù)庫交互數(shù)據(jù)并且驗證是否正確方能登錄。個人信息可通過編輯的個人信息頁面進行修改，并更新數(shù)據(jù)庫表中的數(shù)據(jù)。辦公用品表如表3-15所示：表3-15辦公用品表辦公用品表（tb_supplement）字段名注釋類型長度小數(shù)點是否為null主鍵id自增長序號int00否√type種類varchar200否name用品名稱varchar200否quantity數(shù)量int00否price價格decimal102否Username_id上傳用戶int00否辦公用品表用于存儲不同用品種類的數(shù)量與價格，前臺普通用戶可通過窗口修改添加數(shù)據(jù)進數(shù)據(jù)表中，領導則可以對整個辦公用品表里的數(shù)據(jù)進行刪除修改添加。每個用戶添加用品的時候數(shù)據(jù)表也會與用戶表對應，記錄誰上傳了某個用品。登錄驗證所需要用到的session表如表3-16所示：表3-16Django的session表session表（django_session）字段名注釋類型長度是否為null主鍵session_key鍵varchar40否√session_data數(shù)據(jù)longtext0否expire_date時間datetime6否session表在生成遷移表的時候會自動生成此表，無須特意增加。每個用戶在登錄的同時都會生成屬于自己的session數(shù)據(jù)，用于下次登陸時候能直接進入系統(tǒng)首頁，無需再次登錄，但這session數(shù)據(jù)設置了保存時間為兩周。兩周過后，再次進入系統(tǒng)首頁就需要輸入賬號密碼進行驗證。

合同表如表3-17所示：表3-17合同表合同表（tb_contract）字段注釋類型長度是否為null主鍵id序號int0否√uploader上傳者varchar50否contract_title合同標題varchar50否contract_content內(nèi)容longtext0是contract_file文件varchar50是save_name文件名字varchar50是owner_id專屬者int0否合同表存儲了整個系統(tǒng)中的所有合同數(shù)據(jù)，上傳合同的時候可以選擇文件的上傳或不上傳。上傳文件后，合同相關的方法會調(diào)用數(shù)據(jù)庫，將此文件名字與生成保存名字存進合同表中，并將此文件存放于uploads目錄中，以便將來可通過下載獲得相應的文件。通知信息表如表3-18所示：表3-18通知信息表通知信息表（tb_public）字段名注釋類型長度是否為null主鍵id序號int0否√notice_title信息標題varchar100否notice_content信息內(nèi)容longtext0否notice_type_id所屬種類int0否通知信息表是公共信息頁面的一個重要數(shù)據(jù)表，此表保存了所有關于此頁面的信息內(nèi)容，通過此表頁面可以使用ajax向后臺發(fā)起請求，后臺會根據(jù)視圖層的方法調(diào)用數(shù)據(jù)庫表中的信息，并響應給前臺。

項目模塊中的項目表如表3-19所示：表3-19項目表項目表（tb_project）字段名注釋類型長度是否為null主鍵id序號int0否√creator創(chuàng)建者varchar50否project_name項目名稱varchar50否create_date創(chuàng)建時間datetime6否project_state狀態(tài)varchar20否project_manager_id項目負責人int0否項目表為項目管理頁面的重要部分，其與用戶表為多對一的關系，并且與下列的項目文檔表，周報表有著關鍵的聯(lián)系。此表中保存了每個項目的基本信息，能夠及時在頁面中展示項目表中的所有數(shù)據(jù)。項目模塊中的文檔表如表3-20所示：表3-20所屬項目文檔表項目文檔表（tb_project_document）字段名注釋類型長度是否為null主鍵id序號int0否√upload_date上傳時間datetime6否document_name文件名字varchar50否save_name保存名字varchar128否project_id_id所屬項目int0否uploader_id上傳者int0否此表保存了項目中所上傳的文檔文件。用戶可通過瀏覽器對后臺的訪問此表中數(shù)據(jù)，對指定的項目文檔進行上傳或者下載，調(diào)用此數(shù)據(jù)表還特定的調(diào)用了權限控制，不是與項目相對應的小組成員或領導者，無法上傳關于此項目的文檔。數(shù)據(jù)保存于數(shù)據(jù)庫的同時，會將上傳的附件名字隨機字符串重命名，防止某些用戶通過數(shù)據(jù)庫表單的數(shù)據(jù)找到相應的文件名字，從而惡意修改數(shù)據(jù)。此文檔表與項目表呈多對一的關系。

項目模塊中的周報表如表3-21所示：表3-21所屬項目周報表項目周報表（tb_project_weekreport）字段名注釋類型長度是否為null主鍵id序號int0否√report_date上傳時間datetime6否info周報內(nèi)容longtext0否project_id_id所屬項目int0否reporter_id上傳者int0否此表為周報表，記錄了每個項目中的項目成員所提交的周報，同時也會呈現(xiàn)該成員所參加過的項目發(fā)表的周報，項目負責人可通過此表查看每個成員的周報，如果對此周報不滿意，可進行刪除。周報設置了上傳次數(shù)，通過周報表的上傳時間一周內(nèi)上傳了周報后，除非被項目負責人刪除，否則無法再次上傳周報。3.8本章小結(jié)本章節(jié)對系統(tǒng)進行了功能性與非功能性需求分析，介紹了管理系統(tǒng)中的各個功能的設計，明確了每個模塊的工作流程。分別闡述了員工與領導層的在管理系統(tǒng)中所能使用的不同權利。最后介紹了所需要的數(shù)據(jù)庫表。第四章系統(tǒng)實現(xiàn)、測試及維護4.1辦公管理系統(tǒng)的實現(xiàn)通過第四章講述了對系統(tǒng)的總體界面與每個功能模塊的設計基礎上，第五章詳細的展示上一章所介紹的各個功能模塊的實現(xiàn)的方法與測試界面。4.1.1登錄驗證頁面系統(tǒng)實現(xiàn)前端：在已經(jīng)實例的Vue中，編寫一個名為登錄的方法。利用了ajax的基本流程，對服務端發(fā)出了POST請求，將表單中的賬號與密碼作為傳輸?shù)臄?shù)據(jù)，并在最后success方法中進行判斷，如果數(shù)據(jù)不成功，就返回錯誤；如果成功，就往系統(tǒng)的主頁面進行跳轉(zhuǎn)。后端：對前端接收的數(shù)據(jù)請求進行對應的分析，與數(shù)據(jù)庫中的賬號密碼進行對比驗證，并通過用md5加密的密碼進行驗證。最后將驗證結(jié)果返回給前端。在后端中，此頁面所使用的方法：md5_encode，login_check，check_pwd。4.1.2人事管理頁面系統(tǒng)實現(xiàn)前端：在實例的Vue中，編寫了對用戶信息操作的增刪改查方法，并增加了獲取權限的方法。前端瀏覽器通過ajax的post請求指定的url。后端：\o"應用"應用了get_users方法對人事頁面的全部信息展示并且分頁；\o"應用"應用了get_roles來獲取當前session用戶的權限控制展示內(nèi)容；\o"應用"應用delete_user方法對所有用戶進行刪除；\o"應用"應用了add_user，checkUsername兩個方法進行對用戶的添加功能；\o"應用"應用update_user_role方法對用戶的更改權限功能；應用get_search_users方法對用戶進行搜索。4.1.3合同管理頁面系統(tǒng)實現(xiàn)前端：在實例的Vue中，編寫了對合同信息操作的增刪改查方法，并增加了獲取權限的方法。前端瀏覽器通過ajax的post請求指定的url。后端：應用了get_contracts方法對數(shù)據(jù)庫中合同的信息全部展示并且分頁；\o"應用"應用了get_users方法對添加合同所屬人按鈕展示前20個用戶的名字；根據(jù)通過應用了add_contract方法對合同進行增加；應用了delete_contract方法對指定合同進行了刪除的選項；應用了get_contracts方法進行對指定標題的合同進行搜索。上傳附件通過uploads方法將文件添加進數(shù)據(jù)庫中并移動到指定的filedir中。如需下載，則通過downloads方法將文件下載到本地中。4.1.4行政管理頁面系統(tǒng)實現(xiàn)前端：在實例的Vue中，編寫了對行政辦公用品操作的增刪改查方法，并增加了獲取權限的方法。前端瀏覽器通過ajax的post請求指定的url。后端：應用了get_supplement方法獲取數(shù)據(jù)庫中辦公用品的全部數(shù)據(jù)并且對此進行分頁；應用add_supplement方法對新的辦公用品數(shù)據(jù)進行添加到數(shù)據(jù)庫，以便在獲取數(shù)據(jù)方法中提取數(shù)據(jù)；應用update_supplement方法對辦公用品進行編輯更新修改。應用了delete_supplement方法對辦公用品進行刪除并刪除數(shù)據(jù)庫中相關的數(shù)據(jù)；調(diào)用search_supplement方法對辦公用品名字進行指定搜索。4.1.5項目管理頁面系統(tǒng)實現(xiàn)前端：在實例的Vue中，編寫了對項目操作的增刪改查方法，并增加了獲取權限的方法。前端瀏覽器通過ajax的post請求指定的url，其中全部項目頁面指定的url為project_page，項目審核頁面指定的url為project_check_page，項目申請頁面指定的url為project_apply_page，任務頁面指定的url為task_page，周報頁面指定的url為weekreport_page，問題頁面指定的url為question_page，文檔管理頁面指定的url為document_page。后端：在全部項目頁面中，調(diào)用了get_project,add_project,delete_project,update_project,get_projects方法獲取全部項目相關的增刪改查并且修改狀態(tài)；調(diào)用了get_users方法進行權限用戶不同展示頁面；調(diào)用apply_project方法使用戶擁有申請進入項目的權限。在項目審核頁面中，調(diào)用getProjectApply方法獲取未審核的項目并進行編輯；調(diào)用update_apply方法審批創(chuàng)建的項目。在項目申請頁面中，調(diào)用get_project_apply方法獲取申請進入項目中的員工；調(diào)用update_apply方法對申請者進行審批進項目；調(diào)用get_project_apply方法對項目名稱進行搜索。任務管理頁面，調(diào)用了get_tasks方法獲取全部任務；調(diào)用了get_project_names方法獲取所在的所有項目，根據(jù)項目選任務；調(diào)用了get_project_members方法為項目添加任務；調(diào)用了add_task方法添加項目任務；調(diào)用了update_task方法進行任務中的狀態(tài)改變；調(diào)用了get_task_by_name對任務指定名稱進行搜索。在周報管理中，調(diào)用了get_weekreports，add_weekreport，delete_weekreport三個方法對周報進行了查看，增加刪除功能。在問題管理頁面中，調(diào)用了get_questions方法，add_question方法，answer_question方法，delete_question方法對本次項目中問題的增刪改查功能；調(diào)用了get_questions對問題的指定名稱進行搜索。在文檔頁面中，調(diào)用了get_documents，add_document，get_documents，delete_document四個方法對項目中的文檔進行增刪改查，調(diào)用了downloads，uploads兩個方法，對文檔的文件進行上傳和刪除。4.1.6公共信息管理頁面系統(tǒng)實現(xiàn)前端：在實例的Vue中，編寫了對公共信息操作的增刪改查方法，并增加了獲取權限的方法。前端瀏覽器通過ajax的post請求指定的url。后端：調(diào)用了get_public方法獲取了所有信息的數(shù)據(jù)；調(diào)用了get_notice_types方法獲取信息種類的數(shù)據(jù)；調(diào)用add_public方法對信息進行增加；根據(jù)要求調(diào)用了delete_public方法對各種信息進行刪除。4.2系統(tǒng)測試4.2.1測試環(huán)境本次開發(fā)過程中，在win10系統(tǒng)的筆記本。上使用基于python3.8.2下的虛擬環(huán)境。虛擬環(huán)境的配置如下（圖4-1）：圖4-1虛擬環(huán)境的配置文件執(zhí)行django項目的基本數(shù)據(jù)庫生成與遷移，并且執(zhí)行運行命令，如果出現(xiàn)了找不到MySQL這一命令，就需要在Django根目錄與根目錄相同的名字中的_init_.py中配置相關的pyMySQL命令，此外仍需在虛擬環(huán)境中安裝PyMySQL。前端使用的環(huán)境配置是vue.js（開發(fā)版本），可以從網(wǎng)上引用或者下載相關文件并且引用。引用的方法是使用<script>標簽。由于此項目使用的是html式引用vue，所以如果使用webpack的vue-cli會出現(xiàn)報錯的問題。其Vue.js的引用核心代碼為：===========================代碼開始==========================<script

type="application/javascript"

src="/npm/vue/dist/vue.js"></script>===========================代碼結(jié)束==========================4.2.2測試過程（1）執(zhí)行項目后，根據(jù)其指定的地址進入到登錄頁面。在登錄頁面中輸入賬號與密碼，前端將表單通過ajax進入到后端的login_check方法中(圖4-2)。圖4-2登陸頁面輸入賬號密碼測試在此視圖里，后端會通過前端的POST請求進行數(shù)據(jù)業(yè)務處理，并與數(shù)據(jù)庫里的賬號數(shù)據(jù)驗證，如果正確就返回一個cookie值給瀏覽器，并且進入系統(tǒng)主頁(圖4-3)；否則顯示密碼錯誤,此處將用戶的考勤頁面設置為系統(tǒng)首頁。圖4-3登錄驗證成功后的頁面測試（2）成功登錄后，首先需要給系統(tǒng)中添加3個員工與3個領導并給予其初始密碼，前端將添加用戶的表單通過ajax傳遞給后端，后端接收到請求后，在add_user視圖中定義的方法創(chuàng)建用戶并且存入數(shù)據(jù)庫。當這6個用戶得到對應的賬號密碼后，可以在右上角點擊按鈕進行對自己的信息進行修改（除了用戶名，權限），進行修改密碼操作，前端方法會通過ajax進入后端引用password_check方法并且對密碼的正確與新密碼2次輸入是否相同進行判斷（添加用戶后的頁面數(shù)據(jù)和數(shù)據(jù)庫數(shù)據(jù)如圖4-4和圖4-5）。圖4-4添加修改用戶信息頁面測試圖4-5添加修改用戶信息數(shù)據(jù)庫測試（3）登錄后的頁面首頁是考勤，提醒員工每天進入系統(tǒng)就必須要考勤?？记谕ㄟ^check_attend方法查看今天是否已考勤，當這個方法調(diào)用成功后，就允許添加考勤內(nèi)容。在get_atten的方法中，設置領導與員工查看考勤的不同內(nèi)容，領導可以查看到今天所有人員是否考勤，員工只能查看自己的考勤內(nèi)容。（如圖4-6）圖4-6考勤頁面測試進入到請假頁面，員工根據(jù)自身情況進行請假的申請，再通過領導層的審批決定是否請假，如果領導層的審批為拒絕的時候，會實時顯示在員工的頁面上，員工可通過添加按鈕，進行再一次的申請請假。一旦審核完成，就無法再次修改審核結(jié)果，只能刪除此條申請。（如圖4-7）。圖5-7請假申請審批測試（4）進入合同頁面后，添加每個用戶相關的合同與用戶之間的對外界合作公司的合同，上傳附件通過uploads方法將文件添加進數(shù)據(jù)庫中并移動到指定的filedir中。如需下載，則通過downloads方法將文件下載到本地中（如圖4-8）。圖4-8合同管理頁面測試（5）公共信息管理頁面通過ajax進入后端視圖調(diào)用指定的方法，并將此數(shù)據(jù)渲染頁面。這次測試中，向每日餐飲，新聞通知與放假通知各添加3條數(shù)據(jù)進行測試是否能正常展示于頁面中并在數(shù)據(jù)庫中查看是否存在數(shù)據(jù)。添加后的頁面數(shù)據(jù)與數(shù)據(jù)庫表數(shù)據(jù)如下圖（如圖4-9和4-10）：圖4-9公共信息測試頁面圖4-10公共信息數(shù)據(jù)庫測試（6）行政管理頁面通過ajax進入后端視圖調(diào)用指定的方法，并將此數(shù)據(jù)渲染頁面。此頁面里，所有成員都可以往此頁面添加數(shù)據(jù)，不過只有領導層的人員才能對此數(shù)據(jù)進行刪除，員工只能編輯修改數(shù)據(jù)或添加數(shù)據(jù)。當數(shù)據(jù)超過9條的時候，系統(tǒng)會自動生成分頁，使頁面顯示變得整潔，不需要展示全部信息。添加后的數(shù)據(jù)如下圖（如圖4-11）：圖4-11行政管理頁面測試（7）項目管理頁面根據(jù)3.3.6的流程，通過ajax進行一系列的調(diào)用方法，將所有數(shù)據(jù)渲染頁面并返回給客戶端。添加后的數(shù)據(jù)如下圖:

全部項目中，能查看本系統(tǒng)不同狀態(tài)中的項目，通過領導層，能對這些項目進行狀態(tài)管理，或者提前將此項目刪除。而員工則可通過此頁面，對自己感興趣的項目進行申請，等待領導的審批。（如圖4-12）：圖4-12全部項目測試頁面項目審核，每個項目的創(chuàng)建都必須通過審核過程，當此項目受審通過后，才能進行下一步的增加新成員，創(chuàng)建項目任務與提交文檔。此頁面具有權限控制審核，當普通員工進入頁面時，會提示并無權限查看與編輯，只有領導層的人員方能進入此頁面。（如圖4-13）：圖4-13項目審核頁面測試項目人員申請審核，當項目成功審批創(chuàng)建后，由于部分員工在項目創(chuàng)建的時候項目負責人或創(chuàng)建者并未把此加入項目，因此員工可以通過申請進入項目，申請過后，項目負責人或創(chuàng)建者就能通過此頁面進行人員申請的審核。（如圖4-14）：圖4-14項目人員申請審核頁面測試項目任務管理流程，在項目進行的過程中，項目負責人會創(chuàng)建一個或多個項目任務小組，因此通過此頁面創(chuàng)建任務，在這頁面里，會顯示當前項目的項目負責人所創(chuàng)建的任務小組，指定項目小組成員為任務負責人，任務負責人則擁有了審核編輯任務的權限，當任務數(shù)量過多的時候，會出現(xiàn)分頁。（下圖5-15至5-18）：圖4-15任務管理流程一 員工提交任務狀況，項目任務小組成員通過與自己相關的任務提交任務，任務負責人可通過審核按鈕，進入任務完成情況的彈框，在此彈筐里，可以查看任務小組成員完成的任務報告內(nèi)容，也可對此提交內(nèi)容進行刪除（圖4-16）。圖4-16任務管理流程二當負責人發(fā)現(xiàn)任務人員不夠的情況下，可以在任務頁面對任務進行編輯，往任務添加項目小組成員，也可以將任務狀態(tài)改為一般或緊急，讓員工根據(jù)情況完成任務（圖4-17）：圖4-17任務管理流程三任務完成狀態(tài)后，任務變成無法編輯狀態(tài)。任務負責人也沒有了管理任務的權限，只能通過項目負責人或者領導層進行刪除任務。當整個項目刪除的時候，所攜帶的任務也會相應的刪除。（圖4-18）：圖4-18任務管理流程四周報管理頁面分為提交周報，管理的項目和參與的項目三個部分。在添加周報的時候，會顯示所選的項目是否已經(jīng)完結(jié)，如果已經(jīng)完結(jié)則無法添加周報（如圖4-19）。圖4-19添加周報彈框管理項目只有創(chuàng)建者或項目負責人所能查看，可以查看在項目里的所有成員所上傳的周報，也可以對周報進行刪除。參與的項目里，所有已經(jīng)參與過項目的人，都可以查看到自己所參與的所有項目的周報，并且能查看具體內(nèi)容（如圖4-20）。圖4-20項目周報管理頁面測試問題管理頁面項目小組在項目的進行過程中，當遇到了問題的時候，可通過此頁面提交所述問題，該項目小組的其他成員或者領導層的人員看到時候，可以通過此頁面進行解決，幫助遇到困難的成員。實現(xiàn)如下圖4-21：圖4-21問題管理頁面測試當問題解決以后，解答的按鈕就會變?yōu)榻裹c擊的樣式，項目負責人可通過自身的權限，對多余的已解決的問題進行刪除。（圖4-22）圖4-22已解決的問題模塊項目文檔管理頁面中，可以通過上傳文檔按鈕進行上傳對應的項目的文檔，可以上傳pdf文件，后臺方法中設置了文件的大小與格式限制，上傳的時候會發(fā)出一條警告提示不得大于10MB，上傳成功的時候也會發(fā)出成功消息。當上傳文檔后