通用WEB应用系统(Struts2.0+Hibernate+Ajax)(下）

来源：互联网发布：手机淘宝联系卖家编辑：程序博客网时间：2024/05/15 01:50

目录结构

一、功能描述

购物车管理、我的订单、用户管理、商品管理

二、系统架构

开发流程、系统框架、代码的目录结构

三、表、关系和基础类

（基础配置文件、Hibernate拦截器）

四、模块功能与原理：

（受篇幅限制，只选部分页面）

Authorize(用户管理模块)：之

登录页面login_form.jsp

Category(商品目录模块)：之

详细商品目录：book_list.jsp

Cart（购物车模块）:之

我的购物车cart.jsp

Order（订单模块）:之

确认订单页面order_info.jsp

填写送货地址页面 Address_form.jsp

五、重点难点要点：

重点1：购物车的设计

设计方法一：将购物车和购物车相关功能放入封装购物车的cartService中，再将cartService放入Session中。（本系统推荐方法）

设计方法二：只将购物车放入Session中，购物车相关功能再需要数据时，从session中获取。

难点1：点击购买时，如何得到产品ID信息并将该ID传给相应Action.

解决方案：给每一个展示的商品设置一个动态的id，在循环生成的商品列表中添加JavaScript或AJAX代码。

难点2：数量变更时的操作，如何得到产品ID信息和商品数量信息，并将数据传给相应的Action.

解决方案：通过发送AJAX请求，可以很容易的将参数以JSON格式发送过去。

难点3：如何将用户先前的送货地址信息作为下拉列表显示，并当用户选择相应的地址时，地址栏中各个文本框都自动填充数据。

解决方案:a、通过OGNL表达式的

<s:select name="addresses" label="填写详细地址" list="addresses" listKey="abbreviation" listValue="fullAddress" multipe="false" id="myAddresses"></s:select>

遍历显示已经在数据库中存在的详细地址数据；

b、当用户选择了某个详细地址时，发送AJAX请求,将详细地址作为参数发送给相应Action.并在回调函数中通过得到的地址对象中的数据，给各个文本框赋值。

六、收获体会、知识点总结：

Ajax模板、常用jQuery方法（ID选择器、元素事件、Ajax方法说明）

0 )、关于数据库存取的编码问题

修改默认字符集
(1) 最简单的修改方法，就是修改mysql的my.ini文件中的字符集键值，
如：default-character-set = utf8
（character_set_server = utf8）
修改完后，重启mysql的服务，service mysql restart
(2) 还有一种修改字符集的方法，就是使用mysql的命令,如：
mysql> SET character_set_client = utf8 ;
mysql> SET character_set_connection = utf8 ;
mysql> SET character_set_database = utf8 ;
mysql> SET character_set_results = utf8 ;
mysql> SET character_set_server = utf8 ;
mysql> SET collation_connection = utf8 ;
mysql> SET collation_database = utf8 ;
mysql> SET collation_server = utf8 ;

如果：没有设置前两条，可以通过以下方式实现编码：

a 建数据库时设置数据库支持的编码：create database dangdang charset=utf8;

b 使用数据库dangdang use dangdang;

c 插入中文数据时，需要先设置：set names utf8;

d 将数据导入 source d:/dangdang.sql

(每个见表语句后加：ENGINE=InnoDB DEFAULT CHARSET=utf8;)

e. 附加：发送请求以post而不是get;

在hibernate配置文件中加？useUnicode=....

<property name="connection.url">
jdbc:mysql://localhost:3306/dangdang2?useUnicode=true&characterEncoding=utf8
</property>

1）、Ajax（异步发送请求，在jQuery框架下）模板和例子：

AJAX结构

