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

我心飞翔发布于 1年前分类：vue

购物车操作：修改

分析

接口

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

后端实现：更新

步骤一：修改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("失败");
    }

}

前端实现：修改

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

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

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

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

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

 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

前端实现：全选

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

<th class="col0">
   <input type="checkbox" v-model="allChecked" @click="checkAll()" /> 全选
</th>

<td class="col0">
   <!-- :checked="goods.checked" -->
   <input type="checkbox" v-model="goods.checked" />
</td>

步骤二：修改样式

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

步骤三：添加全选方法

 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      //深度监听，常用于对象下面属性的改变
    }

  },

后端实现：删除数据

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

步骤二：编写删除函数

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

结算

跳转页面

步骤一：给结算绑定事件

  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 组件

<script>
import TopNav from '../components/TopNav'
import Footer from '../components/Footer'

export default {
  head: {
    title: '首页',
    link: [
      {rel:'stylesheet',href: '/style/fillin.css'},
    ],
    script: [
      { type: 'text/javascript', src: '/js/cart2.js' },
    ]
  },
  components: {
    TopNav,
    Footer,
  },
}
</script>

步骤三：完善登录

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

我来回复

暂无回复内容