springboot图书商城-layui+thymleaf+MP(第二部分)

最新推荐文章于 2024-08-23 09:12:53 发布

置顶这个名字先用着

最新推荐文章于 2024-08-23 09:12:53 发布

阅读量391

点赞数

分类专栏： springboot 文章标签： spring boot

本文链接：https://blog.csdn.net/weixin_38568503/article/details/117787380

版权

springboot 专栏收录该内容

37 篇文章 3 订阅

订阅专栏

购物车模块：

在这里插入图片描述

做一个类似页面：
在这里插入图片描述

在这里插入图片描述

开始代码编写：
实体类：
在这里插入图片描述
购物车实体类：

添加商品项：(代码写在购物车实体类中)
注意将集合换成Map:

在这里插入图片描述
删除商品项：（商品项相当于一个商品条目）

清空购物车：

修改商品数量
在这里插入图片描述

在Cart类中，我们ctrl+shift+t生成测试类，勾选需要测试的方法：

在这里插入图片描述

购物车功能方法：

计算商品总数量：
在这里插入图片描述

计算商品总价：
在这里插入图片描述

测试方法:
在这里插入图片描述
测试参数的方法：

测试清空：
在这里插入图片描述

测试修改数量：
在这里插入图片描述

代码演示：

@Test
    void addItem() {
        Cart cart = new Cart();
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.addItem(new CartItem(2,"springcloud",1,new BigDecimal(2000),new BigDecimal(2000)));
        System.out.println(cart);
    }

    @Test
    void deleteItem() {
        Cart cart = new Cart();
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.addItem(new CartItem(2,"springcloud",1,new BigDecimal(2000),new BigDecimal(2000)));
        cart.deleteItem(1);
        System.out.println(cart);
    }

    @Test
    void clear() {
        Cart cart = new Cart();
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.addItem(new CartItem(2,"springcloud",1,new BigDecimal(2000),new BigDecimal(2000)));
        cart.clear();
        System.out.println(cart);
    }

    @Test
    void updateCount() {
        Cart cart = new Cart();
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.addItem(new CartItem(2,"springcloud",1,new BigDecimal(2000),new BigDecimal(2000)));
        cart.clear();
        System.out.println(cart);
        cart.addItem(new CartItem(1,"JAVA",1,new BigDecimal(1000),new BigDecimal(1000)));
        cart.updateCount(1,10);
        System.out.println(cart);
    }

加入购物车功能的实现：

在这里插入图片描述

在这里插入图片描述
我们这里使用thymleaf模板：th:attr=“bookId=${book.id}”

在这里插入图片描述

我们使用sprongboot:

<!--加入购物车js-->
<script type="text/javascript">
    $(function () {

        $(".addToCart").click(function () {
            var bookId = $(this).attr("bookId");//没有赋值成功？？
            alert(bookId);
            location.href = "/addItem?id="+bookId;
        })
    })
</script>

测试id是否获取到：
在这里插入图片描述

在这里插入图片描述

将商品项放到同一个购物车中：
在这里插入图片描述

在这里插入图片描述

购物车的controller:

@Controller
public class CartController {

    @Resource
    private IBookService bookService;
    //addItem
    @RequestMapping("/addItem")
    public String addItem(@RequestParam("id")Integer id, HttpSession session, HttpServletRequest request
                          ){
        System.out.println("添加购物的 id：----"+id);
        //调用book的查询方法获取图书的信息
        Book book = bookService.getBaseMapper().selectById(id);
        //把图书信息，转换成CartItem商品项
        CartItem cartItem = new CartItem(book.getId(), book.getName(), 1, book.getPrice(), book.getPrice());
        //调用Cart.addItem(CartItem)添加商品项
        Cart cart = (Cart) session.getAttribute("cart");
        if(cart == null){
             cart = new Cart();
             session.setAttribute("cart",cart);
        }
        cart.addItem(cartItem);
        System.out.println("======="+cart);
        //重定向到商品列表
        String referer = request.getHeader("Referer");
        System.out.println("请求地址："+referer);
        return "redirect:"+referer;//
    }
}

商品展示：
在这里插入图片描述