$(function(){

$.get("actionName",{"param1":valueOfParam1,"param2":valueOfParam2},function(data){

//data代表相应的action所返回的数据。通过data.**得到相应的属性值。

//进行后续操作

});

例子：自动填充地址信息

//先确定用户选择了什么选项，再给各个文本框赋值。
$(function() {
   $("#myAddresses").change(function() {
   selFullAddr = $("#myAddresses option:selected").text();
   alert("你选择了：" + selFullAddr);
   $.get("getSelectedAddress", {
    "fullAddress" : selFullAddr
   }, function(data) {
    rname = data.address.receiveName;
    $("#receiveName").attr("value", rname);
    $("#fullAddress").attr("value", data.address.fullAddress);
    //this is also ok $("#receiveName").val(data.address.receiveName);
     $("#postalCode").attr("value", data.address.postalCode);
     $("#phone").attr("value", data.address.phone);
     $("#mobile").val(data.address.mobile);
    }, "json");
  });
});

请求：<a javascript:; onclick=”location=’../cart/cart.action’”></a>

struts2.0应用总结

2）、常用jQuery方法

A、ID选择器及相关知识： $("#id").

$("#myAddress").val("someValue"): 给ID为myAddress的文本输入框赋值(值为someValue).

$("#myAddress").val("value","someValue"):给ID为myAddress的文本输入框的value属性赋值 (someValue).

$("#myAddress").val(）：获取输入框的值。

$(”input元素名称”).val(value); 设置input元素的值为value

$(”元素名称”).text(); 获得该元素的文本

$(”元素名称”).html(); 获得该元素内的内容（元素，文本等）

$(”元素名称”).text(value); 设置该元素的文本值为value

$(”元素名称a”).appendTo(contentb); 在contentb后接元素a

$(”元素”).remove(); 删除所有的指定元素

B、元素事件列表说明

注：不带参数的函数，其参数为可选的 fn。

事件描述支持元素或对象

blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area

change( ) 用户改变域的内容 input, textarea, select

click( ) 鼠标点击某个对象几乎所有元素

keyup( ) 某个键盘的键被松开几乎所有元素

load( fn ) 某个页面或图像被完成加载 window, img

mouseover( fn ) 鼠标被移到某元素之上几乎所有元素

C、JQuery Ajax 方法说明 ---IMPORT----

jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。

$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){

alert(”Data Loaded: ” + data);

});

jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。

$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){

alert(”JSON Data: ” + json.users[3].name);

});

jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。

注：type可写"json","xml"等。

七、部分核心示范代码（购物车模块）：

包括：CartService类、CartAction类、cart_list.jsp页面、struts-cart.xml

7.1 CartService类

//作用：用于封装购物车和所有的购物相关业务逻辑。

