JSP

实验目的：掌握相册子系统的实现过程

本次实验在实验11完成进度的基础上进行，如果实验11内容已删除，请在教学辅助系统中下载JSP项目包ROOT-11.rar及所用的数据库cloud.mdb，重建jsproot站点，发布到Tomcat服务器的根目录。

新增第三方组件：相册子系统使用了JavaScript库jQuery的图片浏览插件fancyBox，需将其脚本文件及辅助文件放到发布目录。

1 设置栏目框架

相册系统需要获取会员ID保存到照片表中，为此修改index.jsp中的“登录用户”服务器行为的代码，增加获取会员ID字段userid，并将其为阶段变量userid（以下红字部分为新增的修改）：

  Driver MM_driverUser = (Driver)Class.forName(MM_conn_DRIVER).newInstance();
  Connection MM_connUser = DriverManager.getConnection(MM_conn_STRING,MM_conn_USERNAME,MM_conn_PASSWORD);
  String MM_pSQL = "SELECT userid, logname, password";
  if (!MM_fldUserAuthorization.equals("")) MM_pSQL += "," + MM_fldUserAuthorization;
  MM_pSQL += " FROM [user] WHERE logname=? AND password=?";
  PreparedStatement MM_statementUser = MM_connUser.prepareStatement(MM_pSQL);
  MM_statementUser.setObject(1, MM_valUsername);
  MM_statementUser.setObject(2, oMD5.getMD5ofStr(request.getParameter("password")));
  ResultSet MM_rsUser = MM_statementUser.executeQuery();
  boolean MM_rsUser_isNotEmpty = MM_rsUser.next();
  if (MM_rsUser_isNotEmpty) {
    // username and password match - this is a valid user
    session.putValue("MM_Username", MM_valUsername);
    session.setAttribute("userid", MM_rsUser.getString("userid"));

基于模板的temp_index.html创建相册首页album.jsp，作为本栏目其他页面的样本。

使用包括指令加入新建的栏目导航文件album_menu.jsp，在其中添加文本链接：个人相册album.jsp，公共相册album_pub.jsp、上传照片album_up.jsp，再添加条件语句段，使未登录的访问者看不到导航栏

<%@ page contentType="text/html; charset=utf-8" language="java" %>
<% if (session.getAttribute("MM_Username") != null && !session.getAttribute("MM_Username").equals("")) { %>
<a href="album.jsp">个人相册</a> <a href="album_pub.jsp">公共相册</a> <a href="album_up.jsp">上传照片</a> 编辑相册
<% } %>

2 上传照片模块

2-1 上传照片页album_up.jsp

功能：上传照片到uploads文件夹，同时将照片信息写入照片表，未经登录限制访问

基于album.jsp创建上传照片页album_up.jsp，删除所有样例内容

添加上传客户端插件Uploadify：附加样式表uploadify.css；插入JavaScript脚本jquery.min.js和jquery.uploadify.min.js。再编写实现上传的JavaScript脚本，让名为uploadify的元素执行上传操作，上传内容提交到upload（即不带参数执行UploadServlet，上传的文件会按系统时间重命名保存并返回保存文件名），每次上传成功后在photo层中动态加入上传的图片，并在insert层中动态加载插入照片记录页album_insert.jsp（传入三个参数：原文件名filename、保存文件名savename、是否公开public）

<link href="uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadify.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#uploadify").uploadify({
		'swf' : 'uploadify.swf',
		'uploader' : 'upload',
		'buttonText' : '上传照片',
		'fileTypeExts' : '*.jpg;*.png;*.gif',
		'flleSizeLimit' : '2000KB',
		'onUploadSuccess' : function(file, data, response) {
			$("#photo").append("<div class='box'><img src='upload?getthumb=" + data + "' /><br />" + file.name + "</div>");
			$("#insert").load("album_insert.jsp", {
				'filename' : file.name,
				'savename' : data,
				'public' : ($("#public").attr("checked")?"1":"0")
			});
		}
	});
});
</script>

