网络相册系统的设计与实现教学提纲.doc

精品文档

网络相册管理系统的设计与实践
班级：10211118
学号：1021111823
姓名：谌文龙
教师：杨勇

网络相册系统的设计与实现
1 引言
1.1 选题背景
随着时代的进步，社会生产力高速发展，新技术层出不穷信息量急剧膨胀，整个社会已成为信息化的社会人们对信息和数据的利用和处理已经进入自动化、网络化和社会化的阶段。如在查找情报资料、处理银行账目、仓库管理、科研生产等方面，无不需要利用大量的信息资源。因此，如何有效地进行数据信息的管理和利用，已经成为人们普遍关注的课题。
随着数码产品的普及，传统的相册已经退出了市场，现在人们一般都用数码相机，照片都存在电脑上，电子相册就是把照片通过扫描仪扫描到电脑里，它具有传统相册无法比拟的优越性：图形、文字、声音、图文并茂的表现手法，随意修改编辑的功能，快速的检索方式，永不褪色的恒久保存特性，以及廉价复制分发的手段。网络相册是电子相册的一种表现形式，它是网站为用户提供的个人相片展示及存放平台。一般的网络相册可以选择“公开”或“私人”的属性，如果相册是设为公开属性，那么其他用户可以查看和分享。
因此，为一些中小型网站设计动人的网络相册系统从而给广大用户提供更多的资源，给自己设计一个自己喜欢的网络相册，满足自己的个性需求。
1.2 目的和意义
网络相册系统是网站为用户提供的个人相片展示和存放平台，浏览查看他人相册并给予支持。随着互联网的普及和发展，越来越多的人选择了网络，利用网络相册来保存自己的照片，这让网络相册行业迅速的红火起来。
1.3 网络相册系统的研究意义
Java语言是定位于网络应用的程序设计语言。Java 是一种简单的、面向对象的、强壮的、安全的、可移植的、高性能的、体系结构中立的、解释型的、多线索的、动态的语言。一个Java类文件中，所有对方法及实例变量的参照均按名进行，并在第一次执行代码时加以分辨。这使得代码更通用，更不易受修改的影响，而仍具高效。
网络相册是网站为用户提供的个人相片展示、存放的平台。在网络相册系统中，用户可以上传图片，建立分类相册，设定相册隐私权限，也可以观看、评论其他人的相册与照片，有些相册也支持照片外链，方便用户在其他网站、社区、讨论区分享他们的照片。
1.4 网络相册的发展现状
网络相册服务也是种很重要的在线存储服务，存储的数据是单一的图象数据。因此，好的存储服务质量依然也是做好在线存储服务的关键，提高存储服务质量是需要有较高的资本投入的，国外的网上服务，多数是付费的，他们依靠忠实的用户和广告商一起来支持网站的运营，尤其对于用户而言，付多少费用直接和享受的服务成正比。
2 方案论证
2.1 WEB建站思想
Java Web 应用有一组静态HTML页、Servlet、JSP和其他相关的class组成。每种组件在Web应用中都有固定的存放目录。Web应用的配置信息存放在web.xml文件中。在发布某些组件（如Servlet）时，必须在web.xml文件中添加相应的配置信息。
2.1.1 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的应用系统阶段的过程模型[4]。
(1) Web分析
基于Web的应用系统的需求分析是很重要的活动，需要一个系统而严密的方法。根据Web特性和Web应用的特定需求，需要采用更为开放、灵活的需求分析方法。
(2) Web设计
Web设计不但包括功能设计和性能设计,还要包括页面风格设计，包括页面的主色调、页面框架结构、文字颜色搭配、动画和图片的放置等。有效的Web站点设计需要注意可用性，要把基于Web的系统设计成易于导航，吸引人和有用。现在，比较流行的Web设计方法是以用户为中心的设计。
(3) Web开发
Web开发过程包括后台数据库程序的开发、页面程序的编写和所有网页的制作。在设计阶段决定的Web框架基础上，进行具体的页面设计和制作。把内容提供人员的内容连接到具体的页面。
(4) Web测试
基于Web的应用系统的测试不但需要检查和验证是否按照设计的要求运行，而且还要评价系统在不同用户的浏览器的显示是否合适。重要的是，还要从最终用户的角度进行安全性和可用性测试。
(5) Web发布
Web发布阶段主要是把开发完成，经过初步测试的Web应用系统传送到Web站点上，供用户浏览和使用。
2.2 WEB系统实现技术
2.2.1 WEB服务实现技术
目前比较成熟的技术主要有ASP、PHP和JSP。现对它们做一些说明[5]：
PHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C，Java和Perl语言的语法，并耦合PHP自己的特性，使WEB开发者能够快速地写出动态产生页面。它支持目前绝大多数数据库。
JSP是Sun公司推出的新一代网站开发语言JSP可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。
JSP技术特点：
JSP是Java ServerPagedd的缩写，它是Servlet的扩展，其目的是简化建立和管理动态网站的工作。在传统的网页HTML文件（*.htm,*.html）中加入Java程序片段（Scriptlet）和JSP标签，就构成了JSP网页。Java程序片段可以操纵数据库，重新定向网页以及发送E-mail等，实现建立动态网站所需的功能。所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，这样大大降低了多客户浏览的要求，即使客户浏览不支持Java，也可以访问JSP网页。
在JSP的众多优点之中，其中之一的是它能把HTML编码和业务逻辑有效地分离。通常，JSP负责生成动态HTML页面，业务逻辑由其它可重用的组件（如Servlet、JavaBean）和其他Java程序来实现，JSP可以通过Java程序片段访问这些组件。

