JSP

JSP实验13 商店系统的实现

2012-12-24T13:59:10+08:00

教学目的：掌握商店子系统的实现过程

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

新增组件：商店子系统使用了实现购物车功能的JavaBean类tools.ShoppingCart，包含在Java项目包Tools中，将相应类文件ShoppingCart.class（连带包目录tools）放到发布目录的类文件夹WEB-INF\classes。

在JSP中使用购物车JavaBean的，首先引入JavaBean作为阶段级对象：

<jsp:useBean id="oCart" scope="session" class="tools.ShoppingCart" />

然后执行以下方法操作购物车：

oCart.setItem(商品ID, 数量) //指定商品，默认数量为1

oCart.setAct(操作) //指定操作，添加add/删除remove/更新update

oCart.processRequest() //执行针对指定商品的指定操作

购物车返回的内容为散列表映射集HashMap，可用迭代器Iterator读取（需要引入java.util包）

1 后台管理系统框架

1-1 建立后台管理系统框架

在线商店由管理员来负责经营，因此需要建立一个后台管理系统，简单起见目前只建立后台管理系统的框架并实现商店管理的添加商品功能。

首先注册一个会员账号admin，在会员表中将会员类型由默认的usr改为adm。

在站点发布目录下创建adm文件夹，在其中基于BlueRain模板的temp.htm创建管理首页main.jsp和管理登录页index.jsp。

在main.jsp中添加包括文件header.jsp和footer.jsp并在header.jsp中动态设置当前栏目：

管理首页main.jsp顶部添加设置对应的栏目变量值

<% String section = "adm_main"; %>

其他栏目页面只需修改此变量值即可。

1-2 管理登录页index.jsp

功能：登录后台管理系统，登录时应设置访问级别

index.jsp先删除页面导航栏，设置登录表单并添加“登录用户”服务器行为，这一次要加上选取访问级别字段type

添加实现MD5变换的JavaBean：

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

修改自动生成的代码添加密码的MD5变换：

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

登录失败后直接回到登录页面并显示提示文本：

<%= (request.getParameter("err") != null && request.getParameter("err").equals("1"))?"登录失败！":"" %>

（注意：实用的管理员登录功能应有更高的安全设置，例如增加图形化的随机验证码等）

1-3 管理首页main.jsp

功能：提供后台管理系统各栏目导航，限管理员登录

main.jsp添加“限制对页的访问”服务器行为，选取允许级别为adm

修改自动生成的代码，增加判断是否存在阶段变量MM_UserAuthorization（原代码存在BUG，如登录用户服务器行为未设置访问级别，则普通用户登录后也能访问受限页面）：

