淘淘商城——添加购物车

上文我们一起改造了下商品详情页面关于购物车那块的部分,本文我们将一起实现添加购物车这个功能。
我们以京东为例,比如我们选了一款手机,然后点击”加入购物车”,注意,此时我们并没有登录。
这里写图片描述
我们会看到如下图所示界面,可以看到,我们并没有直接进入购物车列表,而是到了一个中间页面,只是提醒我们成功加入了购物车。如果想进购物车列表的话,就点击那个”去购物车结算”按钮。
这里写图片描述
我们模仿京东的购物车功能,既然要展示成功加入购物车的页面,我们就要先把下图所示的淘淘商城购物车工程静态资源文件添加到taotao-cart-web工程当中。
这里写图片描述
记得将css、js、images放到webapp目录下,将jsp目录放到WEB-INF目录下,如下图所示。
这里写图片描述
下面我们再看下我们的商品详情页面以及添加购物车的情况,我们首先要启动所有的服务,然后启动除了taotao-cart-web工程之外的所有工程,商品详情页面如下图所示。
这里写图片描述
我们点击上图的”加入购物车”,会看到如下图所示界面,可以看到加入购物车的请求当中包含了商品ID以及商品数量。我们可以根据商品ID查询出商品详情。
这里写图片描述
下面我们来完成添加购物车的功能,由于查询商品详情我们的taotao-manager服务已经实现过了,因此我们只需完成表现层工程即可。首先我们要添加对dubbo服务的引用,即在springmvc.xml配置文件中添加如下配置:

<dubbo:reference interface="com.taotao.service.ItemService" id="itemService" />
  • 1

这里写图片描述
接着我们在taotao-cart-web工程中按照如下业务逻辑编写一个Controller——CartController.java:

  1. 从cookie中查询商品列表。
  2. 判断商品在商品列表中是否存在。
  3. 如果存在,商品数量相加。
  4. 不存在,根据商品id查询商品信息。当根据商品id查询出商品信息后,取第一张图片保存到image属性中即可。
  5. 把商品添加到购物车列表。
  6. 把购物车商品列表写入cookie。
    • key:TT_CART
    • value:购物车列表转换成json数据,并且需要对数据进行编码
    • cookie的有效期:保存7天

如下图所示,在CartController类中处理逻辑并最终返回逻辑视图。
这里写图片描述
为了方便大家复制,现将CartController类的代码贴出。

/**
 * 购物车管理Controller
 * <p>Title: CartController</p>
 * <p>Description: </p>
 * <p>Company: www.itcast.cn</p> 
 * @version 1.0
 */
@Controller
public class CartController {
    @Autowired
    private ItemService itemService;
    @Value("${COOKIE_TT_CART}")
    private String COOKIE_TT_CART;
    @Value("${COOKIE_CART_EXPIRE}")
    private Integer COOKIE_CART_EXPIRE;
    @RequestMapping("/cart/add/{itemId}")
    public String addCart(@PathVariable Long itemId, Integer num, 
            HttpServletRequest request, HttpServletResponse response) {
        // 先从Cookie中查询购物车列表
        List<TbItem> cartList = getCartList(request);
        // 判断购物车列表中是否有此商品
        boolean flag = false;
        for (TbItem tbItem : cartList) {
            /*
             * 由于tbItem的ID与参数中的itemId都是包装类型的Long,要比较是否相等不要用==,
             * 因为那样比较的是对象的地址而不是值,为了让它们比较的是值,那么可以使用.longValue来获取值 
             */
            if (tbItem.getId() == itemId.longValue()) {
                // 购物车列表中存在此商品,数量要相加
                // 如果有,则商品数量相加
                tbItem.setNum(tbItem.getNum() + num); // 可以用商品的库存字段来作为购物车商品数量
                flag = true;
                break;
            }
        }
        if (!flag) {
            // 如果没有,则根据商品id查询商品信息,调用商品服务实现
            TbItem tbItem = itemService.getItemById(itemId);
            // 设置商品数量
            tbItem.setNum(num);
            // 取一张图片
            String image = tbItem.getImage();
            if (StringUtils.isNotBlank(image)) {
                tbItem.setImage(image.split(",")[0]);
            }
            // 添加到商品列表
            cartList.add(tbItem);
        }
        // 把这个购物车写入Cookie
        CookieUtils.setCookie(request, response, COOKIE_TT_CART, 
                JsonUtils.objectToJson(cartList), COOKIE_CART_EXPIRE, true);
        // 返回添加成功页面
        return "cartSuccess";
    }

    // 从Cookie中取出购物车列表
    private List<TbItem> getCartList(HttpServletRequest request) {
        // 使用CookieUtils取购物车列表
        String json = CookieUtils.getCookieValue(request, COOKIE_TT_CART, true);
        // 判断Cookie中是否有值
        if (StringUtils.isBlank(json)) {
            // 没有值就返回一个空List
            return new ArrayList();
        }
        // 把json转换成List对象
        List<TbItem> list = JsonUtils.jsonToList(json, TbItem.class);
        return list;
    }
}

CartController类的代码中用到了常量,常量我们都放到了配置文件当中,如下图所示。
这里写图片描述
下面我们来测试一下,我们启动taotao-cart-web工程,taotao-cart-web工程启动成功后,我们再到商品详情页面点击”加入购物车”,可以看到如下图所示界面,可以看到正常显示了”成功添加商品到购物车”的页面。
这里写图片描述

猜你喜欢

转载自blog.csdn.net/a_blackmoon/article/details/80555666