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

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

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

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

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