if (session.getValue("MM_Username") != null && !session.getValue("MM_Username").equals("")
&& session.getValue("MM_UserAuthorization") != null && !session.getValue("MM_UserAuthorization").equals("")) {

2 后台商店管理模块

2-1 商店管理首页shop.jsp

功能：提供商店管理各功能页导航，限管理员登录

基于main.jsp创建shop.jsp（所有后台页面都基于main.jsp创建），使用包括指令添加左侧导航栏lefter_shop.jsp，设置链接：商店管理首页、新增商品

2-2 商店管理-新增商品页shop_additem.jsp

功能：使用表单提交商品信息并上传商品图片插入商品表

基于shop.jsp创建shop_additem.jsp，在head区段引入样式表文件uploadify.css和脚本文件jquery.min.js、jquery.uploadify.min.js，设置上传客户端插件：

<script type="text/javascript">
$(document).ready(function(e) {
	$("#uploadify").uploadify({
		'swf' : '../uploadify.swf',
		'multi' : false,
		'uploader' : '../upload',
		'buttonText' : '上传图片',
		'fileTypeExts' : '*.jpg;*.png;*.gif',
		'flleSizeLimit' : '2000KB',
		'onUploadSuccess' : function(file, data, response) {
			$("#pic").attr("value", data);  // 商品图片文本域的值设为上传的图片文件名
			$("#photo").append("<img src='../upload?getthumb=" + data + "' />");
			$("#uploadify").hide();  // 隐藏上传按钮
			$("#uploadify-queue").hide();  // 隐藏上传进度条
		}
	});
});
</script>

在页面中添加表单并设置表单域：商品名称itemname，介绍detail，价格price，图片pic（只读文本域，上传图片后将值设置为上传的图片文件名）

选定表单添加“检查表单”行为和“插入记录”服务器行为即可

再添加名为uploadify的文件域和名为photo的层用于上传和显示图片缩略图（注意：Uploadify插件自带表单，所以应置于插入记录表单之外否则会导致冲突；也可以将插入记录表单的提交方式改为GET（即在地址栏中附加参数）；或是只使用Uploadify上传图片后执行预处理语句自动将商品信息写入数据库，具体实现参看相册系统）

3 前台商品浏览模块

3-1 商店首页shop.jsp

功能：显示商品列表，访问者可点击链接查看商品详情或将商品加入购物车

修改网站导航栏header.jsp添加商店栏目链接；基于lefter_home.jsp创建商店的左侧导航栏lefter_shop.jsp：浏览商品shop.jsp，查看购物车shop_cart.jsp，我的订单shop_order.jsp

基于user.jsp创建shop.jsp（商店首页允许所有访问者浏览，因此要删掉原有的“限制对页的访问”服务器行为和会员信息记录集），设置左侧导航栏。在右侧的detail_right层中显示商品信息（具体实现请参看相册页面），效果如下（注意可以在绑定面板中设置价格字段的显示格式为货币）：

加入购物车的链接目标是操作购物车页shop_dealcart.jsp，提交参数为商品ID号itemid、商品数量num（设为1）、操作类型act（设为add）

shop_dealcart.jsp?itemid=<%= rsItem.getString("itemid") %>&itemnum=1&act=add"

3-2 商品详情页shop_detail.jsp

功能：显示指定商品的详情，提供加入购物车链接（可修改商品数量）

基于shop.jsp页创建shop_detail.jsp，设置记录集筛选指定的商品并显示。

商品详情页使用文本域设置要提交的商品数量，使用表单提交信息到操作购物车页shop_dealcart.jsp

4 购物车功能的实现

4-1 操作购物车页shop_dealcart.jsp

功能：根据访问者提交的信息操作购物车（加入/删除/修改）

新建文件shop_delcart.jsp，此文件不显示任何内容，完成特定操作后跳转回商品浏览页或查看购物车页：

<jsp:useBean id="oCart" class="tools.ShoppingCart" scope="session"/>
<%
String id = "";
String num = "";
String act = "";
request.setCharacterEncoding("utf-8");
if (request.getParameter("itemid") != null) {
	id = request.getParameter("itemid");
	oCart.setItem(id);
}
if (request.getParameter("itemnum") != null) {
	num=request.getParameter("itemnum");
	oCart.setItem(id, num);
}
if (request.getParameter("act") != null) {
	act=request.getParameter("act");
}
oCart.setAct(act);
oCart.processRequest();
if (act.equals("add"))
	response.sendRedirect("shop.jsp");
else
	response.sendRedirect("shop_cart.jsp");
%>

4-2 查看购物车页shop_cart.jsp

功能：显示访问者的购物车信息，并可修改商品数量或移除商品

基于shop.jsp创建shop_cart.jsp，在页顶引入所需类包、实现购物车的JavaBean并根据统一设置创建数据库连接：

<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<jsp:useBean id="oCart" class="tools.ShoppingCart" scope="session"/>
<%
//根据统一设置创建数据库连接
Class.forName(MM_conn_DRIVER);
Connection conn = DriverManager.getConnection(MM_conn_STRING,MM_conn_USERNAME,MM_conn_PASSWORD);
%>

在页面中插入2行3行表格用于显示购物车中的商品名称、价格和数量，在表格之前添加代码段判断购物车是否为空，不为空时才允许显示购物车表格：

<%
HashMap map = oCart.getItems();
if (map.isEmpty()) {
	out.println("您还没有在购物车中放入任何商品！");
}
else {
DecimalFormat df=new DecimalFormat(".00");
Statement stmt = conn.createStatement();
ResultSet rsCart = null;
%>

在表格第二行之前添加代码段循环处理购物车中的商品，根据商品ID创建记录集获取商品信息：

<%
	for (Iterator iter = map.keySet().iterator(); iter.hasNext();) {
		Object key = iter.next();
		rsCart = stmt.executeQuery("SELECT * FROM item WHERE itemid=" + key);
		rsCart.next();
%>

在第二行的三个单元格中分别显示商品名称<%= rsCart.getString("itemname") %>，商品价格<%= df.format(Double.parseDouble(rsCart.getString("price"))) %>，和商品数量（并提供修改数量的功能）：

            <form action="shop_dealcart.jsp">
            	<input name="itemid" type="hidden" value="<%= key %>" />
                <input name="act" type="hidden" value="update" />
                <input name="itemnum" type="text" class="Input" id="itemnum" value="<%= map.get(key) %>" size="3" maxlength="2" />
                <input name="button" type="submit" class="Button" id="button" value="修改数量" />
            </form>

在第二行之后添加代码段结束循环语句并关闭数据对象

<%
	}
	rsCart.close();
	stmt.close();
	conn.close();
%>

在表格之后添加代码段结束判断语句

<%
}
%>

购物车的显示效果如下。要实现从购物车中移除商品只需向shop_dealcart.jsp提交参数为商品ID号itemid和操作类型act（设为remove），注意由于使用ODBC驱动不能两次读取同一字段，需要事先将itemid字段赋值给变量：

时间所限本实验略去了下单购买和订单管理等模块的实现部分，有兴趣的可以进一步完善功能。

JSP教学13 商店系统的设计

2012-12-21T13:37:55+08:00

教学目的：了解商店子系统的设计过程

13.1 需求描述

为“云端网”设计商店子系统，要求实现以下基本功能：

- 访问者可以查看并挑选商品
- 会员可以下单购买选定的商品
- 会员可以查看自己的订单
- 管理员可以编辑商品信息
- 管理员可以管理所有订单

13.2 功能设计

根据需求进行功能设计，使用简单的文本描述设计思路：

1）会员查看商品并挑选商品：商品首页显示商品列表，提供“加入购物车”链接
2）会员下单购买选定的商品：购物车页显示选定的商品，提供“下单购买”链接（简单起见只考虑货到付款的支付方式）
3）会员查看本人订单：查看订单页显示会员订单信息和订单状态（未发货/已发货/已收货）
4）管理员编辑商品信息：后台商品管理页显提供商品编辑功能
5）管理员管理所有订单：后台订单管理页显示订单列表，管理员可以设置订单状态
6）购物车：购物车功能可以通过session级JavaBean实现，使用HashMap保存选定商品项，键为商品ID，值为商品数量，购物车中商品的详细信息可根据商品ID从商品表中获取

13.3 数据库设计

根据功能要求确定使用的数据库系统及数据表结构（字段名和类型说明）

1）商品表item

商品ID：itemid 自动编号，主键
商品名：itemname 文本(20)，必填字段
说明：detail 文本(50)，必填字段
价格：price 货币，必填字段
图片：pic 文本(20)

2）订单表order

订单ID：orderid 自动编号，主键
下单时间：ordertime 日期/时间，必填字段，默认值Now()
订单状态：orderstate 文本(5)，必填字段，默认值未发货
会员ID：userid 数字(长整型)，必填字段（关联到会员表的会员ID）
收货地址：destination 文本(50)，必填字段

3）订单商品表orderitem

订单商品ID：orderitemid 自动编号，主键
订单ID：orderid 数字(长整型)，必填字段（关联到订单表的订单ID）
商品ID：itemid 数字(长整型)，必填字段（关联到商品表的商品ID）
数量：num 数字(长整型)，必填字段，默认值1
价格：price 货币，必填字段

以上是一个最简化的商店系统表结构，可在此基础上继续修改完善。

另外对于后台管理功能的实现，可以修改会员表增加一个字段：会员类型type，普通会员的类型为默认值usr，后台页面限类型为adm的管理员登录。

JSP实验12 相册系统的实现

2012-12-17T08:43:21+08:00

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

本次实验在实验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

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

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

JSP教学12 相册系统的设计

2012-12-14T13:29:29+08:00

教学目的：了解相册子系统的设计过程

12.1 需求描述

为“云端网”设计相册子系统，要求实现以下基本功能：

- 会员可以上传自己的照片
- 会员可以浏览自己的照片
- 会员可以为自己的照片添加主题
- 会员可以为自己的照片添加说明
- 会员可以公开自己的某些照片
- 访问者可以浏览所有会员公开的照片

12.2 功能设计

根据需求进行功能设计，使用简单的文本描述设计思路：

1）上传照片：上传照片页可以上传照片并将照片信息存入数据库
2）浏览相册：相册主页显示“个人相册”的最新照片缩略图，并可翻页查看所有照片缩略图
3）查看照片：点击相册中的照片缩略图打开查看照片页显示完整照片，并可翻页查看所有照片
4）编辑照片：查看照片页提供打开编辑照片信息页链接，编辑照片页可修改照片信息
5）编辑主题：相册主页提供打开编辑照片主题页链接，编辑主题页可编辑照片主题

12.3 数据库设计

根据功能要求确定使用的数据库系统及数据表结构（字段名和类型说明）

1）照片表photo

照片ID：photoid 自动编号，主键

主题ID：topicid 数字(长整型)，默认值0（关联到主题表的主题ID）

会员ID：userid 数字(长整型)，必填字段（关联到会员表的会员ID）

文件名：filename 文本(20)，必填字段
保存文件名：savename 文本(20)，必填字段（为避免重名问题上传到服务器的文件应当重命名后保存）

上传时间：uptime 日期/时间，必填字段，默认值Now()

照片说明：detail 文本(50)

是否公开：public 逻辑，默认值False

2）主题表topic

主题ID：topicid 自动编号，主键
分类名：topicname 文本(15)，必填字段
会员ID：userid 数字(长整型)，必填字段（关联到会员表的会员ID）

以上是一个最简化的相册系统表结构，可在此基础上继续加以完善，例如照片表还可以加上浏览次数和评分字段，增强会员间的互动。

JSP实验11 会员系统的实现2

2012-12-10T14:22:04+08:00

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

本次实验在实验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的文件域即可

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

JSP教学11 会员系统的设计2

2012-12-07T14:23:53+08:00

教学目的：了解JavaBean与Servlet的概念与使用方法

“云端网”会员系统将使用JavaBean实现密码加密功能，使用Servlet实现上传图片作为头像功能，本课将介绍这两个技术的概念及其在JSP中的使用

11.1 JavaBean类

JavaBean（或称Bean）是一种Java类，通过封装属性和方法成为具有特定功能或处理某个业务的对象。

JavaBean的编写规范：
- 必须是一个公共类（访问属性应为public）
- 必须有一个公共的且不带参数的构造方法
- 不应有公共属性（访问属性应为private）
- 类的属性应通过一组存取方法（getXxx和setXxx）来访问。

11.2 使用JavaBean

要在JSP中使用JavaBean，须将Bean类文件放入Web应用程序目录的类文件夹WEB-INF\classes中（包名对应子目录名），这样就可使用jsp:useBean标记创建Bean类的实例：

<jsp:useBean id="Bean实例名" scope="有效期" class="Bean类名" />

然后如果Bean的属性有存取方法，就可以在HTML代码中使用jsp:setProperty标记设置Bean的属性值：

<jsp:setProperty name="Bean实例名" property="Bean的属性名" value="值" />

或者使用jsp:getProperty标记获取Bean的属性值：

<jsp:getProperty name="Bean实例名" property="Bean的属性名" />

也可以在JSP代码中使用标准Java语言执行Bean的方法。

JavaBean的有效期取值：
- page：有效期为当前页面
- request：有效期为请求页面（即当前页面提交信息后对象仍有效）
- session：有效期为用户会话（即用户关闭浏览器前对象一直有效）
- application：有效期为应用程序（即应用程序运行期间所有用户共享同一对象）

例：tools.MD5是一个MD5加密Bean，则类的字节码文件放置路径应为WEB-INF\classes\tools\MD5.class

先创建实例对象oMD5

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

然后就可以用类的getMD5ofStr方法将提交的密码变换为加密后的字符串

oMD5.getMD5ofStr(request.getParameter("password"))

11.3 Servlet类

Servlet是一种Java类，为javax.servlet.http.HttpServlet类的子类

编写Servlet需要引入javax.servlet和javax.servlet.http包（相应类库文件为Tomcat安装目录下的lib\servlet-api.jar）

可以使用与访问JSP页面相同的方式访问Servlet，包括以表单或URL参数的方式提交用户信息

（注意：实际上JSP技术的基础就是Servlet，JSP页面创建或修改后都是由JSP引擎自动转化为Servlet程序编译运行的）

11.4 使用Servlet

要在JSP中使用Servlet，首先须将Servlet类文件放入Web应用程序目录的类文件夹WEB-INF\classes中（包名对应子目录名）

然后在Web应用程序部署文件WEB-INF\web.xml中配置Servlet（此文件更改后Tomcat会自动重载Web应用程序）

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app>
    <servlet>
        <servlet-name>Servlet名</servlet-name>
        <servlet-class>Servlet类名</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Servlet名</servlet-name>
        <url-pattern>/Servlet访问路径</url-pattern>
    </servlet-mapping>
</web-app>

这样就可以用浏览器直接访问此Servlet

例：tools.UploadServlet是一个上传图片的Servlet，则类的字节码文件放置路径应为WEB-INF\classes\tools\UploadServlet.class

然后在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参数abc，则上传的图片会转为120像素的小图片abc.jpg再保存到服务器。

<form id="fileupload" action="upload?avatar=abc" method="POST" enctype="multipart/form-data">
        <input type="file" name="fileField" id="fileField">
</form>

JSP实验10 会员系统的实现

2012-12-03T18:09:05+08:00

实验目的：掌握会员子系统的实现过程

1 建立系统框架

1-1 创建站点和页面

首先用DW创建一个使用JSP技术的站点jsproot（站点目录使用tomcat的Web应用程序根目录ROOT）

使用现成的Web设计模板templatemo227，包括样例页面、图片和附加样式表，复制到站点目录，根据模板创建网站的样本页temp.jsp

本例中我们使用包括指令（Include）在所有页面中包括相同的顶部导航栏和底部信息栏文件，这样当需要调整这些设置时只需修改一次，具体做法如下：
- 建立header.jsp，保存样例页面中类名为site_title_bar_wrapper的div区段的内容
- 建立footer.jsp，保存样例页面中类名为footer_wrapper的div区段的内容
- 在页面body区段的开始和末尾分别添加包括指令<%@ include file="header.jsp" %>和<%@ include file="footer.jsp" %>

其他通用的页面元素例如左侧栏也可以使用包括指令。要使各页面中导航栏中相应栏目项能够设为当前项状态，需使header.jsp的导航链接的类名动态化，例如创建“主页”index.jsp和“相册”album.jsp两个栏目首页：

<li><a class="<%= section.equals("home")?"current":"" %>" href="index.jsp">主页</a></li>
<li><a class="<%= section.equals("album")?"current":"" %>" href="album.jsp">相册</a></li>

然后在各页面的顶端添加设置所属栏目变量值的代码段，例如主页index.jsp中：

<% String section = "home"; %>

1-2 添加数据库连接

准备好数据库文件cloud.mdb

在DW数据库面板中添加数据库连接conn

驱动程序为sun.jdbc.odbc.JdbcOdbcDriver
连接URL为jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/cloud.mdb

2 在线注册模块

2-1 注册页register.jsp

功能：显示注册新会员表单，将提交的注册信息保存到会员表

以首页为样本创建注册页register.jsp
在页顶添加代码段以正常处理表单提交的中文信息：<% request.setCharacterEncoding("utf-8"); %>
插入表单，表单中添加提示文本“请输入您的注册信息，带*号的为必填项：”，添加8行2列表格，表格中添加文本和文本域账号logname、密码password（密码文本域）、确认密码passrepeat（密码文本域）、联系电话phone、电子邮箱email、通讯地址address（多行文本域）、真实姓名realname和提交按钮

使用“行为”面板为表单添加“检查表单”行为，将账号和密码设为必填项
使用“服务器行为”面板添加“插入记录”服务器行为，插入成功后转到reg_success.jsp
继续添加“用户身份验证>检查新用户名”服务器行为，如果输入的用户名已存在则转到reg_exist.jsp

（补充说明：DW提供的行为不能检查两次密码是否一致，需要修改自动生成的JavaScript代码的MM_validateForm函数，在if (errors)之前手工添加检查两次密码是否一致的代码：）

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

2-2 提示注册成功页reg_success.jsp

功能：提示注册成功，并提供返回主页的链接

以index.jsp为样本创建提示注册成功页reg_success.jsp，添加“注册成功，欢迎你成为新会员！前往登录页面。”并添加前往index.jsp的链接。

2-3 提示账号已存在页reg_exist.jsp

功能：提示账号已存在，并提供返回注册页的链接

以reg_exist.jsp为样本创建提示账号已存在页reg_exist.jsp，添加“注册失败，你输入的账号已存在！返回注册页面。”并添加返回register.jsp的链接。

3 会员登录模块

3-1 登录页index.jsp

功能：在首页显示会员登录表单，将提交的账号和密码与会员表中的账号和密码进行比对，比对成功则显示欢迎信息，将登录账号存入阶段变量并隐藏登录表单

在首页index.jsp中插入表单，表单中添加文本域logname、密码文本域password和登录按钮，为表单添加“检查表单”行为，再添加“用户身份验证>登录用户”服务器行为，设置登录成功转到index.jsp或前一个URL，如果登录失败则转到log_fail.jsp

再在登录表单外围添加如下代码段，使得登录成功后不再显示登录表单而是欢迎登录会员的信息：

<% if (session.getAttribute("MM_Username") == null || session.getAttribute("MM_Username").equals("")) { %>
（此处为登录表单form区段）
<% } else { %>
        <h4>欢迎光临云端网，<%= session.getAttribute("MM_Username") %>！</h4>
<% } %>

（补充说明：阶段变量不能直接支持中文，获取包含中文的阶段变量后需要进行编码转换才能正常显示，参见以下代码）

byte b[] = session.getAttribute("MM_Username").toString().getBytes("iso-8859-1");
String str = new String(b, "utf-8");

3-2 提示登录失败页log_fail.jsp

功能：提示登录失败，并提供返回登录页的链接

以reg_exist.jsp为样本创建登录登录失败页log_fail.jsp，添加“登录失败，请重新输入登录信息！返回登录页面。”并添加返回index.jsp的链接。

3-3 登录用户注销登录

功能：注销登录实际上就是清除登录相关的阶段变量，已登录的会员应该能在任何页面注销登录

在header.jsp中的网站logo之后添加如下代码段，使得所有页面都显示当前登录会员信息：

<% if (session.getAttribute("MM_Username") == null || session.getAttribute("MM_Username").equals("")) { %>
	<a href="register.jsp">注册</a>
<% } else { %>
	<%= session.getAttribute("MM_Username") %>
<% } %>

在账号名之后添加文本“退出”，选定文本添加“用户身份验证>注销用户”服务器行为，注销后转到index.jsp

注册会员登录后的显示效果：

（下次课程将继续介绍会员子系统的修改资料、密码加密和上传头像功能）

JSP教学10 会员系统的设计

2012-11-30T14:55:26+08:00

教学目的：了解会员子系统的设计过程

在课程设计阶段，我们将完成一个综合性Web应用项目——“云端网”在线社区的开发（在功能完整的前提下尽量简化以方便学习）。
开发大型应用系统时应当通过初步设计将其划分出若干个相对独立的子系统模块，再进行分别的设计和实现。
本课将介绍项目的第一个子系统：会员子系统的设计过程。

10.1 需求描述

为“云端网”设计会员子系统，要求实现以下基本功能：

- 访问者可以在线注册，成为网站会员
- 会员可以使用账号和密码登录，并可退出登录
- 会员可以修改个人信息
- 会员可以上传图片作为个性化头像
- 会员的密码信息应当加密保存

10.2 功能设计

根据需求进行功能设计，使用简单的文本描述设计思路：

1）在线注册：主页提供“注册新会员”链接，注册页使用表单提交注册信息，存入会员表
2）会员登录：主页使用表单提交账号和密码，验证通过后显示个性化主页，在所有页面提供退出登录链接
3）修改个人信息：个性化主页提供“修改个人信息”链接，修改个人信息页使用表单提交个人信息，更新会员表
4）个性化头像：修改个人信息页提供“上传头像”链接，作为头像上传的图片应自动转换为统一的尺寸
5）密码加密：提交的密码信息使用MD5算法进行加密处理

10.3 数据库设计

根据功能要求确定使用的数据库系统及数据表结构（字段名和类型说明）：

- 会员表user

会员ID：userid 自动编号，主键
账号：logname 文本(15)，必填字段，有索引(无重复)
密码：password 文本(32)，必填字段
联系电话：phone 文本(20)
电子邮箱：email 文本(30)
通讯地址：address 文本(50)
真实姓名：realname 文本(20)

以上是一个最简化的会员表结构，可在此基础上继续加以完善。

JSP实验09 投票系统的实现

2012-11-24T19:00:51+08:00

实验目的：以投票系统为例，掌握Web应用项目的实现过程

1 建立系统框架

1-1 创建站点和页面

首先用DW创建一个使用JSP技术的站点jspvote
使用现成的Web设计模板Blue Rain，包括样例页面、图片和和附加样式表，复制到站点目录即可
编辑temp.htm作为原型页另存为其他页面（在导航菜单中加入三个相应的链接）：系统首页index.jsp，投票结果info.jsp，后台维护manage.jsp（及后台登录login.jsp）

1-2 添加数据库连接

准备好数据库文件vote.mdb，并输入一些数据供测试
在DW数据库面板中添加数据库连接connVote
驱动程序为sun.jdbc.odbc.JdbcOdbcDriver
连接URL为jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/vote.mdb

2 投票功能模块

2-1 首页index.jsp

功能：显示所有投票项供选择

打开首页index.jsp，添加记录集rsItems，获取voteinfo表的所有记录
插入表单，动作属性设为vote.jsp
表单中添加提示文本“请决定你的选择”，添加2行1列表格宽300像素
表格第一行单元格中添加单选钮id，选定值绑定到rsItems.id，单选钮后插入动态文本rsItems.item
选定表格第一行添加“重复区域”服务器行为
表格第二行插入投票按钮

2-2 投票处理页vote.jsp

功能：获取表单提交的投票项id，为voteinfo表相应投票项count字段加1

创建vote.jsp添加以下代码段即可：

<%@ include file="../Connections/connVote.jsp" %> 
<%
//根据统一设置创建数据库连接
Class.forName(MM_connVote_DRIVER);
Connection connVote = DriverManager.getConnection(MM_connVote_STRING,MM_connVote_USERNAME,MM_connVote_PASSWORD);
//根据表单提交的ID为voteinfo表相应投票项的count字段加1
PreparedStatement preUpdate = connVote.prepareStatement("UPDATE voteinfo SET count=count+1 WHERE id=?");
preUpdate.setObject(1, request.getParameter("id"));
preUpdate.executeUpdate();
connVote.close();
//投票后跳转至查看结果页
response.sendRedirect("info.jsp");
%>

（或是使用服务器行为，这会生成更通用但也更繁琐的代码）在数据工具栏中插入“已准备（插入、更新、删除）”，类型选择“更新”，SQL语句如下：
UPDATE voteinfo SET count=count+1 WHERE id=voteId
添加参数voteId，运行值为request.getParameter("id")
插入jsp:forward，跳转到info.jsp

2-3 投票结果页info.jsp

功能：显示各项得票数和得票率

添加2行3列表格宽500像素，第1行添加文本：投票项，得票数，得票率
添加记录集rsTotal，获取voteinfo表内容，再切换到高级模式修改查询语句：SELECT sum(count) as totalNum FROM voteinfo
添加记录集rsVotes，获取voteinfo表内容
在表格前插入代码段获取总票数赋值给变量: <% int totalNum=rsTotal.getInt("totalNum"); %>
在内容行投票项列插入动态文本显示投票项: rsVotes.item
在内容行左端插入代码段获取得票数赋值给变量: <% int num = rsVotes.getInt("count"); %>
在内容行得票数列插入表达式显示得票数和总票数: 得<%= num %>票，共<%= totalNum %>票
在内容行得票率列插入表达式显示得票率及柱形图: 得票率<img src="back.gif" width="<%= num*200/totalNum %>" height="9" /><%= num*100/totalNum %>%
（注意：由于计算得票率要用总票数作为分母，投票结果页必须已有人投票后才能正常显示，可以添加IP记录集不为空时才显示区域的服务器行为解决此问题）
选定内容行添加重复区域服务器行为显示rsVotes记录集的所有记录

2-4 防止重复投票

访问者投票的同时提交其IP地址信息，之后相同IP地址的访问者即无法再投票

修改系统首页index.jsp，在页顶添加代码段，用request对象获取访问者IP地址并赋值给阶段变量ip：
<% session.setAttribute("ip", request.getRemoteAddr()); %>
添加记录集rsIP，从voteip表中筛选ip字段等于阶段变量ip的记录
选定表单添加“如果记录集为空则显示区域”服务器行为，只有当rsIP记录集为空时才显示投票区域
再添加一条提示文本“你已经投过票了”并为其添加“如果记录集不为空则显示区域”服务器行为（也可以直接跳转到投票结果页）

再修改vote.jsp在更新投票数的代码段之后添加以下代码段（如果不保存阶段变量，则在此页面中需要再次获取访问者IP地址）：

//阶段变量ip写入voteip表的ip字段
PreparedStatement preInsert = connVote.prepareStatement("INSERT INTO voteip (ip) VALUES (?)");
preInsert.setObject(1, session.getAttribute("ip"));
preInsert.executeUpdate();

（注意：更新数据库中多个表的操作最好是作为一个事务来处理，如何修改以上代码实现事务处理请参看教学08的事务处理部分）

3 后台维护模块

3-1 系统维护首页manage.jsp

功能：显示各投票项及“删除”超链接，显示添加投票项表单

添加标题“维护投票项”，插入2行3列表格宽400像素，第1行输入文本：序号，投票项，维护
添加记录集rsItems，获取voteinfo表内容
第2行第3列输入文本“删除”，选定“删除”文本添加服务器行为: 转到详细页面delete.jsp，传递参数id
第2列插入rsItems.item
第1列插入JSP表达式: <%= Repeat1__index + 1 %>
选定item行添加服务器行为: 重复区域

添加标题“添加投票项”，插入表单，表单中加入文本域item和提交按钮
添加“插入记录”服务器行为
在页顶添加代码段以支持提交中文: <% request.setCharacterEncoding("utf-8"); %>

3-2 删除投票项处理页delete.jsp

功能：获取URL参数投票项id，删除vote表相应投票项记录

创建delete.jsp添加以下代码段即可：

<%@ include file="../Connections/connVote.jsp" %>
<%
//根据统一设置创建数据库连接
Class.forName(MM_connVote_DRIVER);
Connection connVote = DriverManager.getConnection(MM_connVote_STRING,MM_connVote_USERNAME,MM_connVote_PASSWORD);
//根据表单提交的ID删除voteinfo表中相应投票项
PreparedStatement preDelete = connVote.prepareStatement("DELETE FROM voteinfo WHERE id = ?");
preDelete.setObject(1, request.getParameter("id"));
preDelete.executeUpdate();
connVote.close();
//删除后跳转至后台维护页
response.sendRedirect("manage.jsp");
%>

（或）添加服务器行为: 已准备（插入、更新、删除）
DELETE FROM voteinfo WHERE id=voteId
添加参数voteId，运行值为request.getParameter("id")
插入jsp:forward跳转到manage.jsp

3-3 管理员登录login.jsp

功能：显示管理员登录表单

添加标题“输入登录信息”，插入表单，添加3行2列表格宽350像素，添加文本域name、文本域password（类型属性为密码）和登录按钮
添加“登录用户”服务器行为，连接admin表验证账号和密码，登录成功跳转到manage.jsp，登录失败跳转到login.jsp

为manage.jsp页添加“限制对页的访问”服务器行为，如果访问被拒绝跳转到login.jsp
再次点击“后台维护”链接时就会转到登录页面

现在这个投票系统已经初步完成，大家还可以考虑如何进一步完善，例如：

如果要实现设置多个投票主题，可以增加投票主题表，投票信息表和投票IP表也需要加上投票主题ID字段。即可添加新的投票主题开始新一轮投票。
如果要实现多选投票：可以使用复选框提交表单信息，request对象接收参数后可将其作为数组处理
如果要增加各投票项的对应图片，可以参照前述上传图片到数据库的方法。

JSP教学09 投票系统的设计

2012-11-22T20:22:48+08:00

教学目的：以投票系统为例，了解Web应用项目的设计过程

9.1 需求描述

设计一个最简单的在线投票系统，要求实现以下功能：

- 显示所有投票项，访问者可以选择其中一项并点击投票按钮完成投票。
- 显示当前投票情况，包括各投票项的票数、总票数、得票率，并以柱形图直观表示。
- 提供后台维护，管理员可以添加和删除投票项
- 提供防止访问者重复投票的机制

9.2 功能设计

根据需求进行功能设计，使用简单的文本描述设计思路：

1）投票：首页使用表单提交投票信息，一个投票项对应一个单选钮
2）显示投票情况：查看投票情况页显示各选项的票数、总票数、得票率，以柱形图片的宽度直观表示
3）后台维护-管理员登录：登录页使用表单提交账号和密码，验证通过后进入后台维护首页
4）后台维护-删除投票项：后台维护首页显示所有投票项和对应的删除链接
5）后台维护-添加投票项：后台维护首页使用表单提交新投票项信息
6）防止重复投票：访问者投票的同时提交其IP地址信息，之后相同IP地址的访问者即无法再投票

可以使用DW创建各个静态页面作为系统的界面原型。

对于更复杂系统的功能设计可分为初步设计和详细设计，初步设计为系统划分出功能模块，详细设计为各模块的具体实现确定思路。

在设计阶段还可以绘制模块结构图、系统流程图和界面原型图等作为辅助。

9.3 数据库设计

根据功能要求确定使用的数据库系统及数据表结构（字段名和类型说明）：

1）管理员表admin

管理员ID：id 自动编号，主键
管理员帐号：name 文本(50)
管理员密码：password 文本(50)

2）投票信息表voteinfo

投票项ID：id 自动编号，主键
投票项名称：item 文本(50)
投票项得票数：count 数字(长整型)

3）投票者IP表voteip

投票者ID：id 自动编号，主键
投票者IP：ip 文本(15)

以上是一个最简化的投票系统数据库结构，可在此基础上继续加以完善。

对于更复杂的数据库结构应该使用表格来描述，并绘制数据表间关系图。

JSP实验08 图片存入数据库

2012-11-15T13:58:16+08:00

实验目的：掌握在JSP中存取数据库图片字段的方法。

本实验使用示例数据库Northwind，实现雇员表Employees中图片字段的存取。Employees表的Photo字段为“图片类型”（或称“二进制数据”，实际上能以字节形式原样保存任何文件）。

1 文件上传组件

本实验使用了开源项目文件上传组件并需要输入输出组件的支持，因此要先将相应的类库文件commons-fileupload-1.2.2.jar和commons-io-2.4.jar放到Java类库文件夹。

首先创建主页面index.jsp，参照教学6.4，完成以表格显示雇员信息功能（连接名称为conn，记录集名称为rs），除雇员号、姓氏、名字和职位外，再增加一个“照片”列用于显示雇员照片。在照片列的内容单元格中插入图像标签并设置属性：替换文本是“照片”（这样如果雇员还没有照片，则会在页面中显示替换文本），源文件是showimg.jsp并传递EmployeeID参数（即由 showimg.jsp负责输出相应雇员的照片数据）；链接是upimg.jsp并也传递EmpoyeeID参数（这样点击图片时将由upimg.jsp 负责上传相应雇员的照片文件）。

2 上传图片并写入图片字段

创建图片上传页面upimg.jsp，先在页顶引入所需的类：

<%@ page import="java.io.*" %>
<%@ page import="java.util.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.*" %>

再用以下代码段根据统一设置创建数据库连接：

<%@ include file="../Connections/conn.jsp" %>
<%
Class.forName(MM_conn_DRIVER);
Connection conn = DriverManager.getConnection(MM_conn_STRING,MM_conn_USERNAME,MM_conn_PASSWORD);
%>

在页面中添加表单，在表单中插入一个文件域photo和一个提交按钮，DW会自动设置提交文件数据的表单编码方式enctype="multipart/form-data"

最后添加以下代码段上传图片并保存到雇员表的图片字段

<%  //上传图片
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (isMultipart) {  //提交了文件
	FileItemFactory factory = new DiskFileItemFactory();
	ServletFileUpload upload = new ServletFileUpload(factory);
	List<FileItem> items = upload.parseRequest(request);
	Iterator iter = items.iterator();
	while (iter.hasNext()) {
		FileItem item = (FileItem) iter.next();
		if (item.isFormField()) {  //普通域
		}
		else {  //文件域
			/*以下代码段用于保存到服务端目录
			String fileName = item.getName();
			File saveFile = new File(config.getServletContext().getRealPath("/") + fileName);
			item.write(saveFile);*/
			/*以下代码段用于读取字节输入流
			InputStream is = item.getInputStream();
			byte b[] = new byte[is.available()];
			is.read(b);*/
			//以下代码段用于写入数据库图片字段并跳转回主页面
			byte b[] = item.get();
			String sql = "UPDATE Employees SET photo=? WHERE EmployeeID=?";
			PreparedStatement pstmt = conn.prepareStatement(sql);
			pstmt.setBytes(1, b);
			pstmt.setString(2, request.getParameter("EmployeeID"));
			pstmt.execute();
			pstmt.close();
			response.sendRedirect("index.jsp");
		}
	}
}
%>

上传的图片文件也可以保存到服务器目录，或是用来创建字节输入流，具体方法请参看上面代码段中被注释掉的部分。

3 读取图片字段在页面中显示

创建图片显示页面showimg.jsp，先在页顶引入所需的类：

<%@ page import="java.io.*" %>

再在绑定面板中创建记录集rsImg，根据提交的EmployeeID参数筛选出唯一的雇员记录（只需Photo列即可）。

最后添加以下代码段即可读取图片字段并输出：

<%
response.setContentType("image/jpeg");
OutputStream os = response.getOutputStream();
byte[] b = rsImg.getBytes("Photo");
os.write(b);
os.flush();
os.close();
%>

如果采用图片文件上传到服务器目录而在数据库中保存图片文件名的方式，则图像标签的源文件属性设为图片文件的相对路径即可。

（注意：Northwind数据库的Employees表的Photo字段实际上已存有图片数据，但此数据包含78字节的头信息，因此输出字节流时要指定开始位置为78才能正常显示原有图片os.write(b, 78, b.length-78)。）

JSP教学08 数据库高级功能

2012-11-13T14:13:23+08:00

教学目的：了解如何在JSP中使用数据库系统的高级功能，例如预存过程、事务处理和图片字段等。

8.1 使用预存过程

预存过程（Stored Procedure）是在大型数据库系统中，一组为了完成特定功能的SQL语句集，经编译后存储在数据库中，用户通过指定预存过程的名字并给出参数（如果预存过程带有参数）来执行它。使用预存过程可以减少网络通信量、提高执行速度并增强安全性。

（注意：Access数据库中也有类似预存过程的“查询”，但功能有限，不支持多条SQL语句，也不能使用逻辑语句）

预存过程的编写请参看相关的数据库学习资料，这里只介绍预存过程的使用（以SQL Server的示例数据库Northwind为例）。

执行“产品价格排行榜”预存过程Ten Most Expensive Products，返回最贵的十种产品（产品名、单价）：

EXEC [dbo].[Ten Most Expensive Products]

执行“客户订单详情”预存过程CustOrdersDetail（需要传入订单号参数）即可查询产品表和订单详情表，返回指定的客户订单详情（产品名、单价、数量、折扣、合计金额）：

EXEC [dbo].[CustOrdersDetail] 10250

在JSP中执行预存过程的基本方法和执行普通的SQL语句一样，使用Statement对象的excecuteQuery方法即可：

String proc = "EXEC [dbo].[CustOrdersDetail] 10250";
Statement stat = conn.createStatement();
ResultSet rs = stat.executeQuery(proc);

自动化的方式则是在DW的绑定面板中点击添加按钮选择“可调用（预存过程）”，在弹出对话框中选择预存过程、输入变量默认值和运行时值，并设置返回记录集即可。

（注意：如果DW绑定面板中添加带空格的过程名则会出现错误，请避免在过程名中使用空格）

8.2 实现事务处理

事务（Transaction）是由多个数据操作组成的一个处理单元，组成事务的操作必须全部都成功执行，如果其中一个操作失败，则系统将撤销所有其他操作，恢复本次事务处理之前的状态。事务是保证数据完整性与一致性的重要机制。

JDBC实现事务处理的机制如下：

1）连接对象创建后调用setAutoCommit(false)方法关闭自动提交模式
2）连接对象调用createStatement方法创建语句对象
3）语句对象执行各项数据操作
4）连接对象调用commit方法让所有操作生效
5）任何一项数据操作抛出异常时，连接对象调用rollback方法回滚到初始状态

例如以下“职位调整”事务由雇员1晋级雇员2降级两个操作组成：

try {
	conn.setAutoCommit(false); //不自动提交操作
	String sql1 = "UPDATE Employees SET Title='销售副总裁' WHERE EmployeeID=1";
	String sql2 = "UPDATE Employees SET Title='销售代表' WHERE EmployeeID=2";
	Statement stmt=conn.createStatement();
	stmt.executeUpdate(sql1);
	stmt.executeUpdate(sql2);
	conn.commit(); //统一提交。
	out.print("职位调整已完成！");
}
catch (SQLException e){
	conn.rollback(); //任何一项操作失败则撤消所有操作
	out.print("职位调整未完成！");
}

8.3 读写图片字段

许多Web应用都需要将图片信息存入数据库，此功能可通过两种方式实现：一是上传图片到服务器目录后在数据库中保存图片文件名；二是将上传图片内容直接存入数据库，前者实现起来较复杂但能够节省资源，后者实现起来更容易但十分消耗资源（数据库存储空间的成本远高于普通存储空间，数据库尺寸成倍增大也会影响运行效率），在实际开发中可以根据具体情况进行选择。保存图片文件名可使用普通文本型字段，保存图片内容要使用字节型的图片字段。

例：上传雇员照片到示例数据库并在页面中显示

JSP实验07 编辑数据库

2012-11-05T19:37:36+08:00

实验目的：掌握在JSP中编辑数据库的方法

本次实验使用Access数据库Northwind.mdb的英文版或中文版，实现雇员表Employees的编辑功能（添加/更新/删除），该表包含的必填字段如下：

英文版字段名	中文版字段名	数据类型和长度	说明
EmployeeID	雇员ID	自动编号	主键
LastName	姓氏	文本(20)
FirstName	名字	文本(10)
Title	职务	文本(30)

1 编辑记录

本例以JDBC-ODBC桥接方式连接数据库编辑雇员表。

所有编辑功能采用弹出模态窗口的形式以方便操作，在主页面中添加JavaScript客户端脚本（这里为简化脚本的编写而引入了JavaScript库jQuery），为所有popup类元素的单击事件添加处理函数）：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".popup").click(function() {
        showModalDialog($(this).attr("href"), window, "status:0;dialogWidth:" + $(this).data('width') + ";dialogHeight:" + $(this).data('height'));
        return false;
    });
});
</script>

