基于React的私人通訊錄的設(shè)計(jì)與開(kāi)發(fā)

畢業(yè)設(shè)計(jì)說(shuō)明書(shū)基于React的私人通訊錄的設(shè)計(jì)與開(kāi)發(fā)2020年5月15日基于React的私人通訊錄的設(shè)計(jì)與開(kāi)發(fā)摘要：本文介紹了私人通訊錄系統(tǒng)的整個(gè)開(kāi)發(fā)過(guò)程，使用了React框架完成前臺(tái)頁(yè)面，nodejs完成后臺(tái)邏輯處理，antdesign作為ui框架，并按照現(xiàn)有的通訊錄系統(tǒng)的現(xiàn)狀從而設(shè)計(jì)出來(lái)的私人通訊錄系統(tǒng)，這個(gè)系統(tǒng)是基于現(xiàn)在社會(huì)人們通訊方式的便捷，猶如蜘蛛網(wǎng)一般的網(wǎng)絡(luò)，所以，導(dǎo)致現(xiàn)在社會(huì)的人的聯(lián)系人數(shù)量日益增加，所以，像以前呢樣用紙筆記錄聯(lián)系人，已經(jīng)不可能行的通了，基于web端的發(fā)展，就有了這個(gè)通訊系統(tǒng)，這個(gè)通訊系統(tǒng)一但完成，就可以用于個(gè)人用戶(hù)管理專(zhuān)屬于自己的通訊錄。本文主要闡述的了整個(gè)系統(tǒng)的完成過(guò)程，模擬了一個(gè)個(gè)人用戶(hù)在本系統(tǒng)的一系列操作。這個(gè)系統(tǒng)對(duì)個(gè)人用戶(hù)所擁有的功能進(jìn)行了劃分。對(duì)每個(gè)模塊的具體要求進(jìn)行了完善。使用這些模塊通過(guò)與數(shù)據(jù)庫(kù)的交互，完成了通訊錄管理，日程管理，相冊(cè)管理等模塊的交互。在下文中有說(shuō)明通訊錄的選題背景，國(guó)內(nèi)外現(xiàn)狀等問(wèn)題，也同樣介紹了這個(gè)系統(tǒng)所需要完成的功能，以及對(duì)這個(gè)系統(tǒng)的整個(gè)開(kāi)發(fā)到完成的過(guò)程進(jìn)行了具體的規(guī)劃。私人通訊錄系統(tǒng)以React為主要的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。利用mvvm模式作為開(kāi)發(fā)思想，出于對(duì)系統(tǒng)的維護(hù)性，耦合性和安全性的考量，后臺(tái)采用非阻塞I/O模型+事件驅(qū)動(dòng)的Nodejs，存儲(chǔ)數(shù)據(jù)使用了MYSQL這個(gè)免費(fèi)開(kāi)源的數(shù)據(jù)庫(kù)，為了能更好的操作數(shù)據(jù)庫(kù)，我選用了Navicat來(lái)對(duì)數(shù)據(jù)庫(kù)進(jìn)行可視化操作。關(guān)鍵字:React；nodejs；antdesign；MYSQLDesignanddevelopmentofprivateaddressbookbasedonReactAbstract：Thisarticleintroducestheentiredevelopmentprocessoftheprivateaddressbooksystem,usingtheReactframeworktocompletethefrontpage,nodejstocompletethebackgroundlogicprocessing,antdesignastheuiframework,andtheprivateaddressbooksystemdesignedaccordingtothecurrentstatusoftheexistingaddressbooksystemThissystemisbasedontheconvenientcommunicationmethodsofpeopleinthecurrentsociety,whichislikeaspiderweb.Therefore,thenumberofpeopleinthesocietyisincreasingnow.Itworks,basedonthedevelopmentoftheweb,thereisthiscommunicationsystem.Oncethiscommunicationsystemiscompleted,itcanbeusedbyindividualuserstomanagetheirownaddressbook.Thisarticlemainlyexplainsthecompletionprocessoftheentiresystem,andsimulatesaseriesofoperationsofanindividualuserinthesystem.Thissystemdividesthefunctionsthatindividualusershave.Thespecificrequirementsofeachmodulehavebeenimproved.Usingthesemodules,throughtheinteractionwiththedatabase,theinteractionofmodulessuchasaddressbookmanagement,schedulemanagement,andalbummanagementiscompleted.Inthefollowing,thebackgroundofthetopicselectionoftheaddressbook,thecurrentsituationathomeandabroad,andotherissuesarealsointroduced.Thefunctionsthatthissystemneedstocompletearealsointroduced,aswellasthespecificplanningoftheentiredevelopmenttocompletionofthissystem.TheprivateaddressbooksystemusesReactasthemainwebdevelopmenttechnology.Usingthemvvmmodeasadevelopmentidea,forthemaintenance,couplingandsecurityofthesystem,thebackgroundusesanon-blockingI/Omodel+event-drivenNodejs,andthestoreddatausesMYSQL,afreeandopensourcedatabase.Tobetteroperatethedatabase,IchoseNavicattovisualizethedatabase.Keywords:React；nodejs；antdesign；MYSQL緒論選題背景根據(jù)最新的統(tǒng)計(jì)，中國(guó)的網(wǎng)民數(shù)量已經(jīng)達(dá)到中國(guó)的一多半人口。隨著各種電子產(chǎn)品的更新?lián)Q代，以及互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，它們打破了地理和時(shí)間限制，改變了人們過(guò)去的工作和生活方式。過(guò)去，我們是如何記錄聯(lián)系人信息的？有很多方法，例如，有一種在筆記本中記錄聯(lián)系方式的方法，一種在手機(jī)上存儲(chǔ)電話(huà)號(hào)碼的方式以及在電腦文本文檔中記錄的方法。等等。對(duì)于在筆記本上記錄聯(lián)系信息的方式，第一個(gè)是可能在某處將其忘記，不方便攜帶，很容易丟失，第二個(gè)是特別難找，例如數(shù)以百計(jì)的聯(lián)系人信息，查找某一條相關(guān)信息時(shí)需要花費(fèi)大量時(shí)間，同時(shí)，如果有某一個(gè)聯(lián)系人更換了通訊信息，我們就需要在眾多信息中找到對(duì)應(yīng)的呢一條，在通過(guò)涂改來(lái)修改信息。雖然也可以在手機(jī)上存電話(huà)號(hào)碼，但是現(xiàn)在手機(jī)小巧，很有可能就會(huì)將手機(jī)遺失，一但遺失，就會(huì)損失所有的聯(lián)系人信息。對(duì)于記錄到電腦文本文檔或打印的地址簿，它也不是很方便擴(kuò)展。查找起來(lái)非常不方便。基于互聯(lián)網(wǎng)的飛速發(fā)展，并且對(duì)目前現(xiàn)有的通訊錄解決方案進(jìn)行深入的了解，初步?jīng)Q定了整個(gè)項(xiàng)目的需求，包括本系統(tǒng)包含哪些基本功能，做哪些擴(kuò)展，以及如何實(shí)現(xiàn)，為了完成項(xiàng)目需求了解了當(dāng)前主流的前端框架React，以及搭建后臺(tái)的nodejs，并且對(duì)有關(guān)知識(shí)和技術(shù)進(jìn)行了深入的學(xué)習(xí)。開(kāi)發(fā)到后期，進(jìn)行測(cè)試環(huán)節(jié)的時(shí)候，解決出現(xiàn)的問(wèn)題，對(duì)頁(yè)面進(jìn)行優(yōu)化，打開(kāi)頁(yè)面的速度等，有了更深刻的認(rèn)識(shí)，對(duì)于自己以后的工作和學(xué)習(xí)將是一筆不小的財(cái)富。通訊錄在現(xiàn)代社會(huì)是每個(gè)人必不可少的東西。每個(gè)人都必不可少的會(huì)有許多聯(lián)系人，在以前，每個(gè)人都曾經(jīng)手動(dòng)記錄所有地址簿信息。但是現(xiàn)代社會(huì)，通訊信息多種多樣，直接來(lái)改動(dòng)這些信息極易出錯(cuò)，并且很容易造成信息混亂或丟失。在各種移動(dòng)電話(huà)中，盡管商務(wù)通信中的電話(huà)簿便于攜帶，但其缺點(diǎn)是“記錄量少，瀏覽不便，記錄數(shù)據(jù)信息不完整”。有些人使用Excel或Word來(lái)編譯通訊簿。盡管數(shù)據(jù)相對(duì)全面并且信息足夠，但是查找非常麻煩，并且維護(hù)起來(lái)很麻煩。所以，我想到了使用數(shù)據(jù)庫(kù)來(lái)對(duì)數(shù)據(jù)進(jìn)行統(tǒng)一管理。1.2國(guó)內(nèi)外研究現(xiàn)狀最初的個(gè)人通訊錄管理是手動(dòng)的，工作量大且耗時(shí)長(zhǎng)。且信息極有可能遺漏，或者將信息記錄錯(cuò)，所以我決定使用數(shù)據(jù)庫(kù)來(lái)動(dòng)態(tài)保存想要保存的信息，這樣，不僅可以提高個(gè)人工作效率，還可以節(jié)省個(gè)人查詢(xún)信息的時(shí)間。這個(gè)通訊錄系統(tǒng)是每個(gè)個(gè)人用戶(hù)管理通訊錄必不可少的系統(tǒng)，這個(gè)系統(tǒng)可以快速查找修改增加刪除想變動(dòng)的信息，極大地方便了用戶(hù)合理地管理通訊錄。1.3系統(tǒng)說(shuō)明這個(gè)系統(tǒng)是在React的基礎(chǔ)上進(jìn)行開(kāi)發(fā)和完善的。用戶(hù)從開(kāi)始可以進(jìn)行注冊(cè)，登錄，創(chuàng)建，修改，刪除，查詢(xún)通訊信息。創(chuàng)建，修改，刪除，查詢(xún)分組。創(chuàng)建，修改日常行程，刪除日常行程，查詢(xún)?nèi)粘Ｐ谐獭Ｏ鄡?cè)功能，新增圖片，查看圖片，下載圖片，刪除圖片。修改密碼。退出登錄功能。為了保護(hù)個(gè)人的隱私，本系統(tǒng)不設(shè)管理員。2關(guān)鍵技術(shù)與開(kāi)發(fā)環(huán)境本章主要為軟件的開(kāi)發(fā)提供技術(shù)支持。2.1前后端分離在以前的程序項(xiàng)目開(kāi)發(fā)中，瀏覽器是前端和后端的分界線，前端人員只負(fù)責(zé)把頁(yè)面寫(xiě)好，然后把頁(yè)面交給后端人員，由后端人員來(lái)進(jìn)行代碼合并，部署，發(fā)布，等重要任務(wù)，并且承擔(dān)項(xiàng)目的邏輯處理，前端人員在日常工作中也只是負(fù)責(zé)輔助后端人員來(lái)完成開(kāi)發(fā)任務(wù)，但是隨著眾多前端技術(shù)的興起，前端技術(shù)棧也越來(lái)越多，3D動(dòng)畫(huà)，微信分析等功能只依靠后端已經(jīng)無(wú)法完成，前端工程師在開(kāi)發(fā)中所占的比重也越來(lái)越大，也不再是只是給后端工程師作為輔助，然后隨著npm興起，前端也有了可以統(tǒng)一管理依賴(lài)以及打包的工具，自此，前端和后端分離的需求已收到越來(lái)越多的關(guān)注。前后端分離作為Web應(yīng)用程序的新體系結(jié)構(gòu)模型，前端和后端的分離也與傳統(tǒng)的Web開(kāi)發(fā)不一樣。在前后端交互上，以本系統(tǒng)為例，本系統(tǒng)是一個(gè)單頁(yè)面應(yīng)用程序，Ajax，是一個(gè)前端調(diào)用后端接口的程序，本系統(tǒng)使用了它的升級(jí)版axios。我在寫(xiě)好頁(yè)面樣式之后，可以通過(guò)瀏覽器訪問(wèn)到靜態(tài)頁(yè)面，然后在進(jìn)入頁(yè)面時(shí)通過(guò)axios請(qǐng)求調(diào)用到nodejs中的接口，nodejs在通過(guò)sql語(yǔ)句去數(shù)據(jù)庫(kù)查找所需要的數(shù)據(jù)，在通過(guò)axios的HTTP請(qǐng)求把所需要的數(shù)據(jù)返回給前端。前端拿到數(shù)據(jù)在根據(jù)需要顯示到對(duì)應(yīng)的位置，在平常的前后端開(kāi)發(fā)中，前端和后端只需要寫(xiě)好各自的邏輯，然后定義和各自axios要請(qǐng)求和接收的數(shù)據(jù)格式，一般數(shù)據(jù)格式通常是取用JSON格式，以及接口文檔，這樣，前端人員和后端人員的分工細(xì)化了，但是，這樣的話(huà)就更需要前端人員和后端人員定義好接口規(guī)范，一個(gè)好的規(guī)范可以大大提升開(kāi)發(fā)的效率后端人員可以專(zhuān)注于邏輯處理，前端人員也可以專(zhuān)注于頁(yè)面的美化以及頁(yè)面打開(kāi)效率的提升。如果前端在后端接口出來(lái)之前就完成了頁(yè)面，也可以通過(guò)Mock來(lái)造假數(shù)據(jù)以提升開(kāi)發(fā)效率。2.2HTML5HTML5是由結(jié)構(gòu)，樣式，行為組成，被用于在頁(yè)面上呈現(xiàn)樣式，HTML5是HTML標(biāo)準(zhǔn)的第五個(gè)版本。它的不斷更新，使Web標(biāo)準(zhǔn)一直能支持最新的技術(shù)發(fā)展，同時(shí)滿(mǎn)足Internet應(yīng)用程序的快速發(fā)展。它還可以滿(mǎn)足開(kāi)發(fā)人員的開(kāi)發(fā)需求，還可以幫助瀏覽器提供更多本機(jī)應(yīng)用程序服務(wù)。2.2.1WebSocketWebSocket是一種用于服務(wù)器和瀏覽器之間互相通訊的技術(shù)，之所以它會(huì)被廣泛使用，是因?yàn)樗梢允箍蛻?hù)端和服務(wù)器端之間建立長(zhǎng)連接，并且只需要一次，就可以建立持久的連接，可以減少web間的通信內(nèi)存損耗。在沒(méi)有WebSocket這項(xiàng)技術(shù)的時(shí)候，大多數(shù)開(kāi)發(fā)人員都會(huì)使用輪詢(xún)這種方法來(lái)使得Web每隔一段時(shí)間將請(qǐng)求發(fā)送到服務(wù)器一次。這樣的弊端也非常大，如果連續(xù)不斷的向服務(wù)器發(fā)送請(qǐng)求，就會(huì)非常浪費(fèi)帶寬，浪費(fèi)網(wǎng)絡(luò)資源，所以，后面就出現(xiàn)了WebSocket。現(xiàn)如今，基本上所有的主流瀏覽器都支持WebSocket協(xié)議，這也為前端發(fā)展提供了良好的環(huán)境，可以使更多，更大的應(yīng)用程序能夠快速，穩(wěn)定的運(yùn)行在瀏覽器上。2.3前端工程化這些年，隨著互聯(lián)網(wǎng)的發(fā)展越來(lái)越快，Web前端作為一項(xiàng)新興技術(shù)，發(fā)展的也同樣飛快。因?yàn)闉g覽器的快速更新?lián)Q代，為前端技術(shù)提供了軟件基礎(chǔ)，以及更穩(wěn)定的平臺(tái)，可以讓前端展示更絢麗的界面，以及4G，5G技術(shù)的發(fā)展，為前端技術(shù)提供了硬件基礎(chǔ)，不會(huì)像以前一樣進(jìn)入一個(gè)頁(yè)面也需要十幾秒甚至幾十秒，以及移動(dòng)端的發(fā)展，各種尺寸的手機(jī)，以及手機(jī)性能的提高，都為前端的發(fā)展提供了基礎(chǔ)，前端因?yàn)榭蚣艿陌l(fā)展，現(xiàn)如今也可以處理復(fù)雜的邏輯。隨著前端工程化的發(fā)展，以及nodejs的發(fā)展，前端可以使用nodejs快速構(gòu)建開(kāi)發(fā)平臺(tái)，為前端發(fā)展提供了便利，以及模塊化的出現(xiàn)，可以使多人同時(shí)開(kāi)發(fā)同一個(gè)系統(tǒng)，同時(shí)，node還是目前最大的第三方庫(kù)管理平臺(tái)，可以統(tǒng)一管理所有的依賴(lài)性，這更加為前端工程化提供了基礎(chǔ)。在現(xiàn)在的程序開(kāi)發(fā)階段，因?yàn)榍岸撕蠖艘呀?jīng)分離，所以要分開(kāi)管理各自的依賴(lài)，在前端部分，所需要管理打包的資源有HTML，CSS，JS，這三項(xiàng)也就是完成一個(gè)前端頁(yè)面所需要的最基本的元素，在開(kāi)發(fā)階段，這三項(xiàng)資源由模塊分開(kāi)進(jìn)行管理，在生產(chǎn)階段，一般會(huì)使用打包工具來(lái)對(duì)代碼進(jìn)行編譯，降低所使用的版本，這樣做的原因是要保證生產(chǎn)環(huán)境所運(yùn)行的代碼，能夠在更多的瀏覽器運(yùn)行，比如說(shuō)，本系統(tǒng)在css部分使用了新版本SASS，這個(gè)是對(duì)css的優(yōu)化版本，還有ES6，在項(xiàng)目中使用了ES6中類(lèi)，還有箭頭函數(shù)的概念，這部分雖然在本地能夠運(yùn)行，但是不能保證在所有的瀏覽器都能夠運(yùn)行，所以這就需要使用打包工具來(lái)對(duì)代碼進(jìn)行編譯，降低代碼的版本，將SASS降低成css，將ES6降低成ES5，以保證代碼能夠在低版本瀏覽器運(yùn)行。還會(huì)將每個(gè)頁(yè)面單獨(dú)的css樣式合并成一個(gè)公共的css樣式，將每個(gè)頁(yè)面單獨(dú)的js代碼，進(jìn)行壓縮，合并成一個(gè)js文件，這樣可以減少文件的體積，當(dāng)文件體積減小后，就會(huì)相應(yīng)的增加業(yè)務(wù)代碼在瀏覽器中運(yùn)行的速度，當(dāng)運(yùn)行速度提升，也會(huì)給用戶(hù)帶來(lái)更好的體驗(yàn)。隨著前端技術(shù)的發(fā)展，前端項(xiàng)目的規(guī)模也越來(lái)越大，邏輯也越來(lái)越復(fù)雜，這就不在是只依靠一兩個(gè)人就能完成開(kāi)發(fā)，而是需要許多人共同來(lái)開(kāi)發(fā)一個(gè)項(xiàng)目，這就帶來(lái)了一個(gè)問(wèn)題，如何才能在多人同時(shí)開(kāi)發(fā)的情況下不會(huì)造成代碼沖突，這就是模塊化開(kāi)發(fā)，一個(gè)模塊可以將一組完整的HTML，CSS，JS代碼進(jìn)行合并，然后將這部分代碼，隨意引入到所需要的地方，比如說(shuō)，本系統(tǒng)中所使用的ui框架，antd就是這個(gè)概念，當(dāng)多人開(kāi)發(fā)時(shí)，每個(gè)人可以將自己寫(xiě)的代碼放到一個(gè)類(lèi)中，然后可以在頁(yè)面中對(duì)應(yīng)的位置將寫(xiě)好的頁(yè)面引入，這也就是組件化思想，本系統(tǒng)是基于React開(kāi)發(fā)的，同樣也使用了組件化開(kāi)發(fā)的思想，每一個(gè)頁(yè)面都是由一到多個(gè)組件拼湊起來(lái)，這樣做的好處是可以將代碼進(jìn)行復(fù)用，減少了項(xiàng)目體積，提高代碼運(yùn)行速度，增加用戶(hù)體驗(yàn)。2.3.1NPMNPM的全稱(chēng)是NodePackageManager，它是Nodejs默認(rèn)使用的用來(lái)進(jìn)行模塊化管理的工具，同樣，它也是現(xiàn)在最大的第三方庫(kù)的管理運(yùn)營(yíng)平臺(tái)，有了這個(gè)平臺(tái)后，可以為前端解決一大部分問(wèn)題，比如說(shuō)，每個(gè)人安裝的依賴(lài)不一樣從而導(dǎo)致的依賴(lài)混亂，所以就可以使用NPM來(lái)管理所需要的包，并且在Package.json文件中記錄所安裝的文件的依賴(lài)，還有依賴(lài)的版本號(hào)，這樣可以避免依賴(lài)混亂，管理困難等問(wèn)題。開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中，使用NPM安裝依賴(lài)時(shí)，還可以選擇是在開(kāi)發(fā)環(huán)境安裝依賴(lài)，還是在生產(chǎn)環(huán)境安裝依賴(lài)，這樣同樣可以減少不必要的安裝，從而精簡(jiǎn)項(xiàng)目代碼，當(dāng)修改依賴(lài)項(xiàng)的時(shí)候，Package.json里的記錄也將同樣的更新。在開(kāi)發(fā)私人通訊錄系統(tǒng)時(shí)，本系統(tǒng)的前端部分是使用NPM進(jìn)行依賴(lài)的管理。使用了Package.json來(lái)記錄開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境所需要的依賴(lài)項(xiàng)，當(dāng)別人下載這個(gè)項(xiàng)目時(shí)，也可以根據(jù)Package.json里記錄的依賴(lài)進(jìn)行安裝。2.3.2ECMAScript6ECMAScript6縮寫(xiě)為ES6，是在2015年由ES5更新成ES6，在這次更新中，ES6新增了Let，const，這兩個(gè)關(guān)鍵詞，這兩個(gè)關(guān)鍵詞，解決了var的變量聲明提升的問(wèn)題，還有箭頭函數(shù)，箭頭函數(shù)在本系統(tǒng)中被多次使用，解決了this指向的問(wèn)題，不在需要使用bind（）方法來(lái)改變this指向。本系統(tǒng)還使用了class關(guān)鍵字，來(lái)將一個(gè)個(gè)頁(yè)面組裝成一個(gè)整體的程序，然后通過(guò)import引入所需要的類(lèi)來(lái)進(jìn)行拼接，是然后將寫(xiě)好的類(lèi)使用export或者extends來(lái)導(dǎo)出。圖圖2.1 ES6模塊化代碼示例ES6引入導(dǎo)出代碼如圖2.1所示，使用import導(dǎo)入在其他地方或框架內(nèi)已經(jīng)寫(xiě)好的類(lèi)，然后在使用ES6的新關(guān)鍵字class來(lái)聲明這個(gè)導(dǎo)入的類(lèi)，然后在這個(gè)頁(yè)面寫(xiě)入自己需要完成的代碼，當(dāng)寫(xiě)完之后在使用export把這個(gè)寫(xiě)好的組件導(dǎo)出，然后在需要使用它的地方進(jìn)行導(dǎo)入，這樣的話(huà)，就把一個(gè)功能豐富的頁(yè)面拆分成許許多多的組件，可以供多人同時(shí)開(kāi)發(fā)，而不會(huì)造成沖突，這樣，也極大的促進(jìn)了前端模塊化開(kāi)發(fā)和規(guī)范化來(lái)發(fā)。在本次開(kāi)發(fā)系統(tǒng)的過(guò)程中，使用了ES6的新技術(shù)箭頭函數(shù)，import，export進(jìn)行導(dǎo)入導(dǎo)出，雖然方便了本次的開(kāi)發(fā)，但是隨之也帶來(lái)一個(gè)問(wèn)題，呢就是低版本的瀏覽器可能無(wú)法識(shí)別這樣的新代碼，這樣，也就催生了一項(xiàng)新技術(shù)，Wabpack，它可以用來(lái)編譯打包，而在打包的過(guò)程中，使用了babel來(lái)編譯高版本的代碼，把高版本的ES6代碼轉(zhuǎn)義成ES5代碼，為瀏覽器提供更高的兼容性。2.3.3Babelbabel我在之前有提到過(guò)，主要是用來(lái)把高版本的，可能無(wú)法被瀏覽器識(shí)別的代碼，轉(zhuǎn)化成能被瀏覽器識(shí)別的低版本代碼，babel可以單獨(dú)使用，將ES6的代碼轉(zhuǎn)化成ES5的代碼，還可以使用它提供的一個(gè)方法babeloader，這個(gè)方法在Webpack打包時(shí)會(huì)自動(dòng)使用，作用同樣也是用來(lái)將高版本代碼轉(zhuǎn)換成低版本代碼。在本系統(tǒng)的開(kāi)發(fā)中，我也使用了babeloader，來(lái)對(duì)系統(tǒng)中出現(xiàn)的ES6的新特性的代碼進(jìn)行了編譯。2.3.4WabpackWebpack被用來(lái)給前端項(xiàng)目進(jìn)行打包，打包，也就是要將在開(kāi)發(fā)環(huán)境所編寫(xiě)的代碼，進(jìn)行一系列處理，包括把高版本代碼降低成低版本代碼，將項(xiàng)目中所用到的類(lèi)，依賴(lài)，樣式代碼，進(jìn)行合并，比如在本系統(tǒng)中，將ES6的代碼轉(zhuǎn)換成ES5的代碼，將樣式的SASS代碼轉(zhuǎn)換成css代碼，將項(xiàng)目用到的ui框架中，所用到的樣式，抽離出來(lái)，在與本地所寫(xiě)的SASS代碼抽離出來(lái)，然后將多個(gè)頁(yè)面的SASS合并成一個(gè)css文件，將多個(gè)文件的js代碼合并成一個(gè)js文件，然后將代碼進(jìn)行丑化，壓縮，丑化是為了讓別人不會(huì)在瀏覽器直接看到你的源代碼，保證你代碼的安全，壓縮是為了將文件體積減小，從而提升瀏覽器編譯文件的速度，編譯速度提高，就會(huì)提高頁(yè)面打開(kāi)的速度。Webpack是一項(xiàng)開(kāi)源的技術(shù)，也隨著技術(shù)的發(fā)展在不斷更新，到現(xiàn)在，它已經(jīng)更新到了4版本，同時(shí)，也會(huì)隨著技術(shù)的更新?lián)Q代，而同步更新。在本系統(tǒng)的開(kāi)發(fā)過(guò)程中，我使用了React的腳手架自動(dòng)生成了項(xiàng)目目錄以及基本結(jié)構(gòu)，在生成的Package.json文件中，有這個(gè)項(xiàng)目的基本信息，在這里面有一項(xiàng)是dependencies,這項(xiàng)里面記錄了這個(gè)系統(tǒng)生產(chǎn)環(huán)境所需要的依賴(lài),devDependencies,這項(xiàng)里面記錄了這個(gè)系統(tǒng)開(kāi)發(fā)環(huán)境所需要的依賴(lài)。它還實(shí)現(xiàn)了項(xiàng)目對(duì)瀏覽器的熱更新，就是說(shuō)在本地開(kāi)發(fā)的時(shí)候，只需要變更相應(yīng)代碼，保存，就可在瀏覽器自動(dòng)進(jìn)行更新，而無(wú)需刷新瀏覽器頁(yè)面。打包的時(shí)候，它也是讀取這個(gè)文件，然后根據(jù)這個(gè)文件所記錄的信息來(lái)打包依賴(lài)項(xiàng)。2.4前端框架這一節(jié)主要記錄在本系統(tǒng)中所用到的前端框架。2.4.1ReactReact是Facebook公司的一個(gè)項(xiàng)目，這個(gè)項(xiàng)目本來(lái)是Facebook公司的內(nèi)部項(xiàng)目，在這個(gè)項(xiàng)目寫(xiě)完之后，卻意外的發(fā)現(xiàn)，這個(gè)框架特別好用，慢慢的，這個(gè)項(xiàng)目就有越來(lái)越多的人使用了起來(lái)，慢慢的，這個(gè)項(xiàng)目就進(jìn)行了開(kāi)源，然后隨著這個(gè)項(xiàng)目的持續(xù)優(yōu)化，以及更多的人使用它，現(xiàn)在他以成為三大主流框架之一。React通過(guò)組件來(lái)構(gòu)建界面。可以把組件看成一個(gè)個(gè)簡(jiǎn)單的函數(shù)，它在調(diào)用這個(gè)函數(shù)的時(shí)候會(huì)傳遞這個(gè)函數(shù)所需要的參數(shù)，然后在獲得這個(gè)參數(shù)的時(shí)候把這個(gè)參數(shù)輸出。還可以根據(jù)這個(gè)函數(shù)在這個(gè)系統(tǒng)中出現(xiàn)的次數(shù)來(lái)進(jìn)行程序的復(fù)用，這樣可以減少代碼的量，并且可以導(dǎo)出一個(gè)個(gè)小模塊在導(dǎo)入合成一個(gè)大的模塊。可以將需要導(dǎo)出的模塊使用export進(jìn)行導(dǎo)出，在通過(guò)import將需要到導(dǎo)入的內(nèi)容導(dǎo)入到指定界面。在日常開(kāi)發(fā)中，如果有必要的話(huà)可以在多個(gè)頁(yè)面中重復(fù)的使用單個(gè)組件。每一個(gè)組件其實(shí)還可以由許許多多的小組件組成。在新的框架中，出現(xiàn)的一個(gè)思想，也是跟以往完全不同的思想，這個(gè)就是使用數(shù)據(jù)來(lái)驅(qū)動(dòng)視圖，而不是像以往一樣操作DOM元素節(jié)點(diǎn)來(lái)改變?yōu)g覽器頁(yè)面，數(shù)據(jù)驅(qū)動(dòng)視圖在本系統(tǒng)中也有體現(xiàn)。比如說(shuō)，用戶(hù)在輸入完聯(lián)系人信息之后，點(diǎn)擊保存，然后將數(shù)據(jù)存到數(shù)據(jù)庫(kù)，然后在頁(yè)面上顯示，如果在以前使用jquery的話(huà)，可能就需要操作DOM節(jié)點(diǎn)，來(lái)將頁(yè)面顯示的呢個(gè)列表完全替換，這樣的話(huà)會(huì)對(duì)瀏覽器造成很大的開(kāi)銷(xiāo)，操作也不是很方便，但是在使用了React之后，就不在需要操作DOM了，可以通過(guò)數(shù)據(jù)的改變來(lái)驅(qū)動(dòng)視圖的變化，視圖改變，也就是說(shuō)頁(yè)面會(huì)自動(dòng)改變了，這樣可以節(jié)省瀏覽器性能。2.4.2AntDesignAntDesign是在React框架基礎(chǔ)上設(shè)計(jì)的ui框架，他有許許多多的樣式，有了這些樣式，可以加快前端的項(xiàng)目構(gòu)建，在本系統(tǒng)中，我同樣使用了AntDesign，使用了定制好的樣式組件，快速的完成了系統(tǒng)頁(yè)面樣式的優(yōu)化。2.5nodejs技術(shù)簡(jiǎn)介Nodejs是運(yùn)行在基于js的平臺(tái)服務(wù)器。實(shí)際上，他是對(duì)谷歌瀏覽器的V8引擎進(jìn)行的重復(fù)封裝。他可以實(shí)現(xiàn)類(lèi)似服務(wù)器的環(huán)境，并可以使用它來(lái)實(shí)現(xiàn)可伸縮的應(yīng)用程序。Nodejs高效，快速且易于使用。它非常適合構(gòu)建數(shù)據(jù)密集型實(shí)時(shí)應(yīng)用程序，并且主要用于在高度并發(fā)的環(huán)境中處理函數(shù)。Nodejs提供了一種技術(shù)，是為了幫助js更好的運(yùn)行在瀏覽器環(huán)境中的一種技術(shù)，他提供了一種環(huán)境，這種環(huán)境跟瀏覽器的環(huán)境類(lèi)似，它還提供了一種跟接口類(lèi)似的功能。同時(shí)，他還是一個(gè)跟以往的不同的操作環(huán)境。他可以用來(lái)打通數(shù)據(jù)庫(kù)跟前臺(tái)頁(yè)面的界限，在本系統(tǒng)中，通過(guò)sql語(yǔ)句來(lái)調(diào)用到數(shù)據(jù)庫(kù)中的數(shù)據(jù)，在通過(guò)前端調(diào)用接口，node接收到前端傳來(lái)的接口，在調(diào)用sql語(yǔ)句去數(shù)據(jù)庫(kù)查找相應(yīng)的數(shù)據(jù)。盡管Node在服務(wù)器端運(yùn)行時(shí)Javascript并非唯一的，但這是它一個(gè)強(qiáng)大的特性。因?yàn)楦靼姹緸g覽器的不同，各版本瀏覽器有自己獨(dú)特的版本，因此，我們必須去對(duì)應(yīng)瀏覽器的環(huán)境然后在選擇所需要的語(yǔ)言，隨著技術(shù)的發(fā)展，各種各樣的瀏覽器以及服務(wù)器的更新。如果想要能兼容大多數(shù)服務(wù)器和瀏覽器的環(huán)境的話(huà)就只能依靠Javascript實(shí)現(xiàn)。雖然不是只有Node能把Javascript運(yùn)行在服務(wù)器，但是Node卻很好的支持了各個(gè)瀏覽器，因此，Node發(fā)展也越來(lái)越快。以下為nodejs工作流程圖，如圖2.2所示:開(kāi)始偵聽(tīng)端口接受網(wǎng)絡(luò)請(qǐng)求發(fā)送給I/O觀察者形成時(shí)間結(jié)束開(kāi)始進(jìn)入循環(huán)執(zhí)行I/O觀察者中時(shí)間的回調(diào)函數(shù)退出循環(huán)回調(diào)?開(kāi)始偵聽(tīng)端口接受網(wǎng)絡(luò)請(qǐng)求發(fā)送給I/O觀察者形成時(shí)間結(jié)束開(kāi)始進(jìn)入循環(huán)執(zhí)行I/O觀察者中時(shí)間的回調(diào)函數(shù)退出循環(huán)回調(diào)?開(kāi)始綁定請(qǐng)求事件執(zhí)行回調(diào)函數(shù)結(jié)束圖2.2nodejs工作流程圖2.6Express框架Express是我們常用的，比較輕量級(jí)而且靈活性比較好的一款NodeJS

