網(wǎng)絡存儲系統(tǒng)的設計與實現(xiàn)-用戶界面及數(shù)據(jù)庫的設計與實現(xiàn)

頁）摘要：隨著網(wǎng)絡技術的迅猛發(fā)展，人們對數(shù)據(jù)儲存的需求越來越大,U盤與硬盤的缺點愈發(fā)嚴重，網(wǎng)絡儲存應運而生，有效解決了這些問題，分布式儲存不怕硬件丟失和損壞，多個用戶可在網(wǎng)絡存儲系統(tǒng)中很方便的共享。分布式儲存只要容量不夠，直接加機器和硬盤都可以實現(xiàn)容量的拓展，就容量來說，幾乎是無限的。我們做的就是網(wǎng)絡儲存系統(tǒng)，而我做的是用戶頁面及數(shù)據(jù)庫設計，本篇論文主要講解了我是如何設計并用html實現(xiàn)這個網(wǎng)頁的及數(shù)據(jù)庫的設計。關鍵詞:分布式儲存；網(wǎng)頁設計；數(shù)據(jù)庫設計Abstract:Withtherapiddevelopmentofnetworktechnology,people'sgrowingdemandfordatastorage,Udiskandharddiskshortcomingsworseninginsecurityexist.shortcomings,andnetworkstoragecameintobeing,aneffectivesolutiontotheseproblems,distributedhardwarestorewillnotbeafraidoflossanddamageoccurs,whilemultipleuserscanveryeasytoshareinthenetworkstoragesystem,anddistributedAslongasthestoragecapacityisnotenough,andharddisksareaddeddirectlytothemachinecanexpandcapacity,andthereforecapacity,itisalmostunlimited.Whatwedoisnetworkstoragesystem,andIamdoingisoneoftheuserpagesanddatabasedesign,thispapermainlyonhowIdesignedandimplementedwiththehtmlofthispage.Aswellasthedesignofthedatabase.Keywords:Distributed

storage；Web

Design；Database

