利用thymeleaf的fragment实现mini购物车

Posted 2021-10-30 karong007

后台 java 代码

@GetMapping("/minicart")
public String minicart(@CookieValue(value = "list_cart_cookie",required = false) String list_cart_cookie,HttpSession session,Model model){
    if (UserLoginUtil.load() == null) {
        if(StringUtils.isBlank(list_cart_cookie)){
            return "common/navbar::minicart";
        }else{
            try {
                ShoppingCartItemCookieDTO[] cartItemCookieDTOArr = objectMapper.readValue(list_cart_cookie, ShoppingCartItemCookieDTO[].class);
                List<ShoppingCartItemCookieDTO> cartItemCookieDTOList = Arrays.asList(cartItemCookieDTOArr);
                List<ShoppingCartItemCookieDTO> shoppingCartItemCookieDTOS = new ArrayList(cartItemCookieDTOList);
                ShoppingCartDTO shoppingCartDTO = getShoppingCartDTOFromCookie(shoppingCartItemCookieDTOS);
                model.addAttribute("shoppingCartDTO",shoppingCartDTO);
                return "common/navbar::minicart";
            } catch (IOException e) {
                log.error(e.getMessage());
                return "common/navbar::minicart";
            }
        }
    }else{
        List<ShoppingCart> shoppingCarts = (List<ShoppingCart>) session.getAttribute("list_cart_session");
        if (shoppingCarts == null || shoppingCarts.isEmpty()) {
            return "common/navbar::minicart";
        } else {
            ShoppingCartDTO shoppingCartDTO = getShoppingCartDTOFromSession(shoppingCarts);
            model.addAttribute("shoppingCartDTO",shoppingCartDTO);
            return "common/navbar::minicart";
        }
    }
}
前台显示页面

（1）我在 java 程序中返回的路径 return "common/navbar::minicart" 要和图片中的 fragment 的路径相对应，这样才能获取到页面中的数据。
或者你也可以在浏览器的控制台中查看请求的响应，如果响应的内容正好是 th:fragment="minicart" 中的内容就对了。

（2）使用 jquery 的 slideToggle 方法实现mini购物车的显示和隐藏，jquery 的 slideToggle 方法大家可以自行百度。

$(".cart_link").on("click", function() {
    $(‘.mini_cart‘).slideToggle(‘medium‘);
    $.get("/cart/minicart",function (data) {
        $(".mini_cart").html(data);

    })
});
这里要注意的一个问题就是包含关系要弄清楚：class="mini_cart" 的div 和 th:fragment="minicart" 的div 不能放在同一个 div 中，而且是 class="mini_cart" 的 div 要包含 th:fragment="minicart" 的 div，这样 class="mini_cart" 的 div 才不会重复出现