在线相册网站的设计与实现.doc

《在线相册网站的设计与实现.doc》由会员分享，可在线阅读，更多相关《在线相册网站的设计与实现.doc（19页珍藏版）》请在沃文网上搜索。

1、 目 录1.需求分析11.1在线相册网站的目的和意义11.2网站功能分析12.在线相册网站的设计12.1采用技术12.2系统框架及功能模块设计12.3数据库设计13.在线相册网站的实现23.1开发工具及环境配置23.1.1开发环境23.1.2安装及配置33.2程序设计33.2.1数据库连接模块设计43.2.2index页面设计73.2.3accountMenu页面设计93.2.4myalbum页面设计103.2.5newAlbum 页面设计123.2.6uploadPhoto 页面设计133.2.7deleteAlbum 页面设计143.2.8photo 页面设计163.2.9error 页面

2、设计174.系统发布与运行185.总结186.参考文献19-I-1. 需求分析1.1 在线相册网站的目的和意义在线相册可以给用户提供一个在网络上展示自己的摄影作品或者共享精美图片的平台。1.2 网站功能分析该网站的功能较为简单，提供了用户新建相册、上传照片、删除相册、删除照片、照片浏览等基本功能。2. 在线相册网站的设计2.1 采用技术主要采用JSP编程，Servlet编程，JavaBean编程，Java数据库编程等技术2.2 系统框架及功能模块设计本网站的设计主要是应用了MVC设计模式，即模型(Model)、视图(View)、控制器(Control)3个组成部分，模型即业务逻辑层，包含完成用

3、户各项操作的实现方法，主要由AlbumDAOBean.java、AlbumInfo.java、AlbumPhoto.java、AlbumPhoto.java这四个JavaBean实现；而视图即表示层，主要用于网页元素、格式等的表示，主要由albumindex.jsp、accountMenu.jsp、myalbum.jsp等JSP页面实现；控制器即控制层，调用JavaBean代码，响应用户的请求，控制整个网站的流程，主要由AlbumServlet.java和PhotoServlet.java实现。2.3 数据库设计表0、数据库表汇总序号Table名称说明1User用户表2Album-type相册

4、类型3User_album用户相册关系4Photo照片表表1. 用户表 user字段名称类型主键NullDefault说明user_namechar(20)NNot无用户名user_pwdchar(20)NNot无用户密码UA_idchar(10)YNot无用户与相册关系编码表2 相册类型 album_type字段名称类型主键NullDefault说明album_type_idchar(5)YNot无相册类型编码album_type_namechar(20)NNot无相册类型名表3 用户与相册关系表user_album字段名称类型主键NullDefault说明UA_idchar(10)NNot

5、无相册类型编号album _idchar(10)YNot无相册编号album_namechar(20)NNot无相册名称album_type_idchar(5)NNot无相册类型编码new_timechar(20)NNotSysdate()相册建立时间表4 照片表photos字段名称类型主键NullDefault说明photo_idchar(10)YNot无照片编号album_idchar(10)NNot无相册编号photo_namechar(20)NNot无照片名称photoMediablobNNot无照片文件3. 在线相册网站的实现3.1 开发工具及环境配置3.1.1 开发环境操作系统：W

6、inXP SP3数据库服务器：MySQL 5.0+MySQL FrontWeb服务器：Tomcat 6.0.18开发工具：Myeclipse 6.0.13.1.2 安装及配置安装Myeclipse 6.0.1后，该集成环境集成了多种工具，另外安装数据库服务器：MySQL 5.0，以其可视化操作界面MySQL Front作为辅助。3.2 程序设计本网站设计共有如下程序：（.html; .jsp, .java, ）模块说明AlbumServlet.java调用不同JavaBean的相应方法完成对用户提交的各种请求的处理PhotoServlet.java根据照片编码从数据库中提取照片并以二进制数组的

7、形式写入输出流以显示照片AlbumDAOBean.java位于com.album包中，定义了多种静态方法来完成对应操作，包括数据库连接、新建相册等，可在AlbumServlet调用AlbumInfo.java位于com.javabean包中，用于获取和设置相册的编号、名称等多种属性AlbumPhoto.java位于com.javabean包中，生成并返回照片的二进制数组Photo.java位于com.javabean包中，用于获取和设置照片的编号、名称和所属相册编号SmartUpload组件Jspsmart网站提供的免费文件上传下载组件，位于com.jspsmart.upload包中，封装了上

8、传下载所需要的.class文件，在此仅用于用户上传照片index.jsp用户登录页面albumindex.jsp登录成功后的主页面，由左右两部分构成，左侧为不同页面的链接，单击左侧链接后右侧显示不同画面，右侧初始默认为myalbum画面accountMenu.jsp主页面的左侧部分，提供新建、删除、上传等页面的链接myalbum.jsp在主页面单击“我的相册”后右侧显示的画面newalbum.jsp在主页面单击“新建相册”后右侧显示的画面uploadPhoto.jsp在主页面单击“上传照片”后右侧显示的画面deleteAlbum.jsp在主页面单击“删除相册”后右侧显示的画面photo.jsp

9、显示某相册中所有照片的缩略图error.jsp错误页面，可根据不同的错误给出错误信息3.2.1 数据库连接模块设计本应用中将数据库的操作封装在了com.album包中的AlbumDAOBean.java中，其中主要代码如下：package com.album;import java.io.*;import java.sql.*;import javax.sql.*;import java.util.*;import javax.naming.*;import com.javabean.AlbumPhoto;import com.javabean.AlbumInfo;import com.jav