public class CartService implements ICartService {

private DBook book;

private CartItem item;

private DUser user;

// map（代表购物车）中键放商品id,值放商品条目。

private Map<Integer, CartItem> map = new HashMap<Integer, CartItem>();

//list从map转化而得，为了在视图中显示顾客的购买信息。

private List<CartItem> list = new ArrayList<CartItem>();

//用户购买商品。

public boolean add(Integer id) {

item = map.get(id);

if (item == null) {

// 如果通过商品的id找不到该商品条目，则该商品未被购买。新建商品条目。

IBookDAO dao = DAOFactory.getBookDAO();

DBook book = dao.findBookBy(id);

item = new CartItem();

item.setNum(1);

item.setDelete(false);

item.setP(book);

map.put(id, item);

// System.out.println(item.getNum());

} else {

item.setNum(item.getNum() + 1);

// System.out.println(item.getNum());

}

System.out.println("你已经买了： " + map.size() + "个商品条目");

// 通过id找到product,再设置到添加cartItem。

return true;

}

//删除商品条目

public boolean delete(Integer id) {

// 根据product id, 在map中撤除相应的cartItem

System.out.println("---delete(id) of CartService...");

item = map.get(id);

item.setDelete(true);

return true;

}

//恢复商品条目

public boolean restore(Integer id) {

System.out.println("---restore(id) of CartService...");

item = map.get(id);

item.setDelete(false);

return true;

}

//设置商品条目的cartItem中的数量

public boolean setNum(Integer pid, Integer number) {

// 通过传过来的产品id,找到相应的产品条目。

if (number > 100) {

number = 100;

}

CartItem cartItem = map.get(pid);

cartItem.setNum(number);

return true;

}

//取得购物车总金额（通过遍历购物车中所有的条目）

public double getMoney() {

double sum = 0;

for (int i = 0; i < list.size(); i++) {

item = list.get(i);

if (item.isDelete() == false) {

double subSum = 0;

subSum = (item.getNum()) * (item.getP().getDangPrice());

System.out.println("item.getNum():" + item.getNum()

+ " .item.getP().getDangPrice():"

+ item.getP().getDangPrice());

sum = sum + subSum;

}

System.out.println("total money of cart: " + sum);

return sum;

}

//将map转化为list,以便于页面显示

public List<CartItem> getList() {

list.clear();

Set set = map.keySet();

for (Object xxx : set) {

CartItem item = map.get(xxx);

list.add(item);

}

System.out.println("CartService list's size(): " + list.size());

return list;

}

//属性的getter和setter方法。。。。（省略）

}

7.2 CartAction类

//作用：调用cartService相应方法，实现购物功能。

public class CartAction extends BaseActionSupport {

//id 为产品ID,number为购买的数量,sum为购物车商品的总价格，list1从map中转化而来，

//service封装购物车和所有的购物相关业务逻辑.

private Integer id;

private Integer number;

private double sum;

private List<CartItem> list1 = new ArrayList<CartItem>();

private String time;

ICartService service = null;

public String execute() {

// 调用cartService相应方法，将商品条目加到购物车中。

boolean flag = ServiceFactory.getCartService().add(id);

System.out.println("---execute of CartAction with id: " + id

+ " .added:" + flag);

return "success";

}

public String changeQty() {

//调用cartService相应方法，实现更改商品数量。

System.out.println("---changeQty()");

boolean flag=ServiceFactory.getCartService().setNum(id,number);

System.out.println("changeQty.action of CartAction. id: "+id+" .number: "+number);

return "success";

}

public String caluateMoney(){

//调用cartService相应方法，计算总金额

System.out.println("---caluateMoney");

sum=ServiceFactory.getCartService().getMoney();

return "success";

}

public String deleteItem(){

//调用cartService相应方法，删除商品条目

boolean flag=ServiceFactory.getCartService().delete(id);

System.out.println("---delete() of CartAction...with id: "+id);

time=""+System.currentTimeMillis();

return "success";

}

public String restoreItem(){

//调用cartService相应方法，恢复商品条目

boolean flag=ServiceFactory.getCartService().restore(id);

System.out.println("---restoreItem() of CartAction...with id: "+id);

return "success";

}

//属性的getter和setter方法，此处忽略...

}

7.3 购物车视图cart_list.jsp

// 作用：提供已购买商品信息，供删除、更改商品等功能。

<s:iterator value="list1" var="cartItem">

<s:if test="#cartItem.delete==false">

9317290

</td>

</td>

<td>

<a href="#">${cartItem.p.productName}(id=${cartItem.p.id})</a>

</td>

${cartItem.num}

</td>

<td >

</td>

<td>

</td>

</tr>

//发送AJAX请求，将商品ID和更改后数量传给服务器，服务器进行处理

$(function(){

//当用户点击更改数量时，进行的操作。

$("#${cartItem.p.id+3333}").click(function(){

var newNum=document.getElementByIdx_x_x_x_x_x_x_x_x("${cartItem.p.id+9999}").value;

alert("你在更改数量le：id "+${cartItem.p.id}+"number: "+newNum);

$.get(

"changeQty",{"id":${cartItem.p.id},"number":newNum},function(data){

window.location="showCart.action";

}

);

</s:if>

</s:iterator>

7.4 购物车配置文件 struts-cart.xml

<!—作用：当用户点击某个请求时，服务器将读取该配置文件，并执行相应的方法并转向相应逻辑视图-->

<result name="success">/category/booklist.action</result>

<result name="input">/category/booklist.action</result>

</action>

</action>

</package>

</struts>