學習筆記——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();//阻止控制項的預設行為
}