当当网开发有感（sturts2）

2011年2月9日开始学习struts2，到现在，用struts2花了7,8天完成了当当网的核心模块（包含大部分功能）

先对自己做的当当网做个总结吧：

首先是注册，注册页面基本的CSS以及美工，图片都是成品。表单里封装了user的字段，提交到Action中，利用Action中user对象的set方法封装了整个表单的值到他的属性中去，表单项不太多。但是由于整个注册需要2个步骤来完成，第一步简单的提交用户信息，第二部通过验证。第一步与第二步之间user的共享是通过session来做的。本来第二部是需要通过邮件，验证码是通过uuid生成的唯一字串，在通过Base64编码形成的。将发送的验证码，与表中的比较。由于种种原因，邮件的这部分操作，改用了简单的页面提示，只需把页面上显示的验证码复制到文本框提交就可以了。这里需要注意的就是如果用户在完成第一步之后，关掉了浏览器，下次登录的时候需要在Action里检查它是否通过了验证（user表中有对应的字段，同时也存了验证码）。总之注册的Action里做了：1，将用户信息写入d_user表。2，密码加密。3，生成邮箱激活码，并发送，将激活码uuid部分更新到数据库。还有个要点是，此处我的处理时在用户注册成功时，自动登录，将用户信息存入session。此处作的最烦心的事情就是jQry的表单验证，用了jQry的validate插件。由于页面的错误信息放置已经定死，此处需要重写jQry的errorPlacement方法，来定位错误信息的放置。同时使用了添加了一些验证规则，比如说汉字啊，一个汉字作为2个字符长度啊，此处的实现涉及到了addMethod方法（此为全局的方法）。

 

 

jQuery.validator.addMethod("character", function(value, element) {
   			var rules =/^[a-z0-9\u4e00-\u9fa5]+$/;
   			return this.optional(element) || (rules.test(value));
 			}, "<img src='../images/wrong.gif'/>请输入正确的昵称！"
 		);
 		jQuery.validator.addMethod("myLengthRange",function(value, element, param) {
 			var rules = /[\u4e00-\u9fa5][\u4e00-\u9fa5]+/;
 			var rule2 = /[\u4e00-\u9fa5]+/;
 			return this.optional(element) || (value.length>=param[0] && value.length<=param[1] || rules.test(value) && value.length<3 || value.length==3&&rule2.test(value));
 			},"<img src='../images/wrong.gif'/>昵称的长度必须大于4小于20！"
 		);

 

接下来是登录，登录的时候，登录的时候没有进行表单的验证。我觉得不太必要。但是如果用户名密码错误，或者为空点击登录，会利用Action返回的result定位到原来的页面，显示错误信息。此处需要注意的也就是当用户是还未通过验证的用户，那么他登录之后会跳转到验证页面，验证码从数据表中取得，此处操作通注册的第二步操作。

注册与登录完毕之后，进入main页面。main页面其实就是利用jQry   $.load()方法导入一些页面，以及利用ognl标签<s:action />来载入Action。如下：
   <s:action name="new" namespace="/main" executeResult="tr"></s:action>
 
 
左边栏是Category，分为二级菜单以及三级菜单。因为一级菜单，此处我们只对图书进行操作，所以也就省去了一级菜单的列出，直接设为静态。中间的最新上架，编辑推荐，最新热卖之类的Action做的操作大同小异。也就是利用不同的规则从数据库中查到到对应的list，然后利用ognl的iterator标签在页面中显示，此处，我在Action中设置了num字段用于控制显示的条目数，此字段用于iterator标签中的end属性，此属性在使用时必须声明begin属性。这里得num在getNum方法时，需要在其超出list.size()-1时，对其进行设置，设置为list.size()-1。在点击页面中的更多链接时，通过传入num参数，来改变显示的条目数量。同时main页面上做了jQry处理，在鼠标mouseover,mouseout,mousemove时显示产品大图。

 $(function(){
			var x = 10;
			var y = 20;
			$("img.dang_img").mouseover(function(e){
				this.myTitle = this.title;
				this.title = "";	
				var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
				var tooltip = "<div id='tooltip'><img height='200px' width='150px' src='"+ this.src +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素
				$("body").append(tooltip);	//把它追加到文档中						 
				$("#tooltip").css({
						"top": (e.pageY+y) + "px",
						"left":  (e.pageX+x)  + "px"
					}).show("fast");	  //设置x坐标和y坐标，并且显示
		    	}).mouseout(function(){
					this.title = this.myTitle;	
					$("#tooltip").remove();	 //移除 
		    	}).mousemove(function(e){
					$("#tooltip")
						.css({
							"top": (e.pageY+y) + "px",
							"left":  (e.pageX+x)  + "px"
						});
				});
			})

 接下来是购物车的操作。购物车的操作牵涉到了，jQry对按钮的点击的，修改图片的显示，在成功发送Ajax时回调函数，将图片替换为原来的图片。此处对购物车的添加商品也就是通过Ajax完成的。$.post()  购物车中如果购买的是相同产品，那么会通过查找，修改对应的CartItem的数量，若不同产品，则向CartItem的items（ArrayList）添加该商品，同时，更新Cart的总价以及省钱数。（Cart类包含一个List<CartItem>items，以及总价和省钱数；而CartItem中保存的是Book对象以及deleted（用于判断是否从购物车中删除，删除后可以恢复）和数量）。cartlist.jsp显示的2个列表，一个是购物车中的产品信息，一个是从购物车中删除的产品。利用ognl的iterator遍历，显示deleted为tr及false的2个列表。此处可以点击更改数目，此操作同时更新Cart的总价及省钱数。同时在删除某一产品后，再次购买该商品，用户若恢复删除的商品，此处也涉及了同一商品的数量合并，以及从List中删除多余的商品。
在点击结算按钮时，此处设置了拦截器，若用户未登录，则在拦截器中通过reqst.getHeader获得原页面的url在登录之后跳转到原来访问的页面（同理，在main页面的head上的登录按钮也用了这个拦截器）。所以此处在sturts.xml中的配置的result的返回页面是动态的，如下：    <result name="s?ss" type="redirect">${forward_to}</result>
 
此处购物车的信息需要在浏览器关闭后保留，则此处运用到session和cookie来一起工作来实现此功能。每一次更新购物车都需要将一个cart对象按照指定的规则转成字符串，通过UrlEncoder来编码，存入Cookie，因为涉及到中文问题，同时需要编写对应的方法按照规则将Cookie的字串转会成Cart对象。在session取对象取出来为空时，将cookie的字串转成cart，放入session，即可。

订单模块，牵涉到的业务也比较简单，首先点击结算，跳转到订单信息页面，显示购物车中的信息。同时点击下一步，此时进入一个Action先将表单信息存入数据库，接下来，完善收件地址，若为新地址则加入表中，同时更新order表中的地址信息（order表中存地址信息，本来我觉得字段有冗余，但是经同学点拨，得知用户可以修改，删除地址，所以订单中的地址信息不可存地址表外键）最后完成订单。完成订单后注意要删除cart对应的session以及cookie。