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

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

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

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

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

參考文獻(xiàn)阮一峰.ES6標(biāo)準(zhǔn)入門（第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實(shí)戰(zhàn)[M]清華大學(xué)出版社，2017.10張耀春，黃軼，王靜，蘇偉，王瑾，殷獻(xiàn)勇Vue.js權(quán)威指南[M]電子工業(yè)出版社，2016.09.01[美]NicholasC.Zakas.深入理解ES6[M]電子工業(yè)出版社，2017.7[英]JeremyKeith[加]JeffreySambells.JavaScriptDOM編程藝術(shù)[M].人民郵電出版社，2011.4[美]IlyaGrigorik.HighPerformanceBrowserNetworking[M].人民郵電出版社，2013.9[美]DavidFlanagan.JavaScript.The.Definitive.Guide.6e[M].機(jī)械工業(yè)出版社出版，2012.4[希]LeaVerou.CSSSecrets:BetterSolutionstoEverydayWebDesignProblems[M].人民郵電出版社，2016.4“vue官方網(wǎng)站”，（2019/12/14）“vuex官方網(wǎng)站”，/zh/（2019/11/10）廖雪峰，“Git教程”，/wiki/896043488029600Flex布局語法教程，/w3cnote/flex-grammar.html

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

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

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

--這個就是winkeywinkey+f:

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

winkey+r:

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

alt+tab:

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

winkey+e:

當(dāng)你需要打開資源管理器找文件的時候，這個快捷鍵會讓你感覺非?！八?！再也不用騰出一只手去摸鼠標(biāo)了！

小提示:

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

再補(bǔ)充點(diǎn)

F1顯示當(dāng)前程序或者windows的幫助內(nèi)容。

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

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

F10或ALT激活當(dāng)前程序的菜單欄

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

CTRL+ALT+DELETE在win9x中打開關(guān)閉程序?qū)υ捒?/p>

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

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

放入回收站

CTRL+N新建一個新的文件

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

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

CTRL+S保存當(dāng)前操作的文件

CTRL+X剪切被選擇的項(xiàng)目到剪貼板

CTRL+INSERT或CTRL+C復(fù)制被選擇的項(xiàng)目到剪貼板

SHIFT+INSERT或CTRL+V粘貼剪貼板中的內(nèi)容到當(dāng)前位置

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

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

Windows鍵+D：最小化或恢復(fù)windows窗口

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

Windows鍵+CTRL+M重新將恢復(fù)上一項(xiàng)操作前窗口的大小和位置

Windows鍵+E打開資源管理器

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

Windows鍵+R打開“運(yùn)行”對話框

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

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

SHIFT+F10或鼠標(biāo)右擊打開當(dāng)前活動項(xiàng)目的快捷菜單

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

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

ALT+F4關(guān)閉當(dāng)前應(yīng)用程序

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

ALT+TAB切換當(dāng)前程序

ALT+ESC切換當(dāng)前程序

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

PRINTSCREEN將當(dāng)前屏幕以圖象方式拷貝到剪貼板

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

CTRL+F4關(guān)閉當(dāng)前應(yīng)用程序中的當(dāng)前文本（如word中）

CTRL+F6切換到當(dāng)前應(yīng)用程序中的下一個文本（加shift可以跳到前

一個窗口）

在IE中：

ALT+RIGHTARROW顯示前一頁（前進(jìn)鍵）

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

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

F5刷新

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

2.刪除以下文件夾中的內(nèi)容：

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

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

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

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

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

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

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

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

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

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

4.然后對磁盤進(jìn)行碎片整理，整理過程中請退出一切正在運(yùn)行的程序

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

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

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

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

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

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

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

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

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

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

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

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