购物车的实现——淘淘商城（二十六）

购物车的实现方式

cookie

• 优点：
  • cookie存储在客户端，可以减小服务器的压力。
  • 关闭窗口与，cookie有效期内购物车不会丢失。
• 缺点：
  • 浏览器可能禁用cookie，购物车失效。
  • 购物车信息存储在本地cookie上，换电脑之后无法同步。

session

• 优点：
  • 不依赖于客户端的配置。
  • 存储在服务端，更加安全。
• 缺点：
  • 占用服务器资源，特别是高并发时极大影响性能。
  • session以文件形式存储敏感信息，有安全隐患。

结合数据库

• 数据库存储购物信息，cookie和session跟踪用户。
• 优点：
  • 数据库和cookie分别记录数据和维持会话，发挥各自优势，安全性得以提高。
• 缺点：
  • 每一次购物行为都要交互数据库，数据库性能要求高。
  • cookie依赖客户端。

参考

• 电子商务网站购物车设计。

添加购物车

• 将购物车信息存储在cookie中，并且可以在不登录的状态下使用购物车。
• 在taotao-portal中开发，调用服务层服务。

需求

分析

• 在商品详情页中添加到购物车。
  
• 添加成功后显示cartsuccess.jsp视图。
  • 视图中包括展示购物车的url，和返回之前页面的链接。
    

总结

• 请求url：art/add/{itemId}.html
• 请求参数：商品的id
• 响应：cartsuccess.jsp视图

Service层

• cookie.properties中添加cookie中购物车的名称。

#cookie中的购物车
TT_CART=TT_CART

• 创建购物车中的商品类CartItem。

public class CartItem {

    private long id;
    private String title;
    private Integer num;
    private long price;
    private String image;

    /**
     * 图片url的数组
     */
    private String[] images;
}

• 创建CartService和对应实现类。接收商品id和数量，servlet请求和响应，从cookie中获取购物车列表，如果该商品存在，则添加对应数量，否则在购物车列表中添加新的商品，之后将购物车写入cookie并返回TaotaoResult。

@Service
public class CartServiceImpl implements CartService {

    @Value("${REST_BASE_URL}")
    private String REST_BASE_URL;
    @Value("${ITEM_BASE_URL}")
    private String ITEM_BASE_URL;
    @Value("${TT_CART}")
    private String TT_CART;

    @Override
    public TaotaoResult addCartItem(long itemId, int num, HttpServletRequest request, HttpServletResponse response) {
        //从cookie中取购物车商品列表
        List<CartItem> cartItemList = getCartItemList(request);

        //购物车中是否存在商品
        CartItem cartItem = null;
        for (CartItem item : cartItemList) {
            if (item.getId() == itemId) {
                cartItem = item;
                break;
            }
        }

        if (cartItem != null) {
            cartItem.setNum(cartItem.getNum() + num);
        } else {
            cartItem = new CartItem();

            //根据商品id查询商品基本信息
            String json = HttpClientUtil.doGet(REST_BASE_URL + ITEM_BASE_URL + itemId);
            if (!StringUtils.isBlank(json)) {
                TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, TbItem.class);
                if (taotaoResult.getStatus() == 200) {
                    TbItem item = (TbItem) taotaoResult.getData();
                    cartItem.setId(item.getId());
                    cartItem.setTitle(item.getTitle());
                    cartItem.setImage(item.getImage() == null ? "" : item.getImage().split(",")[0]);
                    cartItem.setNum(num);
                    cartItem.setPrice(item.getPrice());
                }
                cartItemList.add(cartItem);
            }
        }

        //把购物车写入cookie
        CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartItemList), true);

        return TaotaoResult.ok(cartItemList);

    }

    private List<CartItem> getCartItemList(HttpServletRequest request) {
        String json = CookieUtils.getCookieValue(request, TT_CART, true);
        if (StringUtils.isBlank(json)) {
            return new ArrayList<>();
        }

        try {
            List<CartItem> list = JsonUtils.jsonToList(json, CartItem.class);
            return list;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new ArrayList<>();
    }
}

Controller层

• 创建CartController，接收商品id和数量，调用service层方法，返回cartSuccess视图。

@Controller
@RequestMapping("/cart")
public class CartController {

    @Autowired
    private CartService cartService;

    @RequestMapping("/add/{itemId}")
    public String addCartItem(@PathVariable Long itemId, @RequestParam(defaultValue = "1") Integer num,
            HttpServletRequest request, HttpServletResponse response) {
        TaotaoResult result = cartService.addCartItem(itemId, num, request, response);
        return "cartSuccess";
    }
}