Web應(yīng)用程序的編程框架框架。對(duì)于這個(gè)框架中的中間插件的處理方法，這個(gè)可用于組合，安排等請(qǐng)求過(guò)程中的許多方法。Express框架它提供了一種極其便捷化的管理模式，并且他是模塊兒化的，它在構(gòu)建Web應(yīng)用程序的過(guò)程中極大的降低了我們的開(kāi)發(fā)難度。路由我們把從客戶(hù)機(jī)到服務(wù)器的一次請(qǐng)求成為路由。他是客戶(hù)機(jī)基于HTTP請(qǐng)求路徑，并且用于在Web服務(wù)器上匹配特定路由的一個(gè)過(guò)程，并且把最后的結(jié)果反饋給客戶(hù)端。路由的這種請(qǐng)求方法主要是由路由句柄和路徑組合而成。這種方法會(huì)指定類(lèi)似于get和post請(qǐng)求方法。從客戶(hù)端一次請(qǐng)求開(kāi)始到服務(wù)器，然后經(jīng)過(guò)各種轉(zhuǎn)發(fā)，這些都需要路由來(lái)提供相應(yīng)的功能。對(duì)于這個(gè)過(guò)程的一個(gè)或者是一些處理方法就是我們常說(shuō)的路由句柄。他主主要負(fù)責(zé)的是，通過(guò)調(diào)用自身?yè)碛械姆椒▉?lái)及時(shí)的響應(yīng)客戶(hù)端。中間件Express框架有著許多的數(shù)據(jù)處理機(jī)制，其中，中間件就是Express框架的核心功能。中間件它可以在，客戶(hù)端和服務(wù)器Request請(qǐng)求和response響應(yīng)中間，訪問(wèn)請(qǐng)求對(duì)象，并且響應(yīng)給服務(wù)器對(duì)象的中間件。他可以負(fù)責(zé)執(zhí)行我們寫(xiě)的任何代碼，并且可以對(duì)請(qǐng)求和響應(yīng)的對(duì)象進(jìn)行修改，必要的時(shí)候還可以終止請(qǐng)求響應(yīng)的階段。另外，Express框架也提供了不同級(jí)別的中間件。例如我們常用的應(yīng)用程序集合路由器的中間件,并且還提供了錯(cuò)誤處理中間件,它可以自定義錯(cuò)誤處理的過(guò)程。有了中間件，我們可以極大地簡(jiǎn)化開(kāi)發(fā)過(guò)程。3）模板引擎模板引擎是一種處理問(wèn)題的方法，他可以將與用戶(hù)進(jìn)行交互的界面和后臺(tái)運(yùn)行過(guò)程中的業(yè)務(wù)數(shù)據(jù)進(jìn)行分離。他可以把服務(wù)器的數(shù)據(jù)稍加組合，成為我們熟悉的HTML頁(yè)面，然后把它反饋給客戶(hù)端進(jìn)行顯示，這樣用戶(hù)就能直接的進(jìn)行操作，極大地簡(jiǎn)化了操作。4）錯(cuò)誤處理Express框架可以根據(jù)實(shí)際開(kāi)發(fā)過(guò)程中的需要，指定處理錯(cuò)誤的方法，也就是咱們的自定義錯(cuò)誤處理方法。對(duì)于自定義的錯(cuò)誤處理方法，也是可以在程序運(yùn)行的過(guò)程中，對(duì)相應(yīng)的錯(cuò)誤進(jìn)行處理。當(dāng)然，Express同樣的也具有錯(cuò)誤句柄的功能,它可以捕獲任何在程序運(yùn)行過(guò)程中發(fā)生的錯(cuò)誤,并且在控制臺(tái)顯示及錯(cuò)誤信息，以及棧和堆的一些相關(guān)跟蹤信息。2.7系統(tǒng)數(shù)據(jù)的介紹2.7.1數(shù)據(jù)庫(kù)的概念數(shù)據(jù)庫(kù)就像一個(gè)存儲(chǔ)大量信息的倉(cāng)庫(kù)，并且長(zhǎng)時(shí)間使用計(jì)算機(jī)作為介質(zhì)將大量數(shù)據(jù)存儲(chǔ)在集合中。該數(shù)據(jù)庫(kù)具有集成，數(shù)量大，可共享性和持久性的特點(diǎn)。數(shù)據(jù)只是某種事物的記錄符號(hào)，也就是說(shuō)，它可以是簡(jiǎn)單的數(shù)字或字母，也可以是圖片或聲音，并且可以機(jī)器語(yǔ)言的形式存儲(chǔ)在計(jì)算機(jī)中。數(shù)據(jù)庫(kù)有以下特點(diǎn)：1）數(shù)據(jù)集成化：數(shù)據(jù)庫(kù)將數(shù)據(jù)收集在一起，并且通過(guò)文件的內(nèi)部約束機(jī)制，使得原始混合的數(shù)據(jù)變得井井有條，從而防止了數(shù)據(jù)重復(fù)或數(shù)據(jù)混亂。便于將來(lái)維護(hù)數(shù)據(jù)庫(kù)；2）數(shù)據(jù)數(shù)量龐大性：作為眾多數(shù)據(jù)的載體，數(shù)據(jù)庫(kù)需要存在大量的數(shù)據(jù)，在同一時(shí)間內(nèi)如果同時(shí)調(diào)用將會(huì)對(duì)存儲(chǔ)器造成不小的負(fù)荷，要想解決這些問(wèn)題必須利用移動(dòng)硬盤(pán)，固態(tài)硬盤(pán)等數(shù)據(jù)存儲(chǔ)設(shè)備來(lái)進(jìn)行分擔(dān)；3）數(shù)據(jù)分享性強(qiáng)：其冗余度非常低，對(duì)數(shù)據(jù)庫(kù)進(jìn)行增加，修改，刪除，的操作時(shí)會(huì)非常方便，也可以用通一個(gè)數(shù)據(jù)庫(kù)存儲(chǔ)不同用戶(hù)的信息；在私人通訊錄系統(tǒng)中，數(shù)據(jù)庫(kù)起到了非常大的作用，它存儲(chǔ)了所有用戶(hù)的信息，也能及時(shí)修改前臺(tái)頁(yè)面和后臺(tái)接口交互時(shí)所產(chǎn)生的數(shù)據(jù)變化，將接收到的數(shù)據(jù)進(jìn)行分別的處理，存放的行為。而數(shù)據(jù)庫(kù)將這些收到的信息利用其集成化的特性將數(shù)據(jù)分門(mén)別類(lèi)。而實(shí)現(xiàn)這些功能nodejs技術(shù)就成為了這個(gè)項(xiàng)目的關(guān)鍵，其作為應(yīng)用編程的接口，將頁(yè)面與數(shù)據(jù)庫(kù)進(jìn)行連接。Nodejs的高并發(fā)等特性也可以更好的完成數(shù)據(jù)處理。2.7.2MySQL數(shù)據(jù)庫(kù)簡(jiǎn)介MySQL源自瑞典公司MySQLAB，經(jīng)過(guò)幾次轉(zhuǎn)手，MySQL成為Oracle的一員。盡管與大型數(shù)據(jù)庫(kù)相比，MySQL有許多無(wú)法與大型數(shù)據(jù)庫(kù)所媲美的功能，但是這并不能讓它退出歷史舞臺(tái)，但是它以實(shí)用性，低成本和開(kāi)源性成功占領(lǐng)了個(gè)人和中小企業(yè)市場(chǎng)。它易于學(xué)習(xí)，易于維護(hù)，執(zhí)行效率高并且與Linux和Windows等主流平臺(tái)兼容，從而使其成為程序員必須學(xué)習(xí)和理解的主流數(shù)據(jù)庫(kù)。MySQL之所以能夠擁有今天的成就，還得益于它的使用無(wú)需支付任何費(fèi)用，免費(fèi)的經(jīng)營(yíng)手段使用戶(hù)獲得了最大的收益。2.8系統(tǒng)運(yùn)行環(huán)境配置私人通訊錄系統(tǒng)為網(wǎng)頁(yè)版,所以只要基本滿(mǎn)足上網(wǎng)需求就可以運(yùn)行本系統(tǒng)。3總體設(shè)計(jì)3.1功能分析經(jīng)過(guò)對(duì)時(shí)下通訊錄系統(tǒng)網(wǎng)站的調(diào)查，對(duì)該系統(tǒng)的功能進(jìn)行的大體的劃分。確定了整個(gè)系統(tǒng)的基本模塊，所包括的模塊共有對(duì)通訊錄聯(lián)系人的新增，修改，刪除，查詢(xún)操作，對(duì)分組信息的新增，刪除操作，對(duì)日常行程的新增，修改，刪除，查詢(xún)操作，還包括是否需要提醒，以及對(duì)相冊(cè)照片的新增，相冊(cè)照片的刪除，相冊(cè)照片的下載，修改密碼，退出登錄的功能。下圖是本通訊錄系統(tǒng)的技術(shù)路線圖，如圖3.1所示：業(yè)務(wù)代碼業(yè)務(wù)代碼mysql數(shù)據(jù)庫(kù)后端部分通訊錄系統(tǒng)html,css,antd業(yè)務(wù)邏輯頁(yè)面前端部分React框架圖3.1私人通訊錄系統(tǒng)技術(shù)路線示意圖3.2系統(tǒng)功能分析下圖為私人通訊錄系統(tǒng)的功能框架圖，如圖3.2所示。進(jìn)入頁(yè)面注冊(cè)修改密碼相冊(cè)管理分組管理日程管理進(jìn)入頁(yè)面注冊(cè)修改密碼相冊(cè)管理分組管理日程管理通訊管理首頁(yè)登錄圖3.2私人通訊錄系統(tǒng)功能框架圖3.3數(shù)據(jù)流圖下圖是進(jìn)入注冊(cè)界面時(shí)進(jìn)行注冊(cè)的數(shù)據(jù)流圖，如圖3.3所示：注冊(cè)結(jié)果注冊(cè)結(jié)果用戶(hù)新用戶(hù)1注冊(cè)2進(jìn)入系統(tǒng)功能選擇用戶(hù)用戶(hù)圖圖3.3注冊(cè)時(shí)的數(shù)據(jù)流圖3.4系統(tǒng)結(jié)構(gòu)分析3.4.1邏輯結(jié)構(gòu)本系統(tǒng)是mvvm模式，將其以一個(gè)網(wǎng)頁(yè)的形式展示在網(wǎng)絡(luò)平臺(tái)中，訪問(wèn)者可以通過(guò)網(wǎng)頁(yè)進(jìn)行登錄,達(dá)到創(chuàng)建修改聯(lián)系人等一系列操作。下圖是網(wǎng)站進(jìn)行工作時(shí)的情況示意圖，如圖3.4所示：系統(tǒng)服務(wù)器系統(tǒng)服務(wù)器后臺(tái)數(shù)據(jù)庫(kù)后臺(tái)數(shù)據(jù)庫(kù)Internet用戶(hù)Internet用戶(hù)私人通訊錄Internet私人通訊錄Internet圖3.4網(wǎng)站工作情況示意圖下圖是網(wǎng)站的物理結(jié)構(gòu)示意圖，如圖3.5所示：瀏覽器瀏覽器瀏覽器WEB服務(wù)器數(shù)據(jù)服務(wù)器瀏覽器圖3.5網(wǎng)站物理結(jié)構(gòu)示意圖4數(shù)據(jù)庫(kù)設(shè)計(jì)4.1數(shù)據(jù)表的介紹該系統(tǒng)地?cái)?shù)據(jù)庫(kù)采用MYSQL數(shù)據(jù)庫(kù)，其作用是將網(wǎng)站中得到的數(shù)據(jù)進(jìn)行存儲(chǔ)，我將系統(tǒng)數(shù)據(jù)庫(kù)地名字設(shè)為addressBook，其中包括5張表。以下為數(shù)據(jù)庫(kù)中的數(shù)據(jù)表：communication（聯(lián)系人表）結(jié)構(gòu)如表4.1所示。表4.1communication的結(jié)構(gòu)字段名數(shù)據(jù)類(lèi)型是否主鍵描述idint是idnamevarchar(255)否聯(lián)系人名字phoneNumbervarchar(255)否聯(lián)系人電話(huà)birthdayvarchar(255)否聯(lián)系人生日subgroupvarchar(255)否所屬分組notevarchar(255)否給聯(lián)系人的備注policevarchar(255)否是否啟用生日?qǐng)?bào)警功能usernamevarchar(255)否用戶(hù)名groups（分組表）結(jié)構(gòu)如表4.2所示。表4.2groups的結(jié)構(gòu)字段名數(shù)據(jù)類(lèi)型是否主鍵描述idint是idgroupingvarchar(255)否分組名稱(chēng)usernamevarchar(255)否用戶(hù)名login（用戶(hù)登錄表）結(jié)構(gòu)如表4.3所示。表4.3login的結(jié)構(gòu)字段名數(shù)據(jù)類(lèi)型是否主鍵描述idint是idusernamevarchar(255)否登錄用戶(hù)名passwordvarchar(255)否密碼phonevarchar(255)否手機(jī)號(hào)schedule（日程管理信息表）結(jié)構(gòu)如表4.4所示。表4.4schedule的結(jié)構(gòu)字段名數(shù)據(jù)類(lèi)型是否主鍵描述idint是idtitledata(0)否日程需要完成的日期notevarchar(255)否日程的備注remindvarchar(255)否日程是否需要提醒usernamevarchar(255)否用戶(hù)名album（購(gòu)物車(chē)表）結(jié)構(gòu)如表4.5所示。表4.5album的結(jié)構(gòu)字段名數(shù)據(jù)類(lèi)型是否主鍵描述uidint是idurlvarchar(255)否圖片路徑namevarchar(255)否圖片的名字statusvarchar(255)否圖片的狀態(tài)（是否可以下載）usernamevarchar(255)否用戶(hù)名4.2用戶(hù)模塊設(shè)計(jì)概述4.2.1系統(tǒng)原理本系統(tǒng)是利用mvvm架構(gòu)作為開(kāi)發(fā)的基礎(chǔ)框架。私人通訊錄系統(tǒng)的主要體系結(jié)構(gòu)包括：1）數(shù)據(jù)服務(wù)器；2）WEB服務(wù)器；3）后臺(tái)管理平臺(tái)；4）客戶(hù)端。影響應(yīng)用系統(tǒng)設(shè)計(jì)的因素包括：1）業(yè)務(wù)處理方式；2）數(shù)據(jù)處理量，存儲(chǔ)量；3）應(yīng)用功能設(shè)計(jì)；4）服務(wù)器設(shè)計(jì)；5）存儲(chǔ)設(shè)計(jì)；6）安全設(shè)計(jì)。4.2.2用戶(hù)模塊的程序流程圖用戶(hù)模塊的設(shè)計(jì)，私人通訊錄系統(tǒng)的程序流程圖設(shè)計(jì)如圖4.1所示：是否新用戶(hù)是否新用戶(hù)登錄注冊(cè)進(jìn)入系統(tǒng)分組管理日程管理相冊(cè)管理聯(lián)系人管理圖4.1用戶(hù)模塊流程圖5詳細(xì)設(shè)計(jì)5.1前臺(tái)頁(yè)面部分5.1.1登錄以下是私人通訊錄系統(tǒng)的登錄頁(yè)面，如圖5.1所示：圖5.1私人通訊錄系統(tǒng)登錄頁(yè)面進(jìn)入登錄頁(yè)后,用戶(hù)名【必填】：可輸入不超過(guò)20位任意字符（中英文、數(shù)字、特殊字符），密碼【必填】：可輸入不超過(guò)20位任意字符的英文、數(shù)字、特殊字符，輸入后點(diǎn)擊登錄按鈕，如果輸入的賬號(hào)密碼正確，即可登錄成功，如果輸入的賬號(hào)密碼不規(guī)范：用戶(hù)名為空，點(diǎn)擊登錄提示【請(qǐng)輸入用戶(hù)名！】，用戶(hù)名不存在，點(diǎn)擊登錄提示【用戶(hù)名不存在！】，密碼為空，點(diǎn)擊登錄提示【請(qǐng)輸入密碼！】，密碼與登錄名不匹配，點(diǎn)擊登錄提示【密碼錯(cuò)誤，請(qǐng)重新輸入】，如用戶(hù)名，密碼輸入正確，則登錄成功，跳轉(zhuǎn)到首頁(yè)，如果沒(méi)有賬號(hào)可點(diǎn)擊頁(yè)面上的沒(méi)有賬號(hào)？去注冊(cè)>，跳轉(zhuǎn)注冊(cè)界面。5.1.2注冊(cè)以下是私人通訊錄系統(tǒng)的登錄頁(yè)面，如圖5.2所示：圖5.2私人通訊錄系統(tǒng)注冊(cè)頁(yè)面當(dāng)用戶(hù)沒(méi)有賬號(hào)時(shí)可以進(jìn)行注冊(cè)操作，可以進(jìn)入到注冊(cè)界面進(jìn)行注冊(cè)操作，用戶(hù)名【必填】：可輸入不超過(guò)20位任意字符（中英文、數(shù)字、特殊字符），如果輸入不規(guī)范：用戶(hù)名為空，點(diǎn)擊注冊(cè)提示【請(qǐng)輸入用戶(hù)名！】，密碼【必填】：可輸入不超過(guò)20位任意字符的英文、數(shù)字、特殊字符，如果輸入不規(guī)范：密碼為空，點(diǎn)擊注冊(cè)提示【請(qǐng)輸入您的密碼！】，確認(rèn)密碼【必填】：重復(fù)輸入剛才輸入的密碼，如果第二次輸入的密碼與第一次輸入的不一致，會(huì)出現(xiàn)【兩次輸入的密碼不一致！】，如果輸入不規(guī)范：確認(rèn)密碼為空，點(diǎn)擊注冊(cè)提示【請(qǐng)確認(rèn)您的密碼！】，手機(jī)號(hào)【必填】：只能輸入符合規(guī)則的11位號(hào)碼，如果輸入不規(guī)范：手機(jī)號(hào)為空，點(diǎn)擊注冊(cè)提示【請(qǐng)輸入正確的手機(jī)號(hào)碼!】，輸入后點(diǎn)擊注冊(cè)，進(jìn)行注冊(cè)操作，如果用戶(hù)名與之前已注冊(cè)過(guò)的用戶(hù)名重復(fù)，會(huì)出現(xiàn)【用戶(hù)已存在！】，如用戶(hù)名沒(méi)有重復(fù)，會(huì)出現(xiàn)【注冊(cè)成功！】，并且跳轉(zhuǎn)到登錄頁(yè)面，如果已有賬號(hào)，可點(diǎn)擊頁(yè)面上的已有賬號(hào)？去登錄>，跳轉(zhuǎn)到登錄界面。5.1.3首頁(yè)以下是私人通訊錄系統(tǒng)的首頁(yè)頁(yè)面，如圖5.3所示：圖5.3私人通訊錄系統(tǒng)首頁(yè)頁(yè)面首頁(yè)是本系統(tǒng)的主頁(yè)面，進(jìn)入其它功能都是從主頁(yè)面左側(cè)的菜單欄進(jìn)入。因?yàn)楸鞠到y(tǒng)使用組件化開(kāi)發(fā)，所以其它模塊是分開(kāi)組件從其它頁(yè)面引入。首頁(yè)左下角可以點(diǎn)擊收縮菜單欄，左側(cè)是通訊管理，日程管理，分組管理，相冊(cè)管理，修改密碼功能的入口，右上方有退出本系統(tǒng)的按鈕。5.1.4通訊管理以下是私人通訊錄系統(tǒng)的通訊管理頁(yè)面，如圖5.4所示：圖5.4私人通訊錄系統(tǒng)通訊管理頁(yè)面進(jìn)入首頁(yè)后會(huì)自動(dòng)進(jìn)入通訊管理頁(yè)面，頁(yè)面上方是搜索功能，輸入不同字段可對(duì)聯(lián)系人進(jìn)行搜索，姓名：可輸入不超過(guò)20位任意字符（中英文、數(shù)字、特殊字符），搜索出全模糊查詢(xún)結(jié)果，手機(jī)號(hào)：可輸入不超過(guò)11位數(shù)字，搜索出全模糊查詢(xún)結(jié)果。生日日期：可輸入不超過(guò)4位字符，搜索出全模糊查詢(xún)結(jié)果，所屬分組：可輸入不超過(guò)20位任意字符（中英文、數(shù)字、特殊字符），搜索出全模糊查詢(xún)結(jié)果，備注：可輸入不超過(guò)200位任意字符（中英文、數(shù)字、特殊字符），搜索出全模糊查詢(xún)結(jié)果。輸入完畢后點(diǎn)擊右側(cè)的查詢(xún)按鈕，就會(huì)查詢(xún)出所需要的結(jié)果。下方是一個(gè)表格，展示聯(lián)系人的信息，分別是聯(lián)系人姓名，聯(lián)系人手機(jī)號(hào)，聯(lián)系人生日日期，聯(lián)系人所屬分組，對(duì)此聯(lián)系人的備注，對(duì)此聯(lián)系人執(zhí)行的操作。對(duì)聯(lián)系人進(jìn)行的操作包括對(duì)聯(lián)系人的修改和刪除，點(diǎn)擊刪除的時(shí)候彈出冒泡框，提示【是否要?jiǎng)h除此聯(lián)系人?】，選擇否則關(guān)閉彈框，選擇是則進(jìn)行刪除操作，如刪除成功則提示【刪除聯(lián)系人成功】，如刪除失敗則提示【刪除聯(lián)系人失敗】，表格下面是一個(gè)分頁(yè)，可以讓頁(yè)面一次只展示10條數(shù)據(jù)，避免數(shù)據(jù)太多，加載緩慢的問(wèn)題。表格上方有按鈕，新增聯(lián)系人，點(diǎn)擊新增聯(lián)系人彈出模態(tài)框，可以對(duì)聯(lián)系人進(jìn)行新增操作，以下是私人通訊錄系統(tǒng)的添加聯(lián)系人頁(yè)面，如圖5.5所示：圖5.5私人通訊錄系統(tǒng)添加聯(lián)系人頁(yè)面添加聯(lián)系人可輸入如下信息進(jìn)行保存，姓名：可輸入不超過(guò)20位任意字符（中英文、數(shù)字、特殊字符），手機(jī)號(hào)：可輸入11位符合要求的手機(jī)號(hào)碼，生日日期：可輸入四位的月加日的格式（例如：01.01），所屬分組：下拉列表格式，可選擇在分組管理中已創(chuàng)建的分組，備注：可輸入不超過(guò)200位任意字符（中英文、數(shù)字、特殊字符），是否啟用生日?qǐng)?bào)警功能：可以選擇是否需要當(dāng)聯(lián)系人生日臨近的時(shí)候啟用提醒功能，輸入完畢的時(shí)候點(diǎn)擊確認(rèn)按鈕，如添加成功則提示【添加聯(lián)系人成功！】，如添加失敗則提示【添加聯(lián)系人失敗！】。為了減少代碼的冗余，我把新建用戶(hù)與修改用戶(hù)的彈窗進(jìn)行了復(fù)用，所以修改用戶(hù)的頁(yè)面與新建用戶(hù)的頁(yè)面相同，當(dāng)進(jìn)入修改頁(yè)面時(shí)，輸入完畢點(diǎn)擊確認(rèn)按鈕，如修改成功則提示【修改聯(lián)系人成功！】，如修改失敗則提示【修改聯(lián)系人失敗！】。5.1.5日程管理以下是私人通訊錄系統(tǒng)的通訊管理頁(yè)面，如圖5.6所示：圖5.6私人通訊錄系統(tǒng)日程管理頁(yè)面進(jìn)入日程管理頁(yè)面，頁(yè)面上方是搜索功能，輸入不同字段可對(duì)已有日程進(jìn)行搜索，日期范圍：可選擇一個(gè)日期范圍，搜索出日程日期在這個(gè)范圍之內(nèi)的結(jié)果，關(guān)鍵字：可輸入不超過(guò)200位任意字符（中英文、數(shù)字、特殊字符），搜索出備注中符合要求的全模糊查詢(xún)結(jié)果。輸入完畢后點(diǎn)擊右側(cè)的查詢(xún)按鈕，就會(huì)查詢(xún)出所需要的結(jié)果。下方是一個(gè)列表，展示日程記錄的日期，對(duì)此日程的備注，右側(cè)是對(duì)此日程執(zhí)行的操作。對(duì)日程進(jìn)行的操作包括對(duì)日程的修改和刪除，點(diǎn)擊刪除的時(shí)候彈出冒泡框，提示【是否要?jiǎng)h除此日程?】，選擇否則關(guān)閉彈框，選擇是則進(jìn)行刪除操作，如刪除成功則提示【刪除日程成功】，如刪除失敗則提示【刪除日程失敗】，表格下面是一個(gè)分頁(yè)，可以讓頁(yè)面一次只展示10條數(shù)據(jù)，避免數(shù)據(jù)太多，加載緩慢的問(wèn)題。表格上方有按鈕，添加日程，點(diǎn)擊添加日程彈出模態(tài)框，可以對(duì)日程進(jìn)行新增操作，以下是私人通訊錄系統(tǒng)的添加日程頁(yè)面，如圖5.7所示：圖5.7私人通訊錄系統(tǒng)新增日程頁(yè)面添加日程可輸入如下信息進(jìn)行保存，日程需要提醒的日期：可選擇日期，備注：可輸入不超過(guò)200位任意字符（中英文、數(shù)字、特殊字符），是否啟用生日?qǐng)?bào)警功能：可以選擇是否需要當(dāng)聯(lián)系人生日臨近的時(shí)候啟用提醒功能，輸入完畢的時(shí)候點(diǎn)擊確認(rèn)按鈕，如添加成功則提示【添加日程成功！】，如添加失敗則提示【添加日程失?。　?。為了減少代碼的冗余，我把新建用戶(hù)與修改用戶(hù)的彈窗進(jìn)行了復(fù)用，所以修改用戶(hù)的頁(yè)面與新建用戶(hù)的頁(yè)面相同，當(dāng)進(jìn)入修改頁(yè)面時(shí)，輸入完畢點(diǎn)擊確認(rèn)按鈕，如修改成功則提示【修改日程成功！】，如修改失敗則提示【修改日程失?。　?。5.1.6分組管理以下是私人通訊錄系統(tǒng)的通訊管理頁(yè)面，如圖5.8所示：圖5.8私人通訊錄系統(tǒng)分組管理頁(yè)面進(jìn)入分組管理頁(yè)面，左側(cè)可以添加分組，如添加成功則提示【添加分組成功！】，如添加失敗則提示【添加分組失敗！】，點(diǎn)擊刪除的時(shí)候彈出冒泡框，提示【確認(rèn)刪除此分組？(請(qǐng)確認(rèn)此分組下沒(méi)有聯(lián)系人)】，點(diǎn)擊取消則關(guān)閉冒泡框，點(diǎn)擊確定則進(jìn)行刪除操作，如刪除成功則提示【刪除分組成功！】，如刪除失敗則提示【刪除分組失敗！】。5.1.7相冊(cè)管理以下是私人通訊錄系統(tǒng)的相冊(cè)管理頁(yè)面，如圖5.9所示：圖5.9私人通訊錄系統(tǒng)相冊(cè)管理頁(yè)面進(jìn)入相冊(cè)管理頁(yè)面，點(diǎn)擊上傳圖片按鈕，彈出圖片選擇框，選擇自己需要上傳的圖片進(jìn)行上傳，如上傳成功則在左側(cè)出現(xiàn)圖片的縮略圖，鼠標(biāo)懸浮在圖片縮略圖上時(shí)可以進(jìn)行查看圖片大圖，圖片下載，圖片刪除的操作。5.1.8系統(tǒng)管理以下是私人通訊錄系統(tǒng)的系統(tǒng)管理頁(yè)面，如圖5.10所示：圖5.10私人通訊錄系統(tǒng)系統(tǒng)管理頁(yè)面進(jìn)入系統(tǒng)管理頁(yè)面，暫時(shí)只提供了修改密碼功能，可以輸入想要修改的密碼，點(diǎn)擊修改密碼按鈕進(jìn)行修改密碼操作，如修改成功則提示【修改密碼成功】，如修改失敗則提示【修改密碼失敗】。6測(cè)試概要測(cè)試內(nèi)容測(cè)試策略可以從功能上，可用性上，性能上進(jìn)行測(cè)試。 功能測(cè)試：從詳細(xì)設(shè)計(jì)所列出的功能開(kāi)始測(cè)試，確保系統(tǒng)的功能都能正常使用。功能測(cè)試包括跳轉(zhuǎn)測(cè)試，跳轉(zhuǎn)測(cè)試是指，測(cè)試系統(tǒng)中的鏈接是否能按照設(shè)置的呢樣那樣正確的跳轉(zhuǎn)到該跳轉(zhuǎn)的頁(yè)面，其他正常鏈接則跳轉(zhuǎn)到對(duì)應(yīng)的界面。還有”表單測(cè)試“，比如說(shuō)限制一些模態(tài)框中的表單的可輸入的字符長(zhǎng)度，輸入達(dá)到最大長(zhǎng)度時(shí)會(huì)無(wú)法繼續(xù)輸入等等。操作相應(yīng)測(cè)試，測(cè)試用戶(hù)的一些操作是否會(huì)正確響應(yīng)比如刪除和修改等操作，是否會(huì)正確改變數(shù)據(jù)庫(kù)數(shù)據(jù)。按照需求分析逐一進(jìn)行檢測(cè)。 可用性測(cè)試：按照業(yè)務(wù)流程操作一遍系統(tǒng)，查看是否能保存，修改，刪除想要進(jìn)行的操作。用戶(hù)界面測(cè)試，看看頁(yè)面加載是否流暢主要是跟網(wǎng)絡(luò)資源加載有關(guān)，比如說(shuō)相冊(cè)管理所上傳的圖片太大，導(dǎo)致加載過(guò)慢，還有導(dǎo)航欄是否直觀（見(jiàn)名知意），保證頁(yè)面的設(shè)計(jì)風(fēng)格一致等等。 性能測(cè)試：測(cè)試用戶(hù)訪問(wèn)頁(yè)面時(shí)打開(kāi)頁(yè)面的速度。不能讓頁(yè)面打開(kāi)的時(shí)間過(guò)長(zhǎng)，用戶(hù)可能會(huì)因?yàn)榈却龝r(shí)間過(guò)長(zhǎng)從而退出頁(yè)面，頁(yè)面打開(kāi)的速度，主要是跟后臺(tái)的性能有關(guān)。針對(duì)問(wèn)題跟進(jìn)性能問(wèn)題將會(huì)優(yōu)化node代碼。本系統(tǒng)的測(cè)試大概分成六個(gè)模塊來(lái)進(jìn)行測(cè)試，把自身當(dāng)成用戶(hù)，通過(guò)日常使用來(lái)測(cè)試流程，從而找出bug，測(cè)試概要如表7.1所示表6.1測(cè)試概要表測(cè)試模塊測(cè)試內(nèi)容登錄注冊(cè)模塊注冊(cè)時(shí)測(cè)試賬號(hào)唯一性，兩次密碼是否一致，是否能保存到數(shù)據(jù)庫(kù)中。登錄時(shí)測(cè)試登錄賬號(hào)密碼檢查是否正確，登錄成功能否跳轉(zhuǎn)頁(yè)面，登陸錯(cuò)誤能否正確提示錯(cuò)誤原因通訊管理模塊測(cè)試通訊管理信息能否進(jìn)行正常的查詢(xún)，新增，修改，刪除，以及提醒功能能否正常提醒。日程管理模塊測(cè)試日程管理信息能否進(jìn)行正常的查詢(xún)，新增，修改，刪除，以及提醒功能能否正常提醒。續(xù)表6.1測(cè)試概要表分組管理模塊測(cè)試分組能否正常的添加分組，刪除分組。相冊(cè)管理模塊測(cè)試相冊(cè)管理能否上傳圖片，查看圖片，下載圖片，刪除圖片。修改密碼模塊測(cè)試密碼能否修改成功。7測(cè)試結(jié)果及發(fā)現(xiàn)7.1登錄注冊(cè)模塊登陸注冊(cè)模塊測(cè)試用例：注：已注冊(cè)用戶(hù)名：郝旭波密碼：123123表7.1登陸注冊(cè)模塊測(cè)試用例表輸入信息（用戶(hù)名，密碼，確認(rèn)密碼）預(yù)期結(jié)果實(shí)際結(jié)果注冊(cè)：郝旭波賬號(hào)已注冊(cè)，注冊(cè)失敗注冊(cè)失敗注冊(cè)：郝旭波，123,124注冊(cè)失敗，兩次密碼不一致注冊(cè)失敗注冊(cè)：郝旭波1，123,123注冊(cè)成功，跳轉(zhuǎn)到登陸界面注冊(cè)成功登錄：郝旭波2,111用戶(hù)未注冊(cè)，登錄失敗登錄失敗登錄：郝旭波,123121密碼錯(cuò)誤登陸失敗登錄：郝旭波,123123登錄成功，跳轉(zhuǎn)到主界面登錄成功2.登陸注冊(cè)實(shí)際顯示界面如下圖:圖7.1已經(jīng)注冊(cè)測(cè)試圖圖7.2兩次密碼不一致圖7.3用戶(hù)名不存在圖7.4密碼錯(cuò)誤圖7.5登錄成功7.2通訊管理模塊測(cè)試1.通訊管理模塊測(cè)試用例：表7.2通訊管理模塊測(cè)試用例表輸入信息預(yù)期結(jié)果實(shí)際結(jié)果點(diǎn)擊添加聯(lián)系人出現(xiàn)模態(tài)框，輸入要保存的信息后點(diǎn)擊保存彈出添加聯(lián)系人成功，頁(yè)面列表出現(xiàn)添加的信息添加成功輸入要查詢(xún)的信息，點(diǎn)擊查詢(xún)列表出現(xiàn)與要查詢(xún)的信息有關(guān)聯(lián)的信息查詢(xún)成功點(diǎn)擊修改，本行的信息自動(dòng)出現(xiàn)在模態(tài)框內(nèi)，輸入要修改的信息，點(diǎn)擊保存彈出修改聯(lián)系人成功，頁(yè)面列表出現(xiàn)修改后的信息修改成功點(diǎn)擊刪除，根據(jù)提示進(jìn)行刪除彈出刪除成功刪除成功2.通訊管理模塊測(cè)試界面如下圖:圖7.6添加聯(lián)系人測(cè)試圖圖7.7修改聯(lián)系人測(cè)試圖圖7.8刪除聯(lián)系人測(cè)試圖7.3日程管理模塊測(cè)試1.日程管理模塊測(cè)試用例：表7.3分?jǐn)?shù)管理模塊測(cè)試用例表輸入信息預(yù)期結(jié)果實(shí)際結(jié)果點(diǎn)擊添加日程出現(xiàn)模態(tài)框，輸入要保存的信息后點(diǎn)擊保存彈出添加日程成功，頁(yè)面列表出現(xiàn)添加的信息添加成功輸入要查詢(xún)的信息，點(diǎn)擊查詢(xún)列表出現(xiàn)與要查詢(xún)的信息有關(guān)聯(lián)的信息查詢(xún)成功點(diǎn)擊修改，本行的信息自動(dòng)出現(xiàn)在模態(tài)框內(nèi)，輸入要修改的信息，點(diǎn)擊保存彈出修改日程成功，頁(yè)面列表出現(xiàn)修改后的信息修改成功點(diǎn)擊刪除，根據(jù)提示進(jìn)行刪除彈出刪除成功刪除成功2.日程管理模塊測(cè)試界面如下圖:圖7.9添加日程測(cè)試圖圖7.10修改日程測(cè)試圖圖7.11刪除日程測(cè)試圖7.4分組管理模塊測(cè)試1.分組管理模塊測(cè)試用例：表7.4分組管理模塊測(cè)試用例表輸入信息預(yù)期結(jié)果實(shí)際結(jié)果輸入要添加的分組，然后點(diǎn)擊添加分組右側(cè)出現(xiàn)剛剛添加的分組名稱(chēng)右側(cè)成功出現(xiàn)點(diǎn)擊刪除按鈕，所點(diǎn)擊的分組被刪除成功刪除成功2.分組管理模塊測(cè)試界面如下圖:圖7.12添加分組測(cè)試圖圖7.13刪除分組測(cè)試圖7.5相冊(cè)管理模塊測(cè)試相冊(cè)管理模塊測(cè)試用例：表7.5相冊(cè)管理模塊測(cè)試用例表點(diǎn)擊顯示預(yù)期結(jié)果實(shí)際結(jié)果點(diǎn)擊加號(hào)出現(xiàn)文件選擇框，可選擇想要上傳的圖片圖片上傳成功，并出現(xiàn)在頁(yè)面圖片上傳成功，并出現(xiàn)在頁(yè)面點(diǎn)擊圖片上的查看圖片出現(xiàn)圖片大圖出現(xiàn)圖片大圖續(xù)表7.5相冊(cè)管理模塊測(cè)試用例表點(diǎn)擊圖片上的刪除刪除圖片成功刪除圖片成功點(diǎn)擊圖片上的下載跳轉(zhuǎn)界面點(diǎn)擊右鍵進(jìn)行下載跳轉(zhuǎn)界面點(diǎn)擊右鍵進(jìn)行下載點(diǎn)擊圖片上的刪除刪除圖片成功刪除圖片成功2.相冊(cè)管理模塊測(cè)試界面如下圖:圖7.14添加圖片測(cè)試圖圖7.15刪除圖片測(cè)試圖圖7.16查看圖片測(cè)試圖圖7.17下載圖片測(cè)試圖7.6修改密碼模塊測(cè)試1.修改密碼模塊測(cè)試用例：表7.6修改密碼模塊測(cè)試用例表輸入信息預(yù)期結(jié)果實(shí)際結(jié)果輸入想要修改的密碼密碼修改成功密碼修改成功2.修改密碼模塊測(cè)試界面如下圖:圖7.18修改密碼測(cè)試圖8總結(jié)從選題開(kāi)始再到需求分析階段—詳細(xì)設(shè)計(jì)階段—數(shù)據(jù)庫(kù)設(shè)計(jì)及