2.2.2 数据库技术
SQL Server具有单进程愈多线索的体系结构，及SQL Server只有一个服务器进程，所有的客户都连接在这个进程上[13]。但是，该进程又细分为多个并发的线索，他们共享数据缓冲区和CPU时间，能及时捕捉各用户进程发出的存取数据的请求，然后，按一定的调度算法处理这些请求，比操作系统直接对这些请求进行调度高效的多。
SQL Server的事务处理量大，响应速度快，并能为数百或更多用户维持这种高性能。
SQL Server在核心层实现了数据完整性控制，包括建表时申明完整性和用触发器机制定义与应用有关的完整性。支持分布式查询与更新。
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 运行环境和开发工具的选择
Java应用程序(Applications) 能在网路上开启及连结使用物件，就如同透过URLs连结使用一个本地文件系统(Local File System)。 健壮的(Robust)：由Java所编写出的程序能在多种情况下执行而具有其稳定性。Java与 C/C++最大不同点是Java有一个指针模型(Pointer Model)来排除内存被覆盖(Overwriting Memory)和毁损数据(Corrupting Data)的可能性。
　　安全的(Secure)：Java是被设计用于网络及分布式的环境中，安全性自必是一个很 重要的考虑。Java拥有数个阶层的互锁(Interlocking)保护措施，能有效地防止病 毒的侵入和破坏行为的发生。
　　结构中立的(Architecture Neutral)：一般而言，网络是由很多不同机型的机器所 组合而成的，CPU和作业系统体系结构均有所不同；因此，如何使一个应用程序可以 在每一种机器上执行，是一个难题。所幸，Java的编译器产生一种结构中立的目标 文件格式(Object File Format)；这使得编译码得以在很多种处理器中执行。
　　可移植的(Portable)：原始资料型式的大小是被指定的，例如"float"一直是表示一 个32位元IEEE 754浮点运算数字，因绝大多数的CPU都具有此共同特征。程序库属于 系统的一部份，它定义了一些可移植的程序接口，Java本身具备有很好的可移植性。
　　解释的(Interpreted)：Java解释器能直接地在任何机器上执行Java位元码(Bytecodes)， 因此在进行程序连结时，时间的节省，这对于缩短程序的开发过程，有极大的帮助。
　　高效能的(High Performance)：Java位元码迅速地能被转换成机器码(Machine Code)， 从位元码转换到机器码的效能几乎与C与C++没有分别。
　　多线程的(Multi threaded)：Java语言具有多线程的功能，这对于交互回应能力及 即时执行行为是有帮助的。
动态的(Dynamic)：Java比C或C++语言更具有动态性，更能适应时刻在变的环境， Java不会因程序库的更新，而必须重新编译程序。
2.3.1 运行环境
所必须具备的开发环境：
(1) JDK 1.6.0
(2) SQL Server 2000
(3) 操作系统为Window XP
(4) Eclipse
(5) Dreamweaver
(6) Tomcat 5.0
2.3.2 开发工具
Dreamweaver是建立 Web 站点和应用程序的专业工具。 它将可视布局工具、应用程序开发功能和代码编辑支持组合为一个功能强大的工具，使每个级别的开发人员和设计人员都可利用它快速创建界面吸引人并且基于标准的站点和应用程序。
3 过程论述
3.1 需求分析
3.1.1 主界面设计
访问网络相册程序时首先进入网络相册的主界面，如图1所示。在该页面中共包括功能导航区域、图片展示区域、用户操作区域及版权信息区域4 个部分。其中，功能导航区域、用户操作区域及版权信息区域是固定的内容，用来进行其他操作，而图片展示区域是按类别显示图片信息。
在图片展示区域只显示3种类别的信息，而每一种类别显示3组图片，图片类别按每组最多的图片种类信息进行显示，这些操作需要与数据库存在一定关联。
当运行程序时，首先执行index.jsp页面，在该页面中访问Servlet实现类，通过该实现类转发到另一个页面。

