JSP

实验目的：掌握会员子系统新增功能的实现过程

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

本次实验还要使用：
- 自建的Java项目包Tools，将其中的类文件（连带包目录tools）放到发布目录的类文件夹WEB-INF\classes
- 文件上传组件commons-fileupload-1.2.2.jar、输入输出组件commons-io-2.4.jar和图片尺寸调整组件imgscalr-lib-4.2.jar，放到发布目录的类库文件夹WEB-INF\lib
- JavaScript库jQuery及其上传客户端插件Uploadify，将其中的脚本文件及辅助文件放到发布目录

1 编辑个人信息模块

1-1 查看个人信息页user.jsp

功能：点击登录用户名进入个人信息页查看个人信息，未经登录则限制访问

修改header.jsp将登录用户名文本链接到user.jsp

基于temp.jsp创建user.jsp，基于lefter_home.jsp创建lefter_user.jsp作为本模块共有的左侧导航栏

在左侧导航栏添加文本“查看个人信息”并链接到user.jsp

添加提示文本“查看个人信息：”，添加5行2列表格，表格中添加文本：账号、联系电话、电子邮箱、通讯地址、真实姓名

添加记录集rsUser，从user表中筛选出logname=阶段变量MM_Username的记录（即当前登录会员的信息），将rsUser记录集的字段拖入相应单元格以显示会员个人信息

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

1-2 修改个人信息页user_edit.jsp

功能：在左侧导航栏点击“修改个人信息”链接进入修改个人信息页，使用表单提交信息更新会员表，未经登录则限制访问

在左侧导航栏添加文本“修改个人信息”并链接到user_edit.jsp

基于user.jsp创建user_edit.jsp，在页顶添加代码以支持表单提交中文信息：<% request.setCharacterEncoding("utf-8"); %>

添加提示文本“修改个人信息：”，插入表单，添加6行2列表格，表格中添加文本和文本域：账号（账号不允许修改所以不用文本域）、联系电话phone、电子邮箱email、通讯地址address（多行文本域）、真实姓名realname和提交按钮，将rsUser记录集的字段拖入相应文本域以显示会员个人信息

添加服务器行为“更新记录”，更新user表，选取记录自rsUser，唯一键列为userid，更新成功后跳转到user.jsp

2 登录密码加密功能

2-1 使用实现MD5算法的JavaBean

使用Java开发工具编写实现MD5算法的类tools.MD5，进行MD5变换的方法为String getMD5ofStr(String inbuf)，传入参数是要进行MD5变换的字符串，返回结果是变换后的字符串

将生成的字节码文件MD5.class放置在应用程序目录的WEB-INF\classes\tools文件夹中，即可在JSP文件中作为JavaBean使用

2-2 修改登录密码页user_editpass.jsp

功能：在左侧导航栏点击“修改登录密码”链接进入修改登录密码页，使用表单提交信息更新会员表密码字段，未经登录则限制访问

在左侧导航栏添加文本“修改登录密码”并链接到user_editpass.jsp

基于user.jsp创建user_editpass.jsp，添加提示文本“修改登录密码：”，插入表单，添加4行2列表格，表格中添加文本和文本域：账号（不用文本域），输入新密码password，确认新密码passrepeat和提交按钮

添加服务器行为“更新记录”，更新user表，选取记录自rsUser，唯一键列为userid，更新成功后跳转到user.jsp

选中表单添加行为“检查表单”，修改自动生成的JavaScript代码的MM_validateForm函数，在if (errors)之前手工添加检查两次密码是否一致的代码：

	if (password.value != passrepeat.value) {
		errors+='- 两次输入的密码不一致。';
		password.value='';
		passrepeat.value='';
		password.focus();
	}

在页顶添加标记生成MD5加密Bean对象oMD5：

<jsp:useBean id="oMD5" scope="request" class="tools.MD5" />

修改“更新记录”服务器行为的代码，将提交的密码进行MD5变换再更新user表：

MM_fields[i+1] = ((request.getParameter(MM_fields[i])!=null)?oMD5.getMD5ofStr((String)request.getParameter(MM_fields[i])):"");

