网络存储系统的设计与实现-用户界面及数据库的设计与实现

页）摘要：随着网络技术的迅猛发展，人们对数据储存的需求越来越大,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调整问题。可正是因为由于不断对页面进行调试的过程，我累积了不少宝贵经验：我明白了网页设计需循序渐进，是急不来的，首先要对自己所要做的页面有哪里功能做一个详细分析，每个功能板块应该怎样布局要有概念，同时选择正确的软件进行开发，并参考成功的页面布局的优秀案例，确定页面的布局规划；其次，掌握好自身负责板块的时间进度和先后顺序，分析与设计是很重要的环节，分析得越透彻，设计得越详细，对编程会有很好的引导作用，也可避免重复修改，浪费时间。由于数据库关系到整个网络存储系统项目的推进，因而必须先将数据库设计好；数据库设