功能导航区域

用
户
图片展示区域 操
作
区
域

版权信息区域

图1 主界面布局图
3.1.2 功能描述
网络相册系统是网站为用户提供的个人相片展示和存放平台，浏览查看他人相册并给予支持。网络相册系统主要由三大主要模块组成，分别为用户注册操作、相册浏览操作及相片操作，网络相册系统功能结构图如图1所示。
网络相册系统
用户操作模块
相片浏览操作模块
相片操作模块
用户注册
用户登录
分栏显示相册
滚动浏览相片
幻灯片浏览相册
批量上传相片
相片加水印
相片删除

图2 网络相册系统功能结构图
该系统的三大模块细分为八个部分，分别如下：
(1) 用户注册
用户注册了相关信息才能用此相册系统。
(2) 用户登录
用户登录时需要输入用户名和密码。若用户登录成功，则用户可以进入相册系统；若用户登录失败，则需重新登录。
(3) 分栏显示相册
分栏显示相片类别操作时用户登录后才能进行的操作，分别显示图片的类别。
(4) 滚动浏览相片
用户可以对滚动的图片进行放大或缩小显示，方便用户更清晰的浏览相片。
(5) 幻灯片浏览相册
将页面中的图片交替显示，并在两张图片切换时插入变换效果。
(6) 批量上传相片
用户在相片上传表单中输入完整的信息后，单击“上传”按钮即可。
(7) 相片加水印
     用户登录成功后可以将自己上传的图片增加透明文字，形成水印的效果。
(8) 相片删除
用户登陆成功后，可以将当前的图片删除，单击“删除此相片”即可删除当前相片。
3.1.3 系统流程图
网络相册系统是网站为用户提供的个人相片展示和存放平台，浏览查看他人相册并给予支持。网络相册系统流程图如图3所示。

用户登录操作
用户注册操作
校验用户登录信息
相册分类查询
相片批量上传
滚动查询相片
幻灯片浏览查询
相片详细查询
给相片加水印
相片删除
错误

正确
图3 系统流程图
3.2 关键技术
3.2.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。
3.2.2 动态操作上传表单
动态操作上传表单指的就是用户可以在网页中随意增加或减少表单的个数。如果增加上传表单的数量，则单击“增加…”按钮即可，如果要减少表单的数量，则单击“移除…”按钮将相应的表单进行移除。
现实动态表单主要是通过JavaSrcipt脚本语言实现的，当用户单击“增加…”按钮时触发addMore()方法。
3.2.3 缩略图的生成
在相册管理模块中，相片资料的上传是必不可少的功能，但随着高分辨率相片的普及，上传图片的容量会很大，例如300万像素的相片文件大小基本上是大于600KB。在很多图片的网页中，图片容量越大打开网页的速度越慢。为了解决这个问题，用户上传图片时可以在类中处理一张大相片并缩小它。
3.2.4 相片水印效果
给图片加水印就是在图片加入指定文字。网页中的图片上面写着网站的名称和地址，添加文字的作用就是可以最大限度防止盗用，同时也起到标识相片的功能。
3.2.5 图片显示特效
在相册管理模块中，图片的显示特效主要的无间断图片滚动效果和幻灯片浏览图片。

