Vue中使用Switch开关用来控制商品的上架与下架情况、同时根据数据库商品的状态反应到前台、前台修改商品状态保存到数据库 _生活百科

一般后台对商品的信息管理、包含商品的上架与下架。为了提高用户的体验、将商品上下架的操作做成开关的形式。同时后台数据库中保存的商品状态能够根据开关状态改变。

1、效果展示这种效果:== 当开关是开启状态、代表此时商品是上架状态。商品页面可以看到对应的商品。如果开关是关闭状态、代表该商品暂未上架，商品页面看不到该商品
1.1 前端页面效果

Vue中使用Switch开关用来控制商品的上架与下架情况、同时根据数据库商品的状态反应到前台、前台修改商品状态保存到数据库

文章插图
1.2 数据库存储数据库的状态和上图的状态是一致的。数据库可以存放0、1的形式来表示商品信息的上下架状态

文章插图
2、具体实现过程2.1 查看官网组件库调用官网eleentui中的组件库、可以自己根据需要设置开关开启和关闭时的文字描述、以及开关的颜色。例如

文章插图

文章插图
2.2 修改开关状态、同时修改数据库保存的商品状态

使用change事件、触发某个函数，函数中实现接口的调用（接口中完成商品状态的修改）

文章插图
3、实例代码3.1 前端代码

这里有两个问题要考虑：第一是如何根据数据库中商品的状态信息转化为开关的状态？第二：如何在改变开关状态的时候、改变该商品数据库中的状态信息？

解决方法：

问题1：在商品信息展示到页面上时，对商品信息的状态进行处理，转化为开关的对应状态。（截图部分给出详细方法）
问题2：改变开关状态后、调用对应的change事件，将开关的状态信息传输到后端接口中处理。

传参：商品的状态和主键

<el-table-column prop="id" label="上架" width="100px"><template slot-scope="scope"><el-switchv-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);}});},

文章插图
3.2 后端接口代码

我这里使用的mybatis-plus进行的商品信息修改。你们按照你们的方式进行正常的修改就行。获取参数的方式也会有所不同、你们前端接口怎么传的，后端就怎样接收

/*** 修改上架状态* @param map* @return*/@RequestMapping(value = "https://www.huyubaike.com/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","修改失败");}}

4、自己遇到的问题1、前端传输map参数给后端、后端接收不到对应的信息。