完成Form和Action的編寫後,接下來就是整理struts-config.xml文件和在applicationContext-action.xml文件中註冊Action,具體操作如下:
a. 在struts-config.xml中添加如下內容
i) 在<form-beans>標籤裏面,添加一個shopForm
<form-bean name="shopForm" type="cn.com.book.demo.struts.form.ShopForm" />
ii) 在<action-mappings>標籤裏面,添加一個shop Action
<action
attribute="shopForm"
name="shopForm"
parameter="method"
path="/shop"
scope="request"
type="org.springframework.web.struts.DelegatingActionProxy"
validate="false" >
<!—定義分頁查詢成功後的轉向目標à
<forward name="success" path="/WEB-INF/jsp/shop/shopList.jsp"></forward>
<!—定義往購物車中添加一個商品後的轉向目標à
<forward name="addShop" path="/WEB-INF/jsp/success.jsp"></forward>
<!—定義顯示購物車列表的轉向目標à
<forward
name="displayAddedShops" path="/WEB-INF/jsp/shop/shopCar.jsp"></forward>
<!—定義改變購物車中某商品數量後的轉向目標à
<forward
name="changeShopAmount" path="/shop.do?method=displayAddedShops"></forward>
<!—定義從購物車中清除某商品後的轉向目標à
<forward name="deleteShop" path="/shop.do?method=displayAddedShops"></forward>
</action>
b. 在applicationContext-action.xml添加如下內容,在spring中註冊對應的shop action
<bean name="/shop" class="cn.com.book.demo.struts.action.ShopAction">
<property name="shopService">
<ref bean="shopService"/>
</property>
</bean>
1. 添加資源信息
同樣,爲了使用多國語言功能,我們在ShopResource-temp.properties文件中,添加如下信息的定義
shop.title=選購商品
shop.seq.no=序號
shop.name=商品名稱
shop.price=價格
shop.select=選擇
shop.add.shop=加入購物車
shop.no=第
shop.page=頁
shop.first.page=首頁
shop.prev.page=上一頁
shop.next.page=下一頁
shop.last.page=末頁
shop.go=GO
shop.car=查看購物車
shop.amount=數量
shop.total.price=總價格
shop.operate=操作
shop.delete=刪除
shop.submit.order=下單
shop.select.shop=選購其他商品
shop.add.car=加入購物車成功
同時執行一下encoding.bat批處理,生成一個與ShopResource-temp.properties對應的unicode編碼個資源文件ShopResource_zh_CN.properties文件
2. 編寫顯示的jsp
在我們Shop功能模塊中,主要有兩個jsp:shopList.jsp和shopCar.jsp。
i) shopList.jsp主要是用來分頁顯示商品列表的頁面,它裏面除了可以通過上下翻頁實現分頁顯示商品列表外,還可以將某個商品添加到購物車中去。而且尤爲要注意的是,往購物車中添加商品的功能,我們在這裏是使用Ajax技術進行實現的:在點擊頁面上“加入購物車”按鈕後,會在不刷新當前頁面的情況下,異步的往購物車中添加一個選定的商品。詳細清單如下:
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><bean:message bundle="shop" key="shop.title"/></title>
<script language="javascript">
// 定義個用來發送ajax請求的全局變量
var http_request = false;
// 發送Ajax請求
function makeRequest(url) {
http_request = false;
// 根據不同的瀏覽器(IE 或其他瀏覽器),用各自對應的方法生成ajax的發送對象
if (window.XMLHttpRequest) { // Mozilla, Safari,...瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
// 當ajax請求的狀態發生改變的時候,綁定alertContents方法
http_request.onreadystatechange = alertContents;
// 創建一個新的http請求
http_request.open('GET', url, true);
// 發送http請求
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert('<bean:message bundle="shop" key="shop.add.car"/>');
} else {
alert('There was a problem with the request.');
}
}
}
function sendAjaxRequest(url){
var date = new Date();
makeRequest(url + "&test="+date);
}
function toPage(page){
var targetPage;
if(page == 'f'){
targetPage=1;
}else if(page == 'l'){
targetPage = document.shopForm.pageAmount.value;
}else if(page == 'g'){
targetPage = document.shopForm.toPage.value;
if(targetPage > document.shopForm.pageAmount.value){
targetPage = document.shopForm.pageAmount.value;
}
if(targetPage < 1){
targetPage = 1;
}
//alert(targetPage);
}else{
targetPage = parseInt(document.shopForm.targetPage.value) + parseInt(page);
}
document.shopForm.targetPage.value = targetPage;
document.shopForm.submit();
}
</script>
</head>
<script language="javascript">
function _toPage(v){
//alert(v);
toPage(v);
}
function viewShopCar(){
document.location.href="shop.do?method=displayAddedShops";
}
</script>
<body>
<html:form action="/shop.do?method=find">
<html:hidden property="targetPage"/>
<input type="hidden" value="<bean:write name='shopForm' property='totalPage'/>" name="pageAmount"/>
<table width="731" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="731"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"><div align="center"><strong><bean:message key="shop.seq.no" bundle="shop"/></strong></div></td>
<td width="42%"><div align="center"><strong><bean:message key="shop.name" bundle="shop"/></strong></div></td>
<td width="18%"><div align="center"><strong><bean:message key="shop.price" bundle="shop"/></strong></div></td>
<td width="25%"><div align="center"><strong><bean:message key="shop.select" bundle="shop"/></strong></div></td>
</tr>
<logic:notEmpty name="shopForm" property="shops">
<logic:iterate id="shop" name="shopForm" property="shops" indexId="indexid">
<tr>
<td><div align="center">${indexid}</div></td>
<td><bean:write name="shop" property="name"/></td>
<td><bean:write name="shop" property="price"/></td>
<td><div align="center">
<input type="button" name="button${indexid}" value="<bean:message key="shop.add.shop" bundle="shop"/>" onClick="sendAjaxRequest('shop.do?method=addShop&shopId=${shop.id}')">
</div></td>
</tr>
</logic:iterate>
</logic:notEmpty>
</table></td>
</tr>
<tr>
<td>
<logic:greaterThan name="shopForm" parameter="totalPage" value="1" >
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="24%"><div align="right"><bean:message key="shop.no" bundle="shop"/><bean:write name="shopForm" property="targetPage"/>/<bean:write name="shopForm" property="totalPage"/>頁</div></td>
<td width="64%">
<c:choose>
<c:when test="${shopForm.hasFirst}"><a href="#" οnclick="_toPage('f')"><bean:message key="shop.first.page" bundle="shop"/></a></c:when>
<c:otherwise><bean:message key="shop.first.page" bundle="shop"/></c:otherwise>
</c:choose>
<c:choose>
<c:when test="${shopForm.hasPrev}"><a href="#" onClick="_toPage(-1)"><bean:message key="shop.prev.page" bundle="shop"/></a></c:when>
<c:otherwise><bean:message key="shop.prev.page" bundle="shop"/></c:otherwise>
</c:choose>
<c:choose>
<c:when test="${shopForm.hasNext}"><a href="#" onClick="_toPage(1)"><bean:message key="shop.next.page" bundle="shop"/></a></c:when>
<c:otherwise><bean:message key="shop.next.page" bundle="shop"/></c:otherwise>
</c:choose>
<c:choose>
<c:when test="${shopForm.hasLast}"><a href="#" onClick="_toPage('l')"><bean:message key="shop.last.page" bundle="shop"/></a></c:when>
<c:otherwise><bean:message key="shop.last.page" bundle="shop"/></c:otherwise>
</c:choose>
<c:if test="${shopForm.totalPage>1}">
<bean:message key="shop.no" bundle="shop"/>
<input name="toPage" type="text" size="2"/>
<bean:message key="shop.page" bundle="shop"/>
<input type="button" name="goButton" value="Go" onClick="_toPage('g')"/>
</c:if>
</td>
<td width="12%"><input type="button" value="查看購物車" onClick="viewShopCar()"></td>
</tr>
</table>
</logic:greaterThan>
</td>
</tr>
</table>
</html:form>
</body>
</html>