4 数据库设计和连接实现
4.1 数据库设计
本系统数据库采用SQL Server 2000 数据库，数据库名称为db_photo，在该数据库中只存在一个数据表tb_photo，该数据表的结构如下表
tb_photo数据表的结构
字段名
数据类型
是否为空
是否主键
默认值
描述
id
varchar(50)

NULL
系统自动编号
photoName
varchar(50)

NULL
相片名称
photoSize
varchar(50)

NULL
相片大小
photoType
varchar(50)

NULL
相片类型
photoTime
varchar(50)

NULL
相片上传时间
photoAddress
varchar(50)

NULL
相片地址
username
varchar(50)

NULL
相片上传用户名
printAdress
varchar(50)

NULL
相片生成水印地址
smallPhoto
varchar(50)

NULL
相片缩略图地址
4.1.1数据库的完整性和安全性
完整性：主要是指数据的正确性和相容性，防止数据库中存在不符合语义的数据，防止错误信息的输入和输出，即所谓垃圾进垃圾出所造成的无效操作和出错处理。在这一部分我主要是在信息提交时用脚本控制，并在写入数据库时再次进行检查[16]。
<Script language="Javascript">
<!--
function LoginCheck(loginform)
{
var userid,pwd;
userid=loginform.UserId.value;
pwd=loginform.PWD.value;
if(userid=="")
{
alert("请输入用户名!");
return false;
}
if (pwd=="")
{
alert("请输入密码!");
return false;
}

//-->
</Script>
安全性：主是保护数据库防止恶意的破坏和非法的存取，也就是说安全性措施的防范对象是非法用户和非法操作。
4.1.2 数据库的连接实现
＜%@ page contentType="text/html;charset=gb2312"%＞
＜%@ page import="java.sql.*"%＞
＜html＞
＜body＞
＜%Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver").newInstance();
String url="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=pubs";
//pubs为你的数据库的
String user="sa";
String password="";
Connection conn= DriverManager.getConnection(url,user,password);
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String sql="select * from test";
ResultSet rs=stmt.executeQuery(sql);
while(rs.next()) {%＞
第一个字段内容为：＜%=rs.getString(1)%＞
第二个字段内容为：＜%=rs.getString(2)%＞
＜%}%＞
＜%out.print("数据库操作成功，恭喜你");%＞
＜%rs.close();
stmt.close();
conn.close();
%＞
＜/body＞
＜/html＞
图5-7 图片编辑页面
6 关键技术的实现
6.1动态操作上传表单
实现动态操作表单主要是通过JavaSrcipt脚本语言实现的，当用户单击“增加...”按钮时触发addMore()方法，该方法在JavaSrcipt脚本语言定义的代码如下：
<script type="text/javascript">
function addMore(){
var td=document.getElementById("more"); //获取表格或其他元素的id值
var br=document.createElement("br"); //创建<br>元素
var input=document.createElement("input"); //创建<input>元素，作为提交的表单
var button=document.createElement("input"); //创建<input>元素，作为按钮的表单
input.type="file"; //创建提交表单中的type属性值，该属性值设置为“file”
input.name="file"; //创建提交表单中的name属性值，该属性值设置为“file”
button.type="button"; //创建按钮表单中type属性值，该属性值设置为“button”
button.value="移除..."; //创建按钮表单中value属性值,该属性值设置为“移除...”
button.onclick=function(){ //设置按钮的方法，该方法主要实现的移除表单
td.removeChild(br); //移除<br>元素
td.removeChild(input); //移除<input>元素
td.removeChild(button); //移除<button>元素
}
td.appendChild(br); //添加<br>元素
td.appendChild(input); //添加<input>元素
td.appendChild(button); //添加<button>元素
}
</script>

6.2缩略图的生成
在相册管理模块中，相片资料的上传是必不可少的功能，但随着高分辨率相片的普及，上传图片的容量会很大，例如300万像素的相片文件大小基本上是大于600KB。在很多图片的网页中，图片容量越大打开网页的速度越慢。为了解决这个问题，用户上传图片时可以在类中处理一张大相片并缩小它。
将大相片进行缩小的代码如下：
public static void createSmallPhoto(String photoPath,String smallPath) {
File_file=newFile(photoPath); //读入文件
Image src;
try {
src=javax.imageio.ImageIO.read(_file);
int wideth=110;
intheight=80; BufferedImagetag=newBufferedImage(wideth,height,BufferedImage.TYPE_INT_RGB);
tag.getGraphics().drawImage(src,0,0,wideth,height,null); //绘制缩小后的图
ileOutputStreamout=newFileOutputStream(smallPath); //输出到文件流 JPEGImageEncoderencoder=JPEGCodec.createJPEGEncoder(out);
encoder.encode(tag);
out.close();
}catch (IOException e){
e.printStackTrace();
}
}
在上述代码中，参数photoPath表示上传相片的地址，参数smallPath表示生成缩略相片的地址。在该方法中，首先将photoPath参数转换成Image对象src，构造目标文件tag，设置tag的长度和宽度，对tag进行编码，输出到文件流out，最后关闭文件流。
6.3相片水印效果
给图片加水印就是在图片加入指定文字。网页中的图片上面写着网站的名称和地址，添加文字的作用就是可以最大限度防止盗用，同时也起到标识相片的功能。本实例中，添加水印效果使用一个JavaBean的createMark()方法，该方法的具体实现代码如下：
Public static Boolean createMark(String filePath，String printPath，String markContent){
ImageIcon imgIcon=new ImageIcon (filePath)； //读取源图片内容
Image theImg=imgIcon.getImage(); //读取图片的信息
int width=theImg.getWidth(null); //读取图片的宽度
int height= theImg.getHeight(null); //读取图片的长度
BufferedImagebimage=newBufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
Graphics2D g=bimage.createGraphics();
g.setColor(Color.red); //设置文字颜色为红色
g.drawImage(theImg,0,0,null);
Font font=new Font(markContent,Font.BOLD,200); //对文字进行加粗
g.setFont(font);
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,0.5f)); //透明
g.rotate(0.3f); //文字的旋转角度
g,drawString(markContent,width/3,height/3); //绘制文字的位置
g.dispose();
try { //通过输出流生成图片内容
FileOutputStream out=new FileOutputStream(printPath);
JPEGImageEncoder encoder=JPEGCodec.createJPEGENcoder(out);
JPEGEncodeParamparam=encoder.getDefaultJPEGEncodeParam(bimage);
Param.setQuality(100f,true);
encoder.encode(bimage,param);
out.close();
}catch(Exception e) {
e.printStackTrace();
return false;
}
return true;
}
7 站点运行情况
在网络相册模块的实现中，对于设计中的系统功能模块我基本上都已实现，并且运行正常。在模块的设计上还是有些欠缺。
8 结束语
在这次设计中，我完成了用户注册、登录，分栏显示相册，滚动浏览相片，幻灯片浏览相片，批量上传相片，相片加水印，删除相片等基本功能。通过这次设计，我对Java和SQLServer技术在网络相册模块的应用有了更深一层的认识和应用。在以后设计中可能会遇到一些意想不到的难题，我会在以后的学习和工作中会做进一步的学习和探索，以取得更大的进步。