一、创建主页面main.jsp，添加代码查询雇员表：

<%
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conn = DriverManager.getConnection("jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/Northwind.mdb");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM Employees");
%>

然后以表格形式输出所有记录，加上添加/修改/删除链接（修改和删除链接都要传递雇员号作为参数，而ODBC驱动不允许多次读取同一字段，因此取出雇员号字段值后先赋值给变量）：

<table border="1">
<tr>
<th>雇员号</th>
<th>姓</th>
<th>名</th>
<th>职位</th>
<th><a class="popup" data-width="400px" data-height="150px" href="add.jsp">+ 添加</a></th>
</tr>
<%
while (rs.next()) {
%>
<tr><% String EmployeeID = rs.getString("EmployeeID"); %>
<td><%= EmployeeID %></td>
<td><%= rs.getString("LastName") %></td>
<td><%= rs.getString("FirstName") %></td>
<td><%= rs.getString("Title") %></td>
<td>
<a class="popup" data-width="400px" data-height="150px" href="edit.jsp?EmployeeID=<%= EmployeeID %>">修改</a>
<a class="popup" data-width="400px" data-height="150px" href="del.jsp?EmployeeID=<%= EmployeeID %>">删除</a>
</td>
</tr>
<%
}
%>
</table>

二、创建添加记录页面add.jsp，加入表单用文本域提交姓/名/职位信息，使用以下代码根据表单提交的参数插入新记录（添加记录后刷新主页面并关闭本页面）

