网络相册管理系统毕业设计
摘要
数码产品的普及,传统的相册已经退出了市场,现在人们一般都用数码相机,照片都存在电脑上,电子相册就是把照片通过扫描仪扫描到电脑里,它具有传统相册无法比拟的优越性。
随着互联网的发展,人们已经不满足于只是把照片放在自己的电脑里,他们还希望可以将自己拍摄的数码照片传送到网络中,以供网络中的其他朋友分享浏览,充分展现自己的风采,网络相册服务也因此应运而生并日趋盛行。
本文就是以此为背景,结合实际,从相关技术简介、需求及概要设计、详细设计及实现、实现效果、测试分析等几个方面详细阐述了一个能够对照片进行网络存储、留言回复等交互功能的网络相册管理系统的设计实现。
本网络相册管理系统采用JSP/Servlet等实现技术,以及先进的框架技术配合实现。系统可划分为用户注册/登陆模块、用户信息管理模块、用户相册管理模块、用户相片管理模块、用户留言管理模块个模块。通过对各个功能模块的实现、集成,最终完成的系统实现为用户提供基于网络社区的基本的网络相册服务。
关键词:信息化;相册;网络相册
Abstract
Along with the development of the Internet, people are not content to just put the photos on your computer, they also hope that can be passed to the network and digital photos of themselves to other friends in the network browsing, to fully demonstrate their elegant demeanour, web albums service also arises at the historic moment and an increasingly popular.
This article is based on this background, combined with the actual, from the related technology introduction, demand and general design, detailed design and implementation, the implementation effect, the test and analysis and so on several aspects in detail elaborated the a can carry on the network storage, leave a message back to the photo the design of the interactive functions such as web albums management system implementation.
This web albums management system USES the JSP/Servlet implementation technology, and advanced technology with the framework of implementation. System can be divided into user registration/login module, user information management module, user management module, user photo album management module, user management module message module. Through the implementation of each function module, integration and finishing system implementation to provide basic web albums service based on network.
Keywords: information technology, photo album, web albums
目录
1引言 (1)
2相关技术简介 (2)
2.1 WEB建站思想 (2)
2.1.1 Java WEB应用简介 (2)
2.1.2 Web工程过程 (2)
2.2 WEB系统实现技术 (3)
2.2.1 WEB服务实现技术 (3)
2.2.2数据库技术 (4)
2.2.3系统数据库连接 (4)
2.3 Tomcat的工作模式 (4)
2.4运行环境和开发工具的选择 (5)
2.4.1运行环境 (5)
2.4.2开发工具 (5)
3系统需求及概要设计 (6)
3.1系统需求描述 (6)
3.2主界面设计 (6)
3.3系统模块细分 (7)
3.4关键技术 (8)
3.4.1对相片上传格式的设置 (8)
3.4.2缩略图的生成 (8)
3.4.3图片显示特效 (9)
3.5系统数据库设计 (9)
3.5.1数据库设计 (9)
3.5.2系统表结构 (9)
3.5.3数据库的完整性和安全性 (10)
3.5.4数据库的连接实现 (11)
4系统实现效果 (12)
4.1系统公共模块实现效果 (12)
4.1.1系统首页的整体页面效果 (12)
4.1.2用户成功登录页面 (12)
4.1.3用户注册界面效果 (13)
4.1.4图片留言界面效果 (13)
4.1.5兴趣社区界面效果 (14)
4.1.6个人管理界面效果 (14)
4.2账号管理模块实现效果 (15)
4.3相册及相片模块实现效果 (16)
4.4图片留言管理模块实现效果 (19)
5系统测试报告 (21)
5.1跨浏览器测试结果及分析 (21)
5.2用户相册模块测试结果及分析 (21)
5.3测试结论 (21)
5.4遇到问题及解决 (22)
6结论 (23)
参考文献 (24)
致谢 (25)
1引言
相册在很早以前就有了,但是原来的相册是以纸质照片的形式的存在的,它使用人工方式进行管理,工作量大。而且相册还存在不易保管,不方便携带,容易丢失,翻看不方便,占用空间等等问题。
后来随着时代的发展,科技的进步,摄影技术的发展,旅游业的进步,照片数量急速增加,使用传统的方式来管理照片显然力不从心,而个人电脑的发展,照片数码化,加速了电子相册的产生与进步,电子相册解决了传统相册不易保管,不方便携带,容易丢失,翻看不方便,占用空间等等问题。
而由于网络技术的发展,网络已经渐渐的大众化。在网络冲印也已实现的今天,人们对于电子相册的需求也不再局限于保管相片那么简单。人们更希望把自己的照片同好友分享,希望照片更方便于携带,方便于搜索和查阅。
而近年来,随着各式网络社区的出现,web2.0概念的普及,为了提高网站的知名度,用户的黏度,迫使社区类网站不断改进扩充自己的功能。而出于用户对电子相册分享的需要,使得网络相册能和网络社区极好的结合,也使其成为网络社区中一个不可或缺的组成部分。
随着互联网的普及和发展,越来越多的人选择了网络,利用网络相册来保存自己的照片,这让网络相册行业迅速的红火起来。
可见,网络相册作为一项基础互联网应用,正在随着网络环境的日益成熟以及用户需求的持续增长而得到快速发展。而以交互分享为核心的网络相册2.0理念也成为产品功能改善和用户体验提升的重要标志。而本课题就是在这样的前提下提出的,由于网络相册用户的大量增加,制作一款以web2.0概念为出发点,以良好的用户体验为基础,为用户提供一个以存储、交互为核心,结合了社区模式的平台,而且又兼具一些与众不同的功能的网络相册管理系统,来满足用户的需要,就显得十分必要,也十分具有现实意义和价值了。
2相关技术简介
2.1 WEB建站思想
Java Web 应用有一组静态HTML页、Servlet、JSP和其他相关的class组成。每种组件在Web应用中都有固定的存放目录。Web应用的配置信息存放在web.xml 文件中。在发布某些组件(如Servlet)时,必须在web.xml文件中添加相应的配置信息。
2.1.1 Java WEB应用简介
Tomcat服务器最主要的功能就是充当Java Web应用的容器。在Sun的JavaServlet规范中,对Java Web应用做了这样的定义:―Java Web应用由一组Servlet、HTML页、类,以及其他可以绑定的资源构成。它可以在各种供应商提供的实现Servlet规范的Web应用中运行。‖
Java Web应用的主要特征之一就是它与Context的关系。每个Web应用有惟一的Context。当Java Web应用运行时,Servlet容器为每个Web应用创建惟一的ServletContext对象,它被同一个Web应用中所有的组件共享。
2.1.2 Web工程过程
Web工程过程活动贯穿Web生命周期,从应用概念的生成到开发、发布、不断的精化和升级系统。为了降低开发基于Web的应用系统的复杂性,需要一个描述开发基于Web的应用系统阶段的过程模型。
(1)Web分析
基于Web的应用系统的需求分析是很重要的活动,需要一个系统而严密的方法。根据Web特性和Web应用的特定需求,需要采用更为开放、灵活的需求分析方法。
(2)Web设计
Web设计不但包括功能设计和性能设计,还要包括页面风格设计,包括页面的主色调、页面框架结构、文字颜色搭配、动画和图片的放置等。有效的Web站点设计需要注意可用性,要把基于Web的系统设计成易于导航,吸引人和有用。现在,比较流行的Web设计方法是以用户为中心的设计。
(3)Web开发
Web开发过程包括后台数据库程序的开发、页面程序的编写和所有网页的制作。在设计阶段决定的Web框架基础上,进行具体的页面设计和制作。把内容提供人员的内容连接到具体的页面。
(4)Web测试
基于Web的应用系统的测试不但需要检查和验证是否按照设计的要求运行,而且还要评价系统在不同用户的浏览器的显示是否合适。重要的是,还要从最终用户的角度进行安全性和可用性测试。
2.2 WEB系统实现技术
2.2.1 WEB服务实现技术
目前比较成熟的技术主要有ASP、PHP和JSP。现对它们做一些说明:
PHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C,Java和Perl语言的语法,并耦合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。它支持目前绝大多数数据库。
JSP是Sun公司推出的新一代网站开发语言JSP可以在Servlet和JavaBean的支持下,完成功能强大的站点程序。
JSP技术特点:
1.简化的页面生成技术。
JSP页面用标准的HTML或XML命令来处理页面的格式化和布局设计,而用类似HTML、XML的标记和Java语言编写的脚本程序生成页面内容。这使得页面形式与页面内容互相独立,非常有利于大型项目的分工合作。
2.与Java平台有机集成。
JSP技术是Java 2平台的重要组成部分,JSP使用Java语言作为它的脚本语言。在JSP页面中可以使用几乎所有的Java组件和Java API,这就能充分发挥出Java语言的强大功能。使用JSP技术可以创建具有高度可伸缩性和可靠性的Web应用程序。
3.硬件平台和服务器无关性。
JSP作为Java家族的一员,秉承了Java技术的―一次编写,随处可用(Write Once,Rum Anywhere)‖的特性,可以运行于大多数流行的操作系统平台及Web 服务器,这种与服务器硬件和操作系统平台的无关性是JSP相对于其它动态网页技术最大的一个优点。
4.功能可扩展性。
如同Microsoft的JSP技术可以通过ActiveX/COM组件来扩展功能一样,JSP 可以通过JavaBean和EJB(Enterprise JavaBean)以及自定义的标记来扩展功能。
JSP可以通过JDBC,与诸如Oracle、SQL Server这样的大型关系数据库进行连接。
JSP提供了一些隐含对象。这些隐含对象在JSP页面中可以直接引用,而不必首先声明。利用JSP提供的这些隐含对象,可以使脚本功能更加强大,并且编程更加容易、方便。例如,利用request对象,可以很容易地接收用户在HTML表单中提交的信息。
2.2.2数据库技术
MySQL(通常被读作My-sequel)是一个开放源码的关联式数据库管理系统。MySQL被广泛地应用在Internet上的中小型网站中。
由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。MySQL 所使用的SQL语言是用于访问数据库的最常用标准化语言。
2.2.3系统数据库连接
JDBC技术是Java DataBase Connectivity的缩写,它是SUN公司提供的一种支持基本SQL功能的通用的应用程序接口(Application Programming Interface)。它由一组用Java语言编写的类和接口组成。通过这些类和接口,程序开发人员可以在Java语言中方便地建立与数据库的链接,通过执行相应SQL语句,完成对不同数据库的访问。因此,开发人员使用JDBC API可以不必编写一个应用程序来访问Sybase数据库,又另外编写一个应用程序去访问Oracle数据库,再写一个应用程序访问Microsoft的SQL Server。不但如此,使用Java语言编写的应用程序可以在任何支持Java的平台上运行,不必在不同的平台上开发不同的应用程序。
简单地说,JDBC能完成下列三件事:
1.同一个数据库建立连接;
2.向数据库建立连接;
3.处理数据库返回的结果。
2.3 Tomcat的工作模式
Tomcat作为Servlet容器,有以下几种工作模式。
(1)独立的Servlet容器
在这种模式下,Tomcat可以作为独立的Java Web服务器,Servlet容器作为构成Web服务器的一部分而存在。独立的Servlet容器是Tomcat的默认模式。
(2)进程内的Servlet容器
Servlet容器分为Web服务器插件和Java容器两部分。Web服务器插件在其他Web服务器内部地址空间打开一个Java虚拟机(JVM ,Java Virtual Machine),Java 容器在此JVM中运行Servlet。如有客户端发出调用Servlet的请求,插件获得对此请求的控制并将它传递(使用JNI通信机制)给Java容器。进程内Servlet容器对于单进程、多线程的服务器非常适合,可以提供较高的运行速度,但缺乏伸缩性。
(3)进程外的Servlet容器
Servlet容器分为Web服务器插件和Java容器两部分。Web服务器插件在其他Web服务器的外部地址空间打开一个JVM,Java容器在此JVM中运行Servlet,如有客户端发出调用Servlet的请求,插件获得对此请求的控制并将它传递(采用IPC
通信机制)给Java容器。进程外Servlet容器对客户请求的响应速度不如进程内容器,但进程外容器具有更好的伸缩性和稳定性。
2.4运行环境和开发工具的选择
2.4.1运行环境
所必须具备的开发环境:
(1) JDK 1.6.0
(2) Mysql
(3) 操作系统为Window7
(4) MyEclipse
(5) Dreamweaver
(6) apache-tomcat-6.0.18
2.4.2开发工具
Dreamweaver是建立Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合为一个功能强大的工具,使每个级别的开发人员和设计人员都可利用它快速创建界面吸引人并且基于标准的站点和应用程序。
3系统需求及概要设计
本章主要根据需求分析的结果对系统的总体功能进行设计,对模块进行划分,并对各个模块以及他们之间的关系进行概述,为了更好地提升系统性能,进行了架构方案的设计。最后设计了能够完成系统所有功能所需的数据库。
3.1系统需求描述
这个交互平台以网络相册为主体,通过用户上传相册产生主体数据;而通过好友、评论等功能实现用户之间的交互,从而在用户间形成社会网络,通过社会网络加强系统用户交互,提高系统用户黏度。
系统需要向用户提供简单,方便的操作界面,提高用户的可操作性,降低用户的使用难度;系统还需要向用户提供良好的界面表现效果,以提高用户体验,提高系统的用户黏度。
在现在多种浏览器并行的今天,跨浏览器也是系统需求中必不可少的一条。如果无法解决这点,将大大影响用户体验。
3.2主界面设计
访问网络相册程序时首先进入网络相册的主界面,如图3-1所示。在该页面中共包括功能导航区域、图片展示区域、用户操作区域及版权信息区域4个部分。其中,功能导航区域、用户操作区域及版权信息区域是固定的内容,用来进行其他操作,而图片展示区域是按类别显示图片信息。
在图片展示区域按照数据库中类别个数显示,每种类型图片最多显示五张(即一行的容量),其中类别,相册,图片相关参照数据库操作。
当运行程序时,首先执行index.jsp页面,在该页面中访问Servlet实现类,通过该实现类转发到另一个页面。
功能导航区域
用
户
图片展示区域操
作
区
域
版权信息区域
图3-1主页面设计
3.3系统模块细分
根据系统需求,最终把该系统划分成用户注册/登录模块,用户信息管理模块,用户相册管理模块,用户图片管理模块,用户留言管理模块,并各自向用户提供简单有效的功能及服务。
系统整体的功能结构(如图3-2):
图3-2系统功能结构
该系统的五大模块细分为十个部分,分别如下:
(1) 用户注册
用户注册了相关信息才能用此相册系统。 (2) 用户登录
用户登录时需要输入用户账号和密码。若用户登录成功,则用户可以进入相册系统;若用户登录失败,则需重新登录。
(3) 分栏显示相册
分栏显示相片类别操作时用户登录后才能进行的操作,通过数据库连接在页面上分别显示不同类别的图片。
(4) 上传相片 用户在相片上传表单中输入完整的信息后,单击―上传‖按钮即可。 (5) 将图片设置为相册封面
用户点击―设为封面‖,后台程序连接数据库,更改相册的封面信息,实现改变封面的功能。
(6) 相片删除
用户登录成功后,可以将当前的图片删除,单击―删除此相片‖即可删除当前相片。
(7) 相片留言
网络相册管理系统
用
户注册/登录模块
用户信息管理模块 用户相册管理模块 用户相片管理模块 用户留言管理模块
用户登录成功后,可单击当前图片,进入留言界面,也即对图片进行评论。
(8) 留言管理
用户登录成功后,可以对属于自己的图片进行管理,可删除留言,回复留言。
(9) 删除操作
用户登录成功后,可以对自身信息进行管理,再删除相册时,属于本相册的图片信息也要删除;同理,删除图片时,对图片的留言和回复信息业一并删除。
(10) 个人信息管理
用户登录成功后,可以查看个人信息,修改密码,上传头像。
3.4关键技术
3.4.1对相片上传格式的设置
在计算机文件中,相片的格式多种多样,通常情况下相片可以是―JPG‖、―jpg‖、―gif‖、―bmp‖、―BMP‖等格式。因此,用户需要保证上传的图片就是相片所需的图片格式,可以通过Java源代码解决这一问题,具体如下:
(1)将系统中所允许上传的相片格式存储在String类型的数据中,并设置这个数组的对象,该对象的名称为type。
(2)设置相片的固定格式存储在String类型的fileType对象,调用java.util.Arrays类中的binarySearch()方法,该方法的参数分别为type和fileType,主要查询fileType对象内容在type数组对象中的位置并将返回结果赋予int类型变量,该变量的名称为place。
(3)判断place变量值,如果该变量值为正数,则说明fileType在type数组对象中存在,其中正数为具体位置;如果该变量值为负数,则说明fileType在type数组对象中不存在,其负数值为-1。
(4)在本系统中也可以上传其他类型的文件,只是在上传的时候自己控制文件类型。
3.4.2缩略图的生成
(1)在相册管理模块中,相片资料的上传是必不可少的功能,但随着高分辨率相片的普及,上传图片的容量会很大,例如300万像素的相片文件大小基本上是大于600KB。在很多图片的网页中,图片容量越大打开网页的速度越慢。为了解决这个问题,用户上传图片时可以在类中处理一张大相片并缩小它。
(2)在本系统中上传图片时只是设置了上传的文件的最大值,并未实现缩略图效果,在网页上显示时设置了图片的格式,比如宽和高各为多少像素,这样控制图片的大小。这样操作有一个问题,在图片自身比设定的小时,显示的图片不清楚。
3.4.3图片显示特效
在相册管理模块中,图片的显示特效主要的无间断图片滚动效果和幻灯片浏览图片。
3.5系统数据库设计
3.5.1数据库设计
本系统数据库采用Mysql,数据库名称为xiangce,该数据库中一共有五个数据表,分别是:user(用户表),photos(相册表),photo(图片表),message(留言表),xingqu(相册分类表)。
3.5.2系统表结构
这个章节列举了系统的表结构(如表3-1至表3-10)。
表3-1 用户表(user)
字段名数据类型描述
id V ARCAHR(30) 用户ID
name V ARCAHR(30) 用户名
sex V ARCAHR(10) 性别
pass V ARCAHR(30) 密码
touxiang V ARCAHR(300) 用户头像名称
表3-2 相册表(photos)
字段名数据类型描述name V ARCAHR(30) 相册名
fenlei V ARCAHR(30) 相册所属分类
user_id V ARCAHR(30) 相册所属用户
cover V ARCAHR(300) 相册封面图片名称
表3-3 图片表(photo)
字段名数据类型描述name V ARCAHR(300) 图片名称
photos_name V ARCAHR(30) 图片所属相册
表3-4 留言表(message)
字段名数据类型描述id INT(100) 留言编号
photo_name V ARCAHR(300) 图片名称
user_id V ARCAHR(30) 留言者ID
note V ARCAHR(300) 留言信息
reply V ARCAHR(300) 回复信息
表3-5 相册分类表(xingqu)
字段名数据类型描述fenlei V ARCAHR(30) 相册分类名
3.5.3数据库的完整性和安全性
1.完整性:主要是指数据的正确性和相容性,防止数据库中存在不符合语义的数据,防止错误信息的输入和输出,即所谓垃圾进垃圾出所造成的无效操作和出错处理。在这一部分我主要是在信息提交时用脚本控制,并在写入数据库时再次进行检查。
后台JA V A文件控制写入数据库:
if("".equals(name)||"".equals(fenlei))
{
System.out.println("请输入完整信息!");
resp.sendRedirect("daohang/replyself/xiangceguanli/new_photos.jsp?flag=info");
}else{
if(rs.next()){
System.out.println(name+"已存在,请换一个用户名!");
resp.sendRedirect("daohang/replyself/xiangceguanli/new_photos.jsp?flag=wrong ");
}
}
2.安全性:主是保护数据库防止恶意的破坏和非法的存取,也就是说安全性措施的防范对象是非法用户和非法操作。
前台页面提示用户未登录信息:
<%//查询当前登录用户信息
try
{
String user_id=(String)session.getAttribute("user_id");
if(user_id==null){
%>
您还未登录,不能留言!
<%
}
%>
3.5.4数据库的连接实现
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@page import="java.sql.*" %>
<%//连接数据库操作
request.setCharacterEncoding("utf-8");
String name = request.getParameter("user");
String pass = request.getParameter("pass");
String url ="jdbc:mysql://127.0.0.1:3306/xiangce";
String dbUser = "root";
String dbPass = "";
Connection conn = null;
try
{
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e)
{ out.println("---驱动加载失败----");
}
try
{
conn =DriverManager.getConnection(url,dbUser,dbPass);
} catch (SQLException e)
{ out.println("---数据库连接失败----");
}
%>