电子相册管理系统.doc

1、黄河水利职业技术学院摘 要随着高清晰成像手机，数码相机和数码摄像机的普及，照片再也不是原来意义上的相片了。原来的相片是可以存放在相册之中的，现在的电子照片如何管理呢？目前国内很多网站都提供了个人电子相册功能，用户可以把照片放在电子相册中，一是有利于保管照片，而是可以朋友共同分享这些照片并为网站聚集较高的人气。本系统将从系统概述、需求分析、数据库结构设计、系统设计和功能实现等方面讲述如何实现电子相册管理系统的开发。关键词：Jsp、Servlet、MySQL、过滤器、监听器AbstractWith the popularization of high definition imaging mobi

2、le phone, digital camera and digital camera, photo is not the original meaning of the photo. The original photo can be stored in the photo album of photos, how to manage it? At present many domestic web site provides personal electronic album function, the user can put the photos in the album, one i

3、s beneficial to keep the photos, but you can share these photos and Yu for the site gathered high popularity. The system will be from the system, needs analysis, database structure design, system design and functions about development and how to realize the electronic photo album management system.K

4、eywords: Jsp, Servlet, MySQL, filter, listener25目录第1章 概述11.1 需求分析11.2 功能分析11.2.1 前台相册模块11.2.2 管理相册模块1第2章 开发环境32.1 硬件配置32.2 软件开发环境32.2.1 操作系统32.2.2 网站服务器42.2.3 编程语言42.2.4 数据库42.2.5 开发工具5第3章 总体设计63.1 系统功能63.1.1 系统的架构设计63.1.2 业务实体设计63.1.3 业务逻辑设计73.2 数据库设计73.2.1 E-R图73.2.2 数据库结构设计7第4章 详细设计94.1 系统目录结构94.

5、2 数据库连接94.2.1 编写与数据库连接的方法94.2.2 编写释放数据库的方法104.3 模块设计114.3.1 首页布局114.3.2 上传图片的操作13第5章 测试与发布185.1 网站测试18第6章 总结23参考文献24致 谢25第1章 概述1.1 需求分析电子相册在网民中的使用率越来越高。电子相册的市场需求缺口大，如今DV族越来越多，游山玩水、亲朋聚会，都免不了要大“拍”一番；但拍完了照片存在哪里好呢？放在硬盘上占用空间，刻光盘又麻烦，随着互联网的普及和发展，越来越多的人选择了网络，利用电子相册来保存自己的照片，这让电子相册行业迅速的红火起来。1.2 功能分析相册管理系统的目的比

6、较明确，就是提供图片的增加、删除、修改和显示功能。电子相册用户至少需要面对两类用户普通用户和管理者。在相册管理系统中，对普通用户提供的服务有上传相片和查看相片等功能。对管理者提供的服务有相片的管理功能。1.2.1 前台相册模块前台相册木块主要针对普通用户，按功能分为以下模块。l 上传相片：普通用户可以在相册管理系统中上传图片，如果图片的格式不符合要求，系统将给出提示。l 查看相片：可以查看相片信息。l 发表评论：可以对相片发表评论。1.2.2 管理相册模块管理相册模块提供的功能包括查看图片、添加图片、修改图片信息、添加评论、修改评论、添加相册分类、修改相册分类、修改相册、管理系统信息等，具体模

7、块如下。l 登录系统：需要输入管理员的账号和口令，系统将验证账号和口令是否正确，如果验证成果，则进入管理员节目；否则，系统提示账号和密码错误的信息。l 管理相册：可以查看所有的相片，可以添加相片、修改相片、删除相片。l 管理评论：可以管理相册的评论。l 管理分类：可以管理相册的分类。l 系统设置：可以设置系统信息。根据以上描述，系统的主要角色包括普通用户与管理员，如下图所示。 图1-1 系统用例图第2章 开发环境2.1 硬件配置电脑的硬件配置如下：图2-1 电脑硬件配置图2.2 软件开发环境2.2.1 操作系统Windows XP简介Windows XP（版本号：5.1，开发代号：Whistl

8、er）是微软公司推出供个人电脑使用的操作系统，包括商用及家用的台式电脑、笔记本电脑、媒体中心和平板电脑等。其RTM版于2001年8月24日发布；零售版于2001年10月25日上市。其名字“XP”的意思是英文中的“体验”，是继Windows 2000及Windows Me之后的下一代Windows操作系统，也是微软首个面向消费者且使用Windows NT架构的操作系统。2011年9月底前，Windows XP是世界上使用人数最多的操作系统，全球市场占有率达42%。在2007年1月，Windows XP的全球市场占有率达历史最高水平，超过76%。2012年8月份，统治操作系统市场长达11年之久的W