<%  
request.setCharacterEncoding("utf-8");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conn = DriverManager.getConnection("jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/Northwind.mdb");
Statement stmt = conn.createStatement();
String LastName = request.getParameter("LastName");
String FirstName = request.getParameter("FirstName");
String Title = request.getParameter("Title");
if (LastName != null && FirstName != null && Title != null) {
    stmt.executeUpdate("INSERT INTO Employees (LastName, FirstName, Title) VALUES ('" + LastName + "', '" + FirstName + "', '" + Title + "')" );
%>
    <script type="text/javascript">
    window.opener.location.reload();
    window.close();
    </script>
<%
}
%>

三、创建修改记录页面edit.jsp，根据雇员号参数查询雇员信息在表单中显示并允许编辑（使用文本域的value属性即可），使用以下代码根据表单提交的参数修改记录（修改记录后刷新主页面并关闭本页面）

<%  
request.setCharacterEncoding("utf-8");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conn = DriverManager.getConnection("jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/Northwind.mdb");
Statement stmt = conn.createStatement();
String EmployeeID = request.getParameter("EmployeeID");
String LastName = request.getParameter("LastName");
String FirstName = request.getParameter("FirstName");
String Title = request.getParameter("Title");
if (LastName != null && FirstName != null && Title != null) {
    stmt.executeUpdate("UPDATE Employees SET LastName='" + LastName + "', FirstName='" + FirstName + "', Title='" + Title + "' WHERE EmployeeID=" + EmployeeID);
%>
<script type="text/javascript">
    window.opener.location.reload();
    window.close();
    </script>
<%
}
ResultSet rs = stmt.executeQuery("SELECT * FROM Employees WHERE EmployeeID=" + EmployeeID);
rs.next();
%>

四、创建删除记录页面del.jsp，根据雇员号参数查询雇员信息在表单中显示（不允许编辑），使用以下代码根据完成删除操作（删除记录后刷新主页面并关闭本页面）

<%  
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conn = DriverManager.getConnection("jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/Northwind.mdb");
Statement stmt = conn.createStatement();
String EmployeeID = request.getParameter("EmployeeID");
String del = request.getParameter("del");
if (del != null) {
    stmt.executeUpdate("DELETE FROM Employees WHERE EmployeeID=" + EmployeeID);
%>
    <script type="text/javascript">
    window.opener.location.reload();
    window.close();
    </script>
<%
}
ResultSet rs = stmt.executeQuery("SELECT * FROM Employees WHERE EmployeeID=" + EmployeeID);
if (rs.next()) {
%>
<body>
<form id="form1" name="form1" method="post" action="">
    <table width="360" border="1">
        <tr>
            <td>姓：</td>
            <td><%= rs.getString("LastName") %></td>
        </tr>
        <tr>
            <td>名：</td>
            <td><%= rs.getString("FirstName") %></td>
        </tr>
        <tr>
            <td>职位：</td>
            <td><%= rs.getString("Title") %></td>
        </tr>
        <tr>
            <td><input name="del" type="hidden" id="del" value="yes" /></td>
            <td><input type="submit" name="button" id="button" value="确定删除" /></td>
        </tr>
    </table>
</form>
</body>
<%
}
%>

2 编辑记录（DW自动生成代码）

本例使用Dreamweaver的服务器行为自动生成代码来实现雇员表的编辑功能（注意：CS3及以下版本的DW不支持中文字段名）。

一、创建主页面index.jsp，参照教学6.4，完成显示雇员表功能：

“+ 添加”文本链接到添加记录页面insert.jsp，“修改”和“删除”文本分别添加“转到详细页面”服务器行为，目标分别是修改记录页面update.jsp和删除记录页面delete.jsp

二、创建添加记录页面insert.jsp，加入表单用文本域提交姓/名/职位信息，添加“插入记录”服务器行为即可（注意设置请求信息的字符编码以支持提交中文：<% request.setCharacterEncoding("utf-8"); %>）

三、创建修改记录页面update.jsp，根据雇员号参数查询雇员信息在表单的文本域中显示，添加“更新记录”服务器行为即可（注意设置请求信息的字符编码以支持提交中文：<% request.setCharacterEncoding("utf-8"); %>）

四、创建删除记录页面delete.jsp，根据雇员号参数查询雇员信息在表单中显示，添加“删除记录”服务器行为即可

JSP教学07 数据库的写入

2012-10-30T14:53:01+08:00

教学目的：了解如何在JSP中更新数据库内容，包括记录的添加、修改和删除

更新数据库内容的包括记录的添加、修改和删除，这些操作在JSP中可以通过执行语句对象的executeUpdate方法来实现的。

int executeUpdate(String sql) //sql参数为要执行的数据操作SQL语句(INSERT/UPDATE/DELETE)，返回值是受影响的记录条数

本次教学完成通过JSP页面更新示例数据库Northwind的雇员表Employees记录的三种操作：

7.1 添加记录

添加记录的SQL语句为：

INSERT INTO 表名 (字段列表) VALUES (值列表)

如在雇员表中添加一条记录：

INSERT INTO Employees (LastName, FirstName, Title) VALUES ('刘', '三', '销售代表')

7.2 修改记录

修改记录的SQL语句为：

UPDATE 表名 SET (字段赋值列表) WHERE 筛选条件

如修改雇员表中指定雇员号的记录：

UPDATE Employees SET LastName='李', FirstName='四', Title='副总裁' WHERE EmployeeID=10

7.3 删除记录

删除记录的SQL语句为：

DELETE FROM 表名 WHERE 筛选条件

如删除雇员表中指定雇员号的记录：

DELETE FROM Employees WHERE EmployeeID=10

7.4 使用DW的服务器行为写入数据库

使用DW的服务器行为面板，能够以所见即所得的方式自动生成添加、修改和删除记录的代码而不必手工编写。

使用以上写入数据类服务器行为都需要先创建相应的表单，使用修改和删除记录的服务器行为还需要先绑定一个筛选出单条记录的记录集。

JSP实验06 查询数据库

2012-10-26T09:22:37+08:00

实验目的：掌握在JSP页面中查询数据库的方法

本次实验使用Access数据库Book.mdb，表名为bookForm，包含字段如下：

字段名称	数据类型和长度	说明
bookISBN	文本(50)	书号，该字段为主键
bookName	文本(50)	书名
bookAuthor	文本(50)	作者
bookPrice	数字	价格，单精度浮点数
bookPublish	文本(50)	出版社
bookTime	日期/时间	出版时间
bookAbstract	文本（255）	摘要

1 查询记录

本例使用自定义标记以JDBC-ODBC桥接方式连接数据库查询图书，用户可以输入查询条件和文本，例如书名包含“JSP”的所有图书。

首先创建图书查询页面inputMess.jsp，首先在页顶添加指令引入自定义标记：

 <%@ taglib tagdir="/WEB-INF/tags" prefix="findBook" %>

在页面中添加表单，在表单中添加文本域findContent、列表框condition（包含书名/作者/出版社/出版时间/内容提要等5个选项）和提交接钮：

继续在页面中添加代码段获取表单提交的查询文本和查询条件，添加自定义标记执行查询操作，添加表达式显示结果：

<%  
String findContent = request.getParameter("findContent");
String condition = request.getParameter("condition");
if (findContent == null) {
    findContent = "";
}
if (condition == null) {
    condition = "";
}
byte b[]=findContent.getBytes("iso-8859-1");
findContent=new String(b, "utf-8");
%>
<findBook:FindBook dataSource="Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/Book.mdb"
    tableName="bookForm"
    findContent="<%= findContent %>"
    condition="<%= condition %>" />
<%= giveResult %>

接下来在在/WEB-INF/tags下创建标记文件FindBook.tag，内容如下：

<%@ tag import="java.sql.*" %>
<%@ tag pageEncoding="utf-8" %>
<%@ attribute name="dataSource" required="true" %>
<%@ attribute name="tableName" required="true" %>
<%@ attribute name="findContent" required="true" %>
<%@ attribute name="condition" required="true" %>
<%@ variable name-given="giveResult" variable-class="java.lang.StringBuffer" scope="AT_END" %>
<%  
try {
    Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
}
catch(ClassNotFoundException e){
    out.print(e);
}
Connection con;
Statement sql;
ResultSet rs;
StringBuffer queryResult = new StringBuffer();
String uri = "jdbc:odbc:" + dataSource;
try {
    con = DriverManager.getConnection(uri,"","");
    sql = con.createStatement();
    String s = "SELECT * FROM " + tableName + " WHERE " + condition + " Like'%" + findContent + "%'";
    rs=sql.executeQuery(s);
    queryResult.append("查询到的图书：");
    queryResult.append("<table border=1>");
    queryResult.append("<tr>");
    queryResult.append("<th>ISBN</td>");
    queryResult.append("<th>图书名称</td>");
    queryResult.append("<th>作者</td>"); 
    queryResult.append("<th>价格</td>");
    queryResult.append("<th>出版社</td>");
    queryResult.append("<th>出版时间</td>");
    queryResult.append("<th>摘要</td>");
    queryResult.append("</tr>");
    int fields = 7;
    while (rs.next()) {
        queryResult.append("<tr>");
        String bookISBN = "";
        for (int k=1; k<=fields; k++) {
            if (k == 7) {
                String bookAbstract = rs.getString(k);
                String abs = "<textarea rows=6 colums=10/>" + bookAbstract + "</textarea>";
                queryResult.append("<td>" + abs + "</td>");
            }
            else {
                queryResult.append("<td>"+rs.getString(k)+"</td>");
            }
        }
    }
    queryResult.append("</table>"); 
    jspContext.setAttribute("giveResult",queryResult);
    con.close();
}
catch(SQLException exp){
    jspContext.setAttribute("giveResult",new StringBuffer("请设置查询条件。"));
}
%>

完成后在浏览器中运行inputMess.jsp，输入查询文本并选择查询条件，点击提交按钮执行查询：

2 查询记录（DW自动生成代码）

本例使用Dreamweaver的数据库面板自动生成代码来实现图书查询功能。

首先创建图书查询页面findBook.jsp，在页面中添加与上例相同的查询表单，提交查询内容参数findContent和查询字段参数condition。

接下来创建数据库连接：在数据库面板中点击“+”按钮，选择“自定义JDBC连接”；在“自定义JDBC连接”对话框中设置连接信息，连接名称为connBook，驱动程序为com.hxtt.sql.access.AccessDriver，URL为jdbc:access:/d:/Book.mdb，点击“测试”按钮测试连接，点击“确定”按钮完成连接的创建。

接下来是绑定记录集：切换到“绑定”面板，点击“+”按钮，选择“记录集（查询）”；在“记录集”对话框中设置记录集信息：名称为rsBook，连接为connBook，表格为bookForm，先设置筛选为bookName包含URL/表单变量findContent。点击“测试”按钮测试，点击“确定”按钮完成记录集的创建。

注意：在记录集对话框中只能设置筛选书名字段的内容，而不能根据用户提交的参数改变要筛选的字段。想实现更复杂的查询记录集，还需要对自动生成的代码进行一些修改。

在页顶添加以下代码段，获取用户提交的查询条件参数condition，默认值设为书名字段bookName：

<%
request.setCharacterEncoding("utf-8");
String condition = "bookName";
if (request.getParameter("condition") != null) {
    condition = request.getParameter("condition");
}
%>

然后在代码中找到rsBook记录集对应的查询语句，即下面这一行：

PreparedStatement StatementrsBook = ConnrsBook.prepareStatement("SELECT * FROM bookForm WHERE bookName LIKE ?");

修改查询语句将固定的书名字段改为变量：

PreparedStatement StatementrsBook = ConnrsBook.prepareStatement("SELECT * FROM bookForm WHERE " + condition + " LIKE ?");

接下来是添加显示记录集第一条记录的各个字段的动态文本，在页面中添加一个2行7列的表格，先输入表头文本，然后将绑定面板中rsBook记录集的各个拖到表格第2行的各个单元格即可：