design1引言1.1研究背景二十一世紀進入信息發(fā)展高速路，大數(shù)據(jù)時代信息量的爆發(fā)，普通的存儲方式已經(jīng)不能滿足大批量數(shù)據(jù)的存儲與分享。硬件存儲系統(tǒng)存在諸多弊端和不便，網(wǎng)絡存儲系統(tǒng)由此應運而生。隨著互聯(lián)網(wǎng)的發(fā)展，出現(xiàn)了眾多網(wǎng)絡存儲系統(tǒng)，這些系統(tǒng)良莠不齊，而我們的網(wǎng)絡存儲系統(tǒng)正是以分布式存儲系統(tǒng)為技術支撐。分布式存儲系統(tǒng)是把存儲的文件通過優(yōu)秀的算法生成冗余在分塊，分別存儲到不同的機器上，這樣的存儲系統(tǒng)更安全，在接近一半的機器壞了的情況下，都可能不會影響到文件的完整性，而且架構靈活，當存儲空間不夠時隨時可以加入新的機器或硬盤，一切都歸功于Hadoop的巨大貢獻.互聯(lián)網(wǎng)的世界里蘊藏無限生機，這里只有想不到的、沒有做不到的。由于國際互聯(lián)網(wǎng)是一個不受時空限制的信息交換系統(tǒng)，所以它是目前最直接、最豐富和最快捷的聯(lián)系方式，信息溝通的高效率為現(xiàn)代化辦公帶來了巨大的方便。而我們做的網(wǎng)絡存儲系統(tǒng)能更加方便的共享和存儲文件，方便辦公學習。網(wǎng)絡存儲系統(tǒng)可以克服U盤或硬盤存儲量小的問題，以及U盤或硬盤一旦丟失或損壞，上面的數(shù)據(jù)再難找回的損失。網(wǎng)絡存儲系統(tǒng)很大層面上改善了這個局面，由于數(shù)據(jù)是在網(wǎng)上，對多個人共享也十分方便，不受地理位置限制。1.2目的和意義因為數(shù)據(jù)的保存流傳，數(shù)據(jù)信息可以看做文明傳播的主要載體，而存儲介質(zhì)的使用則是數(shù)據(jù)信息傳播的主要工具。從結繩記事，到甲骨、青銅鼎，再到紙張的使用，人們通過不斷的改造發(fā)明，將文明傳播一代又一代，也改進了人類發(fā)展進程。隨著科技的日新月異，人們選用的存儲介質(zhì)也發(fā)生了較大的變化，硬盤逐漸成為人們?nèi)粘Ｉ罟ぷ鞯谋貍淦罚⒃跀?shù)據(jù)存儲中扮演著重要角色。但隨著近年來，數(shù)據(jù)量的爆發(fā)，數(shù)據(jù)的存儲介質(zhì)也在發(fā)生著改變。硬盤是最為直接簡單的存儲工具，但因其容量有限，當面對海量數(shù)據(jù)時只能采取不斷擴容的手段來滿足數(shù)據(jù)存取的需求。且不便攜帶，難以進行數(shù)據(jù)信息分享，于是U盤和移動硬盤取代了硬盤成為了人們最方便的數(shù)據(jù)攜帶工具，人們可以很方便的把數(shù)據(jù)通過U盤傳輸。但目前，U盤，移動硬盤已經(jīng)適應不了互聯(lián)網(wǎng)時代了。U盤和移動硬盤一旦損壞或者丟失，上面的數(shù)據(jù)難以再找回，將會造成難以估計的損失。同時，U盤和移動硬盤的傳輸是點對點的，需要把設備插到電腦上才能傳輸，不能很方便的將一份資料多個用戶共享，即不能實現(xiàn)數(shù)據(jù)共享。網(wǎng)盤的出現(xiàn)，很好的解決了U盤和硬盤等存儲工具所存在的一系列弊端。網(wǎng)盤，又稱網(wǎng)絡U盤、網(wǎng)絡硬盤，是一些網(wǎng)絡公司推出的在線存儲服務。向用戶提供文件的存儲、訪問、備份、共享等文件管理功能，使用起來十分方便。用戶可以把網(wǎng)盤看成一個放在網(wǎng)絡上的硬盤或U盤，不管你是在家中、單位或其它任何地方，只要你連接到因特網(wǎng)，你就可以管理、編輯網(wǎng)盤里的文件。不需要隨身攜帶，更不怕丟失。能夠做到隨時隨地讀取及使用，存儲等服務。目前國內(nèi)外有很多這樣的網(wǎng)盤服務，如國內(nèi)的百度云網(wǎng)盤、115網(wǎng)盤、咕咕網(wǎng)盤以及國外的OneDrive等。而我們的網(wǎng)盤是用分布式儲存系統(tǒng)實現(xiàn)的。之所以采用分布式存儲技術實現(xiàn)，是為了簡化用戶端的使用，提供了一個分布式緩存系統(tǒng)來提供對此分布式存儲系統(tǒng)的訪問接口以及本地數(shù)據(jù)緩沖以降低網(wǎng)絡壓力。用網(wǎng)盤的分布式儲存系統(tǒng)，一份資料有多份冗余，即使部分機器損壞也能完整恢復數(shù)據(jù)，更不會存在丟失的風險，而且網(wǎng)盤嚴格的儲存機制可放置病毒的傳播。另外網(wǎng)盤沒有容量大小限制，用戶會有配額，但可無限擴容。由于數(shù)據(jù)是在網(wǎng)上，對多個人共享也十分方便，不受地理位置限制。對于社會發(fā)展，網(wǎng)絡存儲技術將會運用到各個行業(yè)，帶來無限的商機和經(jīng)濟效益。2系統(tǒng)開發(fā)關鍵技術分析2.1HTML網(wǎng)頁操作技術超文本標記語言（HyperTextMarkupLanguage，簡稱HTML）。是為“網(wǎng)頁創(chuàng)建及其它可在網(wǎng)頁瀏覽器中看到的信息”設計的一種標記語言。HTML被用來結構化信息，例如標題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。由蒂姆·伯納斯.李給出原始定義，由IETF用簡化的SGML語法進行進一步發(fā)展的HTML，后來成為國際標準，由萬維網(wǎng)聯(lián)盟維護。頁面內(nèi)包含圖片，鏈接，音樂，結構包括頭和主題兩部分，頭提供網(wǎng)頁信息，主體提供網(wǎng)頁具體內(nèi)容。超文本標記語言是萬維編程的基礎，是文本包含超級鏈接點的一種形式。2.2Jquery庫使用Jquery是繼prototype之后又一個優(yōu)秀的Javascript庫。它是輕量級的js庫