9、indows XP最终被Windows 7超越。2.2.2 网站服务器Tomcat简介Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。由于有了Sun 的参与和支持，最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现，Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。目

10、前最新版本是8.0。2.2.3 编程语言J S P是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态技术标准。在传统的网页HTML文件（*.htm，*.html）中加入Java程序片段（Scriptlet）和JSP标签，就构成了JSP网页java程序片段可以操纵数据库、重新定向网页以及发送E-mail等，实现建立动态网站所需要的功能。所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，这样大 大降低了对客户浏览器的要求，即使客户浏览器端不支持Java，也可以访问JSP网页。2.2.4 数据库Mysql简介MySQL是一个关系型数据库管理系统，由瑞典MySQ

11、L AB公司开发，目前属于Oracle公司。Mysql是最流行的关系型数据库管理系统。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。MySQL软件采用了双授权政策，它分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL作为网站数据库。由于其社区版的性能卓越，搭配PHP和Apache可组成良好的开发环境。2.2.5 开发工具MyEclipse简介MyEclipse 是一个十分优秀

12、的用于开发Java, J2EE的 Eclipse 插件集合，MyEclipse的功能非常强大，支持也十分广泛，尤其是对各种开源产品的支持十分不错。MyEclipse目前支持Java Servlet,AJAX, JSP, JSF, Struts,Spring, Hibernate,EJB3,JDBC数据库链接工具等多项功能。可以说MyEclipse是几乎囊括了目前所有主流开源产品的专属eclipse开发工具。第3章 总体设计3.1 系统功能3.1.1 系统的架构设计本程序功能比较简单。在客户端：显示页面需要从数据库取出所有数据并列在页面上，供使用者浏览，当用户访问时，单机相应的缩略图或图片名称，

13、会显示对应的大图、图片的信息和所有的评论，同时还对该图片进行评论。后台管理端必须在管理员登陆以后才能对本系统的相关数据进行修改。编写本系统时，力求做到简单明了，严格遵循三层架构，以使广大读者能够迅速把握相册管理系统这一类型解决方案的核心思想。表现层采用了JSP，中间层采用了Servlet，数据库采用了MySQL。3.1.2 业务实体设计系统的业务实体在内存中表现为实体域对象，在数据库中表现为关系数据，实现业务实体包括以下内容：设计域模型，创建域模型实体对象。留言管理系统中的业务实体比较简单：管理员、相片、系统、类别、评论。他们之间的关系如下所示：图3-1 业务实体的关系图类别和相片：一个类别可

14、以有一张或多张相片，一张相片对应且只对应一个类别，它们之间的关系是一对多关系。相片和评论：一个类别可以有一条或多条评论，一条评论对应且只对应一张照片，它们之间的关系是一对多关系。3.1.3 业务逻辑设计在这个实例中，采用了DAO设计模式实现数据层的访问，DAO模式是J2EE核心模式中的一种，其主要目的就是在业务核心方法和具体数据源之间再增加一层，用这一层来连接业务方法和数据源，这样就实现了两者的解耦，如下图所示。数据源是多样化的，可能是XML或关系数据库。关系数据库有不同的产品，如MySQL或Oracle。通过使用DAO模式，业务核心部分就不用关心数据层是如何实现数据库操作的，只关心自己的业务

15、操作即可。数据库的操作全部交由DAO处理。图3-2 dao设计模式图3-3 系统的E-R图3.2 数据库设计3.2.1 E-R图系统的实体关系（E-R）的设计是建立在需求分析、系统分析基础之上的。在本章中，实体的设计比较简单，包括用户实体（Admin）和留言实体（Message）。系统的E-R图如下所示。其中相片（Photo）与评论（Pinglun）实一对多的关系。类别（LeiBie）与相片（Photo）是一对多的关系。3.2.2 数据库结构设计在系统中包括相片表photo，管理员表admin，类别表leibie，系统表systems，评论表pinglun，下面介绍它们的表结构。1管理员表ad

16、min表admin用来保存管理员的信息，如图3-4所示。图3-4 管理员表2类别表leibie表leibie用来保存类别信息，如图3-5所示。图3-5 类别表3相片表photo表photo用来保存相片信息，如图3-6所示。图3-6 相片表4评论表pinglun表pinglun用来保存评论信息，如图3-7所示。图3-7 评论表5系统表systems表systems用来保存相册系统的设置信息，如图3-8所示图3-8 系统表第4章 详细设计4.1 系统目录结构系统的目录结构如下：每个包存放着相应的内容，如“admin”包存放的是管理员进行操作时运行的页面；“uploadimg”用于存放上传的图片等。

