0
点赞
收藏
分享

微信扫一扫

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


目录

​​购物车操作:修改​​

​​分析​​

​​接口​​

​​后端实现:更新​​

​​前端实现:修改​​

​​前端实现:全选​​

​​后端实现:删除数据​​

​​结算​​

​​跳转页面​​

购物车操作:修改

分析

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

接口

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

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

后端实现:更新

步骤一:修改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函数

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

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

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

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

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

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

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

前端实现:全选

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

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

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

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

 

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

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

步骤二:修改样式

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

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

步骤三:添加全选方法

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

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绑定删除事件

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

步骤二:编写删除函数

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

结算

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

跳转页面

步骤一:给结算绑定事件

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

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

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

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

步骤三:完善登录

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

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

举报

相关推荐

0 条评论