vue+axios应用

1. vue绑定html中的标签节点，发送异步请求

window.onload=function(){
    var vue = new Vue({
        el:"#cart_div",
        data:{
            cart:{}
        },
        methods:{
            getCart:function(){
                axios({
                    method:"POST",
                    url:"cart.do",
                    params:{
                        operate:'cartInfo'
                    }
                })
                    .then(function (value) {
                        var cart = value.data ;
                        vue.cart = cart ;
                    })
                    .catch(function (reason) {  });
            },
            editCart:function(cartItemId , buyCount){  //购物车书本数量+ / -
                axios({
                    method:"POST",
                    url:"cart.do",
                    params:{
                        operate:'editCart',
                        cartItemId:cartItemId,
                        buyCount:buyCount
                    }
                })
                    .then(function (value) {
                        vue.getCart();
                    })
                    .catch(function (reason) {  });
            }
        },
        mounted:function(){
            this.getCart() ;
        }
    });
}

2. 服务器端操作cartInfo()

public String cartInfo(HttpSession session){
        User user =(User)session.getAttribute("currUser");
        Cart cart = cartItemService.getCart(user);

        //调用Cart中的三个属性的get方法，目的是在此处计算这三个属性的值，否则这三个属性为null，
        //导致的结果就是下一步的gson转化时，为null的属性会被忽略
        cart.getTotalBookCount();
        cart.getTotalCount();
        cart.getTotalMoney();

        Gson gson = new Gson();
        String cartJsonStr = gson.toJson(cart);
        return "json:"+cartJsonStr ;
    }
//编辑购物车中书本的个数 （增加+、减少-）
public String editCart(Integer cartItemId , Integer buyCount){
        cartItemService.updateCartItem(new CartItem(cartItemId , buyCount));
        return "";
    }

3. 视图设置（返回是以json:开头）

                   //3.视图处理
                    String methodReturnStr = (String)returnObj ;
                    if(StringUtil.isEmpty(methodReturnStr)){
                        return ;
                    }
                    if(methodReturnStr.startsWith("redirect:")){        //比如：  redirect:fruit.do
                        String redirectStr = methodReturnStr.substring("redirect:".length());
                        response.sendRedirect(redirectStr);
                    }else if(methodReturnStr.startsWith("json:")){
                        response.setCharacterEncoding("utf-8");
                        response.setContentType("application/json;charset=utf-8");
                        String jsonStr = methodReturnStr.substring("json:".length());
                        PrintWriter out = response.getWriter();
                        out.print(jsonStr);
                        out.flush();
                    }else{
                        super.processTemplate(methodReturnStr,request,response);    // 比如：  "edit"
                    }

4. 在vue中有属性cart，将其中的数据展示在页面上

<div class="list" id="cart_div">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>图片</th>
              <th>商品名称</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="cartItem in cart.cartItemMap">
              <td>
                <img v-bind:src="'static/uploads/'+cartItem.book.bookImg" alt="" />
              </td>
              <td>{{cartItem.book.bookName}}</td>
              <td>
                <span class="count" @click="editCart(cartItem.id,cartItem.buyCount-1)">-</span>
                <input class="count-num" type="text" value="1" v-bind:value="cartItem.buyCount"/>
                <span class="count" @click="editCart(cartItem.id,cartItem.buyCount+1)">+</span>
              </td>
              <td>{{cartItem.book.price}}</td>
              <td>{{cartItem.xj}}</td>
              <td><a href="">删除</a></td>
            </tr>
          </tbody>
        </table>
        <div class="footer">
          <div class="footer-left">
            <a href="#" class="clear-cart">清空购物车</a>
            <a href="#">继续购物</a>
          </div>
          <div class="footer-right">
            <div>共<span>{{cart.totalBookCount}}</span>件商品</div>
            <div class="total-price">总金额<span>{{cart.totalMoney}}</span>元</div>
            <a class="pay" th:href="@{/order.do(operate='checkout')}">去结账</a>
          </div>
        </div>
      </div>
    </div>