JavaWeb - 仿小米商城（6）：商品添加到购 物车

JavaWeb - 仿小米商城（6)商品添加到购物车

1 功能描述

接上篇 JavaWeb - 仿小米商城（5）：商品详情展示 本篇博客将分析和实现小米商城商品添加到购物车 和展示。如以下H5页面所示：

2 功能分析

2.1 功能逻辑抽象

商品购物车功能在逻辑上并不复杂：在商品界面每当点击商品 <img>标签或商品名称时，都会向后端提 交一个 GET 请求来将本商品数据内容添加到Session。后端在收到请求后查询数据库并以Map形式储存 内容到session

商品购物车是面向数据库中的 tb_cart表，在购物车列表页面点击结算将数据添加到数据表。在开发时基 于三层架构体系建立对应的 CartServlet 类、CartService 接口和实现类、CartDao 接口和实现类。

备注：vo，dto,domain,entity,pojo的含义

POJO（Plain Ordinary Java Object）简单的Java对象，实际就是普通JavaBeans(规范),pojo是业 务称呼.

entity:实体类,一个类,属性严格对应一个表格的行数据

domain:封装数据库的javabean对象,一个对象可以封装多个表格数据.（domain的范围大于 entity）

DTO:专门负责接收前端表格数据的对应结构的javabean.

vo:view object,视图对象,ajax要什么,就封装什么

POJO与JavaBean的比较：

pojo:用于数据的临时传递，它只能装载数据，作为数据存储的载体，不具有业务逻辑的处理能 力。 javaBean:与pojo相比，它里面可以有其他方法。 JavaBean是可重用组件，需要符合以下条 件：

这个类必须有一个公共的缺省构造函数 这个类的属性使用getter和setter来访问设置数据，其他方 法遵从标准命名规范 这个类可以序列化

3 代码实现

3.1 前端

3.1.1 修改商品详情a链接地址

3.1.2 编写cart.html代码

前端在加载html内容时便向后端提交异步请求。在购物车详情页查询CartServlet里的showCart方法数 据，发出请求向CartServlet获取session中添加的购物项的json数据

cart.html 的<script>标签中定义以下 jQuery 代码：

<script type="text/javascript">
    function pNum(pid,p,no){
   
        var nums = $("#num_count"+no).val();
        if(Number(nums)>=5){
   
            alert("每人限购5件")
        }else {
   
            nums=parseInt(nums)+1;//购买的数量不能超过总库存数
        }

        $.ajax({
   
            url:"cart.do?action=updateCartNum&pid="+pid+"&num="+nums+"&price="+p,
            method:"get",
            success:function(){
   
                location.href = "cart.html";
            },
            error:function(){
   
                alert("服务器异常");
            }
        })
    }
    function mNum(pid,p,no){
   
        var nums = $("#num_count"+no).val();
        nums=parseInt(nums)-1;
        if(Number(nums)<=1){
   
                num = 1;
           alert("最少不能少于一件")
        }
        $.ajax({
   
            url:"cart.do?action=updateCartNum&pid="+pid+"&num="+num+"&price="+p,
            method:"get",
            success:function(){
   
                location