商城项目购物车的实现

Posted 2021-03-06 fantongxue

目录

• 一，新建购物车的实体类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遍历数组取数据的时候需要这样才能取出对应的数据。

<div class="name ep3" th:text="${list.value.shangpin.name}"></div>

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

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

效果如图

上面是购物车的基本操作，有问题欢迎留言！