毕业设计（论文）-基于SpringMVC的个人网盘系统的设计与实现

2017届普通本科毕业论文(设计)湖北经济学院教务处制 1Abstract 2 31.1开发背景 31.2国内外发展现状及其趋势 31.3开发的目的及意义 41.4本课题所研究的内容 4第2章相关技术简介 6 6 72.3前端框架MiniUI、Bootstrap的特点 72.4B/S架构特点 8第3章系统需求设计 93.1功能需求 93.1.1信息的展示 93.1.2用户对文件的基本操作的功能 93.1.3文件分享 93.1.4文件在线预览 3.2用户界面需求 3.3性能需求 3.3.1系统的可靠性和安全性 3.3.2系统的易用性和易维护性 3.4运行环境 3.4.1软件平台 3.4.2硬件平台 第4章系统的设计 4.1系统总体说明 4.1.1主要业务功能划分 4.2技术关键点考虑 4.2.1用户登录验证并跳转 4.2.2上传文件到服务器 4.2.3文件分享 4.2.4文件在线预览 4.2.5图片文件的展示 4.3数据库设计 4.3.1数据库的阐述 4.3.2表的设计 第五章系统的实现 5.1系统搭建 5.2功能实现 5.2.1用户登录界面 5.2.2用户主界面 5.2.3上传文件界面 5.2.4下载文件界面 5.2.5删除文件界面 5.2.6重命名文件界面 5.2.7分享文件界面 5.2.8搜索文件界面 5.2.9图片展示界面 5.2.10文档展示界面 5.2.11音乐展示界面 5.2.12视频展示界面 5.2.13其他文件展示界面 5.2.14提取文件界面 5.2.15用户个人信息展示界面 5.3关键代码分析 5.3.1上传文件 5.3.2下载文件 5.3.3图片文件的整体展示 结束语 参考文献 毕业设计概毕业设计说图片预览混件使用到的工登录验证序上传文件序disk-ssh开题报告书webDH全套设计加扣30122505821随着计算机及网络技术的不断发展，现代通讯工具应用的普及，计算机在现代社会生活中发挥着重要的作用，而与之相伴随的是大量数据资料，其中占比最大的是经常使用的以文件形式存在的资料，随着信息的增多，信息的存储和管理变得复杂，单机硬盘存储已满足不了用户的文件存储和管理需要，因此，研究和实现一个可靠的、低成本的、操作便利的、可供个人存储资料及共享资料的、易拓展、易搜索、易评价的网络存储应用系统具有重要的意义和实用价值。在此背景下，以网络存储技术为核心的个人在线网盘系统应运而生。本系统，前端部分主要采用流行框架MiniUI以及部分Bootstrap进行数据在页面上的展示，后端部分采用SpringMVC+MyBatis进行逻辑控制和数据获取，数据库部分采用关系型数据库管理系统MySQL进行数据管理。本系统主要实现了以下功能：(1)普通用户登录系统，可以实现文件的上传，下载，删除，分享，重命名，搜索，并且可以分类对文件进行在线查看，加密分享，实时删除等操作，相关用户获取分享链接后可直接或间接提取文件。用户可通过个人中心查看自身信息。(2)管理员登录系统，可查看用户注册用户登录、用户个人空间使用情况等基本信息。本系统采用B/S架构，用户使用该系统，不受操作系统平台的限制，能够实现随时随地查看并获取文件，并规避可能发生的数据危险，真正实现满足用户需求，提高效率，节约资源，处理业务的目的。2Inrecentyears,withthecontinuousdevelopmentoftechnologyandthepopularityofmoderncommunicationtoolcomputersplayanimportantroleinmodernsociallife.Accompaniedbyalargenumberofdata,whichaccountedforthelargestisoftenusedintheformofdocumentsexist.Withtheincreaseofinformation,thestorageandmanagementofinformationbecomescomplicated,harddiskstoragehasbeenunabletomeettheuser'sfilestorageandmanagementneeds.Therefore,itisofgreateasy-to-use,easy-to-evaluateandeasy-to-evaluatenetworkstorageThefrontpartofthesystem,mainlyusingpopularframeworkMiniUIandsomeBootstrapdatadisplay,thebackpartoftheuseofSpringMVC+MyBatisdatabasemanagementsystemfordatamanagementMySQL.(1)Forordinaryuser,youcanupload,download,delete,share,rename,searchthefiles,andcanbeclassifisharing,real-timedeleteandotheroperations,therelevantuseraccesstoinformationthroughthepersonalcenter.(2)Foradministrator,youcanviewtheuserregistration、login,userpersonalspaceandotherbasicinformation.theoperatingsystemplatform,toachieveanytodocuments,andtoavoidpossibledatarisk,trulymeettheneedsofusers,Keywords:B/S;SpringMVC;MyBatis;MiniUI;MySQL31.1开发背景随着计算机及网络技术的不断发展，现代通讯工具应用的普及，计算机在现代社会生活中发挥着重要的作用，而与之相伴随的就是大量数据资料而且是一些经常使用的文件资料，处理、传输和存储成为当今数据信息技术的三大基石，计算设施、网络设施以及存储设施合在一起，成为以互联网为代表的现代信息社会的基础设施。而为了适应集成/网络技术的飞速发展，信息大都采用二进制数字的形式存储，随着信息的增多，信息的存储和管理变得复杂，单机硬盘存储已满足不了用户的文件存储和管理需要，因此，研究和实现一个可靠的、低成本的、操作便利的、可供个人存储资料及共享资料的、易拓展、易搜索、易评价的网络存储应用系统具有重要的意义和实用价值。个人网盘系统以网络存储技术为核心应运而生，以适应目前信息化社会对支持网络、支持多种数据信息的新型网络应用软件的要求，取代以纸质、手工为主体的传统办公方式，解决单机文件存储软件存储量少、文件工作和管理效率低、文件交互共享能力有限等弊端，以提高文件管理的效率，减轻硬盘存储和管理压力。1.2国内外发展现状及其趋势随着当前互联网的发展，国外推出了Box、DropBox、OneDrive、iCloud等发展成熟受众面较大的网盘服务，国内互联网企业也相继推出了QQ网盘、金山快盘、115网盘、360网盘、百度网盘等网络磁盘工具，互联网上的网络磁盘功能较全面、操作4便捷，受到大量用户的欢迎。综合研究各类网盘，可得出此类网盘系统具体实现的功能和使用流程类似，用户通过网上登录系统的方式，可方便上传、下载、分享、删除文件，并且系统一般提供独特的分享和分组功能，突破传统存储的观念，适应互联网时代的资源共享的特征。与其他同类产品相比，“网络磁盘”产品具有直观预览、分享、分组管理、稳定安全的四大特点，基本能实现用户对网络文件的传输和需求，也受到了广大网友的欢迎，纸质话及单机化存储逐渐退出大众的视线。1.3开发的目的及意义网络存储最直观的意义有三，第一是减少文件信息占用的用户硬盘内存，使得用户不必在自己的单机上划分较大的空间用于存储信息，第二，提供更简单快捷的在线查阅方式，用户不必下载文件到自己的磁盘上即可查阅文件，第三，快速实现文件共享。通过在线网盘系统的研究与设计，目的是，能够让该系统实现收集与存储用户个人文件，并提供上传、下载、删除、分享、重命名、搜索等功能供用户管理存储在服务器上的文件，同时，将文件分类展示，并提供在线阅览，以最大限度的方便用户对同类文件的操作，真正实现满足用户需求，提高效率，节约资源，处理业务的目的。1.4本课题所研究的内容本课题基于Web平台开发出一个在线网盘系统，能够满足用户线上处理个人文件信息的需求。本次设计的系统是针对个人毕业设计，其系统设计参考当前主流的Web系统的开发流程。整个系统研究内容分为以下几个部分：文件的上传、下载与重命名：(1)用户点击界面上的“上传”按钮，可以将个人系统的文件上传到服务器，系统自动获取文件大小和文件类型，并进行分类。(2)用户点击界面上的“下载”按钮，将已经上传到服务器上的文件下载到本5(3)用户点击界面上的“重命名”按钮，可以给上传到服务器的文件重命名，并判断是否有重名文件。(1)用户通过选择文件，并点击生成公开链接，可以获取该文件的公开下载链接，其他用户可通过该链接直接下载此文件。(2)用户通过选择文件，并点击生成私密链接，可以获取该文件的私密下载链接和提取码，其他用户可通过该链接，并输入正确的提取码下载此文件。线查看，暂时不支持对除以上四种文件类型以外的文件进行查看。基于上述背景，在接下来的章节，将对个人在线网盘系统所涉及的相关技术进行6第2章相关技术简介框架，使用了MVC架构模式的思想，将web层进行职责解耦，基于请求驱动指的就是使用请求-响应模型，框架的目的就是帮助我们简化开发，SpringMVC也是要简化日SpringMVC也是服务到工作者模式的实现，但进行可优化。前端控制器是DispatcherServlet;应用控制器其实拆为处理器映射器(HandlerMapping)进行处理器管理和视图解析器(ViewResolver)进行视图管理；页面控制器/动作/处理器为Controller接口(仅包含ModelAndViewhandleRequest(request,response)方法)的实现(也可以是任何的POJO类);支持本地化(Locale)解析、主题(Theme)解析及文件上传等；提供了非常灵活的数据验证、格式化和数据绑定机制；提供了强大的约定大于配置(惯例优先原则)的契约式编程支持。图2.1-1展示了SpringMVC模型视图ModelAnView页面控制器处理器视图前端控制器图2.1-1SpringMVC的请求处理流程7MyBatis是支持普通SQL查询，存储过程和高级映射的优秀持久层框架。MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索。MyBatis使用简单的XML或注解用于配置和原始映射，将接口和Java的P0J0s(Plain0ldJavaObjects,普通的Java对象)映射成数据库中的记录。MyBatis框架架构讲解：将SQL的配置信息加载成为一个MappedStatement对象(包括了传入参数映射配置、执行的SQL语句、结果映射配置),存储在内存中。(2)SQL解析：当API接口层接收到调用请求时，会接收到传入SQL的ID和传入对象(可以是Map、JavaBean或者基本数据类型),Mybatis会根据SQL的ID找到对应的MappedStatement,然后根据传入参数对象对MappedStatement进行解析，解析后可以得到最终要执行的SQL语句和参数。(3)SQL执行：将最终得到的SQL和参数拿到数据库进行执行，得到操作数据库(4)结果映射：将操作数据库的结果按照映射的配置进行转换，可以转换成HashMap、JavaBean或者基本数据类型，并将最终结果返回。2.3前端框架MiniUl、Bootstrap的特点MiniUI是一款优秀的JS前端Web框架，提供丰富、强大的控件库，能快速开发Web应用软件，是国内知名的前端框架之一，可供.NET、Java、PHP等主流编程语言配合使用。使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。MiniUI具有易学易用、性能优化、丰富控件、第三方兼容、浏览器兼容等突出优点，能缩短开发时间，减少代码量，使开发者更专注于业务和服务器端，轻松实现8界面开发，带来绝佳的用户体验。Bootstrap是一个基于Html、Css、JavaScript的快速开发Web应用程序的网站的前端框架，开源的Bootstrap包含了功能强大的内置组件，提供基于Web的订制，为开发人员创建接口提供了一个简洁统一的解决方案。但是由于Bootstrap只提供了相对基础单一的组件，在搭建比较复杂的界面时会稍显劣势，所以本系统选择将Bootstrap搭配成熟完整的MiniUI完成整套前端页面的实现。2.4B/S架构特点B/S架构的全称为Browser/Server,即浏览器/服务器结构。Browser指的是Web浏览器，极少数事务逻辑在前端实现，但主要事务逻辑在服务器端实现，Browser客B/S架构中，显示逻辑交给了Web浏览器，事务处理逻辑在放在了WebApp上，这样就避免了庞大的胖客户端，减少了客户端的压力。因为客户端包含的逻辑很少，因此也被成为瘦客户端。(1)客户端无需安装，有Web浏览器即可。(2)BS架构可以直接放在广域网上，通过一定的权限控制实现多客户访问的目的，交互性较强。(3)BS架构无需升级多个客户端，升级服务器即可。9第3章系统需求分析3.1功能需求本系统的功能大致分为四大模块：信息的展示、用户对文件的基本操作、文件分享、文件在线预览。(1)用户进入系统主页，可以看到存储在服务器上的文件以表格的形式分页展示，同时可以看到文件的基本信息，包括文件存于数据库的id,文件名，文件的大小，文件类型，文件属性，文件被分享的次数和上传的时间。(2)提供对用户上传的文件分类展示的功能。(3)提供管理员进入系统之后，可以看到用户的基本信息，包括身份信息，空间使用情况，用户所拥有的文件数量等的功能。3.1.2用户对文件的基本操作的功能(1)提供用户上传文件的功能(2)提供用户下载文件的功能(3)提供用户删除文件的功能(4)提供用户对上传的文件重新命名的功能，当文件的新名与服务器上已存在的文件重名时，提醒用户重命名失败。(5)提供用户搜索文件的功能，支持模糊搜索。3.1.3文件分享提供用户分享文件的功能，且支持两种类型的分享：私密分享和公开分享，其他系统外的用户可以通过链接下载文件。提供用户在线预览文件的功能，预览文件的类型包括：图片、文档、音乐和视频，此四种类型之外的文件不支持在线预览。3.2用户界面需求(1)要求有简洁大方的界面风格，数据展示清楚明了。(2)界面友好，当用户与系统发生交互时，有适当的操作提示信息。(3)用户体验好。3.3性能需求3.3.1系统的可靠性和安全性对系统应该设计出尽可能详尽的故障处理方案，从而保证系统的快速恢复性。并采用允余技术保证系统可靠运行、数据可靠存储。可以对系统运行情况采用自动检测、告警、监控等方式进行实时观测。在系统使用过程中，由于硬件出现故障或其他原因造成系统暂时性的中断后系统重启时，能够保证系统将原有的数据快速恢复，使其继续下去。3.3.2系统的易用性和易维护性系统是直接面对使用人员的，而使用人员往往对计算机并不是很熟悉，这就要求系统能够提供友好的用户界面，简单易用的人机交互界面。要实现这些，系统应尽量使用户熟悉的术语以及中文信息的界面；界面应友好，方便用户的使用，在界面上，用户可以使用一些图标，指示性的提示，惊醒相对应的操作。系统中所涉及的数据是我们统计中相当重要的信息，系统需要要提高方便可行的手段让系统维护人员进行数据的备份、日常的安全管理、系统意外崩溃时数据的恢复等工作。3.4系统运行环境3.4.1硬件平台CPU:P41.8GHz3.4.2软件平台4.1系统总体说明4.1.1主要业务功能划分本系统的主要业务功能从横向上可以分为普通用户模块和管理员模块，普通用户模块在本次设计中占的比重比较大，而在普通用户模块上，重要业务功能纵向划分为四个大的部分：文件展示、文件基本操作、文件分享、文件在线预览。图4.1.1为具查看用户信息查看用户信息√查看个人信息预览文件查询文件重命名文件分享文件删除文件下载文件上传文件业个人中心文件管理图4.1.1系统功能结构图4.2技术关键点考虑4.2.1用户登录验证并跳转当已注册用户输入用户名密码点击登录时，需要向服务器端发送Ajax请求，服务器端根据用户名密码匹配，并将结果返回给前端，前端根据信息决定是报错、跳转用户界面、跳转管理员界面，且考虑到系统需要在之后的操作中一直需要拿到用户信息，所以需要在登录的同时将用户信息存入session,方便拿取。交互如下图所示：浏览器界面浏览器界面用户名密码获取用户名密码用户名≤无对应信息-<发送普通用户界面请求username户界面户信息比对用户信息显示用户名显示管理员<<图4.2.1登录验证序列图4.2.2上传文件到服务器将文件信息上传到Tomcat服务器的方法有很多种，传统方法是使用文件流方式读取文件内容，并使用字节流保存，但是比较麻烦的是需要手动关闭流，如果没有关闭，将会引起不必要的麻烦。所以本系统拟采用封装好的工具类common.io的方式实现文件的上传下载。同时，按照整个系统的设计，上传文件的时候除了要将文件保存在服务器，还要提取文件的相关信息保存在数据库，这些相关信息包括：文件名、文件大小、文件类型、文件上传时间以及手动为文件设置提取码。考虑到后期系统用户有可能会在线预览文件，所以在上传文件的同时，将后缀名为.doc.docx.txt转换为pdf文件。交互如用户一文件流-接收文件流保存文件到服务器并生成pdf文件信息添加记录刷新界面展示图4.2.2上传文件序列图4.2.3文件分享以百度网盘为例，文件分享模块一般分为两个部分，公开分享和私密分享，且都是通过链接的形式，对于其他用户而言，获取文件的公开分享链接，即可打开浏览器直接下载文件，而获取文件的私密分享链接，打开浏览器进入的是输入提取码页面，必须输入正确的提取码才可以下载该文件，否则将无法完成下载。交互如下图所示：(备注：当用户点击的是获取公开链接时，图中带*的交互不会执行)用户服务器数据库<判断是否选中输入分享链接(提取码)链接(提取码)取码文件分享图4.2.3文件分享序列图4.2.4文件在线预览文档类型的文件在线预览的原理是将先文件转换成pdf格式，再使用H5的embed标签进行展示，embed标签的功能十分强大，甚至可以展示图片和视频音频，本系统也是采用这种方式来实现图片的视频音频类文件的在线预览的。对于文档类型的文件(其中包括后缀名为.doc.docx.txt的文件)而言，在用户点击预览的时候，展示的其实是与此文件对应的pdf文件，本系统采用Xdoc库里面的方法将这种类型的文件转换成pdf格式的文件，由于转换需要一定时间，所以在用户上传文档类型的文件时，就同时进行转换，这样得以保证，用户在预览文件时，界面迅速做出反应。4.2.5图片文件的展示文档、视频、音频以及其他类型的文件展示都是通过表格形式表现的，但是图片作为一种直观的文件，如果采用表格形式展示，在用户体验上效果比较差，本系统在设计图片的展示上，借鉴百度网盘的方法，按照图片上传的时间顺序，使用可折叠的样式将图片展示。图4.2.4为百度网盘展示图片的示例图：2017年04月14日2017年04月14日3实习(实训)报告书2017年04月13日6张2017年04月12日2017年04月12日6图4.2.4百度网盘图片展示示例图要实现按照时间展示图片的功能，必须将时间以及该时间下所有的图片封装成一个类，当从数据库将所有图片文件都拿出来后，将所有图片对应的时间拿出来，使用hashSet去重后，循环所有图片文件，当时间是相同的，则放入相同的类里面，前端遍历list取出来。4.3数据库设计4.3.1数据库阐述数据库的设计通常是以一个已经存在的数据库管理系统为基础，常用的数据库管理系统有Access、SQLServer、Oracle、MySQL等。根据用户需求和系统分析，本系统采用了MySQL数据库管理系统。在MySQL中建立名称为mydisk的数据库。用户信息表：user字段名数据类型是否为空是否为主键描述否是编号usernamevarchar否否用户名passwordvarchar否否密码varchar否否注册时间否否文件数量varchar否否空间容量usedvarchar否否空间使用量usertypevarchar否否用户类型varchar否否登录系统时间标注：usertype分为管理员和普通用户。在数据表中，0为普通用户，1为管理员。文件信息表：file字段名称数据类型是否为空是否为主键字段描述否是文件或文件夹编号否否文件名否否上传时间否否大小否否保存在服务器的绝对路径否否所属用户id否否文件类型否否被分享次数否否文件是共享类型还是私密类型否否上传时间否否提取码用于记录文件是否共享，若共享，则为0,加密则为1.在用户发出下载或者删除命令时，首先判断是否有权限进行此操作。图4.3.1为两张表之前的界面化视图，其中图4.3.1为两张表之前的界面化视图，其中file表的userid为外键，关联user表的id:filenamevarcharlfile_type.varchar(5file_propertyvarch.parent_folder_idintshare_num;int图4.3.1表格的界面化视图file_numintvolume.varchar(30) usedvarchari30)size.varchar(30)第5章系统的实现移动端用户移动端用户系统管理员企业邮件云服务器外网应用服务器置消息服务器数据库服务器日志服务器文件服务器5.2功能实现5.2.1用户登录界面用户在登录界面输入用户名、密码，密码要求是五位数字以上，如果少于5位，密码输入框会有提示，这个验证是前端直接做的。用户输入后，会出现四种情况：密码输入错误，出现密码错误的提示；用户未注册，提示用户注册；用户类型是普通用户，进入普通用户界面；用户类型是管理员，跳转进入管理员界面。图5.2-1登录界面5.2.2用户主界面当用户类型为普通用户时，跳转到主界面，表格以分页的形式展示用户上传到系“其他”五个类型，用户可分别对这五个类型的文件进行操作。图5.2-2为普通用户当用户类型为管理员是，跳转到管理员主界面，以表格的形式展示当前系统用户的信息，由于管理员的模块不是本系统的主要模块，所以设计得比较简单。图5.2-3为管理员用户主界面。欢进进入个人网盘系统wa文并管凝出#世楼B件易姓小1课技来来)124.050并零文序加6-12222曾县注人能522.9H模殊料翠型体D206-12J电.号g29.5i图成并型实体2016-122*文档并程空件2016-127去是200F-dia10.67g交替并率文件02026-1729灾样并称实件B24001220日图片并章文件20161229并章文件2000-12227图片211624烈种书摩欢序2006-220在2m0-1220m文22件如学工件2006-122422ng面种#文件12016-178BHH施#7件2006-1229第15▶判姓项45梨并填菌个A中bvrt1125个人同登收有图5.2-2普通用户主界面个人网盘管理员界面个人网盘管理员界面全章雨中用F名钢词已能用主同上整都12015-09.12(0:2-83语杨扬55355279.08范门班-2020:2512016-074222:22:22E2016-42-022272:225ggang5232322016-02422212227201642-022222;222116-020222:22:22MB2016-02-1222:22:223331332616-0202221122:2200M82016-42-6222:22:222016-2022227:2219E2016-2-0222:22:279鸡克力99990992016-02-4222:22222016-02-0212:2262当用户点击上传按钮时，跳出上传界面。(注：在主界面放两个上传按钮是为了便于对比，第一个上传按钮被点击时，直接调出上传页面，点击打开即是上传，第二个上传按钮需要中间页面，用户体验不好。)欢油进入个人网世系统欢油进入个人网世系统解直开查0旗春1WμeHm**hithemg得扣预m:B单R1512*1m*1*251028FAn0yH野射P60E85.2.4下载文件界面当用户点击下载按钮时，跳出上传界面。(注：暂时只支持下载单个文件，当选取的文件个数不等于1的时候，将会跳出提示，只有在正确的数目下才可以跳出下载界面)欢论进A个人网盘系纸欢论进A个人网盘系纸主文件上强N#*t##家度#家交件Tsn#*7##TH#盖专人中心0P算上部42#m8243btsH而0151*12×*21.2hm@型n开用#I上呼A#2#姓盛#045.2.5删除文件界面当用户点击删除按钮时，跳出删除界面。(注：暂时只支持删除单个文件，当选取的文件个数不等于1的时候，将会跳出提示，只有在正确的数目下才可以下载)。贵上传中上传下载×岛分事√重命名卷编号文性名文件太小文料类型文件胜被分享次数立该统末来1网329.00×3图共事文件夏目友人殊5,mp4视频井事文件在面老奥要1号图片共事文件面基于Sa/mgHvtxlocalhost8080上的网页显示：共事文件2我是200共章文件0确后表除选干记最?共事女件国4共事女件0确定南共事文件l共事文件章9片共事文件面毕业及计额要设计.00c文挡共事文件在文本交件共事文件0面图片共事文件1更爱塑辑田镇葵atm04祝频共事女件围7要一，m03量乐共享女件2当用户点击重命名按钮时，跳出重命名界面，有遮罩层效果。至部文件至部文件上过四可百司数清共事文件#基文P并家党件#*2P其零又作毕且进计组要证计4*至要接4并家兴件具苹京体#章之件共零文件整日龙)吨5.m1,村阳21:F5交姓大小322.i0i8其本文件#发#考型图到编出4607电盖文件继出老R章2刷薪分零下日真m2285.2.7分享文件界面当用户点击分享按钮时，跳出分享界面，有遮罩层效果。全部交样土值上维下X糖章重生府分生成下软研措，然后要制础摘配成Q群解在如要分读区1量1球族未央1JD9共维交件制共球文件并理左自B并章文件共章文门#*主球从开健理艾件出出良立们放对草主费，林地人排被查卷主林利乐做律只利分邓行古经新到，同的八都商了到#称定件共理也片础#文片共指交作U加种理堂件刀共维文M共排文件1安力解由位等tmp*21.970流师共型文自r年一32.4*S乐并度文产?5.2.8搜索文件界面当用户在输入框里面输入想要搜索的文件的关键字，点击搜索按钮，搜索的结果将在表格中显示出来，支持模糊搜索。全交件上黄鲁上角下套X总分等重命名盛新曹欢户普进□号文件名宜件大文件共型文井属基分享重上期词80蓄水19图时#享立件E2616-12-30230,双K3共事文件2026-12.3042378共事文件B2016-12-3038588图#井事文件12016-12-30□8*喜(51g5269N8图片#事交件B20.6-12-30443.57K3图##享文件b2016-12-10图片#享姓在2016-12309喜8jg35.80*8图片共享文件日2616-1230路喜x9955:.908图时#享立样12016-12-305.2.9图片展示界面当用户点击侧边栏中的“图片”一栏时，可显示图片的tab,页面中，图片按照上传的时间分类(图5.2-10),单击图片即选中，双击图片即预览图片(图5.2-11)。麟图5.2-10图片展示界面而面师m第日钟欢地连入个人师曲燃5.2.10文档展示界面当用户点击侧边栏中的“文档”一栏时，可显示文档的tab,页面中，文档以表格的形式展示，可对文档进行下载、分享、删除、查看操作。图5.2-12为文档的展示界面(由于视频、音乐的展示与此类同，所以在下文中将不再单独对视频和音乐的展示界面截图),图5.2-13为文档的预览界面。图文构2蟹号空档名又自大中基分要文数上#时码昏作算基于mg技础10回是《曲*20t0.=10.02K801h320是式曲均uiE016⑥之之前图5.2-12文档展示界面文档预览x2013年第22卷第22013年第22卷第2期摘要：给用户提供网络存储是许多应用所需要的功能.讨论了利用SpringMVC实现该功能的解决办法.可以让用户在网络空间下自由建立子目录、上传文件，实现目录和文档的在线管理。有效解决了目录名和文件名的汉字编码转换问题，以及当前目录路径标识中斜杠符导致的UR1匹配问题，该应用已用于网络教学系统中学生个人空间和小组空间的信息保存，为小组协作学习提供了基础.Abstract:Networkstorageprovidedforuseristheusefulfunctionformanyapplication.ThepaperdiscussthesolutionsvstemeffertivelvsolvesthenrohlemoftheChinesecharacterscodinpconversionahoutdirectorvnameandfilename图5.2-13文档预览界面5.2.11音乐展示界面当用户点击侧边栏中的“音乐”一栏时，可显示音乐的tab。图5.2-14为音乐的预览界面。监乐播放285.2.12视频展示界面当用户点击侧边栏中的“视频”一栏时，可显示视频的tab。图5.2-15为视频的预览界面。×5.2.13其他文件展示界面当用户点击侧边栏中的“其他”一栏时，可显示其他文件的tab。图5.2-16为其他文件的展示界面(注：其他类型的文件不提供在线预览的功能)。金第定件文约报其出2编码文得名交档表小第升军文费上ffn粉作taitnnansak4m12击付所中图用写基，nht1.Dg112.选啦酒单档华三作障选心迎事件托m5*四体县类4也当用户获取文件的私密链接时，会出现输入提取码提取文件的页面。请输入提取码提取文件!5.2.15用户个人信息展示界面当用户点击查看个人信息时，会跳转到个人信息的展示页。2mE年A00:C2F*CF密码：11281128牌#注册时间：2016-09-1209:39:48存储容量：1CB上次登录时间：2017-04-1819:31:03图5.2-18查看个人信息界面5.3关键代码分析上传文件总共有一下四个需要注意的点：(1)点击“上传”按钮直接调出上传页面，这个调出的过程浏览器直接调出的，但是上传界面体验性不好，所以在本系统中，采取下面巧妙的方法，使得用户点击上传界面的“打开”按钮，就可直接上传文件。<formmethod="post"action="/mydisk/upLoad"enctype="multipart/form-data"><aclass="mini-button"iconCls="icon-upload"plain="true"><inputid="myBtn"type="button"onmousemove="move(event)"value="上传"size="30"<inputtype="file"id="myfile"onchange="this.form.submit()"name="myfile"style="position:absolute;filter:alpha(opacity=0);opacity:0;width:30px;"size="1"/></form>(2)上传文件时，需要获取文件的大小，并且按照B、KB、MB、GB的形式展示，这就需要自己写类的方法实现，所以将计算文件大小的方法封装成两个类，第一个用于将byte转换成B,第二个将字符串类型的B转换成byte。方法一：String[]test={"B","KB","MB","GB","TB"};floatmysize=0;if(size<1024){returnsize+"B";while(size>=1024){mysize=(float)(1.0*size/1024);DecimalFormatdecimalFormat=newDeciStringp=decimalFormStringsubstring1=str.substring(StringstrArr[]={"KB","MB","GB","TBwhile(>=0){elseif(flag==0){substring2=str.substring(str.length()-1);substring1=str.substring(0,str.length()-1);size=Float.parseFloat(substring1);returnsize;return0;(3)将文件保存在服务器上//如果用的是Tomcat服务器，则文件会上传到1%TOMCAT_HOME%\\webappsllYourWebProjectlWEB-INF\lupload\文件夹中//StringrealPath=request.getSession).getServletContext().getRealPath("/WEB-INF/upload");StringrealPath="C/Users/xyy/Desktop/毕业设计/miniui/WebContent/upload";//这里不必处理IO流关闭的问题，因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉。FileUtils.copyInputStreamToFile(myfile.getInputStream(),newFile(realPath,myfile.getOriginalFilename)));(4)将后缀名为.txt.doc.docx的文件转换成.pdf格式的文件。Stringfilename=file.getFilename();Stringname=filename.substring(0,filename.indexOf("."))+".pdf";//如果文件后缀名为doc或者docx,则使用XDoc将docdocx转换成pdf展示if(str.equals(".txt")||str.equals(".doc")|lstr.equals(".docx")){XDocServiceservice=newXDocService)try{e.printStackTrace();}5.3.2下载文件下载文件是使用的IOUtils的copy方法，同时要设置response的ContentType并response.reset();response.setContentType("application/octet-stream;charset=utf-8");StringfileName=newString(file.getName().getBytes("utf-8"),"ISO-8859-1");response.setHeader("Content-Disposition","attachment;filename="+fileName);IOUtils.co