10、abean.Photo;public class AlbumDAOBean private static Connection con;private static ResultSet rs;private static PreparedStatement userLogInPS;private static PreparedStatement photoPS;private static PreparedStatement insertPhotoPS;private static PreparedStatement UAIdPS;private static PreparedStatemen

11、t newAlbumPS;private static PreparedStatement albumInfoPS;private static PreparedStatement delAlbumPS;private static PreparedStatement delAlbumDetailPS;private static PreparedStatement delPhotoPS;private static PreparedStatement albumTypeInfoPS;private static PreparedStatement albumPhotoInfoPS;stati

12、c /预编译SQLtry /取得数据库连接con=AlbumDAOBean.getConnection();/用户登陆userLogInPS=con.prepareStatement(SELECT user_pwd FROM users WHERE user_name=?);/从数据库提取照片photoPS=con.prepareStatement(SELECT photo FROM photos WHERE photo_id=?);/上传照片insertPhotoPS=con.prepareStatement(INSERT INTO photos(album_id,photo_id,phot

13、o_name,photo) VALU+ES(?,?,?,?);/用户与相册关系UAIdPS=con.prepareStatement(SELECT UA_id FROM users WHERE user_name=?);/新建相册newAlbumPS=con.prepareStatement(INSERT INTO user_album(UA_id,album_id,album_name,album_type+_id,new_time) VALUES(?,?,?,?,sysdate();/相册详细信息albumInfoPS=con.prepareStatement(SELECT ua.albu

14、m_id,ua.album_name,ua.new_time,(SELECT at.alb+um_type_name FROM album_type at WHERE at.album_type_id=ua.+album_type_id),(SELECT COUNT(p.photo_id) FROM photos p WHE+RE p.album_id=ua.album_id),(SELECT at1.album_type_id FROM +album_type at1 WHERE at1.album_type_id=ua.album_type_id) F+ROM user_album ua,

15、users u WHERE u.user_name=?);/删除所有用户相册照片delAlbumDetailPS=con.prepareStatement(DELETE FROM photos WHERE album_id=?);/删除相册delAlbumPS=con.prepareStatement(DELETE FROM user_album WHERE album_id=?);/删除照片delPhotoPS=con.prepareStatement(DELETE FROM photos WHERE photo_id=?);/相册类型信息albumTypeInfoPS=con.prepar

16、eStatement(SELECT album_type_id,album_type_name FROM album_type);/相册照片集albumPhotoInfoPS=con.prepareStatement(SELECT photo_id,photo_name,album_id FROM photos WHERE+ album_id=?); catch (SQLException se) se.printStackTrace(); catch (ClassNotFoundException e) e.printStackTrace(); 其他与数据库操作无关的方法省略/方法名：get

17、Connection()/功能介绍：取得数据库连接/参数说明：无/返 回 值：java.sql.Connection/异常:java.sql.SQLException/ javax.naming.NamingExceptionpublic static Connection getConnection() throws ClassNotFoundException try /加载驱动Class.forName(org.gjt.mm.mysql.Driver);/取得数据库连接con=DriverManager.getConnection(jdbc:mysql:/localhost/photos

18、,root,sibo626); catch (SQLException se) se.printStackTrace();return con;/方法名：close/功能介绍：关闭结果集/参数说明：rs:结果集/返 回 值：void/异常:java.sql.SQLExceptionprivate static void close(ResultSet rs) try if(rs!=null) rs.close(); catch (SQLException se) se.printStackTrace();3.2.2 index页面设计index.jsp .STYLE4 font-size: 1

19、3px;font-family: 宋体;color: #244ac6;line-height: 16pt;function login() var login=document.getElementById(login);login.style.display=(login.style.display=none)? block:none;var log=document.getElementById(log);log.style.display=(log.style.display=none)? block:none; 点击图片登陆您的相册.用户名: 密  码: 

20、 3.2.3 accountMenu页面设计 我的相册 新建相册 上传照片 删除相册 退出登录 3.2.4 myalbum页面设计.newjoyo_vcd1 border-bottom:1px ridge #C49238;border-left:1px ridge #C49238; border-right:1px ridge #C49238;border-top:1px ridge #C49238; line-height:18px;%Vector vec=(Vector)session.getAttribute(userAlbum);for(Enumeration enu=vec.elem

21、ents();enu.hasMoreElements();) AlbumInfo ai=(AlbumInfo)enu.nextElement();if(vec.size()%5=0) out.println();% img src=image/.jpg width=110 height=100 a href=AlbumServlet?action=photo&albumId= target=_blank 3.2.5 newAlbum 页面设计相册类型: option value= 相册名称: 3.2.6 uploadPhoto 页面设计选择相册: % Vector vec=(Vector)se

22、ssion.getAttribute(userAlbum); for(Enumeration enu=vec.elements();enu.hasMoreElements();) AlbumInfo ai=(AlbumInfo)enu.nextElement();if(vec.size()%5=0) out.println();%option value= 照片名称: 路    径: 3.2.7 deleteAlbum 页面设计.newjoyo_vcd1 border-bottom:1px ridge #C49238;border-left: 1px r

23、idge #C49238; border-right:1px ridge #C49238;border-top: 1px ridge #C49238; line-height:18px;编号相册名称创建时间相册类型照片数量删除a href=AlbumServlet?action=del&albumId=删除3.2.8 photo 页面设计相册明细.newjoyo_vcd1 border-bottom:1px ridge #C49238;border-left:1px ridge #C49238; border-right:1px ridge #C49238;border-top:1px ridge #C49238; line-height:18px;%/从request获取参数Vector vec=(Vector)request.getAttribute(photoVec);/将内容输出到网页for(Enumeration enu=vec.elements();enu