【畅购商城】购物车模块之修改购物车以及结算

青旅半醒 2024-03-31 11:54 79阅读 0赞

**目录**

购物车操作：修改

分析

接口

后端实现：更新

前端实现：修改

前端实现：全选

后端实现：删除数据

结算

跳转页面

## **购物车操作：修改** ##

### 分析 ###

![915af540f35d43e5b6f3ffc0731dd157.png][]

### **接口** ###

> PUT http://localhost:10010/cart-service/carts

![3d84cce24ede451e89f51e6afff770a7.png][]

###  ###

### **后端实现：更新** ###

步骤一：修改service接口

/**
     * 更新操作：如果数据存在修改数据，如果数据不存在删除数据
     * @param user
     * @param cartVoList
     */
    public void updateCart(User user, List<CartVo> cartVoList) ;

步骤二：修改service实现类

/**
     * 更新操作：如果数据存在修改数据，如果数据不存在删除数据
     * @param user
     * @param cartVoList
     */
    public void updateCart(User user, List<CartVo> cartVoList) {
        //1 获得购物车
        String key = "cart" + user.getId();
        String cartStr = stringRedisTemplate.opsForValue().get(key);
        // 处理是否有购物车
        Cart cart = JSON.parseObject( cartStr , Cart.class);
        if(cart == null) {
            throw new RuntimeException("购物车不存在");
        }
    
        //2 更新
        //2.1 处理请求数据
        Map<Integer,CartVo> requestMap = new HashMap<>();
        for (CartVo cartVo : cartVoList) {
            requestMap.put(cartVo.getSkuid(), cartVo);
        }
    
        //2.2 处理更新和删除
        Set<Integer> keySet = new HashSet<>(cart.getData().keySet());
    for (Integer skuid : keySet) {
            CartVo cartRequest = requestMap.get(skuId);
            if(cartRequest != null) {
                // 更新
                cart.updateCart(cartRequest.getSkuid() , cartRequest.getCount() ,cartRequest.getChecked());
            } else {
                // 删除
                cart.deleteCart(skuId);
            }
        }
    
        //3 保存购物车
        stringRedisTemplate.opsForValue().set( key , JSON.toJSONString(cart) );
    }

步骤三：修改controller

@PutMapping
    public BaseResult updateCart(@RequestBody List<CartVo> cartVoList) {
    
        //1 获得用户信息
        // 1.1 获得token
        String token = request.getHeader("Authorization");
        // 1.2 解析token
        User loginUser = null;
        try {
            loginUser = JwtUtils.getObjectFromToken(token, jwtProperties.getPublicKey(),User.class);
        } catch (Exception e) {
            return BaseResult.error("token失效或未登录");
        }
    
        try {
            this.cartService.updateCart(loginUser ,cartVoList);
    
            return BaseResult.ok("成功");
        } catch (Exception e) {
            return BaseResult.error("失败");
        }
    
    }

### 前端实现：修改 ###

1.  步骤0：修改apiclient.js，添加 updateCart函数
2.  步骤一：修改flow1.vue 给按钮和文本框添加事件
3.  步骤二：编写修改对应的事件
4.  步骤三：编写购物车cart的监听函数，只要数据发生改变立即保存
5.  步骤四：删除之前绑定js

步骤0：修改apiclient.js，添加 updateCart函数

![2463b0a23f104815bfa8f0b341ce6862.png][]

updateCart : ( params ) => {
        return axios.put("/gccartservice/carts" ,params )
      },

步骤一：修改flow1.vue 给按钮和文本框添加事件

![d758e58e12894f0f9991312970d987a7.png][]

步骤二：编写修改对应的事件