，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。Jquery還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。Jquery能夠使用戶的html頁面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需要定義id即可。我在頁面中通過如下語句引入了Jquery：圖2-1Jquery引入代碼圖3系統(tǒng)需求分析3.1導言3.1.1縮寫說明Html：全稱HyperTextMark-upLanguage，超文本標記語言或超文本鏈接標示語言（標準通用標記語言下的一個應用），是萬維網(wǎng)瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。這里有時候是html，js，css多項技術的合稱。JS：JavaScript，一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。3.1.2術語定義DIV：DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。CSS：級聯(lián)樣式表是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。E-R圖：E-R圖也稱實體-聯(lián)系圖(EntityRelationshipDiagram)，提供了表示實體類型、屬性和聯(lián)系的方法，用來描述現(xiàn)實世界的概念模型。用戶：使用我們網(wǎng)盤的普通用戶，注冊后就可以上傳下載文件。管理員：管理這個系統(tǒng)的人，可以修改查看用戶的空間情況，修改用戶可使用的最大空間等。3.2系統(tǒng)定義3.2.1項目要達到的目標 用戶登陸成功后，可以看到自己網(wǎng)盤中自己的文件和文件夾，點開文件夾就可以進入文件夾里面看到文件夾里面的內(nèi)容。用戶可以在自己的網(wǎng)盤中新建文件夾，新建文件夾可以再任意位置，也可以在任意位置上傳文件，但是總的文件大小不能超過用戶可使用的最大空間，已使用的空間，和最大的空間會在頁面很醒目的位置上顯示出來。并且導航條中可以進入修改密碼的界面，用戶也可以很方便的退出系統(tǒng)。另外頁面也要用戶看上去就知道怎么操作，符合一致性原則。3.2.2頁面的總體結構 頁面分為上中下，最上方是banner，中間分為左右兩部分，左邊是導航條，右邊是主要的內(nèi)容，下面是版權信息?？傮w的結構如下圖： 圖3-1頁面布局圖3.3應用環(huán)境3.3.1系統(tǒng)運行網(wǎng)絡環(huán)境 該系統(tǒng)可在外網(wǎng)即因特網(wǎng)網(wǎng)上使用，也可在內(nèi)網(wǎng)中使用，作為私有儲存器。3.3.2系統(tǒng)運行硬件環(huán)境 服務器端：至少五臺linux服務器，每臺硬盤至少20GB。 客戶端：一臺PC。3.3.3系統(tǒng)運行軟件環(huán)境 服務器端：Redhat6.x+tomcat7.x+mysql+hadoop1.x 客戶端：瀏覽器3.4功能規(guī)格我們采用面向?qū)ο蠓治鲎鳛橹饕南到y(tǒng)建模方法，使用UML(UnifiedModelingLanguage)作為建模語言。UML為建模活動提供了從不同角度觀察和展示系統(tǒng)的各種特征的方法。在UML中，從任何一個角度對系統(tǒng)所作的抽象都可能需要幾種模型來描述，而這些來自不同角度的模型圖最終組成了系統(tǒng)的映像。 UseCase描述的是“actor”(用戶、外部系統(tǒng)以及系統(tǒng)處理)是如何與系統(tǒng)交互來完成工作的。UseCase模型提供了一個非常重要的方式來界定系統(tǒng)邊界以及定義系統(tǒng)功能，同時，該模型將來可以派生出動態(tài)對象模型。 設計Use-case時，我們遵循下列步驟：第一步，識別出系統(tǒng)的“actor”。Actor可以是用戶、外部系統(tǒng)，甚至是外部處理，通過某種途徑與系統(tǒng)交互。重要的是著重從系統(tǒng)外部執(zhí)行者的角度來描述系統(tǒng)需要提供哪些功能，并指明這些功能的執(zhí)行者(Actor)是誰。盡可能地確保所有Actor都被完全識別出來。第二步，描述主要的UseCase?？梢圆扇〔粩嗟貑栕约骸斑@個Actor究竟想通過系統(tǒng)做什么？”來準確地描述UseCase。第三步，重新審視每個UseCase，為它們下個詳盡的定義。3.4.1

角色（Actor）定義普通用戶：使用我們網(wǎng)盤的普通用戶，注冊并且登陸后就可以上傳下載文件。每個用戶有自己的空間限制，自己上傳的文件的總大小不能超過自己最大可用的空間，并且用戶可以在自己的網(wǎng)盤空間中新建文件夾，刪除文件或者文件夾。3.4.2系統(tǒng)主用例圖圖3-2系統(tǒng)主用例圖3.5性能需求3.5.1界面需求 用戶在上傳文件需要等待的時候，有一個標識符代表后臺正在處理，需要用戶繼續(xù)等待。3.5.2響應時間需求在2MB網(wǎng)絡的情況下，用戶網(wǎng)頁打開時間小于0.1s。4

