基于VUE的道一云公司日志系統(tǒng)的設計

I目錄第1章緒論 11.1系統(tǒng)開發(fā)的背景及意義 11.1.1系統(tǒng)開發(fā)的背景 11.1.2系統(tǒng)開發(fā)的意義 11.2國內外研究現狀 21.3本課題研究的主要內容 3第2章系統(tǒng)需求分析 52.1系統(tǒng)功能需求分析 52.2可行性分析 52.3UML系統(tǒng)建模 6第3章系統(tǒng)設計 83.1系統(tǒng)總體架構設計 83.1.1組件設計 83.1.2后臺接口整理歸類 83.1.3路由Router的設計 133.2主要功能模塊設計 143.2.1導航菜單組件 143.2.2篩選欄組件 153.2.3日志列表組件 153.2.4日志詳情組件 153.2.5統(tǒng)計列表組件 163.2.6統(tǒng)計詳情組件 163.2.7統(tǒng)計歷史列表組件 163.2.8統(tǒng)計規(guī)則列表組件 163.2.9統(tǒng)計規(guī)則設置組件 163.2.10新建、編輯日志組件 173.3Vuex狀態(tài)管理模式的設計 173.4應用國際化設計 18第4章系統(tǒng)實現 194.1導航菜單組件 194.2篩選欄組件 194.3日志列表組件 204.4日志詳情組件 214.5新建、編輯日志組件 23第5章系統(tǒng)測試 255.1測試目的和意義 255.2測試方法 255.2.1代碼規(guī)范檢測 255.2.2黑盒測試 25第6章結束語 286.1全文總結 286.2課題展望 28參考文獻 29致謝 30PAGEPAGE4第1章緒論1.1系統(tǒng)開發(fā)的背景及意義1.1.1系統(tǒng)開發(fā)的背景目前大部分企業(yè)公司、機構或多或少都有通過工作日志等諸如此類的方式來讓員工對自己的日常工作進行記錄、總結和匯報，而企業(yè)管理者根據工作日志所記錄的內容，了解員工所遇到的問題，對重要的工作進行跟蹤。作為一項使用頻繁且使用群眾非常龐大的制度，如果在寫工作日志的過程中因為寫作模式過于不便導致耗費大量的時間，則會使工作者產生排斥心理，而如果查閱工作日志不方便、費時且批注繁瑣，則會極大的浪費管理者的時間而又無法得到實質性的情況了解。因此道一云公司開發(fā)了一款風格簡潔、功能強大的工作日志應用，旨在提供高效率、功能強大的工作日志寫作模式給工作者，讓工作者能減少花在工作日志上的時間，同時讓管理層能方便高效的查閱、批注工作日志。1.1.2系統(tǒng)開發(fā)的意義工作者每天結束工作后，如果不對當天工作內容進行總結、回顧，過后就很容易遺忘當天的工作內容。而工作日志恰好可以解決這個問題，每天總結、分析工作內容并記錄到工作日志中，并在這個過程中回顧工作中遇到的問題和相應的解決思路。堅持每天寫工作日志，能逐漸提高自己的工作效率。工作日志的優(yōu)點非常顯著，但如果使用不當，則會是一項累贅的制度。常見的工作日志寫作模式有以下幾種：手寫：員工手寫在本上，每天上交和下發(fā)，主管通過手動翻閱，最原始的一種方式；郵件：員工在規(guī)定的時間寫郵件發(fā)到主管郵箱，主管在一小時內甚至受到幾百封郵件，并且與外部郵件混雜，每一條都看完并回復可能需要幾小時的時間，效率低，在企業(yè)內部不公開；Excel表格：員工記流水賬一樣把日程列在表格里，并不做未來規(guī)劃和經驗記載，主管想要溝通的話需要當面/會議/電話溝通，溝通成本高；Word文檔：員工通過各種方式發(fā)送給主管，主管需要在電腦上一個一個點開，然后記錄問題通過其他形式回復，效率低，溝通成本高。假設一個公司使用諸如以上低效率的手段來執(zhí)行工作日志的制度，一個員工每天花費在工作日志上的時間是半小時，管理層閱讀每一份工作日志所需的時間是10分鐘，每周加起來的時間就是200分鐘，每個月800分鐘，一年工作10個月的話就是8000分鐘。另外如果雙方針對工作日志內容想要進一步溝通，就又產生少則10分鐘多則1小時的雙方溝通時間。大致算上去，這項制度每年至少產生10000分鐘的時間浪費，雇主為這些時間支付了工資，卻得不到良好的效果。而如果能開發(fā)一款實用、功能強大的工作日志應用，可以使得員工和管理層都能輕松、便捷地記錄工作日志，并因此能直接減少這項制度產生的時間成本，也就相當于間接的產生了經濟效益。總而言之，道一云公司開發(fā)工作日志應用具有以下幾點意義：1）節(jié)約員工和管理層的時間成本，讓雙方都能將更多的時間投入到工作中。2）提高員工和管理層進行工作日志寫作和查閱時的體驗，使之能更積極的執(zhí)行工作日志的制度。3）使員工能便捷、省時的閱覽自己的工作日志，達到“三省吾身”的效果；使管理層能高效得從工作日志中汲取到想要了解的情況。1.2國內外研究現狀十年前，國內外前端領域jQuery庫一家獨大，可以說是所有前端開發(fā)者的必備技能，甚至在這前后端尚未進行分離開發(fā)的年代，連后臺開發(fā)者都需要能讀懂jQuery代碼乃至能進行基本的jQuery代碼編寫。然而，jQuery雖然強大，但是jQuery會頻繁的操作DOM，當DOM操作影響到布局的時候，瀏覽器的渲染引擎就要重新計算然后渲染，越多的DOM操作就會導致越多的計算，從而影響頁面性能。于是乎為了解決這個問題，有著“前端三大框架”之稱的Angular、React和Vue應運而生。Angular和React分別是美國互聯(lián)網巨頭公司雅虎和Facebook的開源項目，也是目前世界范圍內最火熱的前端框架（庫），而Vue則是中國人尤雨溪獨立開發(fā)的。相較于前兩者，vue的入門難度更低，學習曲線平滑，加之作者是中國人，因此也使得Vue在國內非常熱門，被大量互聯(lián)網公司如騰訊、百度和阿里等中國互聯(lián)網巨頭公司所使用，確保了其質量水平。綜上所述，道一云公司的工作日志前端開發(fā)采用了Vue作為開發(fā)框架，確保了開發(fā)效率和底層的穩(wěn)定性。1.3本課題研究的主要內容工作日志應用是基于javascript庫Vue.js進行開發(fā)的，因此需要對于Vue的技術棧有一個全面的掌握。Vue常見的技術棧為：Vue.js+vue-cli+vue-router+axios+webpack+vuex+sass+es6。以下是對工作日志的關鍵技術——vue技術棧的詳細說明：VueCLI:一個基于Vue.js框架進行快速開發(fā)的完整系統(tǒng)，其目的在于為Vue生態(tài)中的工具基礎定下標準。它能夠使各種構建工具在基于默認配置下實現平穩(wěn)銜接，可以讓開發(fā)者專注在開發(fā)應用上，而不必花大量時間去考慮配置的問題。與此同時，它也十分靈活的允許每個工具進行各自的配置調整。Vuex：專門為Vue.js框架開發(fā)的狀態(tài)管理模式。Vuex使用集中式存儲，對項目的所有組件的狀態(tài)進行管理，為了使狀態(tài)發(fā)生的狀態(tài)可預測，它制定了許多相應的規(guī)則來進行約束。在本系統(tǒng)中，有大量的數據需要在不同組件中進行傳遞和使用，如果僅靠Vue的父子組件傳值，無論是傳參的過程，還是管理和維護這些數據，都會變得非常棘手。因此本系統(tǒng)使用了Vuex作為狀態(tài)管理工具。Axios：一個基于promise的HTTP庫，是vue.js官方推薦的HTTP庫。它不僅能在瀏覽器中請求后端數據，在node.js也同樣適用。工作日志應用中將會使用axios與后臺進行大量的數據交互。Webpack：一個現代JavaScript應用的靜態(tài)模塊打包器。它會通過遞歸地構建一個依賴關系圖來處理應用程序，其包含應用程序必須的各個模塊，然后將這些模塊打包成一定數量的

