目錄I 第3章個人云盤系統(tǒng)的需求分析 第3章個人云盤系統(tǒng)的需求分析3個人云盤系統(tǒng)的需求分析在本章中，將對整個系統(tǒng)進(jìn)行功能性需求和非功能性需求的分析，并進(jìn)行可行性評估以確定項目的可行性。在系統(tǒng)開發(fā)前期，全面的需求分析對于后續(xù)編碼實現(xiàn)非常重要，因為它能夠建立一個優(yōu)秀的基礎(chǔ)，減少由需求模糊引起的系統(tǒng)修改工作，從而縮短開發(fā)時間和降低成本。我們將側(cè)重于從系統(tǒng)功能和非功能兩個方面來分析需求。通過總體功能分析，我們可以確定系統(tǒng)的功能模塊劃分；通過分析系統(tǒng)的性能和安全性，我們可以提出性能需求。3.1業(yè)務(wù)分析該系統(tǒng)主要有兩個參與者：普通用戶、管理員。其中普通用戶能夠登錄注冊、修改密碼、上傳文件、下載文件、查看文件、刪除文件、收藏文件、預(yù)覽文件、搜索文件、添加好友、發(fā)送消息。管理員能夠查看用戶信息、查看文件信息、刪除用戶信息、刪除文件信息、修改用戶信息、修改文件信息。3.1.1普通用戶用例圖普通用戶能夠登錄注冊、修改密碼、上傳文件、下載文件、查看文件、刪除文件、收藏文件、預(yù)覽文件、搜索文件、添加好友、發(fā)送消息。普通用戶用例圖如圖3.1所示。圖3.1普通用戶用例圖3.1.2管理員用例圖管理員能夠查看用戶信息、查看文件信息、刪除用戶信息、刪除文件信息、修改用戶信息、修改文件信息。管理員用例圖如圖3.2所示。圖3.2管理員用例圖3.2系統(tǒng)的功能性需求分析3.2.1用戶模塊根據(jù)上面的業(yè)務(wù)分析，可得總結(jié)出用戶模塊有以下幾個功能點：普通用戶能通過手機(jī)號碼、驗證碼和密碼來注冊自己的賬號。普通用戶能夠通過注冊時的手機(jī)號碼和密碼登錄自己的賬號。普通用戶如果忘記密碼，可以能夠通過手機(jī)號碼和驗證碼來修改密碼。3.2.2管理員模塊根據(jù)上面的業(yè)務(wù)分析，可得總結(jié)出管理員模塊有以下幾個功能點：（1）管理員用戶登錄后能夠查看所有用戶信息和用戶上傳的文件信息。（2）管理員用戶登錄后能夠刪除所有用戶信息和用戶上傳的文件信息。（3）管理員用戶登錄后能夠編輯所有用戶信息和用戶上傳的文件信息。3.2.3文件模塊根據(jù)上面的業(yè)務(wù)分析，可得總結(jié)出文件模塊有以下幾個功能點：（1）普通用戶登錄后能夠看到自己上傳的文件和建立的文件夾。（2）普通用戶登錄后能夠在個人相冊界面看到自己上傳的圖片和視頻。（3）普通用戶登錄后能夠上傳自己本地的文件。（4）普通用戶登錄后能夠單個下載和批量下載自己上傳到服務(wù)器的文件。（5）普通用戶登錄后能夠搜索自己上傳到服務(wù)器的文件和建立的文件夾。（6）普通用戶登錄后能夠單個收藏和批量收藏自己上傳到服務(wù)器的文件。（7）普通用戶登錄后能夠單個刪除和批量刪除自己上傳到服務(wù)器的文件，文件被刪除后會移入回收站。（8）普通用戶登錄后能夠在線預(yù)覽自己上傳到服務(wù)器的圖片、視頻、音頻文件。3.2.4好友模塊根據(jù)上面的業(yè)務(wù)分析，可得總結(jié)出好友模塊有以下幾個功能點：（1）普通用戶登錄后能夠在好友界面添加和搜索好友。（2）普通用戶登錄后能夠在好友界面刪除自己的好友。（3）普通用戶登錄后能夠發(fā)送文本消息給好友。（4）普通用戶登錄后能夠發(fā)送文件給好友。3.3系統(tǒng)的非功能性需求分析系統(tǒng)的非功能需求是指除了具體功能之外的一些特殊需求，例如性能需求、安全性等。系統(tǒng)的功能性需求固然重要，但是非功能性需求也不可忽視。一個缺乏安全性、運行不穩(wěn)定的系統(tǒng)是難以應(yīng)用于實際的。系統(tǒng)的非功能性需求要求我們在設(shè)計系統(tǒng)時，不僅要考慮到滿足用戶的具體功能需求，更要保證系統(tǒng)穩(wěn)定易用。下面是個人云盤系統(tǒng)的非功能需求：系統(tǒng)的性能需求該云盤系統(tǒng)主要是為了方便用戶管理自己的文件開發(fā)的。而系統(tǒng)的性能是影響用戶體驗的重要因素之一，因此我們應(yīng)當(dāng)重視系統(tǒng)的性能需求。該云盤系統(tǒng)的性能需求如下：首先為了提升用戶體驗，前端界面的響應(yīng)時間要快，需要考慮的問題為為DOM操作和靜態(tài)資源的加載，系統(tǒng)的頁面響應(yīng)時間應(yīng)該小于2000ms。其次，為了讓多個用戶同時使用該系統(tǒng)，要求服務(wù)端能滿足50個用戶同時在線管理文件。最后，由于不同用戶使用瀏覽器不一樣，系統(tǒng)應(yīng)該能夠兼容常用的一些瀏覽器。系統(tǒng)的穩(wěn)定性系統(tǒng)的穩(wěn)定性是評價一個系統(tǒng)好壞的重要標(biāo)準(zhǔn)之一，也是用戶對系統(tǒng)最關(guān)心的問題。因此，我們在設(shè)計系統(tǒng)時一定要考慮到系統(tǒng)的穩(wěn)定性，并且采取一定的策略來保證穩(wěn)定性，例如可以使用成熟的開發(fā)框架，使用穩(wěn)定的操作系統(tǒng)等。系統(tǒng)的交互性系統(tǒng)的交互性是指它與用戶之間的互動和溝通能力，這包括系統(tǒng)提供給用戶的界面、用戶如何與系統(tǒng)進(jìn)行交互以及系統(tǒng)如何響應(yīng)用戶的操作等。良好的交互性可以提高用戶的滿意度和使用效率。例如，一個交互性好的系統(tǒng)可以使用戶更容易地使用它，從而降低用戶的學(xué)習(xí)成本，減少用戶的錯誤操作。我通過以下幾個方面來提高個人云盤系統(tǒng)的交互性。首先，我通過用戶調(diào)查來了解用戶的行為和需求，設(shè)計出更符合用戶期望的交互方式和界面。其次，我簡化了用戶界面，避免了復(fù)雜的操作，使得系統(tǒng)更簡潔、易于理解。最后，我確保系統(tǒng)能盡可能快速地響應(yīng)用戶的操作，并提供及時有效的反饋，以便用戶知道他們的操作是否成功。系統(tǒng)的安全性系統(tǒng)的安全性是指它對惡意攻擊和意外故障的抵抗能力。個人云盤系統(tǒng)中保存著許多重要的用戶信息，包括用戶的個人信息，用戶上傳的文件信息等。這些信息有著非常重要的價值。因此，要求系統(tǒng)要有安全性，要保證這些用戶信息的安全，即不被其他人惡意竊取和損壞。例如，我們可以通過限制用戶的輸入來防止惡意的SQL注入，通過md5加密來保護(hù)用戶密碼等。3.4可行性分析系統(tǒng)的可行性分析是指對一個將要開發(fā)的系統(tǒng)進(jìn)行評估和分析，以確定其技術(shù)、經(jīng)濟(jì)、市場等方面的可行性和風(fēng)險。通過可行性分析，我們可以避免在不具有可行性的項目上浪費時間和資源，降低可能會遇到的風(fēng)險，下面是個人云盤系統(tǒng)的可行性分析：技術(shù)可行性該云盤系統(tǒng)使用B/S架構(gòu)模式，基于SpringBoot和Vue框架進(jìn)行開發(fā)。SpringBoot和Vue都是目前比較成熟、穩(wěn)定的框架，它們具有豐富的社區(qū)資源和開發(fā)工具，我們可以在網(wǎng)上查閱到大量相關(guān)資料。此外，SpringBoot提供了系統(tǒng)安全性、數(shù)據(jù)訪問和事務(wù)管理等功能，而Vue提供了前端組件化和響應(yīng)式開發(fā)等特性。因此，使用SpringBoot和Vue框架來開發(fā)個人云盤系統(tǒng)在技術(shù)方面是可行的。經(jīng)濟(jì)可行性從市場需求來說，很多人需要一個穩(wěn)定性好，交互性強(qiáng)的云盤系統(tǒng)來管理自己日常文件。因此，該云盤系統(tǒng)有足夠的潛在用戶。從開發(fā)成本來說，開發(fā)一個小型的個人云盤系統(tǒng)，并不需要投入大量的資金，也不需要太多的人力資源進(jìn)行后期的維護(hù)，主要的成本在于購買服務(wù)器，但它卻可以方便用戶管理自己的文件。從這兩方面可以看出，該系統(tǒng)在經(jīng)濟(jì)方面也是可行的。個人水平可行性雖然沒有使用過Vue框架，但本人在大一的時候就已經(jīng)學(xué)習(xí)了前端的相關(guān)知識，并且開發(fā)過一個商城系統(tǒng)的網(wǎng)頁，所以使用Vue框架進(jìn)行前端開發(fā)并不困難。此外，我在大二的時候?qū)W校安排了具體的課程來學(xué)習(xí)SpringBoot，所以我對SpringBoot框架比較熟悉，使用它開進(jìn)行后端開發(fā)也非常容易。因此，該系統(tǒng)在個人水平方面也是可行的。3.5本章小結(jié)這一章主要對個人云盤系統(tǒng)的需求進(jìn)行了詳細(xì)分析，涵蓋了功能性和非功能性需求。對于該系統(tǒng)的可行性，考慮了技術(shù)、經(jīng)濟(jì)和個人能力方面等因素。最終得出該系統(tǒng)是可行的結(jié)論，并為下一章的詳細(xì)設(shè)計和實現(xiàn)做好了充分準(zhǔn)備。 第4章個人云盤系統(tǒng)的總體設(shè)計 第4章個人云盤系統(tǒng)的總體設(shè)計4個人云盤系統(tǒng)的總體設(shè)計在上一章中，對整個系統(tǒng)進(jìn)行了功能性需求和非功能性需求的分析，并進(jìn)行可行性評估以確定項目的可行性。在本章中，將闡述本系統(tǒng)的框架設(shè)計和功能模塊劃分。此外，還將根據(jù)上一章的需求分析進(jìn)行數(shù)據(jù)庫的設(shè)計和前后端通信接口的設(shè)計。4.1關(guān)鍵技術(shù)選型和框架設(shè)計4.1.1開發(fā)環(huán)境（1）硬件環(huán)境表4.1開發(fā)硬件環(huán)境系統(tǒng)windows10內(nèi)存8GB處理器AMDRyzen52500UwithRadeonVegaMobileGfx（2）軟件環(huán)境表4.2開發(fā)軟件環(huán)境前端開發(fā)框架Vue開發(fā)工具VisualStudioCode、IntelliJIDEA運行環(huán)境Node.js包管理工具NPM網(wǎng)絡(luò)請求庫Axios組件庫Element-UI4.1.2關(guān)鍵技術(shù)選型本小節(jié)將從前端開發(fā)框架的選取以及組件庫的選取來對系統(tǒng)開發(fā)中采用的關(guān)鍵技術(shù)進(jìn)行了闡述。近年來Web前端發(fā)展速度很快，已經(jīng)涌現(xiàn)了很多成熟的框架，從jQuery框架和Bootstrap框架，到目前具有代表性的Vue、React、Angular三大框架，這三個框架三者各有所長，各具特色。通過對三大框架的對比能夠選擇出最適合本系統(tǒng)的前端開發(fā)框架，進(jìn)而提高前端開發(fā)效率和性能。在近年來，Web前端發(fā)展迅速，不斷涌現(xiàn)出許多成熟的框架。從最初的jQuery和Bootstrap，到如今廣受歡迎的Vue、React、Angular三大框架，每個框架都有其獨特之處，各具特色。通過對這三大框架的比較，可以選擇最適合本系統(tǒng)的前端開發(fā)框架，提高開發(fā)效率和性能。（1）VueVue框架是開發(fā)前端項目時，開發(fā)人員可以使用的一個迅捷強(qiáng)大的框架。它是谷歌程序員尤雨溪在工作中于2013年開發(fā)出來的一款輕量級的前端框架。（2）ReactReact框架來源于Facebook，是Facebook用來架設(shè)Instagram的，在2013年5月Facebook將其開源。React框架代碼邏輯簡單，性能較好，因此得到了很多人的青睞。（3）AngularAngular是性能較好的前端框架，因此谷歌將其應(yīng)用在自己的多款產(chǎn)品中。表4.3三個框架對比明細(xì)VueReactAngular優(yōu)點簡單易用效率高組件化兼容性好可維護(hù)性高可以跨瀏覽器功能豐富可以自定義指令生態(tài)環(huán)境好缺點不支持IE8生態(tài)環(huán)境較差缺乏高階教程不適合單獨使用中文文獻(xiàn)少學(xué)習(xí)成本高文檔不全面對IE6/7兼容不好依賴注入由上面表4.3的三個框架的對比明細(xì)，可以得出Vue相對于其他主流框架，效率高，也比較簡單。并且它的缺點也不會對本課題的開發(fā)工作造成太多的影響。因此決定使用Vue框架作為本課題的主要前端技術(shù)。4.1.3個人云盤系統(tǒng)的框架設(shè)計個人云盤系統(tǒng)采用B/S架構(gòu)，采用前后端分離模式，將系統(tǒng)分成了幾個層。整體的架構(gòu)如圖4.1所示，系統(tǒng)主要被分為展現(xiàn)層、服務(wù)層、數(shù)據(jù)層：圖4.1系統(tǒng)架構(gòu)圖本系統(tǒng)以瀏覽器作為展示平臺，使用單頁面網(wǎng)頁展示數(shù)據(jù)及與用戶互動。所有接口使用RESTful風(fēng)格編寫。前端采用Vue和Element-UI制作界面，利用Axios實現(xiàn)與后端接口的交互，后端主要使用SpringBoot和Mybatis-Plus進(jìn)行開發(fā)，并通過數(shù)據(jù)存儲層存儲用戶相關(guān)信息。4.2個人云盤系統(tǒng)功能模塊劃分圖4.2系統(tǒng)功能模塊圖通過對系統(tǒng)功能進(jìn)行分析和梳理之后，將系統(tǒng)主要劃分成了四個功能模塊，分別為用戶模塊、管理員模塊、文件模塊和好友模塊。詳細(xì)的功能模塊劃分如圖4.2所示。用戶模塊的功能主要包括用戶注冊、用戶登錄、用戶修改個人信息，主要是修改個人信息，包括更改頭像、更改昵稱、更改密碼。管理員模塊的功能主要包括管理用戶和文件信息，主要是查看文件和用戶信息、修改文件和用戶信息、修改文件和用戶信息。文件模塊的功能主要包括文件上傳、文件下載、文件分享、文件管理，主要是管理云端文件，包括文件移動、文件刪除、文件預(yù)覽、文件收藏、文件搜索、文件展示方式、文件排序方式。好友模塊的功能主要包括好友管理、發(fā)送信息、發(fā)送文件。4.3個人云盤系統(tǒng)數(shù)據(jù)庫設(shè)計通過上面對個人云盤系統(tǒng)的需求分析和框架設(shè)計，對普通用戶、管理員用戶、文件、消息進(jìn)行數(shù)據(jù)庫設(shè)計。如圖4.3是管理員用戶與普通用戶和文件的ER圖。管理員用戶管理多個普通用戶和文件。圖4.3管理員用戶與普通用戶和文件ER圖如表4.4所示，管理員用戶的信息表名為ucenter_member，用于存儲管理員用戶的信息，包含4個字段分別是id、nickname、password、avatar，分別代表用戶ID、用戶名、用戶密碼、用戶頭像，數(shù)據(jù)表中主鍵是用戶ID。表4.4管理員信息表編號字段名數(shù)據(jù)類型標(biāo)識1idchar(100)用戶ID2nicknamevarchar(50)用戶名3passwordvarchar(255)用戶密碼4avatarvarchar(255)用戶頭像 如表4.5所示，普通用戶的信息表名為ucenter_member，用于存儲普通用戶的信息，包含8個字段分別是id、mobile、password、nickname、gmt_create、gmt_modified、avatar、neicun，分別代表用戶ID、手機(jī)號碼、用戶密碼、用戶名、創(chuàng)建時間、修改時間、用戶頭像、剩余內(nèi)存。其中主鍵是用戶ID。這是普通用戶注冊后的信息。表4.5普通用戶信息表編號字段名數(shù)據(jù)類型標(biāo)識1idchar(19)用戶ID2mobilevarchar(11)手機(jī)號碼3passwordvarchar(255)用戶密碼4nicknamevarchar(50)用戶名5gmt_createdatatime創(chuàng)建時間6gmt_modifieddatatime修改時間7avatarvarchar(255)用戶頭像8neicunbigint剩余內(nèi)存如表4.6所示，文件的信息表名為file，用于存儲文件的信息，包含12個字段分別是id、md5、url、mem_id、name、type、gmt_create、gmt_modified、collection、f_dir、video_id、size，分別代表文件ID、文件md5、文件url、所屬用戶ID、文件名、文件類型、創(chuàng)建時間、修改時間、是否收藏或刪除、所在目錄、視頻ID、文件大小。其中主鍵是文件ID。這是文件上傳后的信息。表4.6文件信息表編號字段名數(shù)據(jù)類型標(biāo)識1idchar(19)文件ID2md5varchar(255)文件md53urlvarchar(1000)文件url4mem_idchar(100)所屬用戶ID5namechar(100)文件名6typechar(19)文件類型7gmt_createdatatime創(chuàng)建時間續(xù)表4.68gmt_modifieddatatime修改時間9collectiontinyint是否收藏或刪除10f_dirvarchar(255)所在目錄11video_idchar(100)視頻ID12sizebigint文件大小如圖4.4普通用戶與文件和消息的ER圖所示，文件由普通用戶上傳的，每一個普通用戶擁有多個文件，每個文件有可能被多個用戶擁有。消息是由普通用戶發(fā)送的，每條消息只被一個用戶所擁有。圖4.4普通用戶與文件和消息ER圖如表4.7所示，消息信息表名為msg_info，用于存儲用戶間的消息，包含9個字段，分別是id、type、from_user_id、from_user_name、to_user_id、to_user_name、content、create_time、un_read_flag，分別代表消息ID、消息類型、發(fā)送用戶ID、發(fā)送用戶名、接受用戶ID、接收用戶名、消息內(nèi)容、發(fā)送時間、是否已讀，主鍵是消息ID。表4.7消息信息表編號字段名數(shù)據(jù)類型標(biāo)識1idint消息ID2typechar(20)消息類型3from_user_idint發(fā)送用戶ID4from_user_namevarchar(50)發(fā)送用戶名續(xù)表4.75to_user_idint接收用戶ID6to_user_namevarchar(50)接收用戶名7contentvarchar(200)消息內(nèi)容8create_timedatetime發(fā)送時間9un_read_flagint是否已讀綜上分析，該系統(tǒng)的全局ER圖如圖4.5所示。圖4.5全局ER圖4.4接口設(shè)計該系統(tǒng)前后端通信的主要接口類型分為6個，分別為用戶、文件夾、文件、管理員、文件上傳下載、好友會話。下面介紹每種類型具體的接口及其作用，如表4.8所示：表4.8前后端接口表接口名稱接口功能/educenter/member/register用戶注冊/educenter/member/login用戶登錄續(xù)表4.8/educenter/member/getMemberInfo/{id}查詢當(dāng)前用戶信息/educenter/member/modify修改當(dāng)前用戶信息/educenter/dir/deleteDirStruct/{memid}/{id}根據(jù)傳入用戶memid、目錄路徑url、和父文件夾id的刪除文件夾/educenter/dir/getUserDir/{id}獲取當(dāng)前目錄下的文件列表/educenter/dir/setUserDir/{memid}/{name}/{id}根據(jù)傳入的路徑、名字、和父文件夾的id新建文件夾/educenter/file/addFile添加文件的信息到數(shù)據(jù)庫/educenter/file/cancelCollection取消文件收藏/educenter/file/collectFile文件收藏/educenter/file/deletecomplete根據(jù)id徹底刪除文件/educenter/file/fileMove多選文件移動/educenter/file/findFile/{memid}/{name}根據(jù)名字模糊查詢文件/educenter/file/getAllFileInfo/{memId}查詢當(dāng)前用戶下的所有文件/educenter/file/getCurDirFiles/{id}根據(jù)當(dāng)前路徑查詢所有文件/educenter/file/getFileInfo/{id}根據(jù)文件id查詢文件具體信息/educenter/file/modify修改文件信息/educenter/file/updateFile/{id}/{name}根據(jù)文件id和文件名修改文件信息/queryallusers查詢所有用戶信息/queryallfiles查詢所有文件信息/admindelfile刪除文件信息/admindeluser刪除用戶信息/adminmodifyfile修改文件信息/adminmodifyuser修改用戶信息/eduoss/fileoss/downloadFile下載普通文件/eduoss/fileoss/downloadFile2下載音頻文件/eduoss/fileoss/getPlayAuth根據(jù)視頻vodioId獲取播放地址/eduoss/fileoss/removeAlyVideo/{memid}根據(jù)文件id刪除文件/eduoss/fileoss/upload/{memid}上傳文件到ftp服務(wù)器/createSession添加好友/delSession刪除好友/sessionList/already獲取好友列表/sessionList/not獲取非好友列表4.5本章小結(jié)在本章中，闡述了本系統(tǒng)的框架設(shè)計和功能模塊劃分。此外，還根據(jù)上一章的需求分析進(jìn)行了數(shù)據(jù)庫的設(shè)計和前后端通信接口的設(shè)計。在下一章，我們將對該云盤系統(tǒng)的實現(xiàn)細(xì)節(jié)進(jìn)行詳細(xì)設(shè)計。 第5章個人云盤系統(tǒng)的詳細(xì)設(shè)計 第5章個人云盤系統(tǒng)的詳細(xì)設(shè)計5個人云盤系統(tǒng)的詳細(xì)設(shè)計在上一章節(jié)中，我們對系統(tǒng)的整體進(jìn)行了框架設(shè)計，以此來確定系統(tǒng)設(shè)計的方向。接下來，我們可以根據(jù)這些總體設(shè)計得出系統(tǒng)的詳細(xì)功能，并通過此來系統(tǒng)的詳細(xì)設(shè)計。因此，在本章節(jié)中，我們將詳細(xì)介紹系統(tǒng)的詳細(xì)設(shè)計。5.1對象設(shè)計本系統(tǒng)共設(shè)計了61個類，由于數(shù)量太多，因此在本節(jié)中，選擇最重要的與文件相關(guān)的類進(jìn)行對象設(shè)計，他們分別為目錄節(jié)點類(TreeNode)、文件類(File)、用戶目錄類(UserDir)、FTP工具類(FTPUtil)、文件控制類(FileController)、文件服務(wù)類(FileService)、文件實現(xiàn)類(FileServiceImpl)、返回信息類(R)、用戶目錄服務(wù)類(UserDirService)、用戶目錄實現(xiàn)類(UserDirServiceImpl)。其他TreeNode類負(fù)責(zé)存儲目錄節(jié)點，F(xiàn)ile類負(fù)責(zé)存儲文件相關(guān)信息，UserDir類負(fù)責(zé)存儲用戶目錄，F(xiàn)TPUtil類負(fù)責(zé)連接服務(wù)器、上傳文件到FTP服務(wù)器以及從FTP服務(wù)器上下載文件到本地，F(xiàn)ileController類負(fù)責(zé)與前端的文件進(jìn)行交互，F(xiàn)ileService類負(fù)責(zé)定義文件操作相關(guān)接口，F(xiàn)ileServiceImpl類負(fù)責(zé)實現(xiàn)文件操作相關(guān)接口，R類負(fù)責(zé)控制返回消息的類型，UserDirService類負(fù)責(zé)定義用戶目錄操作相關(guān)接口，UserDirServiceImpl類負(fù)責(zé)實現(xiàn)用戶目錄操作相關(guān)接口。每個類的具體屬性和方法以及它們之間的聯(lián)系，如圖5.1所示。圖5.1文件操作類圖5.2交互設(shè)計5.2.1用戶注冊時序圖用戶通過輸入手機(jī)號碼、密碼、昵稱、驗證碼即可完成注冊。當(dāng)用戶輸入信息符合規(guī)范后，系統(tǒng)會發(fā)送驗證碼到用戶手機(jī)。用戶輸入正確的驗證碼，即可成功注冊。注冊成功后，用戶信息會存入數(shù)據(jù)庫，前端界面會切換到登錄界面，如圖5.2所示。圖5.2用戶注冊時序圖5.2.2用戶登錄時序圖用戶通過輸入手機(jī)號碼、密碼即可完成注冊。當(dāng)用戶輸入信息正確后，系統(tǒng)會提示用戶登錄成功，同時前端界面會切換到文件界面。用戶服務(wù)類會將該用戶的文件信息發(fā)送給前端進(jìn)行展示，如圖5.3所示。圖5.3用戶登錄時序圖5.2.3用戶上傳文件時序圖用戶在文件界面可以上傳文件，如果用戶空間充足，文件就會成功上傳到云服務(wù)器。上傳成功后，后端會更新數(shù)據(jù)庫中的文件信息和用戶信息。然后后端會將新的文件列表傳到前端進(jìn)行展示，并提示用戶上傳成功，如圖5.4所示。圖5.4用戶上傳文件時序圖5.2.4用戶下載文件時序圖用戶在文件界面可以下載文件，后端會根據(jù)文件名在數(shù)據(jù)庫中找到對應(yīng)的文件路徑，從云服務(wù)器上找到對應(yīng)文件下載到本地。然后后端將文件傳到前端以便用戶進(jìn)行下載，如圖5.5所示。圖5.5用戶下載文件時序圖5.2.5用戶預(yù)覽時序圖用戶在文件界面可以預(yù)覽文件，后端會根據(jù)文件名在數(shù)據(jù)庫中找到對應(yīng)的文件videoid，從云服務(wù)器上根據(jù)videoid申請到對應(yīng)的播放鏈接。然后后端將播放鏈接傳到前端，以便前端通過鏈接使用相關(guān)組件播放視頻或音頻，如圖5.6所示。圖5.6用戶下載文件時序圖5.3個人云盤系統(tǒng)功能模塊設(shè)計5.3.1登錄注冊模塊用戶只有在注冊登錄后，才能進(jìn)入個人云盤系統(tǒng)，進(jìn)行文件的上傳、下載和管理。用戶只需要填寫手機(jī)號碼、密碼、昵稱和驗證碼即可完成注冊。用戶可以通過手機(jī)號碼和密碼進(jìn)行登錄。為了保護(hù)用戶的信息安全，用戶注冊時輸入的密碼會經(jīng)過md5加密后再存入數(shù)據(jù)庫。用戶登錄時，系統(tǒng)會以同樣的加密方式對用戶輸入的密碼進(jìn)行加密后，與數(shù)據(jù)庫中的加密后的密碼進(jìn)行比對，若與數(shù)據(jù)庫中的密碼一致，則登錄成功。如果用戶忘記密碼，用戶能夠通過手機(jī)號碼、驗證碼和新密碼進(jìn)行密碼修改。整體注冊流程圖如圖5.7所示。圖5.7登錄注冊流程圖（1）用戶自動登錄為了方便用戶使用，若用戶上次使用系統(tǒng)后未退出登錄，用戶再次使用系統(tǒng)時能夠自動登錄。5.3.2管理員模塊在個人云盤系統(tǒng)中，為了防止用戶信息和個人文件信息違規(guī)，系統(tǒng)提供了管理員功能來監(jiān)督用戶信息和文件信息是否違規(guī)。系統(tǒng)中內(nèi)置了管理員賬號，當(dāng)管理員使用特定的管理員賬號進(jìn)行登錄時，即可進(jìn)入信息管理界面。在此界面，管理員可以進(jìn)行用戶信息管理和文件信息管理。在用戶信息管理中，管理員可以刪除用戶和修改用戶信息。在文件信息管理界面，管理員可以刪除文件和修改文件信息。流程圖如圖5.8所示。圖5.8管理員管理文件和信息流程圖5.3.3文件模塊（1）文件展示用戶登錄成功后，在文件界面可以看到新建的文件夾和上傳的各種類型的文件，并且常見的文件類型將使用對應(yīng)的圖標(biāo)進(jìn)行展示，以方便用戶查看自己的文件。（2）個人相冊用戶登錄成功后，在個人相冊界面可以看到自己上傳的圖片和視頻，圖片和視頻會根據(jù)上傳時間進(jìn)行分類。（3）文件上傳用戶登錄成功后，在文件主界面能夠通過上傳按鈕上傳自己本地的文件，且系統(tǒng)要提供進(jìn)度條來提示用戶當(dāng)前上傳進(jìn)度。首次注冊系統(tǒng)時，每個用戶會被分配4G的文件空間，如果用戶剩余空間小于當(dāng)前文件大小，則系統(tǒng)提示空間不夠，上傳失敗。此外，為了提高文件傳輸效率，如果該文件被其他用戶上傳過，就不需要再重復(fù)上傳。流程圖如圖5.9所示。圖5.9用戶上傳文件流程圖（4）文件存儲FTP(FileTransferProtocol)是一種常見的網(wǎng)絡(luò)傳輸協(xié)議，通常用于在不同計算機(jī)之間傳輸數(shù)據(jù)。FTP服務(wù)器是一種專門提供FTP服務(wù)的設(shè)備，它可以在一定范圍內(nèi)存儲文件，并允許用戶通過FTP協(xié)議來下載和上傳文件。在本云盤系統(tǒng)中，F(xiàn)TP服務(wù)器充當(dāng)存儲設(shè)備的角色，用戶可以通過在Ubuntu上搭建的FTP服務(wù)器來上傳和下載文件。（5）文件下載用戶登錄系統(tǒng)后，可以單個和批量下載自己上傳到服務(wù)器的文件。為了減小重復(fù)下載，當(dāng)文件被下載第二次時，系統(tǒng)應(yīng)給出提示文件已下載，是否繼續(xù)下載。如果本地存在同名文件，下載的文件名會被加上數(shù)字后綴。流程圖如圖5.10所示。圖5.10用戶下載文件流程圖（6）文件搜索用戶登錄系統(tǒng)后，通過搜索框可以模糊搜索到新建的文件夾和上傳的文件，如果不存在對應(yīng)文件或文件夾，系統(tǒng)會提示不存在該文件。并且用戶在搜索結(jié)果界面仍可以對文件進(jìn)行刪除、收藏等操作。（7）收藏夾用戶登錄系統(tǒng)后，可以對自己上傳的重要文件進(jìn)行收藏，被收藏的文件會在右上角標(biāo)記五角星。用戶可以在收藏夾中查看自己收藏的文件，并且可以對收藏夾中的文件進(jìn)行刪除、取消收藏等操作。（8）文件刪除用戶登錄系統(tǒng)后，可以單個和批量刪除自己上傳的文件。文件首次被刪除后，會被移入回收站。在回收站中，用戶可以看到自己首次刪除的文件，也可以選擇徹底刪除和恢復(fù)回收站中的文件。（9）文件預(yù)覽用戶登錄系統(tǒng)后，可以在文件界面雙擊文件圖標(biāo)來預(yù)覽自己上傳的圖片、音頻和視頻文件。用戶預(yù)覽圖片時，可以旋轉(zhuǎn)圖片和調(diào)節(jié)圖片大小。用戶預(yù)覽音頻和視頻時，可以拖動進(jìn)度條來調(diào)整播放進(jìn)度。音頻播放和視頻播放是互斥的，兩者不能同時播放。5.3.4好友模塊（1）好友管理用戶登錄系統(tǒng)后，可以在好友界面添加和刪除好友。用戶還可以通過搜索框來添加好友。此外，用戶可以清楚地看到自己的已經(jīng)添加的好友和能夠添加的好友。流程圖如圖4.7所示。（2）消息發(fā)送用戶登錄系統(tǒng)后，可以在好友界面發(fā)送文本消息給自己的好友。用戶還可以發(fā)送本地文件給自己的好友。在聊天界面，用戶與好友間的聊天記錄將被展示在聊天框中。兩者的文本消息使用不同顏色的氣泡進(jìn)行展示，兩者間的文件消息會根據(jù)文件類型選用不同的圖標(biāo)進(jìn)行展示，用戶可以雙擊文件進(jìn)行下載。此外，如果兩條消息相隔時間過長，消息前會添加時間戳。流程圖如圖5.11所示。圖5.11好友管理流程圖5.4本章小結(jié)本章節(jié)主要介紹了系統(tǒng)的對象設(shè)計、交互設(shè)計和功能模塊設(shè)計。首先，通過畫類圖進(jìn)行了系統(tǒng)的對象設(shè)計。然后，通過畫時序圖進(jìn)行了系統(tǒng)的交互設(shè)計。最后，對系統(tǒng)每個模塊里的小功能進(jìn)行了詳細(xì)設(shè)計。 第6章個人云盤系統(tǒng)的具體實現(xiàn) 第6章個人云盤系統(tǒng)的具體實現(xiàn)6個人云盤系統(tǒng)的具體實現(xiàn)在上一章節(jié)中，我們主要介紹了系統(tǒng)的對象設(shè)計、交互設(shè)計，對系統(tǒng)的功能模塊進(jìn)行了詳細(xì)設(shè)計。在本章內(nèi)容中主要對每個模塊功能的具體實現(xiàn)進(jìn)行闡述，介紹每個模塊具體功能的實現(xiàn)邏輯。6.1個人云盤系統(tǒng)功能模塊實現(xiàn)6.1.1登錄注冊模塊當(dāng)用戶注冊時，系統(tǒng)會在前端判斷用戶輸入的手機(jī)號、密碼、驗證碼是否符合規(guī)范，如是否為空等。不符合規(guī)范會給出對應(yīng)提示，若符合規(guī)范，則將用戶輸入的信息發(fā)送到后端由registerUser方法檢驗用戶是否注冊。若用戶還未注冊，則注冊成功，用戶信息會直接存入數(shù)據(jù)庫，用戶密碼會根據(jù)經(jīng)過類MD5加密后再存入數(shù)據(jù)庫。若已注冊，則提示當(dāng)前賬戶已注冊。該系統(tǒng)的注冊界面如圖6.1所示。當(dāng)用戶登錄時，系統(tǒng)會將用戶輸入的密碼進(jìn)行md5加密后，與數(shù)據(jù)庫里的加密密碼進(jìn)行比對。如果相同，則登錄成功，系統(tǒng)跳轉(zhuǎn)到對應(yīng)的用戶界面。如果不相同，則提示用戶密碼錯誤。該系統(tǒng)的登錄界面如圖6.2所示。此外，如果用戶忘記密碼，可以通過手機(jī)號和驗證碼修改密碼。用戶修改密碼的界面如圖6.3所示。圖6.1注冊頁面圖6.2登錄頁面圖6.3修改密碼頁面（1）用戶自動登錄該云盤系統(tǒng)提供了用戶自動登錄功能，當(dāng)用戶第一次登錄后，系統(tǒng)會使用瀏覽器的localStorage儲存當(dāng)前登錄的用戶信息，包括用戶頭像、用戶id等等。若用戶在使用本系統(tǒng)后退出登錄，會自動清空當(dāng)前用戶儲存在瀏覽器localStorage里的用戶信息。當(dāng)用戶再次使用該系統(tǒng)時，系統(tǒng)會檢測瀏覽器中是否存儲著用戶信息，若存在，則自動登錄到對應(yīng)用戶界面，若不存在，則自動切換到登錄界面，用戶輸入手機(jī)號和密碼，才可完成登錄。其中重要代碼間附錄A。6.1.2管理員模塊當(dāng)用戶使用管理賬號登錄后，會切換到管理員界面。所有的用戶信息和用戶上傳的文件的信息將會以表格的形式展示給管理員。若管理員認(rèn)為某個信息違規(guī)，可以選擇單擊每行最右側(cè)的刪除和修改按鈕來刪除或者修改該信息。部分關(guān)鍵代碼見附錄B。該云盤系統(tǒng)的管理員界面如圖6.4所示：圖6.4管理員頁面6.1.3文件模塊（1）文件展示該云盤系統(tǒng)用戶界面展示的文件主要分為兩類：文件夾和普通文件。對于文件夾來說，系統(tǒng)將每個用戶對應(yīng)的文件目錄樹使用JSON格式字符串存儲在數(shù)據(jù)庫中，如圖6.5所示：圖6.5用戶目錄樹圖用戶登錄后，會獲取到該用戶對應(yīng)的目錄樹，用戶初始目錄為root，系統(tǒng)將展示目錄樹中root所對應(yīng)的childrenList。當(dāng)用戶雙擊文件夾時，就會以該文件夾名為當(dāng)前目錄，找到對應(yīng)的childrenList進(jìn)行展示。對于普通文件來說，每個文件在數(shù)據(jù)庫中都保存著對應(yīng)的目錄，用戶初始目錄為root，系統(tǒng)就會檢索目錄為root的文件進(jìn)行展示。當(dāng)目錄發(fā)生切換時，系統(tǒng)會根據(jù)route參數(shù)里的路徑重新查找對應(yīng)的文件進(jìn)行展示。并且該云盤系統(tǒng)會對部分文件進(jìn)行個性化展示，如pdf文件，word文件，txt文件等等。此外，文件展示分為圖標(biāo)模式和列表模式兩種模式，可以通過變量showType來切換展示模式。圖標(biāo)模式如圖6.6所示，列表模式如圖6.7所示。不僅如此，對于普通文件還支持按修改時間排序和按文件大小排序，可以通過變量sortType來切換排序方式。部分關(guān)鍵代碼見附錄C。圖6.6圖標(biāo)模式文件展示圖圖6.7圖標(biāo)模式文件展示圖（2）個人相冊為了方便用戶查看自己上傳的圖片和視頻，該系統(tǒng)提供了個人相冊功能。當(dāng)用戶上傳文件的類型為image或video，會額外單獨地展示在個人相冊界面中。此外，用戶還可以通過右上角的篩選按鈕來選擇展示圖片或者視頻。具體界面如圖6.8所示：圖6.8個人相冊展示圖（3）文件上傳當(dāng)用戶上傳文件時，系統(tǒng)通過ElementUI提供的e-upload組件實現(xiàn)文件的上傳，文件通過后端會上傳到在Linux上搭建的FTP服務(wù)器上。前端獲取到文件后，開始計算文件的大小。如果文件大小比當(dāng)前用戶剩余空間大，則提示用戶空間不足，上傳失敗。用戶清理多余文件后，可再次上傳文件。若用戶空間足夠，就查詢數(shù)據(jù)庫中是否存在同名文件，如果沒有直接上傳并且更新數(shù)據(jù)庫即可。如果存在同名文件，就會檢查兩個文件對應(yīng)的md5是否相同。如果不同，就會將新文件的文件名添加時間后綴后，繼續(xù)上傳并更新數(shù)據(jù)庫。如果相同，檢查舊文件的所屬者與當(dāng)前用戶是否一致。如果一致，則提示上傳失敗。如果不一致，將數(shù)據(jù)庫中舊文件的路徑復(fù)制給新文件的路徑即可，無需重復(fù)上傳。上傳成功后，系統(tǒng)更新用戶剩余空間。此外，上傳文件時，系統(tǒng)提供進(jìn)度條來展示當(dāng)前文件上傳的進(jìn)度。系統(tǒng)將當(dāng)前文件名和文件進(jìn)度儲存在uploadProgressList中，并根據(jù)文件上傳進(jìn)度實時更新對應(yīng)的uploadProgressList。上傳文件進(jìn)度如圖6.9所示。部分關(guān)鍵代碼見附錄C。圖6.9文件上傳進(jìn)度圖（4）文件存儲當(dāng)用戶在系統(tǒng)中上傳文件時，首先，后端會初始化一個FTPClient對象，這個對象的connect和login方法會通過IP，端口，用戶名，密碼來與FTP服務(wù)器建立起連接。此外，為了防止文件名和文件內(nèi)容亂碼，系統(tǒng)將FTPClient的編碼格式設(shè)置成UTF-8，將文件名編碼格式設(shè)置為ISO-8859-1。如果目標(biāo)目錄不存在，系統(tǒng)會根據(jù)文件上傳的時間的年月日調(diào)用FTPClient的makeDirectory方法來建立多級目錄。然后，通過調(diào)用FTPClient的changeWorkingDirectory方法切換到目標(biāo)目錄。最后，通過調(diào)用FTPClient的storeFile方法在工作目錄上傳用戶文件。當(dāng)用戶在系統(tǒng)中下載文件時，首先，后端會初始化一個FTPClient對象，這個對象的connect和login方法會通過IP，端口，用戶名，密碼來與FTP服務(wù)器建立起連接。此外，為了防止文件名和文件內(nèi)容亂碼，系統(tǒng)將FTPClient的編碼格式設(shè)置成UTF-8，將文件名編碼格式設(shè)置為ISO-8859-1。最后FTPClient的retrieveFile方法會根據(jù)用戶提供的文件目錄，文件名將對應(yīng)的文件傳輸?shù)胶蠖?，由后端傳輸?shù)角岸诉M(jìn)行下載。（5）文件下載當(dāng)用戶下載文件時，系統(tǒng)根據(jù)文件名從后端獲取到FTP服務(wù)器上對應(yīng)的文件，再將文件從后端傳輸?shù)角岸瞬⑦M(jìn)行下載。文件下載包括單個下載和批量下載，當(dāng)用戶右擊某個文件后就可以選擇下載單個文件，當(dāng)用戶單擊某個文件后，會將該文件加入選中隊列selectFiles，同時會出現(xiàn)批量操作工具欄，即可進(jìn)行選中文件的批量下載，如圖6.10所示：圖6.10批量工具欄圖為了防止重復(fù)下載，文件被下載后，會在瀏覽器的localStorage里緩存已下載的文件信息。當(dāng)文件再次被下載時，如果localStorage里有該文件信息，將提示用戶是否繼續(xù)下載，用戶確認(rèn)后繼續(xù)下載該文件。如果本地目錄存在同名文件，會在文件名上添加數(shù)字后綴后，繼續(xù)下載。部分關(guān)鍵代碼見附錄C。（6）文件搜索為了方便用戶能快速地尋找到自己需要的文件，該云盤系統(tǒng)還支持文件搜索功能，分為普通文件搜索和文件夾搜索：普通文件搜索，即根據(jù)輸入的搜索內(nèi)容和當(dāng)前用戶ID對數(shù)據(jù)庫中的文件表進(jìn)行模糊搜索，返回的文件列表保存在listData中，前端解析listData中內(nèi)容進(jìn)行展示。文件夾搜索，即根據(jù)當(dāng)前用戶ID查找到對應(yīng)的用戶目錄樹，通過遞歸找到所有與搜索內(nèi)容相符合的子樹，返回的子樹保存在searchFolder中，前端解析searchFolder中內(nèi)容進(jìn)行展示。用戶可以通過單擊搜索界面的文件夾可以看到該文件夾里的文件夾和普通文件。當(dāng)搜索完成后，用戶可以通過左上角的按鈕返回到搜索前的目錄或者根目錄。具體效果如圖6.11所示。部分關(guān)鍵代碼見附錄C。圖6.11用戶搜索結(jié)果圖（7）收藏夾為了方便用戶可以方便地查看自己認(rèn)為比較重要的文件，該系統(tǒng)提供了收藏夾功能，包括單個收藏和批量收藏。用戶右擊文件即可選擇收藏單個文件，用戶單擊某個文件后，會將該文件加入選中隊列selectFiles，同時會出現(xiàn)批量操作工具欄，即可進(jìn)行選中文件的批量收藏。文件被收藏后，會在文件圖標(biāo)的右上角標(biāo)記五角星來提示用戶該文件已被收藏。不僅如此，該云盤系統(tǒng)還單獨提供了收藏夾來展示被用戶收藏的所有文件。具體界面如6.12所示：圖6.12用戶收藏夾圖（8）文件刪除用戶在系統(tǒng)主界面可以通過右鍵文件來進(jìn)行文件刪除操作，包括普通文件刪除和文件夾刪除：普通文件刪除，包括單個刪除和批量刪除。當(dāng)用戶右擊某個文件后就可以選擇刪除單個文件，當(dāng)用戶單擊某個文件后，會將該文件加入選中隊列selectFiles，同時會出現(xiàn)批量操作工具欄，即可進(jìn)行選中文件的批量刪除。為了防止用戶誤刪除，被用戶刪除的文件會被移入回收站。在回收站中，用戶可以選擇恢復(fù)誤刪的文件或者徹底刪除文件。文件夾刪除，包括刪除該文件夾和該文件夾里的文件和文件夾。當(dāng)文件夾被刪除時，系統(tǒng)首先會刪除文件夾里的所有文件，所有文件被刪除后，系統(tǒng)再通過遞歸依次刪除該文件夾的子文件夾和該文件夾。部分關(guān)鍵代碼見附錄C。（9）文件預(yù)覽為了方便用戶在系統(tǒng)中查看文件，該云盤對部分文件提供了在線預(yù)覽功能，包括圖片，視頻和音頻文件：圖片預(yù)覽是通過圖片的服務(wù)器路徑獲取到圖片并進(jìn)行展示。用戶可以在預(yù)覽圖片的同時放大縮小、選擇、拖動該圖片。具體如圖6.13所示。圖6.13圖片預(yù)覽圖視頻預(yù)覽和音頻預(yù)覽是通過阿里云的視頻點播實現(xiàn)的，當(dāng)用戶上傳視頻和音頻文件到FTP服務(wù)器時，同時會上傳到阿里云的視頻點播服務(wù)器，并獲得該視頻或音頻對應(yīng)的VideoId。當(dāng)用戶預(yù)覽視頻或音頻時，系統(tǒng)會通過VideoId獲取到對應(yīng)的播放鏈接。前端再通過video和audio組件進(jìn)行視頻或音頻的預(yù)覽。此外，系統(tǒng)通過監(jiān)聽變量progress和playState的變化來實現(xiàn)預(yù)覽的進(jìn)度條展示和暫停播放。部分關(guān)鍵代碼見附錄C。具體如圖6.14和圖6.15所示：圖6.14音頻預(yù)覽圖圖6.15預(yù)覽視頻圖6.1.4好友模塊為了方便該云盤系統(tǒng)用戶之間的交流，系統(tǒng)為用戶提供了簡易的好友模塊。用戶可以在該模塊添加和刪除好友，發(fā)送消息給好友。（1）好友管理在好友管理界面，系統(tǒng)會向用戶展示已添加好友和可添加好友。用戶可以通過單擊可添加好友列表中的用戶來實現(xiàn)好友的添加。如果可添加好友人數(shù)太多，用戶可能很難迅速地找到自己想要添加的好友。因此，用戶還可以通過搜索用戶名來添加好友。如果用戶想要終止與某好友的聊天，通過單擊好友列表右側(cè)的刪除按鈕，即可刪除該好友。具體界面如6.16所示：圖6.16好友列表圖（2）消息發(fā)送為了方便用戶間的交流，用戶可以發(fā)送簡易的消息給自己的好友。當(dāng)用戶單擊好友時，系統(tǒng)會根據(jù)當(dāng)前用戶ID和數(shù)據(jù)庫中與好友的SessionID建立WebSocket的會話，同時獲取對應(yīng)的歷史聊天消息展示給用戶。然后用戶可以發(fā)送消息給自己的好友，包括文本消息和文件消息：用戶在輸入框中輸入文本消息并單擊發(fā)送按鈕后，如果用戶在線，系統(tǒng)會根據(jù)用戶ID和SessionID找到對應(yīng)的會話，將文本消息通過WebSocket轉(zhuǎn)發(fā)給對應(yīng)的好友。如果用戶不在線，就會將消息更新進(jìn)數(shù)據(jù)庫并更新未讀消息數(shù)，等用戶上線后，就可以看到收到的消息。用戶選擇需要發(fā)送的文件后，系統(tǒng)會將文件上傳到FTP服務(wù)器，并返回該文件的路徑。如果用戶在線，系統(tǒng)會根據(jù)用戶ID和SessionID找到對應(yīng)的會話，將該文件的路徑通過WebSocket轉(zhuǎn)發(fā)給對應(yīng)的好友。如果用戶不在線，就會將消息更新進(jìn)數(shù)據(jù)庫并更新未讀消息數(shù)，等用戶上線后，就可以看到收到的消息，用戶可以通過單擊文件氣泡框進(jìn)行文件的下載。此外，為了方便用戶能夠了解消息發(fā)送的大致時間，如果當(dāng)前消息與上一條消息的時間差超過5min，系統(tǒng)就會在當(dāng)前消息前添加時間戳。部分關(guān)鍵代碼見附錄D。具體效果如圖6.17所示：圖6.17好友聊天界面圖6.2本章小結(jié)本章節(jié)主要介紹了項目每個模塊的具體功能以及實現(xiàn)細(xì)節(jié)。到此，系統(tǒng)的詳細(xì)設(shè)計和具體實現(xiàn)都已經(jīng)完成，下一章中，我們將對實現(xiàn)的功能進(jìn)行測試。 第7章系統(tǒng)測試與分析 第7章系統(tǒng)測試與分析7系統(tǒng)測試與分析在上一章中主要介紹了系統(tǒng)重要功能模塊的具體功能如何實現(xiàn)，并按照使用SpringBoot和Vue框架進(jìn)行了編碼實現(xiàn)。在本章內(nèi)容中主要闡釋對本系統(tǒng)的測試與分析，主要包括測試計劃、功能測試、非功能測試。功能測試將會對系統(tǒng)的幾個模塊里的重要功能設(shè)計測試用例并進(jìn)行進(jìn)一步的測試。非功能測試主要包括性能測試和安全性測試，將使用專業(yè)軟件進(jìn)行相關(guān)的非功能測試。7.1測試計劃本章將以功能模塊測試來對個人云盤系統(tǒng)進(jìn)行測試。由于系統(tǒng)的功能較多，很難在本章中全部進(jìn)行測試，因此本章將選取每個模塊中比較重要的功能并設(shè)計盡可能全面的測試用例進(jìn)行功能模塊測試。每個功能設(shè)計的測試用例和測試結(jié)果會記錄在對應(yīng)的測試用例表里，測試的結(jié)果會與最初設(shè)計要求進(jìn)行對比，以確保測試結(jié)果符合最初的設(shè)計要求。硬件環(huán)境：運行內(nèi)存為8G、處理器為AMDRyzen52500U。軟件環(huán)境：Windows10系統(tǒng)下的Edge瀏覽器。測試模塊：用戶模塊、管理員模塊、文件模塊、好友模塊。7.2功能測試7.2.1用戶模塊表7.1用戶注冊測試用例表編號測試用例預(yù)期測試結(jié)果實際測試結(jié)果備注1手機(jī)號填寫錯誤提示手機(jī)號碼錯誤提示手機(jī)號碼錯誤通過2驗證碼填寫錯誤提示驗證碼錯誤提示驗證碼錯誤通過3手機(jī)號碼已注冊提示賬號已注冊提示賬號已注冊通過4所有信息都正確注冊成功注冊成功通過5某項信息為空提示注冊失敗提示注冊失敗通過在上測試用例表7.1中，共設(shè)計了5個測試用例，用來測試用戶注冊時的各種可能出現(xiàn)的情況。其中測試用例1的測試結(jié)果如圖7.1所示，測試用例2的測試結(jié)果如圖7.2所示，測試用例3的測試結(jié)果如圖7.3所示，測試用例4的測試結(jié)果如圖7.4所示，測試用例5的測試結(jié)果如圖7.5所示。通過預(yù)期測試結(jié)果和實際測試結(jié)果的對比，我們可以發(fā)現(xiàn)用戶模塊的注冊功能的實現(xiàn)已經(jīng)達(dá)到了預(yù)期的效果，注冊功能測試完成。此外，由于該模塊的用戶登錄功能和用戶修改密碼功能具體實現(xiàn)邏輯和注冊是一樣的并且為了節(jié)省工作量，因此這兩個功能就不再進(jìn)行單獨的測試。圖7.1用戶手機(jī)號碼錯誤圖圖7.2用戶驗證碼錯誤圖圖7.3用戶賬號已注冊錯誤圖圖7.4用戶注冊成功圖圖7.5某項信息為空注冊失敗圖7.2.2管理員模塊表7.2管理員管理文件測試用例表編號測試用例預(yù)期測試結(jié)果實際測試結(jié)果備注1管理員刪除文件文件刪除成功文件刪除成功通過2管理員修改文件信息文件信息修改成功文件信息修改成功通過在上測試用例表7.2中，共設(shè)計了2個測試用例，用來測試管理員管理文件功能是否正常。其中測試用例1的測試結(jié)果如圖7.6和圖7.7所示，測試用例2的測試結(jié)果如圖7.8和圖7.9所示，測通過預(yù)期測試結(jié)果和實際測試結(jié)果的對比，我們可以發(fā)現(xiàn)管理員模塊的管理文件功能的實現(xiàn)已經(jīng)達(dá)到了預(yù)期的效果，管理文件功能測試完成。此外，由于該模塊的管理用戶功能具體實現(xiàn)邏輯和管理文件功能是一致的，因此不再單獨測試。圖7.6刪除文件前文件展示圖圖7.7刪除文件后文件展示圖圖7.8修改文件前文件展示圖圖7.9修改文件后文件展示圖7.2.3文件模塊（1）文件上傳測試表7.3上傳文件測試用例表編號測試用例預(yù)期測試結(jié)果實際測試結(jié)果備注1上傳文本文件文件上傳成功文件上傳成功通過2上傳視頻文件文件上傳成功文件上傳成功通過3上傳特殊文件文件上傳成功文件上傳成功通過4用戶空間不足，上傳文件提示空間不足提示空間不足通過5已存在同名但md5不同文件，上傳文件文件名加時間后綴文件名加時間后綴通過6存在md5相同文件，上傳文件提示上傳失敗提示上傳失敗通過在上測試用例表7.3中，共設(shè)計了6個測試用例，用來測試用戶上傳文件時的各種可能出現(xiàn)的情況。其中測試用例1的測試結(jié)果如圖7.10所示，測試用例2的測試結(jié)果如圖7.11所示，測試用例3的測試結(jié)果如圖7.12所示，測試用例4的測試結(jié)果如圖7.13所示測試用例5的測試結(jié)果如圖7.14所示，測試用例6的測試結(jié)果如圖7.15所示。通過預(yù)期測試結(jié)果和實際測試結(jié)果的對比，我們可以發(fā)現(xiàn)文件模塊的上傳文件功能的實現(xiàn)已經(jīng)達(dá)到了預(yù)期的效果，上傳文件功能測試完成。圖7.10上傳文本文件成功圖圖7.11上傳視頻文件成功圖圖7.12上傳特殊文件成功圖圖7.13空間不足上傳失敗圖圖7.14存在同名文件加時間后綴圖圖7.15存在相同文件上傳失敗圖（2）文件下載測試表7.4下載文件測試用例表編號測試用例預(yù)期測試結(jié)果實際測試結(jié)果備注1下載文本文件文件下載成功文件下載成功通過2下載視頻文件文件下載成功文件下載成功通過3下載特殊文件文件下載成功文件下載成功通過4本地存在同名文件，下載文件添加數(shù)字后綴添加數(shù)字后綴通過在上測試用例表7.4中，共設(shè)計了4個測試用例，用來測試用戶下載文件時的各種可能出現(xiàn)的情況。其中測試用例1的測試結(jié)果如圖7.16所示，測試用例2的測試結(jié)果如圖7.17所示，測試用例3的測試結(jié)果如圖7.18所示，測試用例4的測試結(jié)果如圖7.19所示通過預(yù)期測試結(jié)果和實際測試結(jié)果的對比，我們可以發(fā)現(xiàn)文件模塊的下載文件功能的實現(xiàn)已經(jīng)達(dá)到了預(yù)期的效果，下載文件功能測試完成。圖7.16下載文本文件圖圖7.17下載視頻文件圖圖7.18下載特殊文件圖圖7.19本地存在同名文件加數(shù)字后綴圖（3）文件預(yù)覽測試表7.5預(yù)覽文件測試用例表編號測試用例預(yù)期測試結(jié)果實際測試結(jié)果備注1預(yù)覽圖片文件預(yù)覽圖片正常預(yù)覽圖片正常通過2預(yù)覽音頻文件預(yù)覽音頻成功預(yù)覽音頻成功通過3預(yù)覽視頻文件預(yù)覽視頻成功預(yù)覽視頻成功通過在上測試用例表7.5中，共設(shè)計了3個測試用例，用來測試用戶預(yù)覽文件時的各種可能出現(xiàn)的情況。其中測試用例1的測試結(jié)果如圖7.20所示，測試用例2的測試結(jié)果如圖7.21所示，測試用例3的測試結(jié)果如圖7.22所示。通過預(yù)期測試結(jié)果和實際測試結(jié)果的對比，我們可以發(fā)現(xiàn)文件模塊的預(yù)覽文件功能的實現(xiàn)已經(jīng)達(dá)到了預(yù)期的效果，預(yù)覽文件功能測試完成。圖7.20圖片預(yù)覽測試圖圖7.21音頻預(yù)覽測試圖圖7.22視頻預(yù)覽測試圖7.2.4好友模塊表7.6發(fā)送消息測試用例表編號測試用例預(yù)期測試結(jié)果實際測試結(jié)果備注1發(fā)送文本消息發(fā)送成功發(fā)送成功通過2發(fā)送空白消息提示不能為空提示不能為空通過3發(fā)送文件發(fā)送成功發(fā)送成功通過在上測試用例表7.6中，共設(shè)計了3個測試用例，用來測試用戶發(fā)送消息時的各種可能出現(xiàn)的情況。其中測試用例1的測試結(jié)果如圖7.23所示，測試用例2的測試結(jié)果如圖7.24所示，測試用例3的測試結(jié)果如圖7.25所示。通過預(yù)期測試結(jié)果和實際測試結(jié)果的對比，我們可以發(fā)現(xiàn)好友模塊的發(fā)送消息功能的實現(xiàn)已經(jīng)達(dá)到了預(yù)期的效果，發(fā)送消息功能測試完成。圖7.23發(fā)送文本消息圖圖7.24發(fā)送空消息失敗圖圖7.25發(fā)送文件圖7.3非功能測試7.3.1性能測試首先，測試網(wǎng)頁的兼容性問題，我們使用Edge瀏覽器和谷歌瀏覽器來測試兼容性。測試結(jié)果表明該系統(tǒng)與瀏覽器具有良好的兼容性，并滿足主流瀏覽器中頁面顯示的要求，如圖7.26和圖7.27所示。緊接著，使用webpagetest工具測試登錄界面的最大頁面渲染時間，測試配置如圖7.28所示。測試結(jié)果表明登錄界面的最大渲染時間小于0.8s，是滿足最初的性能需求的，如圖7.29所示。然后，使用Edge瀏覽器的性能分析工具進(jìn)行了CPU占用率測試。測試結(jié)果表明網(wǎng)頁的CPU占用率為0.1%，如圖7.30所示，滿足系統(tǒng)能夠穩(wěn)定運行的要求。最后，使用webpagetest工具測試登錄界面的彈性。測試結(jié)果表明該頁面的彈性較好，僅有2個資源在被攻擊后加載失敗，如圖7.31所示。其他測試具體數(shù)據(jù)如圖7.32所示。以上測試結(jié)果表明，該系統(tǒng)是一個具有高穩(wěn)定性且延遲低的個人云盤系統(tǒng)。圖7.26Edge瀏覽器登錄圖圖7.27谷歌瀏覽器登錄圖圖7.28測試配置圖圖7.29最大頁面渲染速度圖圖7.30CPU占用率圖圖7.31網(wǎng)頁彈性圖圖7.32測試具體數(shù)據(jù)圖7.3.2安全性測試本系統(tǒng)的安全性測試主要使用安全測試工具Goby進(jìn)行。本次安全測試選取了343個常見的安全測試用例進(jìn)行測試，具體測試用例如圖7.33所示。測試結(jié)果表明，該網(wǎng)頁對于選取的測試用例不存在安全漏洞，如圖7.34所示。以上測試結(jié)果表明，該系統(tǒng)是一個比較安全的個人云盤系統(tǒng)。圖7.33安全測試用例圖圖7.34安全測試結(jié)果圖7.4本章小結(jié)這一章節(jié)的重點是測試系統(tǒng)的功能模塊和非功能模塊。我們對發(fā)現(xiàn)的小問題進(jìn)行了修復(fù)和優(yōu)化，并重新進(jìn)行了測試，最終測試結(jié)果都符合預(yù)期。這確保了系統(tǒng)上線后能夠正常運行，用戶可順暢使用。 第8章總結(jié)與展望8總結(jié)與展望8.1總結(jié)本文主要闡述的內(nèi)容為基于SpringBoot和Vue的個人云盤系統(tǒng)。在論文第一章，闡述了云盤這個問題的研究背景、國內(nèi)外發(fā)展現(xiàn)狀和發(fā)展趨勢，確定了該課題的主要研究工作。在論文第二章，介紹了該課題使用的一些技術(shù)的相關(guān)理論知識，包括MVVM、SpringBoot等。在論文第三章，進(jìn)行了個人云盤系統(tǒng)的需求分析。首先，對系統(tǒng)的業(yè)務(wù)需求進(jìn)行分析。緊接著，對系統(tǒng)的功能需求進(jìn)行分析，并將功能需求劃分為四個模塊。然后，對系統(tǒng)的非功能需求進(jìn)行分析，包括性能需求、安全性等。最后，從經(jīng)濟(jì)、技術(shù)等多個方面判斷該系統(tǒng)是否可行。在論文第四章，進(jìn)行了個人云盤系統(tǒng)的詳細(xì)設(shè)計。首先，介紹了系統(tǒng)的開發(fā)環(huán)境。緊接著，對系統(tǒng)的功能模塊進(jìn)行劃分。然后，對劃分的每個功能模塊里的具體功能進(jìn)行詳細(xì)設(shè)計，并對重要功能畫出流程圖。然后，根據(jù)之前的功能需求分析，進(jìn)行數(shù)據(jù)庫設(shè)計，并畫出相關(guān)的ER圖和數(shù)據(jù)表。最后，對前端和后端通信的接口進(jìn)行了設(shè)計。在論文第五章，進(jìn)行了系統(tǒng)的具體實現(xiàn)。根據(jù)系統(tǒng)功能模塊設(shè)計，對每個功能模塊的功能進(jìn)行具體的實現(xiàn)，大致講述了每個功能的實現(xiàn)邏輯。在論文第六章，進(jìn)行了系統(tǒng)的測試。首先，闡述了系統(tǒng)的測試計劃。然后，按模塊對系統(tǒng)的重要功能設(shè)計測試用例表并進(jìn)行功能測試。最后，進(jìn)行系統(tǒng)的非功能測試，使用webpagetest進(jìn)行性能測試，使用Goby進(jìn)行安全性測試，并給出了詳細(xì)的測試結(jié)果和分析。綜上，本系統(tǒng)使用SpringBoot和Vue框架完成了對個人云盤系統(tǒng)的設(shè)計與實現(xiàn)，主要目的就是為了方便用戶存儲自己的文件，并且方便用戶在服務(wù)器管理自己上傳的文件。該系統(tǒng)使用SpringBoot和Vue來構(gòu)建整個項目；使用Element-UI組件庫中的組件來美化了系統(tǒng)界面，提高了文件傳輸效率；使用Axios完成前端與后端之間的通信。在這些主流技術(shù)的幫助下，需求中的所有重要功能都已成功完成。并且經(jīng)過測試，發(fā)現(xiàn)該系統(tǒng)是一個簡單，高效，安全，穩(wěn)定且用戶交互性好的個人云盤系統(tǒng)。8.2展望到目前為止，盡管個人云盤系統(tǒng)已經(jīng)完成了需求分析時的所有功能，但該系統(tǒng)仍可以在文件上傳、文件展示等方面進(jìn)行優(yōu)化，例如如何實現(xiàn)文件上傳的暫停功能、文件展示如何對更多的文件類型進(jìn)行個性化展示等。對于文件上傳的暫停功能可以使用將文件分片上傳來實現(xiàn)，對應(yīng)文件展示，可以尋找更多的圖標(biāo)進(jìn)行適配。在后面的時間，我將利用業(yè)余時間優(yōu)化系統(tǒng)已經(jīng)實現(xiàn)的功能并增加新的創(chuàng)新功能，努力使該系統(tǒng)給用戶帶來更好的使用體驗。 參考文獻(xiàn)參考文獻(xiàn)張杰.紙質(zhì)檔案與電子檔案融合管理創(chuàng)新的思考[J].城建檔案,2021(06):崔力.云存儲技術(shù)的優(yōu)勢研究[J].中國新通信,2020,22(06):張建勛,古志民,鄭超.云計算研究進(jìn)展綜述[J].計算機(jī)應(yīng)用研究,2010,27(02):劉琨,董龍江.云數(shù)據(jù)存儲與管理[J].計算機(jī)系統(tǒng)應(yīng)用,2011,20(06):陳欣欣.大學(xué)生用戶的個人云存儲使用意愿研究[D].華中師范大學(xué),2019.湯赫男.云存儲系統(tǒng)的分析與應(yīng)用[J].信息技術(shù)與信息化,2014(07):黃麗珺.云存儲服務(wù)的國內(nèi)外比較研究[J].數(shù)字技術(shù)與應(yīng)用,2014(09):程旺.基于Hadoop的云存儲系統(tǒng)的設(shè)計與實現(xiàn)[D].黑龍江大學(xué),2020.何誠.一個分布式云存儲系統(tǒng)的設(shè)計與實現(xiàn)[D].華中科技大學(xué),2020.WaseemSheikh,NadeemSheikh.Audiometry:Amodel-view-viewmodel(MVVM)applicationframeworkforhearingimpairmentdiagnosis[J].TheJournalofOpenSourceSoftware,2020,5(51):陳冰.基于SpringBoot的校園二手商品交易系統(tǒng)的設(shè)計與實現(xiàn)[D].華中師范大學(xué),2021.高志平.基于SpringBoot框架與ITIL方法的運維管理系統(tǒng)的設(shè)計與實現(xiàn)[D].華東師范大學(xué),2021.孟艷齊.基于vue.js的英語核心素養(yǎng)平臺的設(shè)計與實現(xiàn)[D].北京郵電大學(xué),2021.張偉.基于SpringBoot和Vue的綜合教學(xué)管理平臺設(shè)計與實現(xiàn)[D].重慶大學(xué),2021.肖子量.基于Vue的云通信調(diào)度系統(tǒng)客戶端的設(shè)計與實現(xiàn)[D].北京郵電大學(xué),2021.劉啟偉.基于Vue.js框架的Web前端開發(fā)工具的設(shè)計與實現(xiàn)[D].北京郵電大學(xué),2021.PausawasdiNonthalee,RugivarodomManus,SwangsriJirawat,RatanachuEkThawee.PitfallsinstentdeploymentduringEUS-guidedgastrojejunostomyusingHotAxios?(withvideos).[J].Endoscopicultrasound,2021,10(5):TagliaferriArianaR,MelkiGabriel,CavanaghYana.EndoscopicTreatmentofAcuteCholelithiasisUsingAXIOSStentingandLithotripsy:ACaseSeries.[J].Cureus,2023,15(2). 附錄 致謝附錄附錄A用戶模塊核心代碼//讀取瀏覽器存儲的用戶信息userInfo:JSON.parse(window.localStorage.getItem("userInfo")),//判斷用戶信息是否為空router.beforeEach((to,from,next)=>{if(to.path!='/login'&&!vuexIndex.state.userInfo){router.replace('/login')}next()})//成功登錄后保存用戶信息到瀏覽器if(res.status==200&&res.data.success){//將用戶信息保存至vuexthis.$mit("updateUserInfo",res.data.data.mem);//將返回的用戶信息保存至localstorage中window.localStorage.setItem("userInfo",JSON.stringify(res.data.data.mem));}//退出登錄后清空用戶信息logout(){window.localStorage.removeItem("userInfo");this.$mit("updateUserInfo",{});this.$router.push("/login");},附錄B管理員模塊核心代碼//根據(jù)isEdit的值來判斷是否處于編輯狀態(tài)<el-table-columnprop="name"label="文件名"><divclass="item"slot-scope="scope"><el-inputclass="item__input"v-if="isEdit"v-model=""placeholder="請輸入內(nèi)容"></el-input><divclass="item__txt">{{}}</div></div></el-table-column>//鼠標(biāo)移入單元格切換成編輯狀態(tài)handleCellEnter(row,column,cell,event){constproperty=pertyif(this.editProp.includes(property)){cell.querySelector('.item__input').style.display='block'cell.querySelector('.item__txt').style.display='none'}},//鼠標(biāo)移出單元格切換成非編輯狀態(tài)handleCellLeave(row,column,cell,event){constproperty=pertyif(this.editProp.includes(property)){cell.querySelector('.item__input').style.display='none'cell.querySelector('.item__txt').style.display='block'}},附錄C文件模塊核心代碼//判斷當(dāng)前所在的文件夾位置getCurrentLocation(){if(this.$route.params.path.search("search")!=-1)return;letcurrentFolder=this.$route.params.path;currentFolder=currentFolder.slice(1,currentFolder.length);letarr=currentFolder.split("/");this.currentChildrenFolder=this.folderList.childrenList;if(arr.length>1){for(vari=1;i<arr.length;i++){letindex=this.currentChildrenFolder.findIndex((item)=>.substr(0,.length-1)==arr[i]);this.currentFolderId=this.currentChildrenFolder[index].id;this.currentChildrenFolder=this.currentChildrenFolder[index].childrenList;}}else{this.currentFolderId=1;}},//監(jiān)聽排序方式"$store.state.sortType"(current){if(current=="time"){this.listData.sort((a,b)=>{returnDate.parse(a.gmtCreate)-Date.parse(b.gmtCreate);});}elseif(current=="size"){this.listData.sort((a,b)=>{returna.size-b.size;});}},//實時更新進(jìn)度onProgress(e,file){letarr=this.$store.state.uploadProgressList;arr.findIndex((item,index,arr)=>{if(==){arr[index].progress=Math.round(file.percentage);return1;}});this.$mit("updateUploadProgressList",arr);},//更改編碼方式，防止亂碼if(FTPReply.isPositiveCompletion(ftpClient.sendCommand("OPTSUTF8","ON"))){LOCAL_CHARSET="UTF-8";}//若目錄不存在，建立多級目錄for(Stringstr:split){if(StringUtils.isBlank(str)){continue;}if(!ftpClient.changeWorkingDirectory(str)){booleanmakeDirectory=ftpClient.makeDirectory(str);booleanchangeWorkingDirectory=ftpClient.changeWorkDirectory(str);}}//上傳文件到FTP服務(wù)器ftpClient.setControlEncoding(LOCAL_CHARSET);inStream=newBufferedInputStream(newFileInputStream(file));success=ftpClient.storeFile(newString(file.getName().getBytes(LOCAL_CHARSET),SERVER_CHARSET),inStream);//前端從后端獲取文件letxhr=newXMLHttpRequest();xhr.open('GET',url,true);xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");xhr.responseType='blob';//返回類型blobxhr.onload=function(res){letblob=this.response;letreader=newFileReader();reader.readAsDataURL(blob)rea