商城项目购物车的实现

逃离我推掉我的手 2022-01-06 05:19 268阅读 0赞

### 商城项目购物车的实现 ###

*  一，新建购物车的实体类Cart
 *  二，在选择商品类型页面进行页面跳转
 *  三，在controller进行添加商品对象并记入session
 *  四，购物车页面接收购物车信息并展示
 *  五，补充说明

**首先是springboot和thymeleaf整合的demo项目，然后使用session实现购物车**

# 一，新建购物车的实体类Cart #

public class Cart implements java.io.Serializable{ 
        private Shangpin shangpin;//存放商品实体类的
        private Integer number;//商品数量
        //setter和getter方法省略

# 二，在选择商品类型页面进行页面跳转 #

//购物车，把id参数传到后台controller
            function shoppingCar() { 
                var id=$("#baga").val();
                var color=$("#hiddenColor").val();
                var size=$("#hiddenSize").val();
                 location.href="/demo/shoppingCart?id="+id+"&color="+color+"&size="+size;
            }

# 三，在controller进行添加商品对象并记入session #

/** * 添加到购物车 */
    @RequestMapping("/shoppingCart")
        public String shoppingCart(Integer id,HttpSession session,String color,String size){ 
        Integer ids=Integer.valueOf(id);
        //根据id获取商品对象
        List<Map> list=selectService.spMessage(ids);
        System.err.println("商品列表:"+list);
        Shangpin shangpin=new Shangpin();
        shangpin.setPicpath((String) list.get(0).get("picpath"));
        shangpin.setColor(color);
        shangpin.setSize(size);
        shangpin.setName((String)list.get(0).get("name"));
        shangpin.setPrice((Double) list.get(0).get("price"));
        shangpin.setId((Integer) list.get(0).get("id"));
        //获取购物车
        Map<Integer, Cart> cartMap=(Map<Integer, Cart>)session.getAttribute("cartMap");
        //第一次添加商品到购物车
        if(cartMap==null){ 
            cartMap=new HashMap<Integer, Cart>();//实例化map对象
            //实例化购物车对象
            Cart cart=new Cart();
            cart.setShangpin(shangpin);
            cart.setNumber(1);
            //保存商品对象到map集合中
            cartMap.put(id,cart);
        }else{ //第一次以后的操作
            Cart cart=cartMap.get("id");//根据商品id，获取购物车实体类
            if(cart!=null){ //存在相同的商品
                cart.setNumber(cart.getNumber()+1);
    
            }else{ 
                cart=new Cart();
                cart.setShangpin(shangpin);
                cart.setNumber(1);
                cartMap.put(id,cart);
            }
        }
        //然后保存到session中
        session.setAttribute("cartMap",cartMap);
        return "forward:getShoppingCar";
    }

/** * 从session中取出购物车信息，并转发到购物车页面展示商品信息 */
    @RequestMapping("getShoppingCar")
        public String getShoppingCar(HttpSession session,Model model){ 
        Map<Integer,Cart> cartMap =(Map<Integer,Cart>)session.getAttribute("cartMap");
        model.addAttribute("carList",cartMap);
        return "udai_shopcart";
    }

# 四，购物车页面接收购物车信息并展示 #

<table class="table table-bordered">
    						<thead>
    							<tr>
    								<th width="150">
    									<label class="checked-label"><input type="checkbox" class="check-all"><i></i> 全选</label>
    								</th>
    								<th width="300">商品信息</th>
    								<th width="150">单价</th>
    								<th width="200">数量</th>
    								<th width="200">现价</th>
    								<th width="80">操作</th>
    							</tr>
    						</thead>
    						<tbody>
    							<tr th:each="list:${carList}">
    								<th scope="row">
    									<label class="checked-label"><input type="checkbox"><i></i>
    										<div class="img">![在这里插入图片描述]()</div>
    									</label>
    								</th>
    								<td>
    									<div class="name ep3" th:text="${list.value.shangpin.name}"></div>
    									颜色分类：<div th:text="${list.value.shangpin.color}"></div>尺码：<div th:text="${list.value.shangpin.size}"></div>
    								</td>
    								<td th:text="${list.value.shangpin.price}">¥20.0</td>
    								<td>
    									<div class="cart-num__box">
    										<input type="button" class="sub" value="-">
    										<input type="text" class="val" value="1" maxlength="2">
    										<input type="button" class="add" value="+">
    									</div>
    								</td>
    								<td th:text="${list.value.shangpin.price}"></td>
    								//这里删除按钮可获得对应的id，具体删除就是删除对应session中的键值对就可以了。
    								<td><a th:onclick="caonima([[${list.value.shangpin.id}]])">删除</a></td>
    							</tr>
    						</tbody>
    					</table>

# 五，补充说明 #

因为购物车信息存储的是键值对，并且值是以对象的形式存储的，所以，使用thymeleaf遍历数组取数据的时候需要这样才能取出对应的数据。

如果使用的是jsp和c标签的话，只需要如下即可。

<td>${ list.value.shangpin.name}</td>

效果如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]  
上面是购物车的基本操作，有问题欢迎留言！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]: /images/20211227/6b83bf7ad0f44fdebff1ec49bcd15882.png