表格我们使用bootstrap中的一个：

 <div class="layui-row">
        <div class="layui-col-xs12" style="background-color: #1CAF9A;padding-top: 20px;padding-bottom: 20px">
            <table class="table table-hover">
                <tr>
                    <td>商品名称</td>
                    <td>数量</td>
                    <td>单价</td>
                    <td>金额</td>
                    <td>操作</td>
                </tr>
                <tr th:each="entry:${session.cart.items}" >
                    <td th:text="${entry.value.name}"></td>
                    <td th:text="${entry.value.count}"></td>
                    <td th:text="${entry.value.price}"></td>
                    <td th:text="${entry.value.totalPrice}"></td>
                    <td ><a href="#">删除</a></td>
                </tr>
            </table>
        </div>
    </div>

购物结算显示：
在这里插入图片描述

在这里插入图片描述

我们的代码：

 <!--如果购物车非空才输出页面的内容,session.cart.items是一个map,所以这里用maps-->
<div class="cart_info"  th:if="${not #maps.isEmpty(session.cart.items)}" >
    <span class="cart_span"> 购物车中共有<sapn >[[${session.cart.totalCount}]]</sapn>件商品</span>
    <span class="cart_span">|总金额<sapn>[[${session.cart.totalPrice}]]</sapn>元</span>
    <span class="cart_span">|<a href="#">清空购物车</a></span>
    <span class="cart_span">|<a href="#">去结账</a></span>
</div>

如果购物车为空，给出友好提示：
在这里插入图片描述

删除购物城中的商品项：
在这里插入图片描述
我们的代码：

1.删除商品项前端代码：

<td ><a th:href="@{/deleteItem(id=${entry.value.id})}">删除</a></td>

2.后台删除商品项的代码：
在这里插入图片描述

我们的springboot代码：

   /*删除商品项*/
    @RequestMapping("/deleteItem")
    public String deleteItem(@RequestParam(value = "id",required = false)Integer id,
                          HttpSession session, HttpServletRequest request
    ){
        //获取购物车对象
        Cart cart = (Cart) session.getAttribute("cart");
        if(cart != null){
            cart.deleteItem(id);
        }
        //重定向到原来购物车展示页面
        String referer = request.getHeader("Referer");
        System.out.println("请求地址："+referer);
        return "redirect:"+referer;
    }

做删除确定：

在这里插入图片描述

在这里插入图片描述
清空购物车：

前端的请求：

<span class="cart_span">|<a th:href="@{/clearCart}">清空购物车</a></span>

清空购物车的controller:

    /*清空购物车*/
    @RequestMapping("/clearCart")
    public String clear(
                             HttpSession session, HttpServletRequest request
    ){
        Cart cart = (Cart) session.getAttribute("cart");
        if(cart !=null){
            //清空购物车
            cart.clear();
        }
        //重定向到原来购物车的展示页面
        return "redirect:"+ request.getHeader("Referer");
    }

清空购物车的js:
在这里插入图片描述

修改商品数量：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
获取商品编号：

前台代码：
在这里插入图片描述

  //修改购物车商品数量
  $(".updateCount").change(function () {
      //alert("修改");
      //获取商品名称和id
      var name = $(this).parent().parent().find("td:first").text();
      var id = $(this).attr("book_id");
      //获取商品数量
      var count = this.value;
      if(confirm("你确定要将【"+name+"】商品的数量修改为"+count+"个吗？")){
          location.href = "/updateCount?id="+id+"&count="+count;
      }else{
          this.value = this.defaultValue;//defaultValue属性是表单项Dom对象的属性，他表示默认的value属性值
      }

  });

修改数量的后台代码：

    /*修改商品数量*/
    @RequestMapping("/updateCount")
    public String updateCount(
            @RequestParam("id")Integer id,@RequestParam("count")Integer count,
            HttpSession session, HttpServletRequest request

    ){
        Cart cart = (Cart) session.getAttribute("cart");
        if(cart !=null){
            //修改商品数量
            cart.updateCount(id,count);
        }
        //重定向到原来购物车的展示页面
        return "redirect:"+ request.getHeader("Referer");
    }

订单模块：
在这里插入图片描述