网络存储系统设计与实现-首页和管理员页面编写

第6页（共23页）网络存储系统设计与实现——首页和管理员页面编写摘要：计算机的发展从单片时代开始，历经客服服务器时代和互联网时代之后，现在正逐步走向网络时代。所以我们才会选择将目光放到网上，从而推出了网络硬盘（网盘）。用网盘的分布式储存系统，一份资料有多份冗余，即使部分机器损坏也能完整恢复数据，更不会存在丢失的风险，而且网盘严格的储存机制可放置病毒的传播。另外网盘没有容量大小限制，用户会有配额，但可无限扩容。关键词：网络时代；网络存储技术；大数据Englishabstract:Thedevelopmentofthecomputerfromthedaysofmonolithic,aftertheserveroftheservicetimeandaftertheageoftheInternet,isnowgraduallytothenetwork.SowecanchoosetolookontheInternet,whichlaunchedanetworkharddisk(cloud).Withnetworkbackupdistributedstoragesystem,adatahavemoreredundancy,evensomemachinefailurecancompletedatarecovery,nottheriskofloss,andanetworkbackupstrictstoragemechanismcanbeplacedthespreadofthevirus.Othernetworklocationthereisnolimittothesize,theuserwillhavequota,butunlimitedexpansion.Keywords:networktimes;Networkstoragetechnology;bigdata曾几何时，u盘和移动硬盘取代了磁盘成为了人们最方便的数据携带工具，人们可以很方便的把数据通过u盘传输。但目前，U盘，移动硬盘已经适应不了互联网时代了。现在u盘和移动硬盘的局限性如下：安全性不能保证U盘和移动硬盘一旦损坏或者丢失，上面的数据难以再找回，可能造成难以估计的损失，并且病毒也极易通过U盘传播。容量大小限制随着互联网时代数据量的爆发式增长，即使是移动硬盘的TB级储存空间也会出现难以储存所需要传输资料。而U盘和移动硬盘的空间都是固定的，不能够灵活的扩大。如果传输很大的数据，不得不分开用多个便携设备存储。数据共享不方便U盘和移动硬盘的传输是点对点的，而且需要把设备插到电脑上才能传输，不能很方便的将一份资料多个用户共享。引言编写目的该论文是关于用户对于网络存储系统的功能和性能的要求，重点描述了网络存储系统的设计需求，将作为对该工具在概要设计阶段的设计输入。本论文的预期读者是：设计人员开发人员项目管理人员测试人员用户背景数据存储技术起源于70年代的终端主机计算模式。当数据集中存放在主机上，因此数据存储的核心是主机上高效率的文件系统。随着80年代以后客户机服务器计算模式的普及，网络上的文件服务器和数据库服务器通常成为核心数据聚集的地方。同时，在网络上分布的客户机也会存放一些数据。这种情况导致了数据的分散性，推动了数据存储技术向网络数据存储发展。随着信息技术的迅猛发展，信息数字化所带来的信息量、数据信息以爆炸式的几何级数递增，如何高效、可靠地存储、处理这些数据，已成为关系到IT产业界的电子商务和互联网等领域发展的关键问题。与传统总线连接存储（BusAttachedStorage,BAS）相比，网络存储（NetworkStorage）集成了存储技术和网络技术，并采用更优的体系结构为数据存储提供了更高的数据容量和宽带，同时它还具有高可用性、可靠性和课扩展性等优点。然而因为网络技术的使用，其体系结构具有一定的发放性，数据使用者和存储设备分散在不同的位置。为了向用户提供准确可靠的服务技术，必须采用必要的措施来保证网络存储系统的高可靠性。定义Div+css:层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。JQurey:一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。Ajax:指异步JavaScript及XML（AsynchronousJavaScriptAndXML）。核心是JavaScript对象XmlHttpRequest。bootstrap:计算机术语,一种设计成通过自己的操作使其自身处于期望状态的技术或设备。总体设计需求规定本系统设定的目标如下：1.系统能够提供友好的用户界面，使操作人员的工作量最大限度的减少2.系统具有良好的运行效率，有良好的可扩充性，可以容易的加入其它系统的应用。3.平台的设计具有一定的超前性，灵活性，能够适应企业生产配置的变化。4.数据中心要建设一个设备集中、集中管理、满足应用、方便扩展、安全稳定、共享同一的存储系统。5.通过这个项目可以锻炼队伍，提高团队的开发能力和项目管理能力6.用户注册后能够在上面保存删除自己的文件。运行环境系统运行硬件环境本系统的硬件环境如下：客户机：普通PCCPU：P41.8GHz内存：256MB以上分辨率：推荐使用1024*768像素WEB服务器CPU：P41.8GHz内存：2048MB以上hadoop从服务器CPU：P41.8GHz内存：1024MB以上系统运行软件环境操作系统：Linux数据库：Oracle或者mysql开发工具包：MyeclipseJSP服务器：Tomcat浏览器：IE8.0基本设计概念和处理流程本系统的基本设计概念：如图2.3-1hadoop从机hadoop从机hadoop从机hadoop从机hadoop从机hadoop从机hadoop从机hadoop从机图2.3-1本系统的处理流程：如图2.3-2图2.3-2程序系统的结构系统整体结构：如图2.4-1图2.4-1功能需求与程序的关系表2.5-1功能需求与程序的关系功能和需求描述模块功能描述注册用户通过注册账号以便登录登录用户和管理员通过登录进入界面下载文件用户在搜索到相关资料后，可以对其进行下载。上传文件用户可以把自己的资料上传到网络存储系统的存储空间中。登录管理登录管理是负责所有的管理端的登录，管理端的人员要登录到管理端必须经过登录界面，输入自己的用户名和密码，通过判断这个用户的权限信息，不同的登录人可能具有不同的权限，根据不同的权限现实不同的功能。上传管理对使用者上传的文件，管理者可以进行查看，可以及时更新并显示上传的文件，及提供上传文件的详细信息。下载管理对使用者下载文件的大小进行管理，下载权限进行管理。空间管理管理者具有分配空间给使用者的权限，可以查看使用者存储空间剩余，可以增加、删除、修改操作。文件管理对使用者上传的文件，管理者可以进行查看，可以及时更新并显示上传的文件，及提供上传文件的详细信息。可以对文件进行增加、删除、修改等操作。密码管理管理者对密码可以进行查看，修改等操作。当使用者登陆时，要将其输入的密码与数据库中对应的密码进行匹配。用户管理当进入用户管理模块时，在用户管理中可以增加或删除用户，编辑用户名，用户密码，修改用户权限，具有不同权限的用户进入系统主界面。技术支持分析后台SSH(三大框架)定义：SSH为struts+spring+hibernate的一个集成框架，是目前较流行的一种Web应用程序开源框架。集成SSH框架的系统从职责上分为四层：表示层、业务逻辑层、数据持久层和域模块层，以帮助开发人员在短期内搭建结构清晰、可复用性好、维护方便的Web应用程序。结构框架：Struts：Struts对Model，View和Controller都提供了对应的组件。ActionServlet，这个类是Struts的核心控制器，负责拦截来自用户的请求。Action，这个类通常由用户提供，该控制器负责接收来自ActionServlet的请求，并根据该请求调用模型的业务逻辑方法处理请求，并将处理结果返回给JSP页面显示。Spring：Spring是一个开源框架，它由RodJohnson创建。它是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。Hibernate：Hibernate是一个开放源代码的对象关系映射框架，它对JDBC进行了非常轻量级的对象封装，使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库。Hibernate可以应用在任何使用JDBC的场合，既可以在Java的客户端程序使用，也可以在Servlet/JSP的Web应用中使用，最具革命意义的是，Hibernate可以在应用EJB的J2EE架构中取代CMP，完成数据持久化的重任。Hadoop（大数据）定义：Hadoop是一个能够对大量数据进行分布式处理的软件框架。Hadoop是可靠的，因为它假设计算元素和存储会失败，因此它维护多个工作数据副本，确保能够针对失败的节点重新分布处理。Hadoop是高效的，因为它以并行的方式工作，通过并行处理加快处理速度。Hadoop还是可伸缩的，能够处理PB级数据。此外，Hadoop依赖于社区服务器，因此它的成本比较低，任何人都可以使用。优点：1.高可靠性。Hadoop按位存储和处理数据的能力值得人们信赖。⒉高扩展性。Hadoop是在可用的计算机集簇间分配数据并完成计算任务的，这些集簇可以方便地扩展到数以千计的节点中。⒊高效性。Hadoop能够在节点之间动态地移动数据，并保证各个节点的动态平衡，因此处理速度非常快。⒋高容错性。Hadoop能够自动保存数据的多个副本，并且能够自动将失败的任务重新分配。5.低成本。与一体机、商用数据仓库以及YonghongZ-Suite等数据集市相比，hadoop是开源的，项目的软件成本因此会大大降低。Hadoop带有用Java语言编写的框架，因此运行在Linux