17、 图4-1 系统目录结构图4.2 数据库连接4.2.1 编写与数据库连接的方法编写与数据库的连接需要以下步骤。1.在项目的src目录中创建一个jdbc.properties文件，里面存放与数据库交互所需要的相关信息，用户以后需要修改用户名或密码时，直接在此文件进行修改即可。这样简化了更替数据库连接所做的修改，体现了系统的优越性，方便了读者应用。Jdbc.properties的内容如下所示：图4-2 Driver指定了连接数据库的驱动成像名称，url指定了数据库所在的详细路径，并且指定了连接数据库所采用的字符集为utf-8。2.在项目中创建名为ConnectionFactory的类，它将提供获取

18、数据库连接的方法。新建ConnectionFactory类，提供一些属性和与属性相关的set/get方法，然后编写ConnectionFactory()的构造方法，为属性赋值，再编写getConnection()方法，获取与数据库的连接。图4-34.2.2 编写释放数据库的方法编写释放数据库的连接需要一些步骤。新建名为DatabaseUtils的类。并提供关闭结果集、关闭语句块、关闭连接的方法。图4-44.3 模块设计4.3.1 首页布局首页居中显示图片，每行显示4张图片，共3行，显示的图片如图4-5所示。 图4-5 首页面的布局此部分的代码清单如下： /如果是每一行的第4张图片，则需要加上换

19、行符 $photo.name  |  点击：$photo.dianjic:out value= escapeXml=false /换行符的写法c:out value= escapeXml=false /如果不是每行的第4行照片不用换行 $photo.name  |  点击：$photo.dianji当用户访问应用程序是，index.jsp并没有处理数据的能力，而是将请求交由servlet处理。Index.jsp中的代码如下：4.3.2 上传图片的操作在电子相册管理系统中，“上传图片”是重要的功能模块之一，并且上传图

20、片成功后还需要根据上传的图片产生一个缩略图。如同4-6所示为本例上传图片的界面。图4-6 上传图片页面的界面页面的实现代码如下：上传图片function doup()/提交表单的请求form1.action=upimg.jsp;form1.submit();window.opener.document.getElementById(path).value=form1.file1.value; /在这里表单要特别的注意，action不在此处，而且多了个enctype属性，前者是为了需求。/后者是文件上传的必有属性请选择要上传的照片地址:  这里采用了JavaScri

21、pt脚本来提交表单数据。在这里表单中用的了enctype=multipart/form-data属性，这是文件上传的必有属性，不能忽略。Upimg.jsp用了出来需要上传的页面，这里采用了Smartupload组件来完成上传的任务，upimg.jsp代码的清单如下：function uppic()window.opener.document.getElementById(filepath).value=document.getElementById(newpath).value;window.close();function closewindow()window.opener.documen

22、t.getElementById(filepath).value=document.getElementById(newpath).value;/关闭窗口时,把上传后的图片名称放到父窗口的图片路径中%SmartUpload mySmartUpload = new SmartUpload();long file_size_max = 4000000;String ext = ;String url = uploadimg/; /应保证在根目录中有此目录的存在/初始化mySmartUpload.initialize(pageContext);/只允许上载此类文件try mySmartUpload.

23、setAllowedFilesList(jpg,gif);/上载文件 mySmartUpload.upload();out.println(上传成功!);out.println(); catch (Exception e) %alert(只允许上传.jpg和.gif类型图片文件);window.location=upload.jsp;alert(请先选择要上传的文件);window.location=upload.jsp;% else /String myFileName=myFile.getFileName(); /取得上载的文件的文件名ext = myFile.getFileExt();