附录：
判断用户是否登录
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,java.util.*,com.wy.form.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script language="javascript" src="js/js.js" type="text/javascript"></script>
<%@ taglib prefix="c" uri=" %>
<jsp:useBean id="dao" scope="page" class="com.wy.dao.OperationData"></jsp:useBean>
<title>宇晨相册——首页</title>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/1.jpg" width="753" height="200"></td>
</tr>
</table>
<table width="753" height="36" border="0" align="center" cellpadding="0" cellspacing="0" background="images/2.jpg">
<tr>
<td width="48">&nbsp;</td>
<td width="705" valign="top"><table width="481" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="31"><font color="EDE6BC"><a href="#" class="a1">相册首页</a>&nbsp; <b>|</b> &nbsp;
<c:if test="${sessionScope.userInfo==null}">
<a href="#" onclick="javascript:checkUserInfo()" title="请您先登录" class="a1">我的相册</a>
</c:if>
<c:if test="${sessionScope.userInfo!=null}">
<a href="photoServlet?info=userQueryPhoto" class="a1">我的相册</a>
</c:if>
&nbsp; <b>|</b> &nbsp;
<a href="#" class="a1">分类相册</a> &nbsp;<b>|</b>&nbsp;
<a href="#" class="a1">手机相册</a></font></td>
</tr>
</table></td>
</tr>
</table>
<table height="597" border="0" align="center" cellpadding="0" cellspacing="0">
<tr >
<t