生产平台上是非常理想的。Hadoop上的应用程序也可以使用其他语言编写，比如C++。6.R是GNU的一个开源工具，具有S语言血统，擅长统计计算和统计制图。由RevolutionAnalytics发起的一个开源项目RHadoop将R语言与Hadoop结合在一起，很好发挥了R语言特长。广大R语言爱好者借助强大工具RHadoop，可以在大数据领域大展拳脚，这对R语言程序员来说无疑是个喜讯。作者从一个程序员的角度对R语言和Hadoop做了一次详细的讲解。前端DIV+CSSDIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。BootStrap前端开发框架定义：Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师MarkOtto和JacobThornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。JQueryjQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由JohnResig在2006年1月的BarCampNYC上发布第一个版本。目前是由DaveMethvin领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。AjaxAJAX指异步JavaScript及XML（AsynchronousJavaScriptAndXML）。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。页面设计登录界面登录界面如图4.1-1所示：图4.4-1源代码：<!--登陆表单--><divclass="modalhidefade"id="log"><divclass="modal-header"><ahref="#"class="close"data-dismiss="modal">×</a><!--页头部分--><h4>登陆</h4></div><!--主体--><divclass="modal-body"><!--.form-horizontal是form表单的水平样式--><formclass="form-horizontal"><!--.control-group和.controls来控制换行和对齐问题--><divclass="control-group"><labelclass="control-label">用户名</label><divclass="controls"><inputtype="text"name="name"placeholder="请输入您的用户名"style="height:28px"></div></div><divclass="control-group"><labelclass="control-label">密码</label><divclass="controls"><inputtype="password"name="password"placeholder="请输入您的密码"style="height:28px"></div></div><!--.inline是将选项放在一行上--><labelclass="radioinline"><inputtype="radio"name="login"value="Manager"style="float:left;margin-left:150px"/>管理员</label><labelclass="radioinline"><inputtype="radio"name="login"value="User"/>用户</label></form></div><!--页脚部分--><divclass="modal-footer"><buttontype="button"class="btnbtn-primary">登陆</button></div></div>注册界面注册界面如图4.2-2所示：图4.2-1源代码：<!--注册表单--><divclass="modalhidefade"id="reg"><divclass="modal-header"><ahref="#"class="close"data-dismiss="modal">×</a><h4>注册</h4></div><divclass="modal-body"><formclass="form-horizontal"><divclass="control-group"><labelclass="control-label">用户名</label><divclass="controls"><inputtype="text"name="name"placeholder="请设置您的用户名"style="height:28px"></div></div><divclass="control-group"><labelclass="control-label">设置密码</label><divclass="controls"><inputtype="password"name="password"placeholder="8-20个字符，区分大小写"style="height:28px"></div></div><divclass="control-group"><labelclass="control-label">重复密码</label><divclass="controls"><inputtype="password"name="password"placeholder="请再输一次"style="height:28px"></div></div><divclass="control-group"><labelclass="control-label">邮箱</label><divclass="controls"><inputtype="password"name="email"placeholder="请输入您的邮箱"style="height:28px"></div></div><divclass="control-group"><labelclass="control-label"for="region">所属地区</label>    <selectid="region"><optionvalue="Beijing">北京</option><optionvalue="Tianjin">天津</option><optionvalue="Shanghai">上海</option><optionvalue="Chongqing">重庆</option><optionvalue="Hebei">河北</option><optionvalue="Henan">河南</option><optionvalue="Yunnan">云南</option><optionvalue="Liaoning">辽宁</option><optionvalue="Heihongjiang">黑龙江</option><optionvalue="Hunan">湖南</option><optionvalue="Anhui">安徽</option><optionvalue="Shandong">山东</option><optionvalue="Xinjiang">新疆</option><optionvalue="Jiangsu">江苏</option><optionvalue="Zhejiang">浙江</option><optionvalue="Jiangxi">江西</option><optionvalue="Hubei">湖北</option><optionvalue="Guangxi">广西</option><optionvalue="Gansu">甘肃</option><optionvalue="Shanxi">山西</option><optionvalue="Neimenggu">内蒙古</option><optionvalue="Shanxi">陕西</option><optionvalue="Jilin">吉林</option><optionvalue="Fujian">福建</option><optionvalue="Guizhou">贵州</option><optionvalue="Guangdong">广东</option><optionvalue="Qinghai">青海</option><optionvalue="Xizang">西藏</option><optionvalue="Sichuan">四川</option><optionvalue="Ningxia">宁夏</option><optionvalue="Hainan">海南</option><optionvalue="Taiwan">台湾</option><optionvalue="Hongkong">香港</option><optionvalue="Macau">澳门</option></select></div><divclass="control-group"><labelclass="control-label">性别</label><labelclass="radioinline"><inputtype="radio"name="login"value="Manager"style="float:left;margin-left:50px"/>男</label><labelclass="radioinline"><inputtype="radio"name="login"value="User"style="float:left;margin-left:50px"/>女</label></div></form></div><divclass="modal-footer"><buttontype="button"class="btnbtn-primary">注册</button></div></div>管理员界面需求分析：F-L-1：登录管理登录管理是负责所有的管理端的登录，管理端的人员要登录到管理端必须经过登录界面，输入自己的用户名和密码，通过判断这个用户的权限信息，不同的登录人可能具有不同的权限，根据不同的权限现实不同的功能。F-M-1上传管理对使用者上传的文件，管理者可以进行查看，可以及时更新并显示上传的文件，及提供上传文件的详细信息。F-M-2下载管理对使用者下载文件的大小进行管理，下载权限进行管理。F-M-3空间管理管理者具有分配空间给使用者的权限，可以查看使用者存储空间剩余，可以增加、删除、修改操作。F-M-4文件管理对使用者上传的文件，管理者可以进行查看，可以及时更新并显示上传的文件，及提供上传文件的详细信息。可以对文件进行增加、删除、修改等操作。F-M-5密码管理管理者对密码可以进行查看，修改等操作。当使用者登陆时，要将其输入的密码与数据库中对应的密码进行匹配。F-A-1：用户管理当进入用户管理模块时，在用户管理中可以增加或删除用户，编辑用户名，用户密码，修改用户权限，具有不同权限的用户进入系统主界面。登录管理：登录到管理端的所有人都需要通过登录界面进入相应的管理界面，不同的登录人具有不同的权限，根据登录人具有的权限将相应的功能现实在登录到的管理界面，没有权限操作的功能将在现实在这个界面上。上传管理:管理者具有管理使用者上传文件的权限，具体功能描述如下：用例描述：上传管理执行者：管理者前置条件：管理者已登录系统；基本路径： 管理者具有管理使用者上传文件的权限。可以限制上传文件的大小。可以限制上传文件的内容。下载管理:管理者具有管理使用者下载的权限，具体功能描述如下：用例描述：下载管理执行者：管理者前置条件：管理者已登录系统；基本路径： 管理者具有管理使用者下载的权限。可以限制使用者对于某些文件的下载。可以研制使用者下载文件的大小。空间管理:管理者具有分配空间给使用者的权限，具体功能描述如下：用例描述：空间管理执行者：管理者前置条件：管理者已登录系统；基本路径： 管理者具有分配空间给使用者的权限。可以查看使用者存储空间剩余。可以进行修改操作。文件管理:对使用者上传的文件，管理者可以进行查看，可以及时更新并显示上传的文件，及提供上传文件的详细信息。可以对文件进行增加、删除、修改等操作。具体的功能描述如下：用例描述：文件管理执行者：管理者前置条件：面试管理者已登录系统；基本路径： 进入文件管理界面，管理者可以进行查看上传的文件。管理者可以及时更新并显示上传的文件，及提供上传文件的详细信息。以对文件进行增加、删除、修改等操作。密码管理：管理者对密码可以进行查看，修改等操作。当使用者登陆时，要将其输入的密码与数据库中对应的密码进行匹配。具体描述如下：用例描述：密码管理执行者：管理者前置条件：面试管理者已登录系统；基本路径： 管理者对密码可以进行修改操作。当使用者登陆时，要将其输入的密码与数据库中对应的密码进行匹配。用户管理：系统管理员可以进行权限设置，在用户管理中对用户进行增删改查。具体功能描述：用例描述：用户管理执行者：管理者前置条件：系统管理员已登录系统；基本路径： 进入用户管理界面，显示目前的系统用户，以及每个用户具有的权限；点击不同的用户，可以显示这个用户的信息以及相应权限，必要时可以修改其权限；可以增加用户，也可以删除用户。源代码：<imgsrc="images/title.jpg"width="100%"height="100px"/><divstyle="background-color:#E8F2FE;width:100%;height:10px;margin-top:10px;"></div><divclass="container"><!--选项卡--><divclass="box1"><divclass="tabbabletabs-left"><!--.nav和.nav-tabs类可以把无序列表变成选项卡的标签--><ulclass="navnav-tabs"style="background-color:#ADD9E6"><liclass="active"><ahref="#tab1"data-toggle="tab"class="style">    首      页    </a></li><li><ahref="#tab2"data-toggle="tab"style="font-size:35px;margin-top:65px">    上传管理    </a></li><!--<li><ahref="#tab3"data-toggle="tab"style="font-size:35px;margin-top:50px">下载管理</a></li>--><li><ahref="#tab3"data-toggle="tab"style="font-size:35px;margin-top:65px">    空间管理    </a></li><li><ahref="#tab4"data-toggle="tab"style="font-size:35px;margin-top:65px">    文件管理    </a></li><li><ahref="#tab5"data-toggle="tab"style="font-size:35px;margin-top:65px">    密码管理    </a></li><li><ahref="#tab6"data-toggle="tab"style="font-size:35px;margin-top:65px;margin-bottom:65px">    用户管理    </a></li></ul><!--选项卡右边部分--><divclass="tab-content"><!首页><divclass="tab-paneactive"id="tab1"><imgsrc="images/2.png"width="675px"height="650px"/></div><!上传管理><divclass="tab-pane"id="tab2"><divclass="box12">Js源码：$(function(){ /*关于删除按钮*/ $('#delete-users').click(functi