頁面概要設計4.1頁面布局設計頁面布局如下圖圖4-1頁面布局圖4.2頁面出錯處理設計頁面出錯了的話，會有對話框來提示用戶操作出錯。圖4-2錯誤處理代碼圖4.2.1出錯信息出錯的信息是通過ajax由后臺取得的。4.2.2補救措施 提示給用戶錯誤信息，并且中止方法的運行。5頁面詳細設計5.1頁面布局設計網(wǎng)頁的布局設計，就是指網(wǎng)頁中圖像和文字之間的位置關系，簡單來說也可以稱之為網(wǎng)頁排版。網(wǎng)頁布局設計最重要的目的就是傳達信息。一個并不能閱讀的網(wǎng)頁只能變成一個無用的鏈接。分割、組織和傳達信息并且使網(wǎng)頁易于閱讀、界面具有親和力和可用性是網(wǎng)頁設計師應有的職責，只有這樣，瀏覽者才有更好的機會找出吸引他的東西。我們的網(wǎng)絡存儲系統(tǒng)用戶主界面的布局秉承簡潔清爽明了的原則，避免多余綴飾，呈現(xiàn)用戶以清晰的視角層次。5.2頁面橫幅設計導航圖在網(wǎng)頁界面中具有重要作用。合理的運用圖形可以生動直觀、形象地表現(xiàn)設計主題。網(wǎng)頁中導航圖常用的圖形格式是jpg，這種格式壓縮比高，得到了規(guī)范瀏覽器的支持，下載速度快，具有跨平臺的特性，不需要瀏覽器安裝插件即可直接閱覽。本次采用的導航圖設計是選取母校重慶師范大學的風采圖，通過PhotoShopCS4,運用蒙版和漸變等效果將6張圖片巧妙銜接在一起，最后將重慶師范大學的?；找运〉男问郊釉趫D片上，形成最終的導航圖。圖5-1頁面橫幅圖導航圖的代碼如下：圖5-2頁面橫幅代碼圖5.3頁面導航設計頁面導航包括三個按鈕：新建文件夾、修改密碼、退出。是三個豎著的矩形，鼠標移過時顏色會變，我是通過table實現(xiàn)這段功能的，并且把table的style設為cursor:hand，意思是鼠標懸停時，會變?yōu)槭中?。具體的代碼如下圖5-3頁面導航代碼圖而鼠標懸停變色，是通過下面這段css代碼實現(xiàn)的最終效果如下圖圖5-4頁面導航圖5.4頁面內(nèi)容設計用戶主界面的設計包括了用戶所需的各個功能，并會提示用戶所使用的空間情況，并分別實現(xiàn)用戶文件查看上傳、下載等功能。 我的主界面設計為上面有個橫條顯示用戶空間的使用情況，下面的矩形是一個table，顯示的文件/文件夾列表，文件和文件夾前面有不同的圖標，以此來區(qū)分文件和文件夾，如果是文件夾可以點進去，進入文件夾里面。這個table前一列是文件/文件夾名，第二列是文件大?。ㄎ募A這一列為空），第三列為修改時間，第四列是操作。具體一排的代碼如下：實現(xiàn)的效果如圖圖5-5文件顯示代碼圖圖5-6文件顯示表格圖注意，文件大小的顯示是，不足1MB就以KB為單位。修改時間是以YYYY/MM/DD的形式來表示。5.5頁面頁尾設計網(wǎng)頁設計中頁面整體設計非常重要，但很多人都把頁尾設計忽視了，都覺得沒有多大的用處，但它的作用其實不容小覷，并且在網(wǎng)頁設計的發(fā)展過程中越來越顯得重要。頁尾設計主要用來展示網(wǎng)站的版權和網(wǎng)站介紹，如果在頁尾加上相關信息，將會使得整個網(wǎng)頁效果抬高一個層次。圖5-7頁面頁尾版權信息圖5.6兼容性測試由于ie6的年代過于久遠，就沒有做測試了，我們的頁面的兼容性如圖表：表5.1兼容性測試圖瀏覽器火狐Ie8Ie9兼容性情況良好良好良好6數(shù)據(jù)庫設計6.1概念結構設計表6.1概念結構設計表6.2管理員（Manager）表6.2.1邏輯結構設計表6.2Manager邏輯結構設計表6.2.2數(shù)據(jù)字典設計表6.3Manager數(shù)據(jù)字典設計表數(shù)據(jù)項名稱數(shù)據(jù)項類型數(shù)據(jù)項長度是否主鍵是否為空數(shù)據(jù)項含義數(shù)據(jù)項說明IDchar36是否管理員編號Uuidnamevarchar50否用戶名pwdChar32否密碼6.3用戶（User）表6.3.1邏輯結構設計表6.4User邏輯結構設計表6.3.2數(shù)據(jù)字典設計表6.5User數(shù)據(jù)字典設計表數(shù)據(jù)項名稱數(shù)據(jù)項類型數(shù)據(jù)項長度是否主鍵是否為空數(shù)據(jù)項含義數(shù)據(jù)項說明IDchar36是否管理員編號Uuidnamevarchar50否用戶名pwdChar32否密碼VolumeInt用戶最大存儲量null表示不限容量PathVarchar45否用戶存儲路徑EmailVarchar30否用戶驗證郵箱注冊時用于驗證AreaVarchar10否注冊地區(qū)SexVarchar5否用戶性別UploadtimeVarchar20否用戶上傳文件時間6.4E-R圖1.管理員表圖6-1管理員表E-R圖2.用戶表圖7-1用戶主頁圖7頁面展示圖6-2用戶表E-R圖7頁面展示7.1用戶主頁圖7-1用戶主頁圖7.2修改密碼圖7-2用戶修改密碼界面圖7.3性能測試圖7-3性能測試圖8系統(tǒng)總結與展望8.1系統(tǒng)總結這次畢業(yè)設計項目確定題目后，我負責制作用戶界面和設計數(shù)據(jù)庫。我復習了HTML的知識，并且我為了實現(xiàn)自己板塊的功能所想要達到的效果，搜索了各大網(wǎng)站的優(yōu)秀案例和代碼，通過視頻學習以及對過去上課時的筆記復習，對HTML編輯已經(jīng)非常熟悉了，另外還自學了Jquery，極大的方便了js部分代碼的編寫。另外我還學習了關系型數(shù)據(jù)庫的知識，8.2系統(tǒng)展望網(wǎng)絡存儲協(xié)議標準是網(wǎng)絡存儲系統(tǒng)發(fā)展的另一個重要工作，目前該項工作正在如火如荼地開展。我們用的是hadoop，而hadoop2有一個叫HDFS

