关于乐优商城的视频有不同老师讲解的版本,大部分内容功能都是一致的。当时在学习购物车这个模块的时候,遇到了删除购物车商品显示成功,但是刷新浏览器页面还是存在这个商品,并且redis也没有删除这个数据的问题。
基本解决方案如下:首先关于项目的配套笔记以及相关资料都是没有问题的,删除购物车商品包括浏览器的页面删除,以及redis数据的清除。即使用Vue先发送一个删除请求,代码如下:

deleteCart(index){
          ly.verify().then(()=>{
              ly.http.delete("/cart/"+this.carts[index].skuId).then(()=>{
                  this.carts.splice(index, 1);
            })
          }).catch(()=>{
              //未登录购物车的查询
              this.carts.splice(index, 1);
              ly.store.set("LY_CART",this.carts);
          })
      }

这里需要注意的两点,第一个是关于index的索引,需要保证调用删除方法,发送请求时这个索引是可以找到商品的id的,第二个是需要保证这个删除方法Vue请求发送成功在这里插入图片描述
在这里插入图片描述需要注意的是点击购物车页面删除按钮,在浏览器NetWork可以看见携带的商品skuID以及DELETE删除请求发送成功,关于页面删除后刷新,无法删除商品则是delete请求没有发送成功,接下来则是后台购物车模块去接收这个发送请求就好了,后端代码如下:
Controller

@DeleteMapping("{skuId}")
public ResponseEntity deleteCart(@PathVariable(“skuId”) String skuId) {
this.cartService.deleteCart(skuId);
return ResponseEntity.ok().build();
}

Service

public void deleteCart(String skuId) {
// 获取登录用户
UserInfo user = LoginInterceptor.getLoginUser();
String key = KEY_PREFIX + user.getId();
BoundHashOperations<String, Object, Object> hashOps = this.redisTemplate.boundHashOps(key);
hashOps.delete(skuId);
}

在这里插入图片描述
点击购物车删除按钮,,浏览器页面对应的商品和redis数据都清空了。

更多推荐