bundle。在該項目中，vue-cli3.0已經內嵌了webpack的基本配置，無需本人進行額外的配置。Sass：一款CSS擴展語言，它基于CSS語法增加了大量便利的寫法和拓展，這些拓展大大節(jié)省了開發(fā)者的開發(fā)時間，并使css的管理和維護更加簡單，令CSS變得更加強大與優(yōu)雅。ES6：全稱ECMAScript6.0，是JavaScript語言的新一代標準，于2015年6月正式發(fā)布。本次開發(fā)的應用將會大量使用es6的語法。PAGE30系統(tǒng)需求分析本章對日志系統(tǒng)進行了需求分析，并且進行了系統(tǒng)的功能設計。根據日志系統(tǒng)的需求，日志系統(tǒng)的功能的設計主要包括日志列表、新建日志、日志詳情、統(tǒng)計和篩選等幾個模塊。另外，本章從管理員用戶和普通用戶兩個用戶角色的角度對系統(tǒng)進行了UML建模，給出了各自的功能用例關系圖，并作了詳細說明。2.1系統(tǒng)功能需求分析道一云公司日志系統(tǒng)的需求如下：作為日志系統(tǒng)，“查看日志”和“編寫日志”是系統(tǒng)的兩大核心。首先圍繞“查看日志”，該系統(tǒng)需要讓用戶能夠一目了然的了解日志數量、日志記錄信息和日志詳細信息；當日志數量過于龐大時，又要讓用戶能夠快速精準地定位到目標日志；當使用者身份為公司的管理層時，需要查看的不僅僅是日志，還需要查看員工的提交情況并作出相應的員工補交提醒；在查看員工的日志時，往往需要作出評論或者評分，因此還需要一個評論和評分的功能模塊。第二點“編寫日志”，首先系統(tǒng)需要有最基礎的編寫日志功能，在這個基礎上，繼續(xù)強化。比如提供圖片上傳、附件上傳來記錄文本所不能記錄的內容；增加富文本模式以記錄圖文并茂的內容；很多時候日志的內容可能相似的，所以需要復制日志的功能來提高編寫效率；添加匯總日志的操作，可以讓員工更全面的向管理層匯報工作；為了讓員工更方便的補交日志，需要提交“補交日志”入口；每位員工所屬的管理者有所不同，想匯報的對象也不必是管理者，因此還需要提供負責人、相關人的選擇。2.2可行性分析根據道一云公司日志系統(tǒng)的要求，日志系統(tǒng)的功能模塊主要包括日志列表、新建日志、日志詳情、統(tǒng)計和篩選等幾個模塊，系統(tǒng)的思維導圖如圖2-1所示：圖2-1系統(tǒng)結構的思維導圖日志列表包含“已提交”、“待閱”、“相關日志”和“草稿箱”四種類型，分別展示不同類型的日志，根據對應類型提供“編輯”、“復制”和“刪除”等操作。新建日志包含“補交日志”、“匯總日志”、“圖片上傳”、“附近上傳”、“添加負責人、相關人”和“富文本模式切換”等功能點，其中為了方便用戶選人，增加“選擇上次人員”的功能點。日志詳情模塊對日志進行了詳細的信息展示，同時加入評論模塊讓閱讀人員之間能互相交流，翻頁功能的實現是為了方便用戶持續(xù)瀏覽多篇日志。統(tǒng)計模塊分為“日志統(tǒng)計”和“統(tǒng)計規(guī)則”兩個小模塊，其中統(tǒng)計規(guī)則是為了讓用戶自定義統(tǒng)計的規(guī)則，如提醒補交時間、統(tǒng)計的目標人員等。篩選模塊存在于各個日志列表模塊中，可對日志進行多種條件的篩選，能快速定位到目標日志。。權限管理主要是對角色進行管理，即具有一定權限的用戶可以新建一個角色并給角色權限以及可以刪除所創(chuàng)建的角色。包括的功能有：增加角色、刪除角色和角色權限。設備管理員、行政人員、教師和維修人員具有權限管理的功能權限。2.3UML系統(tǒng)建模1.管理員用戶功能用例關系圖管理員用戶可編輯本人和所負責人的日志，可以查看日志、新增日志、篩選日志，可以對所負責人的日志評分，可以評論日志，可以查看日志統(tǒng)計和設置統(tǒng)計規(guī)則。管理員用戶的功能用例關系圖如圖2-2所示：圖2-2管理員用戶的功能用例關系圖2.普通用戶功能用例關系圖與管理員用戶有所不同的是，普通用戶無法查看統(tǒng)計日志模塊。普通用戶功能用例關系圖如圖2-3所示：圖2-3普通用戶的功能用例關系圖

