2023-01-05
一、CommonResult工具
1、CommonResult工具的目的是:为了方便团队开发。一般是在使用异步的时候使用。
2、CommonResult工具的使用:
(1)前端发送异步请求到servlet。
(2)servlet给响应数据的时候,将所有数据都封装到CommonResult对象内。
二、清空购物车
2.1 找到清空购物车的超链接
(1)cart.html中的第67行
<a href="https://www.cnblogs.com/isDaHua/archive/2023/01/05/cart?flag=clearCart" class="clear-cart">清空购物车
(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">购物车为空,请点击继续购物
三、删除购物项
3.1 找到删除的超链接
(1)找到“cart.html”中的第65行,使用“异步”方式(绑定一个函数)
删除
(2)在Vue中触发一个函数,“cart.html”中的第167行
deleteCartItem:function(){ //发布异步请求删除当前购物项(将图书的id带过去) axios({ method:"post", url:"cart", params:{ flag:"deleteCartItem", } }); event.preventDefault();//阻止控件的默认行为}
(3)在超链接上绑定一个”name”属性
删除
(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();//阻止控件的默认行为}