然后还要通过循环显示记录集的所有记录：先在页面中选定动态文本所在的行，切换到“服务器行为”面板，点击“+”按钮，选择“重复区域”，在重复区域对话框中选择显示rsBook记录集的所有记录即可。

注意如果查询所得的rsBook记录集中没有任何记录，运行显示记录的服务器行为就会导致错误，因此还需要选中整个表格并添加一个有条件显示区域的服务器行为，如果记录集不为空则显示区域：

可以看到DW能够自动生成各种通用功能的代码，为Web应用程序的开发提供极大的便利，但要满足更特殊的需求、实现更灵活的功能，阅读和修改代码仍然是开发者必须掌握的能力。

JSP教学06 数据库的连接

2012-10-19T14:46:14+08:00

教学目的：了解如何在JSP中连接和查询数据库

6.1 数据库与JDBC

Web应用程序大都需要数据库系统的支持，JSP通过JDBC来实现数据库操作。

JDBC即“Java数据库连接”，是Java平台的一个标准应用程序接口（API）。

JDBC定义了Java平台上数据库驱动的编写和使用规范，采用标准查询语言（SQL）并支持与“开放数据库互连”（ODBC）应用程序接口之间的桥接。

JDBC的主要对象：

Driver：驱动，负责加载特定种类的数据库
DriverManager：驱动管理器，负责管理所有种类的数据库驱动
Connection：连接，负责与数据库进行通讯
Statement：语句，负责封装标准查询语言的语句并传递给数据库
ResultSet：结果集，负责存放查询数据库所返回的临时表，一个结果集包含若干条记录（行），一条记录包含若干个字段（列）

JDBC对象相应的类和接口都属于数据库类包java.sql.*，访问数据库的JSP页面需要引入此类包（注意：DW创建的JSP页面默认都添加了引入此类包的指令代码）

6.2 连接数据库

要在JSP页面中建立数据库连接，首先需使用Class类的forName方法加载特定的数据库驱动：

static Class forName(String className) //className参数是要加载的数据库驱动类名

然后再使用DriverManager类的getConnection方法创建数据库连接对象：

static Connection getConnection(String url) //url参数是数据库连接字符串，不同的数据库使用不同的连接字符串

如果某种数据库没有JDBC驱动但有ODBC驱动，则可以使用JDK内置的JDBC-ODBC桥接器建立数据库连接对象（驱动类名是sun.jdbc.odbc.JdbcOdbcDriver）

例：使用JDBC-ODBC桥接器驱动连接Access数据库

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conn = DriverManager.getConnection("jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/Northwind.mdb");

使用JDBC-ODBC桥接器驱动连接SQL Server数据库

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conn = DriverManager.getConnection("jdbc:odbc:Driver={SQL Server};Server=localhost;Database=Northwind;Uid=leo;Pwd=123");

也可以在操作系统提供的“ODBC数据源管理器”中预先添加数据源，则此处的连接字符串只要写为“jdbc:odbc:数据源名”即可。SQL Server 2000原版存在安全漏洞所以操作系统会自动禁止通过TCP/IP协议连接，只允许连接本机数据源，必须打上SP4补丁方可启用网络方式访问。

（注意：使用JDBC-ODBC桥接器连接数据库在可用功能和运行效率上存在不足，只要某种数据库提供了专门的JDBC驱动，就应当避免使用JDBC-ODBC桥接器。）

数据库厂商大都会提供其数据库的JDBC驱动程序，JDBC驱动程序通常是一个jar文件，其中包含了特定的数据库驱动类，将其复制到以下Java类库文件夹之一并重启Tomcat即可使用：

1、JDK安装目录下的jre\lib\ext文件夹：本机上运行的所有Java应用程序都可使用该驱动
2、Tomcat安装目录下的lib文件夹：Tomcat上运行的所有Web应用程序都可使用该驱动
3、Web应用程序目录下的WEB-INF\lib文件夹：只有该Web应用程序可使用该驱动

（注意：第一个文件夹是Java的默认类库，DriverManager的getConnection方法会根据连接字符串参数确定数据库类型自动加载其中的数据库驱动，不必使用Class类的forName方法预先加载）

例：使用专门的JDBC驱动连接Access数据库（驱动类名为com.hxtt.sql.access.AccessDriver，注意这是第三方出品的商业软件，演示版有50次查询限制，仅能用于学习场合）

Class.forName("com.hxtt.sql.access.AccessDriver");
Connection conn = DriverManager.getConnection("jdbc:access:/d:/Northwind.mdb");

使用专门的JDBC驱动连接SQL Server数据库（驱动类名为com.microsoft.sqlserver.jdbc.SQLServerDriver）

Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
Connection conn = DriverManager.getConnection("jdbc:sqlserver://localhost;DatabaseName=Northwind;User=leo;Password=123");

（注意：SQL Server 2000必须打上SP4补丁才能使用3.0以下版本的JDBC驱动，微软最新版驱动也已经不再支持SQL Server 2000）

建立数据库连接之后，就可与数据库进行各种交互，例如查询、添加、修改和更新等操作，不论是对哪种数据库，这些操作所使用的代码都是一样的。

6.3 查询记录

在JSP页面建立数据库连接对象后，可以使用JDBC提供的API发送SQL语句实现和数据库的交互，下面介绍查询记录操作的具体步骤。

首先让连接对象调用createStatement方法创建一个语句对象（在实际应用中更常见的是用prepareStatement方法创建一个“预处理语句”对象PreparedStatement，这样可以向SQL中动态地传入参数）：

Statement createStatement()

然后再让语句对象调用executeQuery方法获得一个结果集对象：

ResultSet executeQuery(String sql) //sql参数是要执行的查询语句

结果集对象先执行next方法按行移动数据游标，再执行get方法获得当前行的特定字段值（传入参数为字段名字符串或字段序号数值）

boolean next() //如果返回flase，说明数据游标已经移至结果集的末尾，不能再执行get方法

操作完毕后应当让结果集对象、语句对象和连接对象调用close方法关闭对象以及时释放系统资源

void close()

例：在示例数据库Northwind中查询雇员表Employees并以表格形式在页面中输出所有雇员的编号、姓名和职位

<%  
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM Employees");
%>
<body>
<table>
<tr>
<td>雇员号</td>
<td>姓</td>
<td>名</td>
<td>职位</td>
</tr>
<%
while (rs.next()) {
%>
<tr>
<td><%= rs.getString("EmployeeID") %></td>
<td><%= rs.getString("LastName") %></td>
<td><%= rs.getString("FirstName") %></td>
<td><%= rs.getString("Title") %></td>
</tr>
<%
}
%>
</table>

6.4 使用DW的数据库面板连接数据库

使用DW的数据库面板，能够以所见即所得方式自动生成操作数据库的代码而不必手工编写，为Web应用程序的开发提供更多便利。

（注意：使用CS4以上版本的DW的数据库面板，需要将专用JDBC驱动复制到DW安装目录下的configuration\JDBCDriver文件夹中，否则以专用JDBC驱动连接数据库时会提示找不到类；还需要将JDK安装目录下的jre\lib\charsets.jar复制到DW安装目录下的jvm\lib文件夹中，否则以专用JDBC驱动连接SQL Server数据库时会提示不支持中文排序规则，以JDBC-ODBC驱动连接数据库时也会提示不支持中文编码）

例：使用DW的数据库面板访问罗斯文商贸数据库并查询雇员表中的记录

首先创建Web应用程序页面，在数据库面板中点击“+”按钮，选择“自定义JDBC连接”

在“自定义JDBC连接”对话框中设置连接信息，连接名称为conn，驱动程序为com.hxtt.sql.access.AccessDriver，URL为jdbc:access:/d:/罗斯文.mdb，点击“测试”按钮测试连接，点击“确定”按钮完成连接的创建。

（注意：CS3以下版本的DW不能直接使用本机的驱动程序，建立数据库连接时应选择“使用测试服务器上的驱动程序”）

创建连接后即可在数据库面板中直接查看数据库的内容。

第二步是绑定记录集（即结果集），切换到“绑定”面板，点击“+”按钮，选择“记录集（查询）”

在“记录集”对话框中设置记录集信息：名称为rsEmployees，连接为conn，表格为雇员，按默认设置返回所有记录，点击“测试”按钮测试记录集，点击“确定”按钮完成记录集的创建

绑定记录集后即可在记录集面板看到记录集的全部字段。

第三步是添加显示记录集第一条记录的各个字段的动态文本，在页面中添加一个2行4列的表格，先输入表头文本，然后将绑定面板中rsEmployees记录集的“姓氏”字段直接拖到表格第2行的第1个单元格即可将动态文本放入单元格。以同样方法将其他字段分别放入第2行的其他单元格：

第四步是通过循环显示记录集的所有记录，先在页面中选定动态文本所在的行，切换到“服务器行为”面板，点击“+”按钮，选择“重复区域”

在“重复区域”对话框中设置重复区域服务器行为，记录集为rsEmployees，显示所有记录，点击“确定”按钮添加重复区域服务器行为

最后在浏览器中运行页面查看显示效果（出生日期字段的动态文本应设为只显示日期，可以修改代码用getString方法或，在绑定面板中设置显示格式）

DW会以指定连接名在Connections目录下创建连接文件供整个站点的所有页面引用，这样修改数据库连接设置时只需修改一个文件即可。如果需要基于这个统一的设置手动创建连接对象可以用如下的代码段：

<%@ include file="../Connections/conn.jsp" %>
<%
Class.forName(MM_conn_DRIVER);
Connection conn = DriverManager.getConnection(MM_conn_STRING,MM_conn_USERNAME,MM_conn_PASSWORD);
%>

（注意：由于本例数据库使用了中文文件名，因此需要修改连接文件添加页面指令设置与其他页面相同的字符编码。实际开发中建议不要使用中文文件名和中文字段名以避免麻烦）

JSP实验05 文件操作示例

2012-10-15T16:08:13+08:00

实验目的：掌握文件的读写操作相关类的使用

1 使用字节流读写文件

使用文件输入/输出流FileInputStream/FileOutStream以字节为单位的读写文件，实现“在线文件柜”功能

在应用程序根目录下创建files文件夹作为“在线文件柜”目录，再创建首页文件index.jsp，在页顶添加代码引入所需类包：

<%@ page import="java.io.*" %>

在页面中添加表单，在表单中添加文本域newname及提交按钮：

在页面中添加代码，实现文件列表、新建和删除等基本操作：

<%  
//在线文件柜目录
String myfiles = application.getRealPath("/files/");
File dir = new File(myfiles);
//根据用户提交的名字新建文件
String newname = request.getParameter("newname");
if (newname != null && newname != "" ) {
    File newFile = new File(myfiles, newname);
    newFile.createNewFile();
}
else {
    //根据用户提交的名字删除文件
    String delname = request.getParameter("delname");
    if (delname != null && delname != "" ) {
        byte del[] = delname.getBytes("iso-8859-1");
        delname = new String(del, "utf-8");
        File delFile = new File(myfiles, delname);
        delFile.delete();
    }
}
//列出在线文件柜目录下的文件
File file[] = dir.listFiles();
for (int i = 0; i < file.length; i++) {
    if (file[i].isFile()) {
        out.print("<a href='content.jsp?filename=" + file[i].getName().toString() + "'>");
        out.print(file[i].getName().toString() + "</a> - " + file[i].length() + "字节  ");
        out.print("<a href='?delname=" + file[i].getName().toString() + "'>删除</a><br />");
    }
}
%>

创建查看和编辑文件内容页content.jsp，在页顶添加代码引入所需类包：

<%@ page import="java.io.*" %>

在页面中添加表单，在表单中添加文本区域content及提交按钮：

在文本区域标签内添加代码，实现文件内容的读取和写入：

<%  
//在线文件柜目录
String myfiles = application.getRealPath("/files/");
File dir = new File(myfiles);
String content = request.getParameter("content");
String filename = request.getParameter("filename");
//根据用户提交的内容，以字节流写入原文件
if (content != null) {
    File f = new File(myfiles, filename);
    try {
        FileOutputStream o = new FileOutputStream(f);
        BufferedOutputStream bo = new BufferedOutputStream(o);
        byte c[] = content.getBytes();
        bo.write(c);
        bo.flush();
        bo.close();
        o.close();
    }
    catch(IOException e) {}
}
//根据用户提交的文件名，以字节流读取文件并显示
if (filename != null && filename != "" ) {
    File f = new File(myfiles, filename);
    try {
        FileInputStream i = new FileInputStream(f);
        BufferedInputStream bi = new BufferedInputStream(i);
        byte b[] = new byte[100];
        int n = 0;
        while ((n = bi.read(b)) != -1) {
            String temp = new String(b, 0, n);
            out.print(temp);
        }
        bi.close();
        i.close();
    }
    catch(IOException e) {}
}
%>

在浏览器中运行index.jsp即可显示files目录下的文件列表并进行各种操作：

2 使用字符流读写文件

使用字节流读写文件在处理汉字时会出现乱码。本例修改上例的content.jsp文件，使用字符流类InputStreamReader/OutputStreamWriter读写文件。

<%  
//在线文件柜目录
String myfiles = application.getRealPath("/files/");
File dir = new File(myfiles);
String content = request.getParameter("content");
String filename = request.getParameter("filename");
//根据用户提交的内容，以字符流写入原文件
if (content != null) {
    byte b[] = content.getBytes("iso-8859-1");
    content = new String(b, "utf-8");
    File f = new File(myfiles, filename);
    try {
        OutputStreamWriter w = new OutputStreamWriter(new FileOutputStream(f), "utf-8");
        BufferedWriter bw = new BufferedWriter(w);
        bw.write(content);
        bw.close();
        w.close();
    }
    catch(IOException e) {}
}
//根据用户提交的文件名，以字符流读取文件并显示
if (filename != null && filename != "" ) {
    File f = new File(myfiles, filename);
    StringBuffer mess = new StringBuffer();
    try {
        InputStreamReader r = new InputStreamReader(new FileInputStream(f), "utf-8");
        BufferedReader br = new BufferedReader(r);
        String temp;
        while ((temp = br.readLine()) != null) {
            mess.append(temp + "\n");
        }
        br.close();
        r.close();
    }
    catch(IOException e) {}
    out.print(new String(mess));
}
%>

3 使用数据流读写数据

本例修改上例的content.jsp文件，使用数据流类DataInputStream/DataOutputStream以Java原始数据的形式显示和保存字符串。

