基于React的私人通訊錄的設計與開發(fā)

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

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