學習筆記——書城專案第五階段之購物項加號、購物項減號

2023-01-05

一、設定購物項加號

 （1）找到“+”號的位置，在“cart.html”中的第61行中，添加單擊事件，通過“異步”操作來設定

<span class="count" @click="addCount">+</span>

（2）在Vue中新建一個函式

addCount:function(){
    //發送異步請求，對當前購物項的數量進行加1的操作（將當前購物項的圖書id傳過去）
    event.target.previousElementSibling.name;
    axios({
        method:"post",
        url:"cart",
        params:{
            flag:"addCount",
            id:id
        }
    })
},

（3）在“cart.html”中的第60行代碼添加“:name”

<input class="count-num" type="text" v-model="cartItem.count" :name="cartItem.book.bookId">

（4）在“CartServlet.java”中添加函式“addCount”

  protected void addCount(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物件中的方法，對購物項的數量進行加1操作
    }

（5）在“Cart.java”中寫一個“數量加1”的方法

     /**
     * 對購物項的數量進行加1的操作
     * @param id
     */
    public void addCount(Integer id){
        CartItem item = map.get(id);
        item.setCount(item.getCount()+1);
    }

（6）完善剛剛“CartServlet.java”中的添加函式“addCount”

protected void addCount(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物件中的方法，對購物項的數量進行加1操作
        cart.addCount(Integer.parseInt(id));
        //4.后臺的資料已經重繪完畢，前臺的資料還未重繪，通過呼叫showCart把前臺的資料重繪
        showCart(request,response);
    }

（7）完善剛剛Vue中的函式

addCount:function(){
    //發送異步請求，對當前購物項的數量進行加1的操作（將當前購物項的圖書id傳過去）
    event.target.previousElementSibling.name;
    axios({
        method:"post",
        url:"cart",
        params:{
            flag:"addCount",
            id:id
        }
    }).then(response=>{
          if(response.data.flag){
          //alert(response.data.resultData[0]);
          //需要將后臺傳過來的資料，展示在網頁上(vue的方式)
          this.cartItems=response.data.resultData[0];
          this.totalCount=response.data.resultData[1];
          this.totalAmount=response.data.resultData[2];
        }
},

（8）結果：重繪服務器后，在彈出的頁面中，將一些圖書添加到購物車中，點擊“購物車”后，將某個書籍的數量加1，在“數量”中點擊“+”號后，會發現“金額”、“商品數量”、“總金額”的值會發生變化，說明此時代碼OK，

二、購物項減號

　　前面的步驟和上面的“購物項加號”類似，后面需要考慮“如果圖書的數量是1時，再按減號時，是將這條購物項記錄默認洗掉，還是彈出提示再洗掉”，

（1）找到減號的位置，在“cart.html”中的第59行中，設定一個點擊事件

<span class="count" @click="subtractCount">-</span>

（2）在Vue中創建一個函式

subtractCount:function(){
    //需要獲得當前購物項的id
     var id = event.target.nextElementSibling.name;
    axios({
    method:"post",
    url:"cart",
    params:{
        flag:"subtractCount",
        id:id
    }
    })
}

（3）將請求發送到“CartServlet.java”中，在“CartServlet.java”中創建一個方法

  protected void subtractCount(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物件中的方法，對購物項的數量進行減1操作
        cart.subtractCount(Integer.parseInt(id));
        //4.后臺的資料已經重繪完畢，前臺的資料還未重繪，通過呼叫showCart把前臺的資料重繪
        showCart(request,response);
    }

（4）在“Cart.java”中創建一個方法，進行減1操作

　　/**
     * 對購物項的數量進行減1的操作
     * @param id
     */
    public void subtractCount(Integer id){
        CartItem item = map.get(id);
        item.setCount(item.getCount()-1);
    }

（5）在“cart.html”中的“subtractCount”函式中判斷當前購物項的數量是否為1，分為“不為1”和“為1”兩種情況，使用異步操作

 subtractCount:function () {
        //需要獲得當前購物項的id
        //當目前購物項的數量為1的話，執行的洗掉操作，不為1才是減一操作
        //1. 獲得到文本框的value屬性值
        var count=event.target.nextElementSibling.value;
        var id=event.target.nextElementSibling.name;
        if(count==1){
          //問一下，確定要洗掉嗎？
          if(confirm("確定要洗掉嗎？")){
            //執行洗掉操作(在發送一個請求洗掉)
            axios({
              method:"post",
              url:"cart",
              params:{
                flag:"deleteCartItem",
                id:id
              }
            }).then(response=>{
              if(response.data.flag){
              //alert(response.data.resultData[0]);
              //需要將后臺傳過來的資料，展示在網頁上(vue的方式)
              this.cartItems=response.data.resultData[0];
              this.totalCount=response.data.resultData[1];
              this.totalAmount=response.data.resultData[2];
            }
          })
          }
        }else{//說明count不為1，肯定大于1
          axios({
            method:"post",
            url:"cart",
            params:{
              flag:"subtractCount",
              id:id
            }
          }).then(response=>{
            if(response.data.flag){
            //alert(response.data.resultData[0]);
            //需要將后臺傳過來的資料，展示在網頁上(vue的方式)
            this.cartItems=response.data.resultData[0];
            this.totalCount=response.data.resultData[1];
            this.totalAmount=response.data.resultData[2];
          }
        })
        }

      },

（6）結果：將服務器重繪，添加幾個圖書到購物車中，點擊“購物車”按鈕，將一些圖書的數量減掉，當圖書的數量為1時，再點“-”時，會彈出提示“確認要洗掉嗎？”當點擊“確定”時，該購物項的記錄會整體洗掉，此時表明代碼ok ，

標籤：其他

上一篇：dfs學習筆記

下一篇：由char和byte的關系引申出去——總結一下java中的字符編碼相關知識