学习笔记——CommonResult工具、书城项目第五阶段（清空购物车、删除购物项、对数量的修改）

2023-01-05

一、CommonResult工具

1、CommonResult工具的目的是：为了方便团队开发。一般是在使用异步的时候使用。

2、CommonResult工具的使用：

　　（1）前端发送异步请求到servlet。

　　（2）servlet给响应数据的时候，将所有数据都封装到CommonResult对象内。

二、清空购物车

2.1 找到清空购物车的超链接

      （1）cart.html中的第67行

<a href="cart?flag=clearCart" class="clear-cart">清空购物车</a>

　　（2）在"CartServlet"中新建一个方法

protected void clearCart(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getSession().removeAttribute("cart");
        //将页面跳转设置到cart.html
        this.processTemplate("cart/cart",request,response);
    }

　　（3）在cart.html中的第52行中添加

<tbody v-if="totalCount==0">
          <tr>
            <td colspan="6" align="center">购物车为空，请点击继续购物</td>
          </tr>
 </tbody>

三、删除购物项

3.1 找到删除的超链接

　　（1）找到“cart.html”中的第65行，使用“异步”方式（绑定一个函数）

<td><a href="" @click="deleteCartItem">删除</a></td>

　　（2）在Vue中触发一个函数，“cart.html”中的第167行

deleteCartItem:function(){
    //发布异步请求删除当前购物项（将图书的id带过去）
    axios({
         method:"post",
         url:"cart",
         params:{
            flag:"deleteCartItem",
         }
    });
    event.preventDefault();//阻止控件的默认行为
}            

　　（3）在超链接上绑定一个"name"属性

<td><a href="" @click="deleteCartItem" :name="cartItem.book.bookId">删除</a></td>

　　（4）获取“name”属性的值,在"cart.html"中的第169行

var id=event.target.name;

　　（5）将id传到“params”中

　　（6）在"CartServlet"中设置一个方法

protected void deleteCartItem(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获得请求参数
        String id = request.getParameter("id");
        //2.获得购物车对象
        HttpSession session = request.getSession();
        Cart cart = (Cart)session.getAttribute("cart");
        //3.调用cart中的方法删除购物项
        
    }

　　（7）到"Cart.java"中写一个“删除的方法”

　　/**
     * 功能:删除购物项
     * @param id
     */
    public void deleteCartItem(Integer id){
        map.remove(id);
    }

　　（8）接着写刚才的方法

protected void deleteCartItem(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获得请求参数
        String id = request.getParameter("id");
        //2.获得购物车对象
        HttpSession session = request.getSession();
        Cart cart = (Cart)session.getAttribute("cart");
        //3.调用cart中的方法删除购物项
        cart.deleteCartItem(Integer.parseInt(id));
        //4.后台的数据删除成功了，但是前台不刷新。因为是异步请求
        showCart(request,response);
    }

　　（9）转到刚才的“cart.html”中

deleteCartItem:function(){
    //发布异步请求删除当前购物项（将图书的id带过去）
    axios({
         method:"post",
         url:"cart",
         params:{
            flag:"deleteCartItem",
         }
    }).then(response=>{
         if(response.data.flag){
                //需要将后台传过来的数据，展示在网页上（Vue的方式）
                this.cartItems=response.data.resultData[0];
                this.totalCount=response.data.reultData[1];
                this.totalAmount=response.data.resultData[2];   
        }
    });
    event.preventDefault();//阻止控件的默认行为
}