<%  
//在线文件柜目录
String myfiles = application.getRealPath("/files/");
File dir = new File(myfiles);
String content = request.getParameter("content");
String filename = request.getParameter("filename");
//根据用户提交的内容，以数据流写入原文件
if (content != null) {
    byte b[] = content.getBytes("iso-8859-1");
    content = new String(b, "utf-8");
    File f = new File(myfiles, filename);
    try {
        FileOutputStream o = new FileOutputStream(f);
        DataOutputStream datao = new DataOutputStream(o);
        datao.writeUTF(content);
        datao.close();
        o.close();
    }
    catch(IOException e) {}
}
//根据用户提交的文件名，以数据流读取文件并显示
if (filename != null && filename != "" ) {
    File f = new File(myfiles, filename);
    try {
        FileInputStream i = new FileInputStream(f);
        DataInputStream datai = new DataInputStream(i);
        out.print(datai.readUTF());
        datai.close();
        i.close();
    }
    catch(IOException e) {}
}
%>

JSP教学05 文件操作

2012-10-13T13:59:46+08:00

教学目的：了解JSP中对文件操作的实现方法

5.1 File类

java.io.File类用来获取文件/目录本身的信息，如所在目录、文件长度、读写权限等。

File类的构造方法：

- File(String filename) filename是文件名字或绝对路径（注意：如不加路径，则默认文件位于Tomcat安装目录下的bin目录中）

- File(String directoryPath, String filename) directoryPath是文件所在目录路径，filename是文件名字

- File(File f, String filename) f是目录对象，filename是文件名字

File类的常用方法：

- String getName() 获取文件名字

- String getAbsolutePath() 获取文件的绝对路径

- boolean exists() 判断文件是否存在

- long length() 获取文件的长度（以字节为单位）

- boolean isFile() 判断文件是否为真正的文件而非目录

- boolean isDirectory() 判断文件是否为目录

- boolean canRead() 判断文件是否可读

- boolean canWrite() 判断文件是否可写

列出文件——如果File对象为目录，则可调用listFiles方法列出该目录下的文件和子目录

- public File[] listFiles() 获取目录下的全部File对象

例：列出指定目录下的文件

<h3>在线文件柜</h3>
<%  
String myfiles = application.getRealPath("/files/");
File dir = new File(myfiles);
File file[] = dir.listFiles();
for (int i = 0; i < file.length; i++) {
	if (file[i].isFile()) {
		out.print(file[i].getName().toString() + " - " + file[i].length() + "字节<br />");
	}
}
%>

创建文件——调用createNewFile方法创建文件，mkdir方法创建目录

- boolean createNewFile() 创建文件，成功则返回true，否则返回false

- boolean mkdir() 创建目录，成功则返回true，否则返回false

例：根据用户提交的名字新建文件

<%  
String newname = request.getParameter("newname");
if (newname != null && newname != "" ) {
	File newFile = new File(myfiles, newname);
	newFile.createNewFile();
}
%>

删除文件——调用delete方法删除对象代表的文件或目录（目录必须为空才可删除）

- boolean delete() 删除文件或目录，成功则返回true，否则返回false

例：根据用户提交的名字删除文件或目录

<%
String delname = request.getParameter("delname");
if (delname != null && delname != "" ) {
	File delFile = new File(myfiles, delname);
	delFile.delete();
}
%>

5.2 使用字节流读写文件

Java使用输入输出流读取和写入数据，常用的输入输出流类是文件输入/输出流FileInputStream/FileOutputStream

FileInputStream/FileOutputStream以字节为单位顺序地读取/写入文件

FileInputStream类的构造方法：

- FileInputStream(File file) file是文件对象

FileInputStream类的常用方法：

- int read(byte[] b) 读取输入流并存入字节数组

- void close() 关闭输入流

FileOutputStream类的构造方法：

- FileOutputStream(File file) file是文件对象

FileOutputStream类的常用方法：

- void write(byte[] b) 将字节数组写入输出流

- void close() 关闭输出流

为了提高读写效率，FileInputStream/FileOutputStream需要与缓存输入/输出流BufferedInputStream/BufferedOutputStream配合使用

BufferedInputStream类的构造方法：

- BufferedInputStream(InputStream in) in是输入流对象

BufferedInputStream类的常用方法：

- int read(byte[] b) 读取缓存输入流并存入字节数组

- void close() 关闭缓存输入流

BufferedOutputStream类的构造方法：

- BufferedOutputStream(OutputStream out) out是输出流对象

BufferedOutputStream类的常用方法：

- void write(byte[] b) 将字节数组写入缓存输出流

- void flush() 刷新缓存即把缓存内容发送到文件输出流

- void close() 关闭缓存输出流

例：根据用户提交的名字，使用字节流读取文件内容并显示

<%  
String filename = request.getParameter("filename");
if (filename != null && filename != "" ) {
    File f = new File(myfiles, filename);
    try {
        FileInputStream i = new FileInputStream(f);
        BufferedInputStream bi = new BufferedInputStream(i);
        byte b[] = new byte[100];
        int n = 0;
        while ((n = bi.read(b)) != -1) {
            String temp = new String(b, 0, n);
            out.print(temp);
        }
        bi.close();
        i.close();
    }
    catch(IOException e) {}
}
%>

例：根据用户提交的内容，使用字节流写入文件内容

<%  
String content = request.getParameter("content");
if (content != null) {
    File f = new File(myfiles, filename);
    try {
        FileOutputStream o = new FileOutputStream(f);
        BufferedOutputStream bo = new BufferedOutputStream(o);
        byte c[] = content.getBytes();
        bo.write(c);
        bo.flush();
        bo.close();
        o.close();
    }
    catch(IOException e) {}
}
%>

5.3 使用字符流读写文件

字符流类以Unicode字符为单位读写数据。在Unicode编码方式下，一个英文字母和一个汉字都是一个字符。常用的字符流类是输入/输出字符流InputStreamReader/InputStreamWriter及其子类文件字符流FileReader/FileWriter。

（注意：FileWriter/FileReader不支持通过参数指定字符编码方式，因此无法用于utf-8字符编码的文件）

为了提高读写效率，字符流需要与缓存读取/写入流BufferedReader/BufferedWriter配合使用。

例：使用字符流读取文件内容

<%  
if (filename != null && filename != "" ) {
	File f = new File(myfiles, filename);
	StringBuffer mess = new StringBuffer();
	try {
		InputStreamReader r = new InputStreamReader(new FileInputStream(f), "utf-8");
		BufferedReader br = new BufferedReader(r);
		String temp;
		while ((temp = br.readLine()) != null) {
			mess.append(temp + "\n");
		}
		br.close();
		r.close();
	}
	catch(IOException e) {}
	out.print(new String(mess));
}
%>

例：使用字符流写入文件内容

<%  
String content = request.getParameter("content");
if (content != null) {
    byte b[] = content.getBytes("iso-8859-1");
    content = new String(b, "utf-8");
    File f = new File(myfiles, filename);
    try {
        OutputStreamWriter w = new OutputStreamWriter(new FileOutputStream(f), "utf-8");
        BufferedWriter bw = new BufferedWriter(w);
        bw.write(content);
        bw.close();
        w.close();
    }
    catch(IOException e) {}
}
%>

5.4 文件上传

上传文件需要使用包含文件域的表单（表单的编码类型应为multipart/form-data），让内置对象request调用getInputStream方法即可获得一个用户上传信息的输入流并输出到指定的文件。

例：上传文件并保存为指定的名字

<%
try {
    InputStream i = request.getInputStream();
    File upFile = new File(myfiles, "upFile.txt");
    FileOutputStream o = new FileOutputStream(upFile);
    byte b[] = new byte[1000];
    int n;
    while ((n = i.read(b)) != -1) {
        o.write(b, 0, n);
    }
    o.close();
    i.close();
    out.print("文件上传成功！");
}
catch(IOException e) {
    out.print("文件上传失败！");
}
%>

注意：以上程序保存的文件不仅包含原文件，还有用户提交的其他信息（文件的前4行和末5行内容），应该去除这些内容才能得到原文件。

例：上传文件程序修正版（本例使用更灵活的随机存取文件类RandomAccessFile进行文件读写，该类的seek方法可自由指定当前流的读写位置，getFilePointer方法可获取当前流的读写位置）

<%
try {
    //建立临时文件，文件名为用户会话ID
    String tempFile = (String)session.getId();
    File f1 = new File(myfiles, tempFile);
    FileOutputStream o = new FileOutputStream(f1);
    //将用户上传的全部信息存入临时文件
    InputStream i = request.getInputStream();
    byte b[] = new byte[10000];
    int n;
    while ((n = i.read(b)) != -1) {
        o.write(b, 0, n);
    }
    o.close();
    i.close();
    //读取临时文件
    RandomAccessFile random = new RandomAccessFile(f1, "r");
    //从第2行最后一个=字符之后获取原文件的名字
    int second = 1;
    String secondLine = null;
    while (second <= 2) {
        secondLine = random.readLine();
        second++;
    }
    int position = secondLine.lastIndexOf('=');
    String fileName = secondLine.substring(position + 2, secondLine.length() - 1);
    //确定原文件的开始：从第4行的回车符起
    long forthEndPosition = 0;
    int forth = 1;
    while((n = random.readByte()) != -1 && (forth <= 4)) {
        if (n == '\n') {
            forthEndPosition = random.getFilePointer();
            forth++;
        }
    }
    //保存原文件
    byte cc[] = fileName.getBytes("iso-8859-1");
    fileName = new String(cc, "utf-8");
    File f2 = new File(myfiles, fileName);
    RandomAccessFile random2 = new RandomAccessFile(f2, "rw");
    //确定原文件的末尾：到倒数第6行止
    random.seek(random.length());
    long endPosition = random.getFilePointer();
    long mark = endPosition;
    int j = 1;
    while ((mark >= 0) && (j <= 6)) {
        mark--;
        random.seek(mark);
        n = random.readByte();
        if (n == '\n') {
            endPosition = random.getFilePointer();
            j++;
        }
    }
    //将random流指向原文件第4行结束的位置
    random.seek(forthEndPosition);
    long startPoint = random.getFilePointer();
    //读取临时文件存入新文件
    while (startPoint < endPosition - 1) {
        n = random.readByte();
        random2.write(n);
        startPoint = random.getFilePointer();
    }
    random2.close();
    random.close();
    //删除临时文件
    f1.delete();
    out.print("文件上传成功！");
}
catch(IOException e) {
    out.print("文件上传失败！");
}
%>

5.5 文件下载

使用response对象的setHerader方法即可向客户端发送下载文件的HTTP头信息。

response.setHeader("Content-disposition","attachment;filename=<下载文件名>");

例：根据用户提交的名字下载文件

String down = request.getParameter("down");
if (down != null && down != "" ) {
    byte d[] = down.getBytes("iso-8859-1");
    down = new String(d, "utf-8");
    response.setHeader("Content-disposition","attachment;filename=" + down);
    try {
        File dl = new File(myfiles, down);
        FileInputStream i = new FileInputStream(dl);
        OutputStream o = response.getOutputStream();
        int n = 0;
        byte b[] = new byte[1000];
        while((n = i.read(b)) != -1) {
            o.write(b, 0, n);
        }
        o.close();
        i.close();
    }
    catch(Exception e) {}
}

JSP实验04 内置对象的使用

2012-10-05T14:48:38+08:00

实验目的：掌握JSP对象对象的使用方法

1 request对象

运用request对象通过JSP页面和Tag文件实现四则运算

创建输入页面inputNumber.jsp，添加表单，在表单中添加文本域numberOne（宽度为6），选择框operator（列表值为+、-、*、/），文本域numberTwo（宽度为6）以及提交按钮，设置表单动作为receiveNumber.jsp：

创建获取用户提交信息页面receiveNumber.jsp，在页顶添加代码引入标记库：

 <%@ taglib tagdir="/WEB-INF/tags" prefix="computer" %>

在页面中添加代码，获取提交信息并作为参数传给自定义标记，输出运算结果：

<%  
String a = request.getParameter("numberOne");
String b = request.getParameter("numberTwo");
String operator = request.getParameter("operator");
if (a == null || b == null) {
    a = "";
    b = "";
}
if (a.length() > 0 && b.length() > 0) {
%>
<computer:Computer numberA="<%= a %>" numberB="<%= b %>" operator="<%= operator %>" />
<p>计算结果：<%= a %><%= operator %><%= b %>=<%= result %>
    <%  
}
%>
</p>
<p><a href="inputNumber.jsp">返回输入数据界面</a></p>

在/WEB-INF/tags下创建自定义标记Computer.tag，添加代码获取参数进行四则运算：

<%@ tag pageEncoding="utf-8" %>
<%@ attribute name="numberA" required="true" %>
<%@ attribute name="numberB" required="true" %>
<%@ attribute name="operator" required="true" %>
<%@ variable name-given="result" scope="AT_END" %>
<%
try {
    double a=Double.parseDouble(numberA);
    double b=Double.parseDouble(numberB);
    double r=0;
    if (operator.equals("+")) {
        r=a+b;
    } 
    else if (operator.equals("-")) {
        r=a-b;
    }
    else if(operator.equals("*")) {
        r=a*b;
    }
    else if(operator.equals("/")) {
        r=a/b;
    }
    jspContext.setAttribute("result",String.valueOf(r));
}
catch(Exception e) {
    jspContext.setAttribute("result","发生异常:"+e);
}
%>

完成后在浏览器中运行inputNumber.jsp，输入数值，选择运算符，点击提交按钮即进入显示运算结果页面：

2 response对象

运用response对象绘制半径为1~100像素的圆形

创建输入圆的半径页面inputRadius.jsp，添加表单，在表单中添加文本域radius（宽度为6）以及提交按钮，设置表单动作为drawCircle.jsp：

创建绘制圆形页面drawCircle.jsp，在页顶添加代码引入所需类包：

<%@ page import="java.awt.*" %>
<%@ page import="java.io.*" %>
<%@ page import="java.awt.image.*" %>
<%@ page import="java.awt.geom.*" %>
<%@ page import="com.sun.image.codec.jpeg.*" %>

在页面中添加代码根据获取的半径参数创建圆形并以JPEG格式输出到页面中：