Federation的東西，它將hdfs的命名空間進行了擴展，目前的HDFS的所有文件的meta信息都保存在一臺機器的內(nèi)存中，使得HDFS支持的文件數(shù)目是有限的，現(xiàn)在進行了這樣改動后，將hdfs的命名空間做成了分布式的，對之后方便對不同的用戶文件夾進行管理，還有從HDFS的實現(xiàn)上來說，都會更為簡單。 云存儲是未來儲存系統(tǒng)的發(fā)展方向，我們有理由期待未來我們身邊各種電子設計接入云端，享受無限大的儲存空間和數(shù)據(jù)的更新速度，丟掉了u盤，即使是電腦也只需要很小的本地儲存或不需要任何本地儲存設備，就可以流暢的運行，保存的資料再也不用害怕丟失，同時軟件發(fā)布在云端也能根治盜版問題。9結論通過這次畢業(yè)設計，我能更加全面掌握到很多以前在書本上課堂上以及視頻教學中沒學到的實操知識，不僅鞏固了以往學過的網(wǎng)頁設計和數(shù)據(jù)庫知識，更加深入地了解網(wǎng)頁設計的過程，每一步需要做什么，完成什么工作。在這過程中，由于平時的學習更多基于理論和課堂上記錄老師的操作過程，自身網(wǎng)頁設計的經(jīng)驗不夠多，對基礎知識有一定的遺忘，各種原因使我走了不少彎路，遇到了不少次的阻礙，例如排版問題及CSS調(diào)整問題?？烧且驗橛捎诓粩鄬撁孢M行調(diào)試的過程，我累積了不少寶貴經(jīng)驗：我明白了網(wǎng)頁設計需循序漸進，是急不來的，首先要對自己所要做的頁面有哪里功能做一個詳細分析，每個功能板塊應該怎樣布局要有概念，同時選擇正確的軟件進行開發(fā)，并參考成功的頁面布局的優(yōu)秀案例，確定頁面的布局規(guī)劃；其次，掌握好自身負責板塊的時間進度和先后順序，分析與設計是很重要的環(huán)節(jié)，分析得越透徹，設計得越詳細，對編程會有很好的引導作用，也可避免重復修改，浪費時間。由于數(shù)據(jù)庫關系到整個網(wǎng)絡存儲系統(tǒng)項目的推進，因而必須先將數(shù)據(jù)庫設計好；數(shù)據(jù)庫設