展示购物车

需求

分析

• 从cookie中取得购物车信息，添加到视图并返回。
  

总结

• 请求url：/cart/cart.html
• 响应：cart视图，包含购物车信息

Service层

• CartService中获取购物车商品列表，返回这一列表。

    @Override
    public List<CartItem> getCartItemList(HttpServletRequest request, HttpServletResponse response) {
        return getCartItemList(request);

    }

Controller层

• 将购物车商品列表添加到cart.jsp，并返回这一视图。

    @RequestMapping("/cart")
    public String getCartItemList(HttpServletRequest request, HttpServletResponse response, Model model) {
        List<CartItem> list = cartService.getCartItemList(request, response);
        model.addAttribute("cartList", list);
        return "cart";
    }

修改商品数量

需求

分析

• 购物车页面中使用按钮和输入框。
  
• cart.js设定了操作数量的逻辑
  

总结

• 请求url：/cart/update/num/{itemId}/{num}
• 请求参数：商品id，商品数量
• 响应：购物车列表页面。

Service层

• CartService中接收商品id和数量，servlet请求和响应，从cookie中获取购物车列表，如果该商品存在，则将购物车中该商品的数量设为对应数量，否则在购物车列表中添加新的商品，之后将购物车写入cookie并返回TaotaoResult。

    @Override
    public TaotaoResult updateCartItem(long itemId, int num, HttpServletRequest request, HttpServletResponse response) {
        //从cookie中取购物车商品列表
        List<CartItem> cartItemList = getCartItemList(request);

        //购物车中是否存在商品
        CartItem cartItem = null;
        for (CartItem item : cartItemList) {
            if (item.getId() == itemId) {
                cartItem = item;
                break;
            }
        }

        if (cartItem != null) {
            cartItem.setNum(num);
        } else {
            cartItem = new CartItem();

            //根据商品id查询商品基本信息
            String json = HttpClientUtil.doGet(REST_BASE_URL + ITEM_BASE_URL + itemId);
            if (!StringUtils.isBlank(json)) {
                TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, TbItem.class);
                if (taotaoResult.getStatus() == 200) {
                    TbItem item = (TbItem) taotaoResult.getData();
                    cartItem.setId(item.getId());
                    cartItem.setTitle(item.getTitle());
                    cartItem.setImage(item.getImage() == null ? "" : item.getImage().split(",")[0]);
                    cartItem.setNum(num);
                    cartItem.setPrice(item.getPrice());
                }
                cartItemList.add(cartItem);
            }
        }

        //把购物车写入cookie
        CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartItemList), true);

        return TaotaoResult.ok();
    }

Controller层

• CartController中接收商品id和数量，调用Service层方法，重定向到/cart/cart.html。

    @RequestMapping("/update/num/{itemId}/{num}")
    public String updateCartItem(@PathVariable Long itemId, @PathVariable Integer num, HttpServletRequest request,
            HttpServletResponse response) {
        cartService.updateCartItem(itemId, num, request, response);
        return "redirect:/cart/cart.html";
    }

删除商品

需求

分析

• 购物车页面中通过链接删除商品。
  

总结

• 请求url：/cart/delete/{itemId}
• 请求参数：商品id
• 响应：购物车列表页面

Service层

• CartService中，从cookie中读取商品列表，删除对应商品之后重新写入cookie。

    @Override
    public TaotaoResult deleteCartItem(long itemId, HttpServletRequest request, HttpServletResponse response) {
        //从cookie中取购物车商品列表
        List<CartItem> itemList = getCartItemList(request);
        //从列表中找到此商品并删除
        for (CartItem cartItem : itemList) {
            if (cartItem.getId() == itemId) {
                itemList.remove(cartItem);
                break;
            }
        }

        //把购物车列表重新写入cookie
        CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(itemList), true);

        return TaotaoResult.ok();

    }

Controller层

• CartController中，接收商品id，调用Service方法，重定向到购物车页面。

    @RequestMapping("/delete/{itemId}")
    public String deleteCartItem(@PathVariable Long itemId, HttpServletRequest request, HttpServletResponse response) {
        cartService.deleteCartItem(itemId, request, response);
        return "redirect:/cart/cart.html";
    }

运行工程

• 运行portal,rest,sso,search,redis，登录并打开商品详情页面添加到购物车。
  
• cookie中会显示编码之后的购物车商品列表。
  
• 如果更改数量，总价也会随之改变。