第3章系統(tǒng)設計3.1系統(tǒng)總體架構設計3.1.1組件設計組件化開發(fā)是Vue.js最強大的功能之一，通過封裝可重用的代碼塊，大大提高了前端多人協(xié)同開發(fā)的便利性，可反復使用的組件極大的提高了開發(fā)效率，此外，還能提升整個項目的可維護性。Vue組件一般可分為三大類：頁面級別的組件。在業(yè)務項目中可復用的組件。與業(yè)務無關聯(lián)的獨立組件。道一云公司內部提供了quickwork獨立組件庫，內置大量常用的、風格統(tǒng)一的獨立組件。工作日志系統(tǒng)基于詳細的組件分類進行開發(fā)，開發(fā)初期會先劃分各個組件然后逐一進行開發(fā)，組件開發(fā)完成后再“組裝”成整個工作日志系統(tǒng)。組件的劃分會決定整個開發(fā)過程的效率，下文將會著重介紹本人設計開發(fā)的前兩類組件。3.1.2后臺接口整理歸類在后端為主的MVC時代，如圖3-1所示，前后端還未分離，前端工作量較少，只需要寫好靜態(tài)頁面，調一下ajax接口，剩下的路由、渲染之類的工作都交由后臺進行。這樣做導致代碼耦合性非常高，后期難以維護，而且后臺為前端頁面套數據時容易出錯，還需要與前端來回溝通確認，提高溝通成本。圖3-1后端mvc模式示意圖針對以上種種問題，前后端分離的“基于Ajax的SPA時代”應運而生，如圖3-2所示：圖3-2SAP單頁面應用結構示意圖實現前后端分離后，前后端高度解耦，可維護性大大提高。彼此可以專攻各自的領域：后端工程師只需要負責Model層，如業(yè)務處理和數據處理等；前端則負責view和Controller層。前后端之間的關鍵協(xié)作點便是API接口，因此需要熟悉掌握各個接口的業(yè)務信息和參數含義、參數類型。下面主要是對接口進行整理分類并簡單介紹。日志展示類該類別的接口主要用于展示日志相關信息，如圖3-3所示接口，可用于展示所有類型的日志列表、搜索、高級篩選等多個業(yè)務邏輯，圖中詳細的介紹了各參數的作用。圖3-3日志列表接口參數示意圖日志編輯類該類別的接口主要用于修改日志相關信息，如圖3-4所示接口，可用于新增、編輯日志，圖中詳細的介紹了各參數的作用。圖3-4日志新增及編輯接口參數示意圖日志統(tǒng)計類該類別包含統(tǒng)計模塊（不含統(tǒng)計規(guī)則）的所有接口，其中獲取統(tǒng)計詳情的接口如圖3-5所示：圖3-5日志統(tǒng)計詳情接口參數示意圖日志統(tǒng)計規(guī)則類該類別包含日志統(tǒng)計規(guī)則的所有接口，其中提交規(guī)則設置的接口如圖3-6所示：圖3-6保存規(guī)則設置接口參數示意圖3.1.3路由Router的設計路由，可解釋為URL到函數的映射。最開始的路由概念是出現在后端，每次瀏覽器切換url時，都會向后臺服務器發(fā)送請求，然后服務器根據瀏覽器發(fā)送過來的請求在服務器端拼接好html頁面返回給瀏覽器。這種方式會給服務器造成較大的壓力，同時加載頁面時容易出現短暫的空白頁面，用戶體驗不大友好。正式由于后端路由的不足，前端路由得以誕生。簡單的說，前端路由就是一個前端不同頁面之間的狀態(tài)管理器，能夠直接通過前端技術進行多頁面的切換而無需向后臺發(fā)送請求。前端路由最顯而易見的特點就是，頁面無刷新，這也是上文所說的SPA單頁面應用得以誕生的基礎。前端路由主要由兩種模式實現：hash和history，本系統(tǒng)所使用的Vue框架有自己官方的路由管理器：VueRouter。它是基于Vue.js進行深度集成，同時包含hash和history兩種實現方式，可由用戶自己配置。以下主要介紹本系統(tǒng)所使用的hash模式。圖3-7hash模式流程示意圖判斷是否使用hash模式的最簡單的方法就是，查看URL中是否含有#號，這是由于hash模式的實現原理就是監(jiān)聽URL中#后面的hash值的更改來觸發(fā)hashChange事件，進行一系列DOM顯示、隱藏操作，從而實現路由的功能。hash模式的優(yōu)點在于兼容性更好和不需要對服務器做改動。下面介紹本系統(tǒng)中的vueRouter的路由地址設計，僅有四個模塊。首頁路由模塊該模塊包含了本系統(tǒng)中大部分路由，但其實每個路由都是指向同一個大型組件——首頁組件，因此此處原本是未考慮設計多個路由的，僅僅是切換導航欄的tab時改變主題內容。但是由于公司負責本人的導師建議，應該從業(yè)務邏輯上進行路由名稱的定義，用戶才可以直接通過路由判斷頁面狀態(tài)，也能通過路由地址直接進入到對應的頁面。已提交：'/diary/submitted'待閱：'/diary/toBeRead'統(tǒng)計：'/diary/statistics'相關日志：'/diary/relatedDiary'草稿箱：'/diary/draft'新增頁路由顧名思義，該路由是跳轉至新增日志頁，由于新增頁面完全改變，此處有明顯的跳轉趨勢，但是由于本系統(tǒng)是單頁面應用，不存在實際上的跳轉。路由名稱：新增日志；路由地址：'/diary/addDiary'統(tǒng)計規(guī)則列表頁路由該路由跳轉至統(tǒng)計規(guī)則列表頁。路由名稱：統(tǒng)計規(guī)則列表；路由地址：'/diary/ruleList'統(tǒng)計歷史列表路由該路由跳轉至統(tǒng)計歷史頁。路由名稱：統(tǒng)計歷史列表；路由地址：'/diary/statisticHistory’3.2主要功能模塊設計3.2.1導航菜單組件組件描述：固定于工作日志最頂部位置的導航菜單，含“已提交”、“待閱”、“統(tǒng)計”、“相關日志”和“草稿箱”及“新建”按鈕，提供多處功能點的入口，涉及到非常重要的狀態(tài)判定。3.2.2篩選欄組件組件描述：含頁面標題、篩選功能，篩選功能常態(tài)下只有日期和輸入文字作為篩選條件，高級篩選功能則提供復雜條件的篩選。該組件會存在于“已提交”、“待閱”、“相關日志”和“草稿箱”四個路由下的列表頁上方，由上文的導航菜單組件提供狀態(tài)指引。當處于“待閱”路由時，頁面標題右邊將會出現“一鍵標記為已閱”的按鈕；“相關日志”路由下，頁面標題將會替換為一個tab選項，提供子級的“我負責的”和“我相關的”的頁面切換。3.2.3日志列表組件組件描述：展示“已提交”、“待閱”、“相關日志”和“草稿箱”路由下的每條日志的概覽信息：日志標題。日志標題首字符生產的圓形圖標并置于最左端，方便快速識別日志的類型。僅展示最多兩行的日志詳情，其中部分占幅較長或無法概覽的內容，將會智能替換成對應的提示語。如網址等幅度較長的字符串，會替換為【網頁鏈接】，視頻、圖片將會替換成【視頻】、【圖片】。日志創(chuàng)建時間，展示年、月、日、時、分等單位，若處于當前年則隱藏年、當前日則只顯示時和分。操作按鈕，如“復制”、“編輯”和“刪除”，會根據權限而顯示對應的按鈕。日志默認展示20條，可防止接口一次性請求過多數據而對服務器和客戶端造成過多壓力。當日志數量超出時，使用滾動加載組件請求接口，每次請求返回新的20條日志。3.2.4日志詳情組件組件描述：點擊日志列表中的日志信息，彈出日志詳情彈窗頁。該頁最多包含日志標題、創(chuàng)建時間、創(chuàng)建人、日志類型、日志內容、圖片、附件、評分、負責人、操作按鈕（評分、編輯、刪除、復制、上一條、下一條、關閉）以及評論模塊，具體展示情況視日志類型及權限而定。3.2.5統(tǒng)計列表組件組件描述：根據統(tǒng)計規(guī)則所配置，以日、周、月三種集合之一展示相應時間段內的日志提交情況。具體信息包括統(tǒng)計規(guī)則名稱、統(tǒng)計時間范圍和用圓形進度條展示的提交率、已提交、未提交。3.2.6統(tǒng)計詳情組件組件描述：與日志詳情組件相似，點擊統(tǒng)計以抽屜彈窗彈出。除了統(tǒng)計列表組件中已經展示過的信息以外，還多了一個可切換“未提交”和“已提交”的tab。此處在切換上一條和下一條統(tǒng)計詳情的時候需考慮tab選中的狀態(tài)。如果當前處于“未提交”tab，彈窗底部將會出現一個“一鍵彈窗未交”的按鈕，如果已經點擊過，則以后再次打開彈窗時按鈕會變?yōu)椴豢牲c擊狀態(tài)。3.2.7統(tǒng)計歷史列表組件組件描述：使用表格展示各個統(tǒng)計類型的每次統(tǒng)計概覽，包含統(tǒng)計時間、提交比例、已提交和未提交。默認顯示20條，超出時使用滾動加載組件加載，點擊表格每一行均可打開統(tǒng)計詳情彈窗。3.2.8統(tǒng)計規(guī)則列表組件組件描述：與統(tǒng)計列表組件相似，主要展示規(guī)則名稱、提交頻率、統(tǒng)計對象、狀態(tài)以及設置，點擊每一條規(guī)則會打開詳細的規(guī)則設置。3.2.9統(tǒng)計規(guī)則設置組件組件描述：用于設置統(tǒng)計規(guī)則，有大量的表單數據，不同數據之間互有關聯(lián)，詳細的業(yè)務邏輯會在下文的系統(tǒng)實現章節(jié)介紹。3.2.10新建、編輯日志組件組件描述：用于編寫日志的組件，是本系統(tǒng)中工作量最為龐大、最困難的一個組件，涉及到的業(yè)務邏輯非常多?？删庉媰热莺w了以下內容：日志類型，從接口獲取日志類型，提取前三個類型以單選框的形式展示，剩下的日志類型通過下拉框選擇。選擇日志類型后會根據類型的配置加載默認的日志標題、日志內容和選人。日志標題。日志內容，有普通編輯模式和富文本編輯模式。富文本模式可以提供字體段落樣式設置、插入圖片、視頻等多媒體的功能。日志匯總，打開一個可匯總的日志列表的彈窗，點擊日志可打開日志詳情，點擊多選框可選擇多篇本人提交的或負責的日志的內容匯總到當前編輯的內容中；若當前非富文本編輯模式，則不可選擇由富文本模式編輯生成的日志。圖片、附件上傳組件。選人組件，分為“負責人選擇”和“相關人員選擇”，均提供“加載上次”的功能。補交日志，僅在當前為“新增日志”時，點擊最頂部的入口，打開“補交日志”彈窗，展示未提交的日志列表，有“忽略”和“補交”兩個按鈕，點擊“忽略”則從列表中刪除，點擊“補交”則關閉彈窗，并將對應的日志標題、類型、日志內容和選人賦值到編輯框中。并且日志類型和“負責人選人”不可再編輯。操作欄，包含“保存為草稿”和“發(fā)布”兩個操作。如果是已經發(fā)布過的日志，則不可保存為草稿。3.3Vuex狀態(tài)管理模式的設計在本系統(tǒng)中，將Vuex的modules分為六個模塊：“新增日志”、“公共部分”、“日志詳情”、“首頁”、“規(guī)則”和“統(tǒng)計”，各自處理對應模塊中的數據傳遞和改變。3.4應用國際化設計本系統(tǒng)使用了Vue.js的國際化插件VueI18n來實現國際化功能，支持中英雙語切換。本項目中整理出所有本地化的中文字段，并使用i18n進行插值，中英文各一套字符模板，如圖3-8所示：圖3-8國際化模板圖第4章系統(tǒng)實現根據上一節(jié)的系統(tǒng)設計中的組件化設計，本節(jié)給出了其中較為重要和復雜的組件的實現。下面分別是它們實現的主要邏輯和界面效果。4.1導航菜單組件下圖4-1是導航菜單的界面圖，UI樣式較為簡單，主要使用flex布局中的justify:space-between即可將tab欄與“新建”按鈕放置于兩端；但是該組件的邏輯非常重要，決定多個接口的請求和頁面的展示內容。圖4-1導航菜單組件首先是tab的選中，默認選中“已提交”，在vue的生命鉤子函數的created階段，將會根據頁面路由來判斷，從而選中相應的tab，同時將公共的至關重要的變量nav_active賦值為對應的值，nav_active表示當前所在的列表頁面，默認為0，即“已提交”。點擊tab時，首先判斷點擊的tab是否是當前的tab，如果是則不作回應，以防止沒必要的請求，否則通過vuex的actions改變state中儲存的nav_active，同時改變請求日志列表接口中的status和type入參。4.2篩選欄組件下圖4-2和4-3是篩選欄的界面圖，篩選欄的各項可輸入的表單控件，都會在nav_active改變，也就是離開了當前路由時進行重置處理。篩選欄左邊的日志標題，提供了slot插槽，可在使用篩選欄的時候根據當前頁面類型自定義標題。點擊中間的按鈕組，將會以對應的時間作為參數，立即請求接口進行搜索。右邊的input搜索框使用實時搜索、點擊回車鍵和點擊清除按鈕等三種觸發(fā)方式。實時搜索的實現原理是，輸入內容時觸發(fā)一個changeInput事件，事件中創(chuàng)建一個定時器setTimeout，0.8秒后觸發(fā)搜索，若在0.8秒內重新觸發(fā)changeInput事件，則清除上一個事件中的定時器，否則執(zhí)行搜索。高級篩選組件是一個業(yè)務平臺的公共組件，此處是直接引入使用。當使用過高級篩選后，最右邊的高級篩選按鈕將會變成藍色，表示頁面的內容是經過高級篩選的。圖4-2篩選欄組件圖4-3篩選欄高級篩選組件4.3日志列表組件 組件如下圖4-4所示，底部的操作按鈕需要根據nav_active的改變來判斷該顯示哪些操作按鈕，當nav_active為4時，表示當前在草稿頁，則僅顯示刪除按鈕。當需要加載下一頁數據時會通過滾動加載組件進行接口請求，接口的當前頁數加一，其它參數不變。圖4-4日志列表組件4.4日志詳情組件下圖4-5是日志詳情的界面圖，該組件的最大難點在于上一篇、下一篇的日志切換。首先定義一個查詢上下頁數據的方法nextDiary，該方法接收兩個參數type和existId，type表示請求接口是上一頁還是下一頁，existId為true表示剛打開詳情彈窗時的初始化請求，為false則表示手動點擊按鈕時所觸發(fā)的。初始化請求時，如果接口能返回對應的id，則表明存在對應的上一篇或者下一篇，并用對應的變量去接收。如果沒有返回，則表明不存在，同樣需要新建對應的Boolean變量去接收，并根據這個變量改變翻頁按鈕的狀態(tài)，同時清空前面上下篇id的變量。點擊翻頁按鈕時，根據初始化時從接口獲取的id情況，如果有，則作為接口的參數。以下是翻頁的核心代碼：if(this.getData.diaryId){this[`${type}ID`]=this.getData.diaryId}else{if(type==='next'){this.isNextDisabled=true}elseif(type==='pre'){this.isPreDisabled=true}this[`${type}ID`]=''}圖4-5日志詳情界面4.5新建、編輯日志組件下圖4-6是新建日志頁。下面介紹一下日志類型和“加載上次”的實現邏輯。首先判斷存放日志類型的數組templateList的長度是否超過2，如果超過則復制3給變量len，否則將templateList的length賦值給len。根據len進行相應的遍歷次數，將接口中的前l(fā)en種日志類型取出，放入一個數組diaryTypeRadioArr中。如果當前為新增，則默認選中第一個日志類型；如果是從編輯入口進來，還需初始化選項，分別在這兩個數組中進行日志id遍歷，確定屬于哪個數組，復制給對應的變量，同時還需要將另一個數組的變量置空。點擊選擇的時候同樣需要在為其中一個變量賦值的同時置空另一個變量。加載上次，若已手動選擇了人員，則點擊“加載上次”時需要先判斷已選擇列表中是否已經存在，若取消“加載上次”，也不能直接去掉屬于“加載上次”的人員，需要先判斷是否已經從選人組件中選擇了，若選擇了則取消”加載上次“也無法取消選擇。解決方法：手動選擇和”加載上次“選擇所得到的數組不得直接處理，新建一個數組來整合這兩個數組，并作為展示和提交日志的參數。以下是加載上次的核心代碼constlastTemp=this.$qwBase.clone(this[lastList])//去重selectUsers.map(item=>{lastTemp.map((i,index)=>{if(item.id===i.id){lastTemp.splice(index,1)}})})type?this.relevantUsers=[...selectUsers,...lastTemp]:this.leaderUsers=[...selectUsers,...lastTemp]圖4-6新建、編輯日志