methods: {
        minus : function(goods){
          if( goods.count > 1) {
            goods.count --;
          }
        },
        plus : function(goods){
          //可以考虑库存
          goods.count ++;
        },
        updateCount : function(goods,e){
          console.info(e.target.value);
          if( /^\d+$/.test( e.target.value) ){
            goods.count = e.target.value;
          } else {
            goods.count = 1;
          }
        },

步骤三：编写购物车cart的监听函数，只要数据发生改变立即保存

watch: {
        //深度监听
        cart : {
          async handler(val, oldVal) {
            //1 更新/删除，数据
            if(this.token != null){
              let { data } = await this.$request.updateCart( val )
              if(data.code == 20000){
                //alert(data.message);
              }
            } else {
              //未登录
              localStorage.setItem("cart" , JSON.stringify( val ))
            }
          },
          immediate: false, //true代表如果在 watch 里声明了之后，就会立即先去执行里面的handler方法
          deep: true      //深度监听，常用于对象下面属性的改变
        }
    
      },

步骤四：删除之前绑定js

![67eaa350273844769db9daff6326d211.png][]

### 前端实现：全选 ###

1.  步骤一：修改表格
2.  步骤二：修改样式
3.  步骤三：添加全选方法
4.  步骤四：监听购物车数据，修改全选状态

1.  步骤一：修改表格

![74f7d84911e64c2ca892ce48f8b43ea2.png][]

![ec12415d7cfb4c70b27d246be0b3b7e7.png][]

![adf77bd67a4b4e26b0c9ab54d2bb3d36.png][]

步骤二：修改样式

![3fdba2dfa14e4a3daaf7c7e6e8803028.png][]

.mycart .col0{width: 5%;}
    .mycart .col1{width: 35%;}

步骤三：添加全选方法

![bc54e18c13fd4e9e93f1b683593275af.png][]

data() {
        return {
          cart : [],        //购物车对象
          allChecked : false,   //全选状态
        }
      },

methods: {
        checkAll : function(){
          //所有列表项的状态，与全选的状态，相反
          this.cart.forEach( g => {
            g.checked = !this.allChecked;
          });
        },
      },

步骤四：监听购物车数据，修改全选状态

watch: {
        //深度监听
        cart : {
          async handler(val, oldVal) {
            //1 更新/删除，数据
            if(this.token != null){
              let { data } = await this.$request.updateCart( val )
              if(data.code == 1){
                //alert(data.message);
              }
            } else {
              //未登录
              localStorage.setItem("cart" , JSON.stringify( val ))
            }
            //2 处理全选
            let checkCount = 0;
            this.cart.forEach( g => {
              if( g.checked ) {
                checkCount ++;
              }
            });
            //全选状态，选中个数  与 总个数 比较结果
            this.allChecked = (checkCount == this.cart.length);
    
          },
          immediate: false, //true代表如果在 watch 里声明了之后，就会立即先去执行里面的handler方法
          deep: true      //深度监听，常用于对象下面属性的改变
        }
    
      },

### 后端实现：删除数据 ###

1.  只需要修改数据即可，watch已经完成删除操作
2.  步骤一：修改html绑定删除事件

![72565600967248fead5a9b2a318a691c.png][]

步骤二：编写删除函数

del (index){
          if(window.confirm("您确定要删除吗？")){
            this.cart.splice(index , 1)
          }
        },

##  ##

## **结算** ##

![47daba83a6794b24b4e4710b1d36c31a.png][]

### 跳转页面 ###

步骤一：给结算绑定事件

![fcfacfa53f024be5a6293154615dec01.png][]

submit : function(){
          if(this.token != null){
            //登录
            //location.href = "flow2.html";
            this.$router.push('flow2')
          } else {
            //确定登录成功后调整的页面
            localStorage.setItem("returnURL","flow2");
            //没有登录
            //location.href = "login";
            this.$router.push('login')
    
          }
    
        },

步骤二：编写flow2.vue 组件

![22c6b270302549369188570be27cdc1d.png][]

步骤三：完善登录

![374ce0e245014c5ca35169a49c2950ce.png][]

let returnURL = localStorage.getItem("returnURL");
            if(returnURL != null){
              //删除跳转页面缓存
              localStorage.removeItem("returnURL");
              //需要跳转页面
              location.href= returnURL;
            } else {
              //默认：跳转首页
              location.href = "/";
            }

[915af540f35d43e5b6f3ffc0731dd157.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2a09366e325e4eefa9c7743bf69810cb.png
[3d84cce24ede451e89f51e6afff770a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8a4ec0259ff04267b60569a1f57444c6.png
[2463b0a23f104815bfa8f0b341ce6862.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/46c9ad76fc474ccb9ee15be8e205e345.png
[d758e58e12894f0f9991312970d987a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c7ee88aff4e14b4e81919574426b597b.png
[67eaa350273844769db9daff6326d211.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/30b8828e342e49f3acdd27392a2037ab.png
[74f7d84911e64c2ca892ce48f8b43ea2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e94d28a4f83546d2bca97c99cce9b736.png
[ec12415d7cfb4c70b27d246be0b3b7e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/248f5e03809d4222b1057af7d252db27.png
[adf77bd67a4b4e26b0c9ab54d2bb3d36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/806d525631424df7b8db59ddc46502e4.png
[3fdba2dfa14e4a3daaf7c7e6e8803028.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/84e74bd8142248089f08a1f11e08c2a3.png
[bc54e18c13fd4e9e93f1b683593275af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/59a1ab78ccce43029ffc7d2abede4013.png
[72565600967248fead5a9b2a318a691c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1b881a9454b94356a6101364dc8ead9c.png
[47daba83a6794b24b4e4710b1d36c31a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6c6070aa292145c9ba181a8f29167872.png
[fcfacfa53f024be5a6293154615dec01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a6806888736b47efb05c25de1e66ba99.png
[22c6b270302549369188570be27cdc1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c292f8c2d36d4ce98b501b00725c9a9e.png
[374ce0e245014c5ca35169a49c2950ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/830a2cb631fd4ae4a0817cfdaae35f48.png