1、第 1 页 （共 21 页）本科毕业论文（20 届）网络存储系统的设计与实现-用户界面及数据库的设计与实现所在学院专业班级 信息与计算科学学生姓名指导教师完成日期第 2 页 （共 21 页）网络存储系统的设计与实现-用户界面及数据库的设计与实现摘要：随着网络技术的迅猛发展，人们对数据储存的需求越来越大,U 盘与硬盘的缺点愈发严重，网络储存应运而生，有效解决了这些问题，分布式储存不怕硬件丢失和损坏，多个用户可在网络存储系统中很方便的共享。分布式储存只要容量不够，直接加机器和硬盘都可以实现容量的拓展，就容量来说，几乎是无限的。我们做的就是网络储存系统，而我做的是用户页面及数据库设计，本篇论文主要讲
2、解了我是如何设计并用 html 实现这个网页的及数据库的设计。关键词:分布式储存；网页设计；数据库设计Abstract:With the rapid development of network technology, peoples growing demand for data storage, U disk and hard disk shortcomings worsening insecurity exist. shortcomings, and network storage came into being, an effective solution to these probl
3、ems, distributed hardware store will not be afraid of loss and damage occurs, while multiple users can very easy to share in the network storage system, and distributed As long as the storage capacity is not enough, and hard disks are added directly to the machine can expand capacity, and therefore
4、capacity, it is almost unlimited.What we do is network storage system, and I am doing is one of the user pages and database design, this paper mainly on how I designed and implemented with the html of this page. As well as the design of the database.Key words: Distributed storage；Web Design ；Databas
5、e design 第 3 页 （共 21 页）1 引言1.1 研究背景二十一世纪进入信息发展高速路，大数据时代信息量的爆发，普通的存储方式已经不能满足大批量数据的存储与分享。硬件存储系统存在诸多弊端和不便，网络存储系统由此应运而生。随着互联网的发展，出现了众多网络存储系统，这些系统良莠不齐，而我们的网络存储系统正是以分布式存储系统为技术支撑。分布式存储系统是把存储的文件通过优秀的算法生成冗余在分块，分别存储到不同的机器上，这样的存储系统更安全，在接近一半的机器坏了的情况下，都可能不会影响到文件的完整性，而且架构灵活，当存储空间不够时随时可以加入新的机器或硬盘，一切都归功于 Hadoop 的巨大
6、贡献.互联网的世界里蕴藏无限生机，这里只有想不到的、没有做不到的。由于国际互联网是一个不受时空限制的信息交换系统，所以它是目前最直接、最丰富和最快捷的联系方式，信息沟通的高效率为现代化办公带来了巨大的方便。而我们做的网络存储系统能更加方便的共享和存储文件，方便办公学习。网络存储系统可以克服 U盘或硬盘存储量小的问题，以及 U 盘或硬盘一旦丢失或损坏，上面的数据再难找回的损失。网络存储系统很大层面上改善了这个局面，由于数据是在网上，对多个人共享也十分方便，不受地理位置限制。1.2 目的和意义因为数据的保存流传，数据信息可以看做文明传播的主要载体，而存储介质的使用则是数据信息传播的主要工具。从结绳
7、记事，到甲骨、青铜鼎，再到纸张的使用，人们通过不断的改造发明，将文明传播一代又一代，也改进了人类发展进程。随着科技的日新月异，人们选用的存储介质也发生了较大的变化，硬盘逐渐成为人们日常生活工作的必备品，并在数据存储中扮演着重要角色。但随着近年来，数据量的爆发，数据的存储介质也在发生着改变。硬盘是最为直接简单的存储工具，但因其容量有限，当面对海量数据时只能采取不断扩容的手段来满足数据存取的需求。且不便携带，难以进行数据信第 4 页 （共 21 页）息分享，于是 U 盘和移动硬盘取代了硬盘成为了人们最方便的数据携带工具，人们可以很方便的把数据通过 U 盘传输。但目前，U 盘，移动硬盘已经适应不了互
8、联网时代了。U 盘和移动硬盘一旦损坏或者丢失，上面的数据难以再找回，将会造成难以估计的损失。同时，U 盘和移动硬盘的传输是点对点的，需要把设备插到电脑上才能传输，不能很方便的将一份资料多个用户共享，即不能实现数据共享。网盘的出现，很好的解决了 U 盘和硬盘等存储工具所存在的一系列弊端。网盘，又称网络 U 盘、网络硬盘，是一些网络公司推出的在线存储服务。向用户提供文件的存储、访问、备份、共享等文件管理功能，使用起来十分方便。用户可以把网盘看成一个放在网络上的硬盘或 U 盘，不管你是在家中、单位或其它任何地方，只要你连接到因特网，你就可以管理、编辑网盘里的文件。不需要随身携带，更不怕丢失。能够做到
9、随时随地读取及使用，存储等服务。目前国内外有很多这样的网盘服务，如国内的百度云网盘、115 网盘、咕咕网盘以及国外的 OneDrive 等。而我们的网盘是用分布式储存系统实现的。之所以采用分布式存储技术实现，是为了简化用户端的使用，提供了一个分布式缓存系统来提供对此分布式存储系统的访问接口以及本地数据缓冲以降低网络压力。用网盘的分布式储存系统，一份资料有多份冗余，即使部分机器损坏也能完整恢复数据，更不会存在丢失的风险，而且网盘严格的储存机制可放置病毒的传播。另外网盘没有容量大小限制，用户会有配额，但可无限扩容。由于数据是在网上，对多个人共享也十分方便，不受地理位置限制。对于社会发展，网络存储技
10、术将会运用到各个行业，带来无限的商机和经济效益。2 系统开发关键技术分析2.1 HTML 网页操作技术第 5 页 （共 21 页）超文本标记语言（HyperText Markup Language，简称 HTML） 。是为“网页创建及其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML 被用来结构化信息，例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。由蒂姆伯纳斯.李给出原始定义，由 IETF 用简化的 SGML 语法进行进一步发展的 HTML，后来成为国际标准，由万维网联盟维护。页面内包含图片，链接，音乐，结构包括头和主题两部分，头提供网页信息，主体提供网页具体内
11、容。超文本标记语言是万维编程的基础，是文本包含超级链接点的一种形式。2.2 Jquery 库使用Jquery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js 库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+,FF 1.5+,Safari 2.0+,Opera 9.0+） ，jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用） 、events、实现动画效果，并且方便地为网站提供 AJAX 交互。Jquery 还有一个比较大的优势是，它的文档说明很全，而且各种
12、应用也说得很详细，同时还有许多成熟的插件可供选择。Jquery 能够使用户的 html 页面保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需要定义 id 即可。我在页面中通过如下语句引入了 Jquery：图 2-1 Jquery 引入代码图3 系统需求分析3.1 导言3.1.1 缩写说明第 6 页 （共 21 页）Html：全称 HyperText Mark-up Language，超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用） ，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。这里有时候是html，j
13、s，css 多项技术的合称。JS：JavaScript，一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。3.1.2 术语定义DIV：DIV 是层叠样式表中的定位技术，全称 DIVision，即为划分。CSS：级联样式表是一种用来表现 HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 E-R 图：E-R 图也称实体-联系图(Entit
14、y Relationship Diagram)，提供了表示实体类型、属性和联系的方法，用来描述现实世界的概念模型。用户：使用我们网盘的普通用户，注册后就可以上传下载文件。管理员：管理这个系统的人，可以修改查看用户的空间情况，修改用户可使用的最大空间等。3.2 系统定义3.2.1 项目要达到的目标用户登陆成功后，可以看到自己网盘中自己的文件和文件夹，点开文件夹就可以进入文件夹里面看到文件夹里面的内容。用户可以在自己的网盘中新建文件夹，新建文件夹可以再任意位置，也可以在任意位置上传文件，但是总的文件大小不能超过用户可使用的最大空间，已使用的空间，和最大的空间会在页面很醒目的位置上显示出来。并且导航
15、条中可以进入修改密码的界面，用户也可以很方便的退出系统。另外页面也要用户看上去就知道怎么操作，符合一致性原则。第 7 页 （共 21 页）3.2.2 页面的总体结构页面分为上中下，最上方是 banner，中间分为左右两部分，左边是导航条，右边是主要的内容，下面是版权信息。总体的结构如下图：图 3-1 页面布局图3.3 应用环境3.3.1 系统运行网络环境该系统可在外网即因特网网上使用，也可在内网中使用，作为私有储存器。3.3.2 系统运行硬件环境服务器端：至少五台 linux 服务器，每台硬盘至少 20GB。客户端：一台 PC。3.3.3 系统运行软件环境服务器端：Redhat6.x+tomc
16、at7.x+mysql+hadoop1.x客户端：浏览器3.4 功能规格我们采用面向对象分析作为主要的系统建模方法，使用 UML(Unified Modeling Language)作为建模语言。UML 为建模活动提供了从不同角度观察和展示系统的各种特征的方法。在 UML 中，从任何一个角度对系统所作的抽象都第 8 页 （共 21 页）可能需要几种模型来描述，而这些来自不同角度的模型图最终组成了系统的映像。Use Case 描述的是“actor”(用户、外部系统以及系统处理)是如何与系统交互来完成工作的。Use Case 模型提供了一个非常重要的方式来界定系统边界以及定义系统功能，同时，该模型
17、将来可以派生出动态对象模型。设计 Use-case 时，我们遵循下列步骤：第一步，识别出系统的“actor” 。Actor 可以是用户、外部系统，甚至是外部处理，通过某种途径与系统交互。重要的是着重从系统外部执行者的角度来描述系统需要提供哪些功能，并指明这些功能的执行者(Actor)是谁。尽可能地确保所有 Actor 都被完全识别出来。第二步，描述主要的 Use Case。可以采取不断地问自己“这个 Actor 究竟想通过系统做什么？”来准确地描述 Use Case。第三步，重新审视每个 Use Case，为它们下个详尽的定义。3.4.1 角色（Actor）定义普通用户：使用我们网盘的普通用户
18、，注册并且登陆后就可以上传下载文件。每个用户有自己的空间限制，自己上传的文件的总大小不能超过自己最大可用的空间，并且用户可以在自己的网盘空间中新建文件夹，删除文件或者文件夹。3.4.2 系统主用例图用 户上 传 文 件登 陆下 载 文 件 删 除 文 件 新 建 文 件 夹修 改 密 码文 件 管 理第 9 页 （共 21 页）图 3-2 系统主用例图3.5 性能需求3.5.1 界面需求用户在上传文件需要等待的时候，有一个标识符代表后台正在处理，需要用户继续等待。3.5.2 响应时间需求在 2MB 网络的情况下，用户网页打开时间小于 0.1s。4 页面概要设计4.1 页面布局设计页面布局如下图
19、图 4-1 页面布局图4.2 页面出错处理设计页面出错了的话，会有对话框来提示用户操作出错。图 4-2 错误处理代码图第 10 页 （共 21 页）4.2.1 出错信息出错的信息是通过 ajax 由后台取得的。4.2.2 补救措施提示给用户错误信息，并且中止方法的运行。5 页面详细设计5.1 页面布局设计网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的机会找出吸引他的东西。我们的网络存储系统用户主界面的布局秉承简洁清爽明了的原则，避免多余缀饰，呈现用户以清晰的视角层次。5.2 页面横幅设计导航图在网页界面中具有重要作用。合理的运用图形可以生动直观、形象地表现设计主题。网页中导航图常用的图形格式是 jpg，这种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。本次采用的导航图设计是选取母校重庆师范大学的风采图，通过PhotoShop CS4,运用蒙版和渐变等效果将 6 张图片巧妙衔接在一起，最后将重庆师范大学的校徽以水印的形式加在图片上，形成最终的导航图。