第5章系統(tǒng)測試本系統(tǒng)測試分為兩部分，分別是由eslint實現的代碼規(guī)范檢測和測試用例測試。5.1測試目的和意義對于訪問一個web應用，耗費時間最多的過程并不是后臺、數據庫的數據處理，而是在前端程序。就算我們能將后端的響應時間縮減至50%，那整體的響應時間其實只會縮減5%-10%。根據web優(yōu)化的黃金法則：最終用戶響應時間的80%耗費在前端程序上，而前端的大部分時間則是耗費在頁面加載和頁面渲染，如圖片、css樣式表、js腳本的下載與渲染。通過減少http請求和優(yōu)化資源請求等方式來優(yōu)化前端性能，可以整體減少40%~50%的響應時間。通過前端測試，能保證前端應用的業(yè)務邏輯正確和代碼的規(guī)范，提高代碼質量和頁面的性能。相對后端而言，前端的錯誤被發(fā)現和修復所需的工作量要少很多，但是帶來的收益卻很高。5.2測試方法5.2.1代碼規(guī)范檢測本系統(tǒng)在項目中集成了Eslint，它是一個插件化的JavaScript代碼檢測工具，按照特定的編碼風格進行約束，若eslint錯誤不修復，則在git提交代碼時將無法提交成功。因此代碼規(guī)范的這次檢測已經完全通過。5.2.2黑盒測試黑盒測試是靠測試來檢測各個功能能否正常使用。在測試過程中，把系統(tǒng)看成一個封閉的黑盒子，在系統(tǒng)前端接口進行測試，它只根據測試用例來檢查系統(tǒng)的功能是否按照預期的需求執(zhí)行，系統(tǒng)是否能正確接收輸入的數據并返回輸出數據，測試過程忽略系統(tǒng)內部結構和處理過程。本系統(tǒng)中由測試工程師提供了所有模塊的完整的測試用例，已經通過本人和測試工程師的測試。如表5-1所示，是新建日志頁的部分測試用例。表5-1新建日志部分測試用例功能塊功能點前置條件操作步驟預期結果日志類型默認顯示排序前三位的類型1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、查看日志類型默認顯示排序前三位的類型長類型顯示正確管理后臺設置類型名稱為最長字數限制1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、查看日志類型長類型顯示正確僅可選擇一個類型1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、查看日志類型僅可選擇一個類型可下拉選擇其他日志類型類型已啟用1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、點擊類型框下拉圖標彈出下拉框，可自由選擇日志類型必填項，為空無法提交日志1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、不選擇日志類型，其他設置項正常4、點擊【發(fā)布】發(fā)布失敗日志標題輸入框默認文案顯示正確1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、查看輸入框默認文案輸入框默認文案顯示正確：請輸入日志標題允許輸入50字以內1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、輸入日志標題允許輸入50字以內必填項，為空無法提交日志1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、不輸入日志標題，其他設置項正常4、點擊【發(fā)布】發(fā)布失敗日志內容輸入框默認文案顯示正確1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、查看輸入框默認文案輸入框默認文案顯示正確：請輸入日志內容允許輸入60000字以內1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、輸入日志內容允許輸入60000字以內必填項，為空無法提交日志1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、不輸入日志內容，其他設置項正常4、點擊【發(fā)布】發(fā)布失敗切換文本則清除已輸入內容1、進入工作日志PC端首頁2、點擊【新建】，進入新建頁3、輸入日志內容，其他設置項正常4、點擊切換切換純文本/富文本切換文本則清除已輸入內容軟件質量評價標準：A：質量穩(wěn)定，適合大規(guī)模使用。B：存在少數嚴重問題，但有規(guī)避措施，可以局部使用。C：基本功能可用，但嚴重問題較多。D：基本功能不可用。本系統(tǒng)測試對象的整體質量：A。部分測試報告。如圖5-1所示：圖5-1部分測試報告

