学习笔记——CommonResult工具、书城项目第五阶段（清空购物车、删除购物项 ...

2023-01-05
一、CommonResult工具
1、CommonResult工具的目的是：为了方便团队开发。一般是在使用异步的时候使用。
2、CommonResult工具的使用：
　　（1）前端发送异步请求到servlet。
　　（2）servlet给响应数据的时候，将所有数据都封装到CommonResult对象内。
二、清空购物车
2.1 找到清空购物车的超链接
      （1）cart.html中的第67行

1. <a target="_blank" href="https://www.cnblogs.com/cart?flag=clearCart" class="clear-cart">清空购物车</a>

复制代码

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

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

复制代码

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

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

复制代码

三、删除购物项
3.1 找到删除的超链接
　　（1）找到“cart.html”中的第65行，使用“异步”方式（绑定一个函数）

1. <td><a target="_blank" href="https://www.cnblogs.com/" @click="deleteCartItem">删除</a></td>

复制代码

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

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

复制代码

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

1. <td><a target="_blank" href="https://www.cnblogs.com/" @click="deleteCartItem">删除</a></td>

复制代码

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

1. var id=event.target.name;

复制代码

　　（5）将id传到“params”中
　　（6）在"CartServlet"中设置一个方法

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

复制代码

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

1. 　　/**
2.      * 功能:删除购物项
3.      * @param id
4.      */
5.     public void deleteCartItem(Integer id){
6.         map.remove(id);
7.     }

复制代码

　　（8）接着写刚才的方法

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

复制代码

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

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

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！