ssm实战--实现购物车功能

========================================后台管理系统==================================================

管理人员可以在这里发布商品，查看订单等等操作

  商品管理

* 带条件查询商品，通过boostrap的分页插件展示商品列表

* 创建商品，添加商品的信息以及必须上传五张照片用来展示商品效果

* 编辑商品

* 删除商品

1.上传图片

* form表单的method="post" enctype="multipart/form-data"

* 用于接收表单元素所提交参数的处理器方法的形参类型为 MultipartFile 数组，且必须使用注解@RequestParam 修饰

* 处理器方法中形参名字必须和表单中的name属性一致

        * 要想判断是否上传的图片为空，不能用== null来判断，必须用isEmpty(),因为系统会为每一个表单元素创建对象

* 向数据库中保存图片，保存的是图片在项目中所在文件夹的地址，这样读取时可以直接访问

2.表单验证

* 提交表单的时候又想保留原来表单提交的方式，还想处理后台返回的信息，可以使用ajaxForm

$(function(){// 点击报存按钮提交表单$("#saveProductBtn").click(function(){$("#productForm").prop("action","product/saveProduct.do");$("#productForm").submit();});// ajaxForm配置完,并不会真正的提交,而是要等到submit()事件,才会提交$("#productForm").ajaxForm({//clearForm:true, //提交成功后清空所有表单字段值(包括文本域,但是文件不会清空)//dataType:json,//type:"POST",resetForm:true, //表示成功提交后重置所有字段beforeSubmit:function(){ // 在提交前进行表单验证if(!checkProductNo() || !checkTitle() || !checkPrice() || !checkPhotos()){return false;}return true;},success:function(data){if(data.success){$("#message").text("保存成功");window.location.href = "${pageContext.request.contextPath}/product/index.do";}else{$("#message").text("保存失败");}}});});

* 但是要注意的一点是，在有文件控件提交时，ajaxForm会自动过滤掉上传为空的控件。

  比如说总共有五个文件控件，用户只给三个控件选择了上传内容,通过ajaxForm传到后台的只有三个，但是通过原始Form传到

后台的有五个。所以在这样的情况下，我们必须使用原始的form表单。

  验证可以在表单中有一个type="submit"的按钮，form 属性定义onsubmit="return 方法名()；"

3.批量选择数据

除了直接拼接，下面的方法用到数组的特性

// 定义一个数组var array = [];$o.each(function(){// 向数组中添加元素array.push(this.value);})// 通过分隔符将数组中的元素拼接成一个字符串var data = "ids=" + array.join("&ids=");

========================================前端购物平台==================================================

展示给用户的页面,用户可以浏览商品添加购物车结算付款

1.页面之间的跳转

除了首页(展示商品的主页面)之外，其余的页面为了保护数据的安全性均放在WEB-INF下，所以页面之间的跳转需要通过controller来实现

2.从哪个页面点击登录或注册链接，操作成功后重新回到原来的页面，需要将当前页面的url传给处理器

// 给"注册"按钮绑定单击事件$("#registerCustomerBtn").click(function(){// 获得当前URLvar returnURL = window.location.href;window.location.href ="${pageContext.request.contextPath}/portal/main/register.do?returnURL="+returnURL;});

3.添加购物车

这是最重要的一部分，业务上分为两种情况，用户在不登录和登录的状态下都可以将商品添加到购物车

首先分析的是不登录的状态：

游客不登录，就不能将购物车状态记录到数据库中，所以如何保留数据状态是问题的关键。这时候我们想到的是cookie，

将数据保存到浏览器本地。那么如何保存？购物车中的信息包括两部分，一部分是商品的详细信息，一部分是购买商品的数量。

所以将关键的商品标识和购买数量以"商品标识1-购买数量，商品标识2-购买数量，...."的形式保存到cookie中。

有了思路，就是如何去实现？

由于对cookie的操作很繁琐，所以以下操作可以写到一个工具类中，方便调用：

* 添加商品操作

游客在点击某一商品添加到购物车时，首先需要得到本地cookie的值，查看本商品是否已经在cookie中。

（1）如果在，那么直接更新该商品标识的数量即可。

（2）如果不在，就直接向cookie中添加该商品标识的信息即可

* 删除商品操作

得到cookie，找到该商品标识的键值对，清空即可

* 修改商品数量操作

得到cookie，找到对应商品标识，更新数量

* 统计购物车商品总数量

得到cookie，遍历将数量相加，将总数量放到session中

* 展示cookie中的购物车

拿到cookie中的商品标识去数据库中查询详细信息

得到新拼接好的cookie响应给浏览器

其次分析的是登录状态：

也分为两种情况：

（1）用户注册

游客在浏览商品过程中突然有了购买意向，将商品加入购物车去注册新账号，由于是新用户，所以购物车表中肯定没

有该用户的数据，但是要得到cookie的值，判断是否为空：

-----为空：不做处理，直接注册成功

-----不为空：需要将cookie中的商品标识插入到购物车表中

（2）用户登录

得到cookie的值，判断是否为空

-----为空：不做处理，直接登录成功

-----不为空：判断cookie中的商品标识是否已经存在购物车表中

---------如果存在：将cookie中的数量加上原来购物车中的数量更新

---------如果不存在：将该商品标识的数据插入到购物车中

得到购物车中商品总数量：由于每次会将cookie中的值更新到数据库中，所以直接查询数据库计算总数即可。

展示购物车中的商品：直接查询该用户的购物车表

其他边边角角的问题：

a）Dao层有多个字符串类型的参数，不封装Map，如何应用？

Integer selectCountOfShoppingCart(@Param("customerId") Integer customerId, @Param("status") String status);

b） 对于一些在多个类中经常用到的变量，可以定义成系统常量，这样如果发生变动，只需要改一处即可

public class ApplicationConstant {/** * 将用户信息保存到session作用域的常量 */public static final String SESSION_CUSTOMER = "session_customer";/** * cookie中关于购物车的标识 */public static final String COOKIE_SHOPCART = "cookie_shopcart";/** * 购物车中商品总数量 */public static final String COUNTOFSHOPCART = "count_of_shopcart";}

c）前台对于有无用户session的购物车数量展示可以通过jstl标签

<c:choose><c:when test="${not empty session_customer}">。。。。。</c:when><c:otherwise> 。。。。。 </c:otherwise>     </c:choose>

d）刷新当前页面

location.replace(location);

e）判断table中是否有内容

if($(".shoppingBox table tr:visible").length == 0){alert("没有商品可以结算");return;}

f）mybatis中统计数量

<!-- 查询用户标识下购物车的总数量 --><select id="selectCountOfShoppingCart" resultType="int">select ifnull(sum(purchaseCount),0)from tbl_shopping_cartwhere customerId = #{customerId} and status = #{status}</select>

g）回退

onclick="window.history.back(-1);"