<%  
String r = request.getParameter("radius");
try {
    double number = Double.parseDouble(r);
    if (number <=0 || number > 100) {
        //改变MIME类型
        response.setContentType("text/html;charset=utf-8");
        out.println(number + "作为圆的半径不合理或超出绘制范围（1-100）。");
    }
    else if (number > 0 && number <= 100) {
        response.setContentType("image/jpeg");
        int width = 100, height = 100;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
        g.setColor(Color.white);
        g.fillRect(0, 0, width, height);
        Graphics2D g_2d = (Graphics2D)g;
        Ellipse2D circle = new Ellipse2D.Double(0, 0, number, number);
        g_2d.setColor(Color.blue);
        g_2d.fill(circle);
        g.dispose();
        //获取指向用户端的输出流
        OutputStream outClient = response.getOutputStream();
        JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outClient);
        encoder.encode(image);
    }
}
catch (Exception e) {
    response.sendRedirect("inputRadius.jsp");
}
%>

完成后在浏览器中运行inputRadius.jsp，输入半径点击提交按钮即进入显示图形页面：

3 session对象

运用session对象存储用户数据模拟网店的购物车功能

创建选择图书页面choiceBook.jsp，以在链接中附带参数的方式提交所选图书信息：

<h3>选择要购买的图书</h3>
<p>
<a href="orderForm.jsp?bookMess=Java面向对象程序设计@ISBN:9876@价格：34元">Java面向对象程序设计(34元)</a>
<br />
<a href="orderForm.jsp?bookMess=JSP程序设计@ISBN:4567@价格：29.5元">JSP程序设计(29.5元)</a>
<br /> 
<a href="orderForm.jsp?bookMess=XML程序设计@ISBN:2356@价格：29元">XML程序设计(29元)</a>
</p>

创建显示订单页面orderForm.jsp，在页顶添加代码，引入所需类包，根据用户提交的参数将用户选择的图书信息保存为会话对象：

<%@ page import="java.util.*" %>
<%  
String book = request.getParameter("bookMess");
byte b[] = book.getBytes("iso-8859-1");
book = new String(b, "utf-8");
if (book != null) {
    StringTokenizer fenxi = new StringTokenizer(book, "@");
    String bookName = fenxi.nextToken();
    String bookISBN = fenxi.nextToken();
    session.setAttribute(bookISBN, book);
}
%>

在页面中添加代码，以表格形式输出会话对象中保存的图书信息：

<h3>图书订单</h3>
<table border="1">
<%  
Enumeration keys = session.getAttributeNames();
while (keys.hasMoreElements()) {
    String key = (String)keys.nextElement();
    book = (String)session.getAttribute(key);
    if (book != null) {
        StringTokenizer fenxi = new StringTokenizer(book, "@");
%>
    <tr>
        <td><%= fenxi.nextToken() %></td>
        <td><%= fenxi.nextToken() %></td>
        <td><%= fenxi.nextToken() %></td>
    </tr>
<%  
    }
}
%>
</table>

完成后在浏览器中运行choiceBook.jsp，点击图书链接即可将其放入购物车：

JSP教学04 内置对象

2012-09-29T13:21:51+08:00

教学目的：了解JSP内置对象（由JSP引擎实例化的对象，可以在JSP页面中直接使用）

4.1 request对象

request对象用于获取客户端提交的请求信息

类型：javax.servlet.ServletRequest

常用方法：

getParameter(String name)，获取请求信息的值（来自表单域或URL参数）。

例：显示用户提交的名字，在表单中添加文本域username和提交按钮，在页面中添加代码段。

<%
String str = request.getParameter("username");
if (str == null)
    str = "朋友";
%>
<h1>欢迎你，<%= str %>！</h1>

getRemoteAddr()，获取客户端的IP地址

例：显示访问者的IP地址

你的IP地址是<%= request.getRemoteAddr() %>。

setCharacterEncoding(String env)，设置请求信息的字符编码（例如"gb2312"或"utf-8"）。

例：如果你在文本域中输入中文，上面的例子将显示乱码，因为客户端提交的请求信息默认是使用西文字符编码的，添加以下代码即可解决此问题：

request.setCharacterEncoding("utf-8");

补充：以上办法只适用于以表单提交（POST方法）的中文信息，对以在网址中附带参数提交（GET方法）的中文信息是无效的。这里补充一个麻烦些但更通用的办法：先将用getParameter方法获取的字符串以标准西文字符编码转为字节数组，再将此数组用中文编码转为字符串

byte b[] = str.getBytes("iso-8859-1");
str = new String(b, "utf-8");

4.2 response对象

response对象用于向客户端发送响应信息

类型：javax.servlet.ServletResponse

常用方法：

setContentType(String type)，设置响应信息的类型（当与JSP页面的page指令设置的类型不同时才需要设置）

例：将当前页面内容保存为Word文档

将本页面保存为<a href="?save=yes">Word文档</a>
<%  
String save = request.getParameter("save");
if (save != null) {
    if (save.equals("yes"))
        response.setContentType("application/msword;charset=utf-8");
}
%>

setHeader(String name, String value)，设置响应信息的HTTP头的值

例：添加自动刷新页面的的HTTP头，使客户端浏览器每5秒刷新一次当前页面

<%@ page import="java.util.*" %>
<%  
response.setHeader("Refresh", "5");
%>
现在时间：<%= new Date() %>

sendRedirect(String location)，发送重定向到新页面的地址

例：用户输入特定的内容如“会员某某某”可进入特定的页面

<%  
if (str.startsWith("会员"))
    response.sendRedirect("ch4main.jsp");
%>

4.3 session对象

session对象即客户端与服务器的一次会话，从客户端访问服务器的一个应用程序开始，到客户端与服务器断开连接为止（用户关闭了浏览器，或者未关闭浏览器但长时间未与服务器进行交互）

类型：javax.servlet.http.HttpSession

常用方法：

getId()，获取会话的ID号

例：各页面添加显示会话的ID号，在同一会话过程中ID号将保持一致。

本次会话的ID号：<%= session.getId() %>

setAttribute(String name, Object value)，设置属性的值（该方法为其他对象指定名称并绑定到session对象）

例：将用户输入的名字保存为会话级属性

<%  
session.setAttribute("username", str);
%>

getAttribute(String name)，获取属性的值（该方法返回session对象所绑定的指定名称的对象）

例：在其他页面显示用户输入的名字

当前用户：<%= (String)session.getAttribute("username") %>

4.4 out对象

out对象用于向客户端输出数据

类型：javax.servlet.jsp.JspWriter

常用方法：

print(...)，输出数据

println(...)，输出单行数据

newLine()，输出换行符

4.5 application对象

application对象由访问应用程序的所有客户端共享。从服务启动开始，到服务关闭为止

类型：javax.servlet.ServletContext

常用方法：

getRealPath(String path)，获取应用程序所在的真实路径（传入参数为虚拟路径）

例：获取网站根目录的真实路径

根目录真实路径：<%= application.getRealPath("/") %>

setAttribute(String name, Object value)，设置属性的值

例：将用户输入的名字保存为应用程序级属性

<%  
application.setAttribute("username", str);
%>

getAttribute(String name)，获取属性的值

例：使所有访问者查看最近来访者输入的名字

最近来访用户：<%= (String)application.getAttribute("username") %>

JSP实验03 使用标记文件

2012-09-24T09:53:16+08:00

实验目的：掌握标记文件的创建和使用

1 使用标记体

编写单元格中重复显示文本的Tag文件，JSP页面通过使用标记体将要显示的文本传递给Tag文件

创建giveMess.jsp，引入标记库：

<%@ taglib tagdir="/WEB-INF/tags" prefix="ok"%>

在页面中添加表格和自定义标记：

<table border=2>
    <ok:handleMess>
        南非世界杯
    </ok:handleMess>
    <ok:handleMess>
        冠军是西班牙
    </ok:handleMess>
    <ok:handleMess>
        亚军是荷兰
    </ok:handleMess>
</table>

在/WEB-INF/tags下创建handleMess.tag

<tr>
    <td> <jsp:doBody/> </td>
    <td> <jsp:doBody/> </td>
    <td> <jsp:doBody/> </td>
</tr>

在浏览器中查看giveMess.jsp

2 使用属性(Attribute)

编写显示日历的Tag文件，JSP页面使用标记属性将年份和月份传递给Tag文件

创建giveYearMonth.jsp，引入标记库：

<%@ taglib tagdir="/WEB-INF/tags" prefix="rili" %>

在页面中添加日历的自定义标记：

<rili:ShowCalendar year="2012" month="12" />

在/WEB-INF/tags下创建ShowCalendar.tag

<%@ tag pageEncoding="GB2312" %>
<%@ tag import="java.util.*" %>
<%@ attribute name="year" required="true" %>
<%@ attribute name="month" required="true" %>
<%    
    int y=1999, m=1;
    String [] day=new String[42];
    try {
        y=Integer.parseInt(year);
        m=Integer.parseInt(month);
        Calendar rili=Calendar.getInstance();
        rili.set(y, m-1, 1);//将日历翻到year年month月1日,注意0表示一月...11表示十二月
        int 星期几=rili.get(Calendar.DAY_OF_WEEK)-1;
        int dayAmount=0;
        if(m==1||m==3||m==5||m==7||m==8||m==10||m==12)
            dayAmount=31;
        if(m==4||m==6||m==9||m==11)
            dayAmount=30;
        if(m==2)
            if(((y%4==0)&&(y%100!=0))||(y%400==0))
                dayAmount=29;
            else
                dayAmount=28;
        for(int i=0;i<星期几;i++)
            day[i]="--";
        for(int i=星期几, n=1; i<星期几+dayAmount; i++){
            day[i]=String.valueOf(n) ;
            n++;
        }  
        for(int i=星期几+dayAmount;i<42;i++)
            day[i]="--";
    }
    catch(Exception exp){
        out.print("年份或月份不合理");
    }
%>
<h3><%=year %>年<%=month %>月的日历:</h3>
<table border=1>
    <tr>
        <th>星期日</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
    </tr>
<%
    for(int n=0;n<day.length;n=n+7){
%>
    <tr>
<%
        for(int i=n;i<7+n;i++) {
%>
    <td><%= day[i] %></td>
<%
        }
%> 
    </tr>
<%
    }
%> 
</table>

在浏览器中查看giveYearMonth.jsp

3 使用变量(Variable)

编写分解出字符串中单词的Tag文件，JSP页面显示Tag返回的所有单词

创建giveString.jsp

<%@ taglib tagdir="/WEB-INF/tags" prefix="words" %>

<%
    String s="South Africa World Cup(Espana is champion)";
%>
<words:GetWord str="<%=s %>"/>
字符串:<br><h3><%=s%><br></h3>中的全部单词：
<%
    for(int i=0;i<wordList.size();i++){
        out.print("<br>"+wordList.get(i));
    } 
%>

在/WEB-INF/tags下创建getWord.tag

<%@ tag import="java.util.*" %>
<%@ attribute name="str" required="true" %>  
<%@ variable name-given="wordList" variable-class="java.util.ArrayList" scope="AT_END" %>
<%     
    ArrayList<String> list=new ArrayList<String>();   //返回给JSP页面的list对象 
    String regex="[\\s\\d\\p{Punct}]+"; //空格、数字和符号(!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~)组成的正则表达式
    String words[]=str.split(regex); 
    for(int i=0;i<words.length;i++){
        list.add(words[i]);
    }
    jspContext.setAttribute("wordList",list); ////将list对象返回给JSP页面
%>

在浏览器中查看giveString.jsp

JSP教学03 自定义标记

2012-09-22T13:47:54+08:00

教学目的：了解标记文件的创建和使用

3.1 标记文件的结构

标记(Tag)是JSP实现代码复用的机制之一

标记文件的扩展名为.tag，结构与JSP文件类似

标记文件可以被JSP页面调用，但用户不能直接访问

标记文件必须存放在指定目录下：
Web应用程序目录\WEB-INF\tags
（tags目录下还可以创建子目录，名称可自定义）

例：使用标记文件在页面中添加相同的页脚

在ROOT\WEB-INF\tags下创建footer.tag：

<%@ tag pageEncoding="utf-8" %>
<p>义乌工商学院机电信息分院 联系电话：88886666</p>

在JSP页面中用taglib指令定义标记库：

<%@ taglib tagdir="/WEB-INF/tags" prefix="leo" %>

在JSP页面中使用此自定义标记：

<leo:footer />

注意：如果在Dreamweaver中无法打开.tag文件，可以在菜单栏中选择“编辑”>“首选参数”>“文件类型/编辑器”，找到“在代码视图中打开”文本域，在其中添加.tag即可解决问题。

3.2 自定义标记的使用

引入自定义标记库：

<%@ taglib tagdir="/WEB-INF/tags/子目录" prefix="前缀" %>

使用自定义标记：

<标记库前缀:标记名 />
<标记库前缀:标记名>标记体</标记库前缀:标记名>

在标记文件中引用标记体：

<jsp:doBody />

例：格式化标记体

在ROOT\WEB-INF\tags下创建notice.tag：

<font color="red"><b><jsp:doBody /></b></font>

在JSP页面中用taglib指令定义标记库：

<%@ taglib tagdir="/WEB-INF/tags" prefix="leo" %>

在JSP页面中使用此自定义标记：

<leo:notice>热烈欢迎！</leo:notice>

3.3 标记文件中的常用指令

Tag指令：类似于JSP文件中的Page指令，用于设置字符编码、引入类等
<%@ tag pageEncoding="utf-8" import="java.io.*" %>

Taglib指令：用于在标记文件中使用其他自定义标记
<%@ taglib tagdir="/WEB-INF/tags/new" prefix="new" %>

Attribute指令：用于设置标记可用的属性
<%@ attribute name="属性名" required="true或false" type="类型"%>

例：格式化标记体的改进

修改notice.tag添加字体颜色属性

<%@ attribute name="fontcolor" %>
<font color="<%= fontcolor %>"><b><jsp:doBody /></b></font>

在JSP中添加带属性设置的标记

<leo:Notice fontcolor="blue">热烈欢迎！</leo:Notice>

Variable指令：用于向JSP页面返回变量

<%@ variable name-given="变量名" scope="AT_END或AT_BEGIN或NESTED" variable-class="类型" %>

例：页脚标记的改进

修改footer.tag添加开发者变量

<%@ variable name-given="developer" scope="AT_END" %>
<% jspContext.setAttribute("developer", "开发者：leo"); %>

在JSP页面中输出标记返回的变量

<%= developer %>

JSP实验02 页面指令和标记

2012-09-17T10:47:43+08:00