第6章結束語6.1全文總結本系統(tǒng)是我第一次獨立搭建完整的企業(yè)項目，期間遇到了較多的困難。剛開始開發(fā)時對git的使用不夠熟悉，在使用git提交代碼的過程中經常會遇到沖突問題，導致提交失敗，在同事的提醒下我懂得了每次提交代碼之前都需要先拉取代碼解決沖突。另外，項目搭建和組件劃分也不大熟悉，踩了不少坑。這些也是企業(yè)開發(fā)與學校課堂作業(yè)項目的最大區(qū)別，面向現實需求的，追求嚴謹的細節(jié)。本應用作為公司PC版改造的第一個應用，在改造的同時，完善好各公共組件能力，如評論組件、選人組件、列表規(guī)范、詳情頁規(guī)范等，下沉好組件的服務能力。隨著產品被投入到公司使用，在服務公司同事的層面上，可以更高效的幫助同事記錄每天的工作內容；從公司領導的層面上，可以更好的跟進下屬的每日工作情況以及管理下屬的工作安排；從公司業(yè)務往來的層面上，根據應用的優(yōu)勢推廣至其他公司，從而為公司創(chuàng)造更多的效益。6.2課題展望另外，在系統(tǒng)上線的過程中，不斷的有新的bug和待優(yōu)化點被提出，這些問題的提出在促使本系統(tǒng)逐漸的完善的同時，也讓我發(fā)現了自己開發(fā)中犯的錯誤，令我能夠進一步提升自己的能力。本系統(tǒng)還存在部分不足，例如統(tǒng)計規(guī)則中未明確如何才能讓日志成為規(guī)則中的已提交部分，這一點將會在后續(xù)的二期開發(fā)計劃中完善，通過增加日志提交規(guī)則列表，展示對應規(guī)則的明細，然后在提交日志時需將匯報對象添加為負責人，則視為提交成功。同時目前發(fā)現的一些影響較小的bug和UI設計師提出來的樣式優(yōu)化也將會在二期開發(fā)中統(tǒng)一修復。