2-3 修改登录页和注册页的密码处理

密码加密保存后，其他用到密码字段的页面都需要增加相应的处理才能正常使用： 

修改登录页index.jsp的“登录用户”服务器行为的代码，将提交的密码进行MD5变换再与user表中保存的加密密码进行比对：

MM_statementUser.setObject(2, oMD5.getMD5ofStr(request.getParameter("password")));

同样在页顶添加标记生成Bean对象 

<jsp:useBean id="oMD5" scope="request" class="tools.MD5" /> 

修改注册页register.jsp的“插入记录”服务器行为的代码，将提交的密码进行MD5变换再插入user表：

// set the form values
 for (int i=0; i+1 < MM_fields.length; i+=2) {
    MM_fields[i+1] = ((request.getParameter(MM_fields[i])!=null)?(String)request.getParameter(MM_fields[i]):"");
 }
//提交的密码文本域要进行MD5变换
MM_fields[3] = ((request.getParameter(MM_fields[2])!=null)?oMD5.getMD5ofStr((String)request.getParameter(MM_fields[2])):"");

同样在页顶添加标记生成Bean对象 

<jsp:useBean id="oMD5" scope="request" class="tools.MD5" /> 

3 上传会员头像功能

3-1 使用处理图片上传的Servlet

使用Java开发工具编写实现处理图片上传的Servlet类tools.UploadServlet，接收avatar参数，将表单提交的JPG文件转为120像素的小图片并保存到应用程序目录的uploads文件夹，保存文件名为参数值。

UploadServlet使用了开源项目文件上传组件、输入输出组件和图片尺寸调整组件，要将相应的类库放到类库文件夹WEB-INF\lib。 

将生成的字节码文件UploadServlet.class放置在应用程序目录的WEB-INF\classes\tools文件夹中

然后在Web应用程序部署文件WEB-INF\web.xml中配置UploadServlet的访问地址：

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app>
    <servlet>
        <servlet-name>UploadServlet</servlet-name>
        <servlet-class>tools.UploadServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>UploadServlet</servlet-name>
        <url-pattern>/upload</url-pattern>
    </servlet-mapping>
</web-app>

即可以通过浏览器以upload?avatar=参数值的形式访问此Servlet

3-2 上传会员头像页user_avatar.jsp

功能：在左侧导航栏添加图片标签显示会员头像，点击“上传会员头像”链接进入上传会员头像页，使用文件域提交JPG文件上传到应用程序目录的uploads文件夹，图片尺寸为120像素，图片文件名为会员账号，未经登录则限制访问

在左侧导航栏添加文本“上传会员头像”并链接到user_avatar.jsp，并添加背景表格和图片标签显示名为会员账号的图片的标记：

    <table width="130" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th height="130" scope="col"><img name="avatar" src="uploads/<%= session.getAttribute("MM_Username") %>.jpg" alt="会员头像" /></th>
        </tr>
    </table> 

基于user.jsp创建user_avatar.jsp，该页面使用JavaScript库jQuery及其上传客户端插件Uploadify实现更便捷的上传界面，需要在head区段引入所需的脚本jquery.min.js、jquery.uploadify.min.js并附加样式表uploadify.css。再编写如下脚本给名为uploadify的元素设置处理函数：文件提交到/upload并附加avatar参数值为当前登录账号，只允许上传JPG文件，尺寸限1000KB，上传完成后跳转到user.jsp

<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">
$(function() {
	$("#uploadify").uploadify({
		'swf' : 'uploadify.swf',
		'uploader' : '/upload?avatar=<%= session.getAttribute("MM_Username") %>',
		'buttonText' : '上传头像',
		'fileTypeExts' : '*.jpg',
		'fileSizeLimit' : '1000KB',
		'onUploadComplete' : function(file) {
			window.location.href="user.jsp";
		}
	});
});
</script>

添加提示文本“上传会员头像：”，删掉原有的rsUser记录集和表格，插入一个名为uploadify的文件域即可

完成后即可通过此页面上传头像并在左侧栏显示。