在页面中插入1行2列表格，添加文件域uploadify，复选框public及文本“公开发布”（还可增加表单域提交主题和说明等信息，相关功能留待以后继续完善）

在表格之下添加层：用于加载写入相片表页的insert、用于附加已上传照片信息的photo

最后添加“用户身份验证>限制对页的访问”服务器行为，如访问被拒则转到album.jsp

2-2 插入照片记录页album_insert.jsp

功能：每次上传照片成功后将照片信息（原文件名、保存文件名、是否公开）写入照片表，并输出上传照片的原文件名

创建album_insert.jsp，添加预处理语句“已准备（插入、更新、删除）”，名为preIns

插入photo表的userid、filename、savename、public字段，对应添加参数变量pUserID（值为阶段变量userid）、pFileName（值为提交参数filename）、pSaveName（值为提交参数savename）、pPublic（值为提交参数public）

在页面中显示上传的照片文件名：

<%= request.getParameter("filename") %>已写入照片表！

完成以上页面后即可测试上传模块查看效果：

3 浏览照片模块

3-1 个人相册页（相册首页）album.jsp

功能：相册首页显示会员个人相册的最新照片缩略图，点击缩略图可打开浮动窗口查看原图，未经登录则自动跳转到公共相册页

打开album.jsp删除content层中的其他元素只保留一个类名为box margin_r_20的层（右侧边距20像素的方框，用于放置缩略图和说明文本）

添加图片浏览插件fancyBox：附加样式表jquery.fancybox.css，插入JavaScript脚本：jquery.min.js和jquery.fancybox.pack.js，再编写实现图片浏览的JavaScript脚本，给类名为fancybox的链接添加浮动窗口效果：

<link href="jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".fancybox").fancybox();
});
</script>

添加记录集rsAlbum，获取photo表，筛选userid=阶段变量userid的记录，以photoid降序排列（最新上传的照片排在前面）

在页面中以box层动态显示单张照片缩略图（尺寸设定为198*146）和原图链接，以映射到/upload的UploadServlet负责显示图片，将保存文件名作为getfile参数可显示原图，作为getthumb参数可显示缩略图（本例中缩略图是用原图动态生成的，实际应用中为提高效率应当同时保存原图文件和缩略图文件），缩略图下显示原文件名和上传时间：

<div class="box margin_r_20">
    <%
	String filename = rsAlbum.getString("filename");
	String savename = rsAlbum.getString("savename");
	%>
    <div class="thumb_wrapper"><a class="fancybox" rel="gallery" href="upload?getfile=<%= savename %>" title="<%= filename %> "><img src="upload?getthumb=<%= savename %>" width="198" height="146"  /></a></div>
    <h3><%= filename %></h3>
    <p><%= rsAlbum.getString("uptime") %></p>
  </div>

为box层添加“重复区域”服务器行为，显示最新的8条记录。在页面下方设置“上一页”“下一页”链接，并为链接加入“记录集分页”服务器行为，即可实现所有记录的翻页显示。

最后添加“限制对页的访问”服务器行为，访问被拒绝则跳转到album_pub.jsp

3-2 公共相册页album_pub.jsp

功能：显示会员公开的照片，允许任何访问者浏览

基于album.jsp创建album_pub.jsp，并删除“限制对页的访问”服务器行为

修改rsAlbum记录集，去除原来的筛选条件，切换到高级模式。使用以下SQL语句获取照片表中所有公开的记录（并关联会员表获取相应的会员账号）

SELECT photo.*, logname
FROM photo, user
WHERE [public] = true AND photo.userid = user.userid
ORDER BY photoid DESC

然后修改显示照片说明的文本增加显示会员账号即可。

时间所限本次实验略去了照片信息修改和设置主题模块的实现部分，有兴趣的可以进一步完善功能。