參考文獻阮一峰.ES6標準入門（第3版）[M].電子工業(yè)出版社，2017.9[美]尼古拉斯·澤卡斯.高性能JavaScript[M].電子工業(yè)出版社，2010.11[美]ElisabethRobson[美]EricFreeman編著.HeadFirstHTML與CSS(第2版)[M].中國電力出版社，2013.9劉博文.深入淺出Vue.js[M].人民郵電出版社，2019.3梁灝.Vue.js實戰(zhàn)[M]清華大學出版社，2017.10張耀春，黃軼，王靜，蘇偉，王瑾，殷獻勇Vue.js權威指南[M]電子工業(yè)出版社，2016.09.01[美]NicholasC.Zakas.深入理解ES6[M]電子工業(yè)出版社，2017.7[英]JeremyKeith[加]JeffreySambells.JavaScriptDOM編程藝術[M].人民郵電出版社，2011.4[美]IlyaGrigorik.HighPerformanceBrowserNetworking[M].人民郵電出版社，2013.9[美]DavidFlanagan.JavaScript.The.Definitive.Guide.6e[M].機械工業(yè)出版社出版，2012.4[希]LeaVerou.CSSSecrets:BetterSolutionstoEverydayWebDesignProblems[M].人民郵電出版社，2016.4“vue官方網站”，（2019/12/14）“vuex官方網站”，/zh/（2019/11/10）廖雪峰，“Git教程”，/wiki/896043488029600Flex布局語法教程，/w3cnote/flex-grammar.html

