一般后台对商品的信息管理、包含商品的上架与下架。为了提高用户的体验、将商品上下架的操作做成开关的形式。同时后台数据库中保存的商品状态能够根据开关状态改变。
这种效果:== 当开关是开启状态、代表此时商品是上架状态。商品页面可以看到对应的商品。如果开关是关闭状态、代表该商品暂未上架,商品页面看不到该商品
数据库的状态和上图的状态是一致的。数据库可以存放0、1的形式来表示商品信息的上下架状态
调用官网eleentui中的组件库、可以自己根据需要设置开关开启和关闭时的文字描述、以及开关的颜色。
例如
使用change事件、触发某个函数,函数中实现接口的调用(接口中完成商品状态的修改)
这里有两个问题要考虑:第一是如何根据数据库中商品的状态信息转化为开关的状态?第二:如何在改变开关状态的时候、改变该商品数据库中的状态信息?
解决方法:
传参:商品的状态和主键
<el-table-column prop="id" label="上架" width="100px">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isSale"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="是"
@change="switchSale(scope.row.isSale,scope.row.id)"
>
</el-switch>
</template>
</el-table-column>
接口调用、我这里对axios进行了二次封装。你们就按照你们的方式调用接口就行,主要是把两个参数(商品状态和主键)传输到后端中。【根据主键修改对应商品的状态】
//切换是否上架
switchSale(isSale, id) {
const _this = this;
if (isSale == true) {
isSale = "是";
} else {
isSale = "否";
}
const params = {
myId: id,
myIsSale: isSale,
};
this.$axios.updateSaleStatus(params).then((res) => {
if (res.code == 200) {
_this.showAllUserInfo();
} else {
_this.$message.error(res.data.errMessage);
}
});
},
我这里使用的mybatis-plus进行的商品信息修改。你们按照你们的方式进行正常的修改就行。获取参数的方式也会有所不同、你们前端接口怎么传的,后端就怎样接收
/**
* 修改上架状态
* @param map
* @return
*/
@RequestMapping(value = "/goodsInfo/updateSaleStatus", method = RequestMethod.PUT)
public Result updateSaleStatus(@RequestBody Map<String,Object> map){
int result = 0;
if(map == null){
return Result.error().data("errMessage","修改失败");
}
int id = Integer.parseInt(map.get("myId").toString());
String isSale = map.get("myIsSale").toString();
GoodsInfo goodsInfo = new GoodsInfo();
goodsInfo.setIsSale(isSale);
System.out.println(goodsInfo);
UpdateWrapper<GoodsInfo> gfWrapper =new UpdateWrapper<>();
gfWrapper.like("id",id);
gfWrapper.set("is_sale",isSale);
try{
result = goodsInfoMapper.update(null,gfWrapper);;
}catch (Exception e){
e.printStackTrace();
}
if(result > 0){
return Result.ok();
}else{
return Result.error().data("errMessage","修改失败");
}
}
@RequestParam
】),现在修改使用的是Put、后端要换一种参数接收方式@RequestBody
。这样可以正常接收具体啥情况、我现在还不太清楚:
这篇博客讲解两者之前的清区别楚:
@RequestBody和@RequestParam区别全面详细
使用下方的可以用拼接的形式
'/car/updatecarstatus/'+car_id+"/"+status
我想根据商品主键单独修改商品的状态信息、结果商品的库存量一并给我修改成了。这可以就离了一个大普,
自己错误使用了修改信息 QueryWrapper<User> queryWrapper = new QueryWrapper<>();
应该使用 UpdateWrapper<User> updateWrapper = new UpdateWrapper<>();
自己所做mybatis-plus笔记、我严重怀疑我记笔记记错了
我太菜啦、学无止境、整理不易、点个赞呗
手机扫一扫
移动阅读更方便
你可能感兴趣的文章