实验目的：掌握JSP页面元素及基本语法

（首先在Dreamweaver中建立基于JSP的站点，具体步骤略）

1 JSP页面基本结构

本实验将用户输入的单词按字典顺序排序，实现该功能需要两个页面：单词输入页inputWord.jsp和显示排序结果页showDictionary.jsp

新建文件inputWord.jsp

添加一个表单，动作为showDictionary.jsp；表单中添加一个文本字段，名称为word；再添加一个按钮，动作为默认的提交表单。

注意：表单是向页面传递参数的主要方法

新建文件showDictionary.jsp

添加页面指令包含java.util.*类库：

<%@ page import="java.util.*" %>

添加声明：

<%!

	TreeSet<String> dictionary = new TreeSet<String>();
	public void addWord(String s) {
		String word[] = s.split(" ");
		for (int i=0; i<word.length; i++) {
			dictionary.add(word[i]);
		}
	}
%>

最后添加代码段：

	String str = request.getParameter("word");
	addWord(str);
	Iterator<String> te = dictionary.iterator();
	while (te.hasNext()) {
		String word = te.next();
		out.print(" " + word);
	}
%>

页面完成后即可在浏览器中进行测试：

2 JSP指令

本实验在每个页面中都包含相同的导航条。

新建导航条内容文件leader.txt（注意第一行page指令设置的页面编码应与其他文件的一致，都用统一码utf-8或都用国标码gb2312）：

<%@ page contentType="text/html; charset=utf-8" %>
<a href = "first.jsp">链接到页面1</a>
<a href = "second.jsp">链接到页面2</a>
<a href = "third.jsp">链接到页面3</a>

新建文件first.jsp，添加文本“这是页面1”，再添加包括指令：

<%@ include file="leader.txt" %>

新建文件second.jsp和third.jsp，同样添加文本和包括指令。

页面完成后即可在浏览器中进行测试：

3 JSP动作标记

本实验使用jsp:forword动作标记实现页面的转向，访问页面时传递一个文件名作为参数，如果该文件存在就跳转到该文件，如果该文件不存在就显示该文件不存在。

新建文件jumpfile.jsp

添加页面指令包含java.io.*类库：

<%@ page import="java.io.*" %>

添加代码段：

<%
String name = request.getParameter("name");
String path = application.getRealPath("/") + name;
File file = new File(path);
if (file.exists()) {
%>
<jsp:forward page="<%= name %>" />
<%
}
else {
	out.print(name + "不存在！");
}
%>

页面完成后即可在浏览器中进行测试，注意：本例中向页面传递参数的方法是直接在地址栏末尾添加“?参数名=参数值”

JSP教学02 JSP基本语法

2012-09-14T09:13:38+08:00

教学目的：了解JSP页面元素及基本语法

2.1 JSP页面元素

一个JSP页面中除了标准HTML代码，还可以包括以下元素：

JSP表达式：<%= expression %> 表达式是用来输出单个数据
JSP指令：<%@ directive %> 指令是用来提示引擎所要进行的操作
JSP声明：<%! declaration %> 声明是用来定义页面级变量和方法
JSP代码段：<% scriptlet %> 代码段完成计算过程
JSP注释：<%-- comment --%> 注释会被引擎忽略
JSP动作：<taglib:tag attribute="value" ...>...</taglib:tag> 用于扩展功能

2.2 表达式

JSP表达式（<%= expression %>）是用来输出单个数据，数据会被转换为字符串并直接显示在输出页面之内。

例：
<%= 1+1 %>
<%= 'A' + 1 %>
<%= "JSP" + 1 %>
<%= Math.pow(3, 2) %>
<%= Math.sqrt(361) %>

2.3 指令

JSP指令标记（<%@ directive %>）不产生可见输出，只是设置一些属性的值，告诉引擎如何处理指定的JSP页面，主要的指令有Page和Include等。

Page指令可设置页面使用的编码，引入的类以及指向的错误页面等。

例：使用日期时间信息，需要先用Page指令引入java.util.Date类

<%@ page import="java.util.Date" %>

即可在页面中输出当前的日期时间信息

<%= new Date() %>

再引入java.text.SimpleDateFormat类

<%@ page import="java.text.SimpleDateFormat" %>

即可在页面中输出使用自定义格式的日期时间信息

<%= new SimpleDateFormat("yyyy年MM月dd日Eahh时mm分ss秒")).format(new Date() %>

Include指令在页面中引入其他文件中的内容。

例：让整个网站的所有页面的底端显示相同的版权信息。

<%@ include file="copyright.jsp" %>

如果今后需要修改版权信息，只须编辑copright.jsp文件。

2.4 声明

JSP声明（<%! declaration %>）用来定义页面级变量和方法供页面其余部分使用，由所有访问者共享。

JSP声明应使用标准Java语句。

例：
<%!
int count = 0;
synchronized void setCount() {
count++;
}
%>

2.5 代码段

JSP代码段（<% scriptlet %>）完成主要计算过程，可以嵌入页面的任何位置。

JSP代码段应使用标准Java语句。

例：用循环语句显示不同的标题文本

2.6 注释

JSP注释（<%-- comment --%>）会被引擎忽略，浏览器用户也不会看到JSP注释。

例：<%-- 添加服务器端代码 --%>

在声明和代码段区域内部则可以使用Java语言的标准注释格式//...和/*...*/等

2.7 动作

JSP动作标记用于扩展功能，写法与标准HTML标记类似

<taglib:tag attribute="value" ...>...</taglib:tag>
<taglib:tag attribute="value" ... />

动作标记包括引擎提供的标记（标记库名为jsp）和自定义标记

例：用jsp:forward动作实现页面自动跳转功能

<%
String jump = request.getParameter("jump");
if (jump = "yes") {
%>
<jsp:forward page="new.jsp" />
<%
}
%>

JSP实验01 建立JSP开发环境

2012-09-08T12:44:20+08:00

实验目的：掌握在Windows系统下建立JSP开发环境的方法。

（注意）安装所需的软件可以在学院的FTP服务器下载，也可以到其官方网站下载

1 安装JDK（Java开发包）

JDK是开发所有Java应用的基础
官网下载 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

建议安装版本为1.6，下载安装程序，双击即可安装

建议安装目录改为d:\java\jdk，方便以后使用

安装JDK时会附带安装JRE（Java运行环境），建议也更改安装目录为d:\java\jre，方便以后使用

安装JDK后，需要配置系统环境变量JAVA_HOME，变量值为JDK安装目录例如d:\java\jdk

2 安装Tomcat（JSP引擎）

Tomcat是常用的JSP引擎，本身可以作为Web服务器，也可以为专门的Web服务器如Apache提供JSP支持
官网下载 http://tomcat.apache.org/

建议安装版本为6.0，下载ZIP包，解压缩即可

建议安装目录改为d:\java\tomcat，方便以后使用

安装Tomcat后，双击安装目录下bin\startup.bat，即可启动Tomcat

用浏览器访问http://localhost:8080，如能打开Tomcat默认主页，说明Tomcat已正常运行

Tomcat必须处于运行状态才能发布JSP页面，双击安装目录下的bin\shutdown.bat，即可停止Tomcat。

（注意：如果本机没有其他Web服务器例如IIS等占用默认端口号，可以打开安装目录下的conf\server.xml将Web服务端口号由8080改为80，这样用浏览器访问时就不必指定端口号）

（补充：如果需要使用浏览器远程管理Tomcat，可以打开安装目录下的conf\tomcat-users.xml添加角色为admin和manager-gui的用户，即可登录后台进行管理操作）

3 安装JSP_Support（Dreamweaver的JSP插件）

Dreamweaver是优秀的网页设计软件，可以用来更方便地编写JSP页面。JSP_Support插件则提供了预设的服务器行为，能够以所见即所得的方式自动生成JSP代码，以帮助使用者进行快速开发。

CS3本身带有JSP_Support，CS4或更高版本未启用JSP_Support，可在configuration\DisabledFeatures文件夹中找到此插件安装启用
官网下载 http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1731022

在安装了CS4以上版本的Dreamweaver，双击插件包JSP_Support.mxp即可安装插件，此外还要将连接数据库的JSP脚本Dreamweaver_Connections.rar解压复制到安装目录的configuration\Connections文件夹。（如为CS3及以下版本则无需执行本段操作。）

4 编写和测试JSP页面

Tomcat的Web应用程序发布目录是Tomcat安装目录下的webapps文件夹，其中的ROOT文件夹就是网站根目录的内容，其他的文件夹是单独的Web应用程序，可以作为网站根目录的子目录访问。

我们可以在ROOT文件夹下使用记事本编写最简单的JSP页面test.jsp，内容如下：

用浏览器访问 http://localhost:8080 的效果如下：

而使用浏览器的查看源代码功能看到的内容如下：

<h1>Hello World!</h1>

你可以发现浏览器看到的源代码和.jsp文件的源代码是不同的，<h1>是HTML标签，服务器会直接发送给客户端，而<%和%>中的内容就是Java代码段，服务器会执行该代码并将执行结果发送给客户端。（注意：<%=Java表达式%>是一种特殊的JSP代码段，称为JSP表达式，专用于单个数据输出，相当于<%out.print(Java表达式);%>）

5 创建使用JSP技术的Web应用程序

接下来学习如何使用Dreamweaver创建使用JSP技术的Web应用程序，实际上就是创建单独文件夹放置所有页面，并设置JSP服务器信息，这样就可以在Dreamweaver中完成编写和测试过程（注意：不同版本Dreamweaver的具体设置界面会有所不同）。

在Dreamweaver菜单栏中选择“站点”>“新建站点”，设置站点信息：
站点名称：jsptest
本地站点文件夹：D:\java\tomcat\webapps\jsptest\
再点击“服务器”选项卡，点击“+”按钮添加服务器
服务器名称：jsptest
连接方法：本地/网络
服务器文件夹：D:\java\tomcat\webapps\jsptest
Web URL：http://localhost:8080/jsptest/
在“高级”对话框中选择服务器模型：JSP
完成添加后设置服务器类型，取消勾选“远程”，勾选“测试”

创建默认首页文件index.jsp，Dreamweaver会自动生成页面框架代码，我们只需输入内容即可，在页面中添加文本“乘法表”，以及生成乘法表的Java代码段：

切换到设计视图并点击页面上方的“实时视图”按钮，即可在Dreamweaver内测试页面在浏览器中的输出效果了。与直接在浏览器中输入http://localhost:8080/jsptest的效果完全相同。

JSP教学01 JSP概述

2012-09-07T14:51:36+08:00

教学目的：了解JSP基本概念及JSP的运行原理

1.1 什么是JSP
JSP（Java Server Pages）是基于Java体系的Web应用程序开发技术，利用这一技术可以建立安全、跨平台、易维护的Web应用程序。
与JSP类似的技术还包括ASP和PHP等，JSP相比类似技术具有安全性强、适应平台广、运行效率高和扩展方便等优点。
学习JSP需要具备Java语言基础。

JSP是Java企业级应用平台的一个组成部份，主要负责前端的内容显示，还需要以下相关技术的配合：
HTML：超文本标记语言，用于编写静态网页以供浏览器显示的标记语言；
JavaBean：基于Java的可重用组件（类似于微软的COM）；
JDBC：基于Java的数据库连接（类似于微软的ODBC）；
JavaScript：在客户端运行的浏览器脚本程序；
Servlet：在服务器端运行的Java程序，JSP页面是由JSP引擎先转化为Servlet再编译执行的。

* 什么是Web应用程序
Web应用程序是由Web服务器发布的一组静态和动态网页的集合。静态网页的内容是确定的，访问者向Web服务器请求该页时其内容不会发生更改；动态网页的内容不是确定的，访问者向Web服务器请求该页时，Web服务器根据特定的指令改变其内容再发送给访问者。

Web服务器处理静态页：
A. 步骤 1 - Web浏览器请求静态页。
B. 步骤 2 - Web服务器查找页。
C. 步骤 3 - Web服务器将页发送到请求浏览器。

Web服务器处理动态页：
A. 步骤 1 - Web浏览器请求动态页。
B. 步骤 2 - Web服务器查找该页并将其传递给应用程序服务器。
C. 步骤 3 - 应用程序服务器查找该页中的指令并完成页。
D. 步骤 4 - 应用程序服务器将完成的页传递回Web服务器。
E. 步骤 5 - Web服务器将完成的页发送到请求浏览器。

1.2 JSP引擎
JSP引擎是管理和运行基于JSP的Web应用程序的服务器软件。
JSP引擎可以作为支持JSP的Web服务器，也可以为其他Web服务器软件提供JSP支持。
常见的JSP引擎有Tomcat、JRun和Resin等。
JSP引擎运行在JVM（Java虚拟机）上，安装JSP引擎前需要先安装JDK（Java开发包）。

1.3 JSP页面文件与Web应用程序目录
JSP页面文件的扩展名为.jsp，除了普通的HTML标记外，还可以使用JSP标签和Java代码段。
JSP页面中的JSP标签和Java代码段在服务器端运行并生成HTML代码供客户端浏览器查看。
JSP页面文件需要放置于Web应用程序目录中才能供浏览器访问。

使用JSP开发的Web应用程序实例1：中国工商银行 https://mybank.icbc.com.cn/icbc/newperbank/perbank3/frame/frame_index.jsp
使用JSP开发的Web应用程序实例2：本博客~
* 注意：你不一定能在使用JSP开发的网站地址中看到“.jsp”的扩展名，因为许多使用JSP开发的Web系统通常都通过转向分发技术隐藏真实的文件路径。

1.4 JSP运行原理
当一个JSP页面第一次被请求执行时，JSP引擎先将其转化为Servlet源码（.java），然后编译成字节码（.class），再执行字节码并响应用户请求。
当这个JSP页面以后再被请求执行时，JSP引擎会直接执行相应的字节码来响应用户请求以提高访问速度。
如果JSP页面被修改，JSP引擎会重新进行转化和编译过程。

1.5 (实验)建立JSP开发环境

安装JDK（Java开发包）
安装Tomcat（JSP引擎）
安装JSP_Support（Dreamweaver的JSP插件）
编写和测试JSP页面
创建基于JSP技术的Web应用程序

（详见JSP实验01 建立JSP开发环境）

JSP程序设计教学

2012-07-22T15:47:15+08:00

欢迎大家访问这个博客，学习JSP网页应用程序的开发。