致謝在撰寫本論文的過程中，深深的感謝給予我?guī)椭膶熀凸?。首先，感謝劉紅敏老師的悉心指導，在論文課題選取、開題報告和整體思路等方面給予了我學術指導。然后感謝提供我開發(fā)此項目機會的公司，讓我能接觸企業(yè)級項目，得以學以致用。最后，感謝所有對我提供協(xié)助的同事們，尤其是我的項目導師劉道輝，為我提供專業(yè)指導。

捷鍵與一些電腦小技巧HYPERLINKwinkey+d:

這是高手最常用的第一快捷組合鍵。這個快捷鍵組合可以將桌面上的所有窗口瞬間最小化，無論是聊天的窗口還是游戲的窗口……只要再次按下這個組合鍵，剛才的所有窗口都回來了，而且激活的也正是你最小化之前在使用的窗口！

--這個就是winkeywinkey+f:

不用再去移動鼠標點“開始→搜索→文件和文件夾”了，在任何狀態(tài)下，只要一按winkey+f就會彈出搜索窗口。

winkey+r:

在我們的文章中，你經常會看到這樣的操作提示:“點擊‘開始→運行’，打開‘運行’對話框……”。其實，還有一個更簡單的辦法，就是按winkey+r！

alt+tab:

如果打開的窗口太多，這個組合鍵就非常有用了，它可以在一個窗口中顯示當前打開的所有窗口的名稱和圖標●，選中自己希望要打開的窗口，松開這個組合鍵就可以了。而alt+tab+shift鍵則可以反向顯示當前打開的窗口。

winkey+e:

當你需要打開資源管理器找文件的時候，這個快捷鍵會讓你感覺非?！八保≡僖膊挥抿v出一只手去摸鼠標了！

小提示:

winkey指的是鍵盤上刻有windows徽標的鍵●。winkey主要出現在104鍵和107鍵的鍵盤中。104鍵盤又稱win95鍵盤，這種鍵盤在原來101鍵盤的左右兩邊、ctrl和alt鍵之間增加了兩個windwos鍵和一個屬性關聯(lián)鍵。107鍵盤又稱為win98鍵盤，比104鍵多了睡眠、喚醒、開機等電源管理鍵，這3個鍵大部分位于鍵盤的右上方。

再補充點

F1顯示當前程序或者windows的幫助內容。

F2當你選中一個文件的話，這意味著“重命名”

F3當你在桌面上的時候是打開“查找：所有文件”對話框

F10或ALT激活當前程序的菜單欄

windows鍵或CTRL+ESC打開開始菜單

CTRL+ALT+DELETE在win9x中打開關閉程序對話框

DELETE刪除被選擇的選擇項目，如果是文件，將被放入回收站

SHIFT+DELETE刪除被選擇的選擇項目，如果是文件，將被直接刪除而不是

放入回收站

CTRL+N新建一個新的文件

CTRL+O打開“打開文件”對話框

CTRL+P打開“打印”對話框

CTRL+S保存當前操作的文件

CTRL+X剪切被選擇的項目到剪貼板

CTRL+INSERT或CTRL+C復制被選擇的項目到剪貼板

SHIFT+INSERT或CTRL+V粘貼剪貼板中的內容到當前位置

ALT+BACKSPACE或CTRL+Z撤銷上一步的操作

ALT+SHIFT+BACKSPACE重做上一步被撤銷的操作

Windows鍵+D：最小化或恢復windows窗口

Windows鍵+U：打開“輔助工具管理器”

Windows鍵+CTRL+M重新將恢復上一項操作前窗口的大小和位置

Windows鍵+E打開資源管理器

Windows鍵+F打開“查找：所有文件”對話框

Windows鍵+R打開“運行”對話框

Windows鍵+BREAK打開“系統(tǒng)屬性”對話框

Windows鍵+CTRL+F打開“查找：計算機”對話框

SHIFT+F10或鼠標右擊打開當前活動項目的快捷菜單

SHIFT在放入CD的時候按下不放，可以跳過自動播放CD。在打開wo

rd的時候按下不放，可以跳過自啟動的宏

ALT+F4關閉當前應用程序