24、/取得后缀名int file_size = myFile.getSize(); /取得文件的大小 String saveurl = ;if (file_size file_size_max) /更改文件名，取得当前上传时间的毫秒数值Calendar calendar = Calendar.getInstance();String filename = String.valueOf(calendar.getTimeInMillis();saveurl = request.getRealPath(/) + url;saveurl += filename + . + ext; /保存路径myFile

25、.saveAs(saveurl, mySmartUpload.SAVE_PHYSICAL);/-上传完成，开始生成缩略图- java.io.File file = new java.io.File(saveurl); /读入刚才上传的文件String newurl = request.getRealPath(/) + url+ filename + _min. + ext; /新的缩略图保存地址String newpath = filename + _min. + ext;/获得生成后的小图的名称/out.println(newpath);out.print();/输出缩略图的名字Image

26、src = javax.imageio.ImageIO.read(file); /构造Image对象float tagsize = 200;int old_w = src.getWidth(null); /得到源图宽int old_h = src.getHeight(null);int new_w = 0;int new_h = 0; /得到源图长int tempsize;float tempdouble;if (old_w old_h) tempdouble = old_w / tagsize; else tempdouble = old_h / tagsize;new_w = Math.r

27、ound(old_w / tempdouble);new_h = Math.round(old_h / tempdouble);/计算新图长宽BufferedImage tag = new BufferedImage(new_w, new_h,BufferedImage.TYPE_INT_RGB);tag.getGraphics().drawImage(src, 0, 0, new_w, new_h,null); /绘制缩小后的图FileOutputStream newimage = new FileOutputStream(newurl); /输出到文件流JPEGImageEncoder e

28、ncoder = JPEGCodec.createJPEGEncoder(newimage);encoder.encode(tag); /近JPEG编码newimage.close(); else out.print();out.print(alert(上传文件大小不能超过 + (file_size_max / 1000)+ K););out.print(window.location=upload.jsp;);out.print(); catch (Exception e) e.toString();%第5章 测试与发布5.1 网站测试运行程序的步骤如下。1建立连接图5-1 建立连接图2部署

29、程序图5-2 部署程序图3成果预览启动Tomcat，在浏览器的地址栏输入“忽略此处:/localhost:8080/E_photo”来访问本系统。访问效果如下所示。(1)首页的预览效果如图5-3所示。图5-3 首页预览(2)点击一张图片，进入该图片的详细描述。普通用户可以在此进行留言，发表自己对图片的看法。图5-4 详细页预览(3)点击管理，进入系统的管理登陆页面。用户输入正确的用户名和密码以及验证码就可以登陆。图5-5 登录页面(4)登陆成功后，进入管理页面。点击相应的文字，进行相关的操作。管理员可以对网站内容进行管理，如添加文件，管理文件，修改登录密码等；也可以对网站本身进行设置，更改为相

30、应的信息。图5-6 管理首页 (5)点击“管理文件”，进入文件管理页面，可以进行文件的删除。图5-7 管理文件页面(6)点击“添加文件”，可以把自己喜欢的图片进行上传。图5-8 添加文件页面(7)点击“系统设置”，根据需要更改网站的基本信息。如同5-9所示。图5-9 系统设置页面(8)点击“修改密码”，根据需要修改管理员的密码。如同5-10所示。图5-10 修改密码页面第6章 总结经过一段时间的努力，我终于完成了电子相册系统，基本实现了题目的基本要求。但是由于经验不足，还有一些功能没有完善，比如跳转页面的实现功能这算是一个缺陷与遗憾。不过我一定会努力学习，尽早实现该模块功能。总的来说，在做这个

31、毕业设计的过程中，我查阅了大量关于网上电子相册的相关资料，切实地按照软件工程的步骤，从需求分析，概要设计，详细设计，数据库设计，再到编码，调试运行，测试等步骤。从中我学到了很多东西，对我来说，无论是理论还是实践上都是一个较大幅度的提高，可以说是理论到实践的一个飞跃。我还了解了软件开发的大体过程，在当今竞争激烈的社会中只有学到本领才能有立足之地，通过这次综合实验也使我知道作软件开发的辛苦，首先要有足够的耐心，要勇于面对密密麻麻的代码，无数遍的调试，和无数遍的修改，但是，当你调试成功时，你就会感到这些努力的意义，成功的喜悦。软件开发，还要注意借鉴，查看已有的例子的代码，这样可以节省大量的时间，同时

32、也实现了代码重用。此外，我知道了基础课的重要，要学好一门编程语言，一定要动手，实践是最好的方法。总的来说，对我个人而言，这次毕业设计的确提高了我自己的动手能力，让我认识到了自己的不足，同时多亏了在开发网站的过程中老师的指导以及同学们给予的帮助，使我顺利地完成了毕业设计，在此我对你们表示衷心的感谢！参考文献JSP开发与应用数据库技术mysql从基础到实践忽略此处:/忽略致 谢从接受课题到现在完成毕业设计论文，老师给予了我精心的指导和热情的帮助，尤其在课题设计的前期准备阶段和本人的数据库的设计阶段，导师提出许多宝贵的设计意见，诲人不倦的敬业精神以及宽容的待人风范使我获益颇多。在此论文完成之际，谨向老师表示衷心的感谢和崇高的敬意！另外，感谢同学在这次毕业设计中的大力支持和耐心帮助，正是由于他们的帮助，才使我较快的学会了如何运用JSP技术，从而顺利的完成了此次系统的设计和论文的编写。最后，感谢我的母校，是她提供了良好的学习环境和生活环境，让我的大学生活丰富多姿，为我的人生留下精彩的一笔。