8.购物车清单

骤跌

已于 2024-08-21 13:48:26 修改

阅读量336

点赞数 3

分类专栏： JavaWeb见解文章标签： java

于 2024-08-20 15:56:13 首次发布

本文链接：https://blog.csdn.net/2201_75994883/article/details/141359426

版权

JavaWeb见解专栏收录该内容

13 篇文章 0 订阅

订阅专栏

购物车清单

一、后端
- 1.1创建ShoppingCart类
- 1.2创建CartServlet类
二、前端
- 2.1轻组件引入，函数引入
- 2.2创建getList函数，获取后端数据

一、后端

1.1创建ShoppingCart类

创建ShoppingCart类封装购物车信息，用来存放从数据库查询出来的数据。

public class ShoppingCart {
    private Long s_id;
    private String u_id;
    private Long meal_id;
    private  Integer s_num;
    private String meal_desc;
    private String meal_pic;
    private Double meal_price;

    public Long getS_id() {
        return s_id;
    }

    public void setS_id(Long s_id) {
        this.s_id = s_id;
    }

    public String getU_id() {
        return u_id;
    }

    public void setU_id(String u_id) {
        this.u_id = u_id;
    }

    public Long getMeal_id() {
        return meal_id;
    }

    public void setMeal_id(Long meal_id) {
        this.meal_id = meal_id;
    }

    public Integer getS_num() {
        return s_num;
    }

    public void setS_num(Integer s_num) {
        this.s_num = s_num;
    }

    public String getMeal_desc() {
        return meal_desc;
    }

    public void setMeal_desc(String meal_desc) {
        this.meal_desc = meal_desc;
    }

    public String getMeal_pic() {
        return meal_pic;
    }

    public void setMeal_pic(String meal_pic) {
        this.meal_pic = meal_pic;
    }

    public Double getMeal_price() {
        return meal_price;
    }

    public void setMeal_price(Double meal_price) {
        this.meal_price = meal_price;
    }
}

注意变量名要与数据库中定义的变量名一致。

1.2创建CartServlet类

创建CartServlet类来处理前端发送过来的请求，并查询数据，通过响应发送回给前端。

@WebServlet({
        "/cart/list"
})

public class CartServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String path = req.getServletPath();
        switch(path){
            case "/cart/list":
                cartList(req,resp);
                break;
        }
    }

    private void cartList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        User user = (User) req.getSession().getAttribute("CurrUser");
        if(user==null){
            MyWeb.printJson(resp, R.err("请先登录"));
            return;
        }
        String sql ="select s.*, m.meal_desc,m.meal_pic,m.meal_price from t_shoppingcart s join t_meal m on s.meal_id = m.meal_id  where u_id = ?";
        List<ShoppingCart> shoppingCartList = DaoCreater.currentDao().queryBeanList(ShoppingCart.class,sql,user.getU_id());
        MyWeb.printJson(resp,R.OK(shoppingCartList));

    }
}

包含doGet方法、doPost方法以及核心的cartList函数，有没有感觉到熟悉的配方。
doGet方法、doPost方法会处理前端发送过来的请求，最终通过解析的路径调用执行cartList函数。
从响应中获取用户，如果没有就要告诉前端，用户没登录，让前端在告诉用户，让用户登录，所以返回包含错误提示的响应给前端。
用户存在，定义sql语句进行数据库查询，在这里s.*表示选择t_shoppingcart表的所有列，而m.meal_desc、m.meal_pic和m.meal_price是t_meal表中的列，分别代表菜品描述、图片和价格。
进行数据库查询，查询的数据放在List集合中，集合的对象是ShoppingCart.返回包含了数据的响应给前端，让前端处理。

后端到这里逻辑实现完成。

二、前端

2.1轻组件引入，函数引入

在之前我们上一篇文章中我们已经将显示当前用户的函数引入了购物车页面中，并且完善了页面的导航跳转等等基础工作，现在我们在引入轻组件，以及轻组件函数。直接从之前的页面复制即可。

<div class="toast-container position-fixed top-0 start-50 translate-middle-x mt
1">
    <div id="toast" class="toast opacity-100 bg-white">
        <div class="toast-header">
            <strong class="me-auto"></strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast">
            </button>
        </div>
        <div class="toast-body"></div>
    </div>
</div>

轻组件函数：

    //创建轻组件对象
    const toastObj = new bootstrap.Toast(document.querySelector(`#toast`), {delay: 2200});
    const toast = (title = "信息", msg = "") => {
        document.querySelector('#toast .me-auto').innerHTML = title;
        document.querySelector('#toast .toast-body').innerHTML = msg;
        toastObj.show();
    }

2.2创建getList函数，获取后端数据

    let list = [];

    const getList = async () => {

        const resp = await fetch(`./cart/list`);
        if (!resp.ok) return;
        const result = await resp.json();
        if (!result.success) {
            toast("错误！", result.message);
            return;
        }
        list = result.data;
        const cartList = document.querySelector("#cartList");
        let innerHTML = ``;
        for (let i = 0; i < list.length; i++) {
            const item = list[i];
            innerHTML += `<tr id="cartitem_tr_${item.s_id}">
        <td class="ps-4" >
          <input style="transform: scale(1.5);" class="form-check-input my-box"
                 type="checkbox" value="${item.meal_id}">
        </td>
        <td class="p-3">
          <img src="./meal/pic?meal_pic=${item.meal_pic}" class="rounded" style="width:120px;" />
        </td>
        <td >
          ${item.meal_desc}
        </td>
        <td class=" fs-5 text-danger">
          ￥${item.meal_price}
        </td>
        <td class="">
          <div class="input-group"  style="width:150px;">
            <span  class="fs-4 text-white bg-danger text-center " style="width:40px;cursor:pointer;" >-</span>
            <input readonly id="cartitem_num_${item.s_id}" type="text" class="form-control form-control-sm text-center fs-5 text-danger"  value="${item.s_num}" />
            <span  class="fs-4 text-white bg-danger text-center " style="width:40px;cursor:pointer;" >+</span>
          </div>
        </td>
      </tr>`;
        }
        cartList.innerHTML = innerHTML;
    }
    getList(1);

获取指定路径./cart/list的响应,响应OK就继续执行，获取响应中的json格式的数据。
数据不为真就通过轻组件函数定义错误信息，进行错误提示，并结束函数。
获取json格式中的数据给list对象。
遍历数据，通过循环把数据在一张张卡片上显示出来，将原本cartList元素中的静态的卡片复制一个过来，其余删掉，复制过来的卡片将参数信息从list对象中获取，实现动态的卡片。
将卡片在插入回cartList元素中，最后调用该方法。图片加载就会执行了。

最后启动程序看效果就好了。注意对比页面显示和数据库的是不是一致，并且添加购物车是不是会在购物车中添加。
这个函数原理和getMealList函数实现一样，可以回看对比：
http://t.csdnimg.cn/JWUPq