ALT+SPACEBAR打開程序最左上角的菜單

ALT+TAB切換當前程序

ALT+ESC切換當前程序

ALT+ENTER將windows下運行的MSDOS窗口在窗口和全屏幕狀態(tài)間切換

PRINTSCREEN將當前屏幕以圖象方式拷貝到剪貼板

ALT+PRINTSCREEN將當前活動程序窗口以圖象方式拷貝到剪貼板

CTRL+F4關閉當前應用程序中的當前文本（如word中）

CTRL+F6切換到當前應用程序中的下一個文本（加shift可以跳到前

一個窗口）

在IE中：

ALT+RIGHTARROW顯示前一頁（前進鍵）

ALT+LEFTARROW顯示后一頁（后退鍵）

CTRL+TAB在頁面上的各框架中切換（加shift反向）

F5刷新

CTRL+F5強行刷新1.打開“我的電腦”-“工具”-“文件夾選項”-“查看”-在“顯示所有文件和文件夾”選項前打勾-“確定”

2.刪除以下文件夾中的內容：

x:\DocumentsandSettings\用戶名\Cookies\下的所有文件(保留index文件)

x:\DocumentsandSettings\用戶名\LocalSettings\Temp\下的所有文件(用戶臨時文件)

x:\DocumentsandSettings\用戶名\LocalSettings\TemporaryInternetFiles\下的所有文件(頁面文件)

x:\DocumentsandSettings\用戶名\LocalSettings\History\下的所有文件(歷史紀錄)

x:\DocumentsandSettings\用戶名\Recent\下的所有文件(最近瀏覽文件的快捷方式)

x:\WINDOWS\Temp\下的所有文件(臨時文件)

x:\WINDOWS\ServicePackFiles(升級sp1或sp2后的備份文件)

x:\WINDOWS\DriverCache\i386下的壓縮文件(驅動程序的備份文件)

x:\WINDOWS\SoftwareDistribution\download下的所有文件

3.如果對系統(tǒng)進行過windoesupdade升級，則刪除以下文件：x:\windows\下以$u...開頭的隱藏文件

4.然后對磁盤進行碎片整理，整理過程中請退出一切正在運行的程序

5.碎片整理后打開“開始”-“程序”-“附件”-“系統(tǒng)工具”-“系統(tǒng)還原”-“創(chuàng)建一個還原點”(最好以當時的日期作為還原點的名字)

6.打開“我的電腦”-右鍵點系統(tǒng)盤-“屬性”-“磁盤清理”-“其他選項”-單擊系統(tǒng)還原一欄里的“清理”-選擇“是”-ok了

7、在各種軟硬件安裝妥當之后，其實XP需要更新文件的時候就很少了。刪除系統(tǒng)備份文件吧：開始→運行→sfc.exe/purgecache近3xxM。(該命令的作用是立即清除"Windows文件保護"文件高速緩存，釋放出其所占據的空間)

8、刪掉\windows\system32\dllcache下dll檔(減去200——300mb),這是備用的dll檔，只要你已拷貝了安裝文件，完全可以這樣做。

9、XP會自動備份硬件的驅動程序，但在硬件的驅動安裝正確后，一般變動硬件的可能性不大，所以也可以考慮將這個備份刪除，文件位于\windows\drivercache\i386目錄下，名稱為driver.cab，你直接將它刪除就可以了，通常這個文件是74M。

10、刪除不用的輸入法：對很多網友來說，WindowsXPt系統(tǒng)自帶的輸入法并不全部都合適自己的使用，比如IMJP8_1日文輸入法、IMKR6_1韓文輸入法這些輸入法，如果用不著，我們可以將其刪除。輸入法位于\windows\ime\文件夾中，全部占用了88M的空間。

11、升級完成發(fā)現windows\多了許多類似$NtUninstallQ311889$這些目錄，都干掉吧，1x-3xM

12、另外，保留著\windows\help目錄下的東西對我來說是一種傷害，呵呵。。。都干掉！

13、關閉系統(tǒng)還原：系統(tǒng)還原功能使用的時間一長，就會占用大量的硬盤空間。因此有必要對其進行手工設置，以減少硬盤占用量。打開"系統(tǒng)屬性"對話框，選擇"系統(tǒng)還原"選項，選擇"在所有驅動器上關閉系統(tǒng)還原"復選框以關閉系統(tǒng)還原。也可僅對系統(tǒng)所在的磁盤或分區(qū)設置還原。先選擇系統(tǒng)所在的分區(qū)，單擊"配置"按鈕，在彈出的對話框中取消"關閉這個驅動器的系統(tǒng)還原"選項，并可設置用于系統(tǒng)還原的磁盤空間大小。

14、休眠功能會占用不少的硬盤空間，如果使用得少不妨將共關閉，關閉的方法是的：打開"控制面板"，雙擊"電源選項"，在彈出的"電源選項屬性"對話框中選擇"休眠"選項卡，取消"啟用休眠"復選框。

15、卸載不常用組件：XP默認給操作系統(tǒng)安裝了一些系統(tǒng)組件，而這些組件有很大一部分是你根本不可能用到的，可以在"添加/刪除Windows組件"中將它們卸載。但其中有一些組件XP默認是隱藏的，在"添加/刪除Windows組件"中找不到它們，這時可以這樣操作：用記事本打開\windows\inf\sysoc.inf這個文件，用查找/替換功能把文件中的"hide"字符全部替換為空。這樣，就把所有組件的隱藏屬性都去掉了，存盤退出后再運行"添加-刪除程序"，就會看見多出不少你原來看不見的選項，把其中那些你用不到的組件刪掉（記住存盤的時候要保存為sysoc.inf，而不是默認的sysoc.txt），如Internat信使服務、傳真服務、Windowsmessenger，碼表等，大約可騰出近50MB的空間。

16、清除系統(tǒng)臨時文件：系統(tǒng)的臨時文件一般存放在兩個位置中：一個Windows安裝目錄下的Temp文件夾；另一個是x:\Documentsand