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

商品上下架管理效果与实现摘要

文章描述了后台商品信息管理系统的商品上下架功能，以及通过开关形式改善用户体验，同时确保数据库中商品状态与开关状态同步。

1. 效果展示

商品上下架操作通过一个开关展示，开启状态表示商品上架，关闭状态表示商品下架。前端页面展示对应商品，数据库根据开关状态存储商品上下架状态。

2. 具体实现过程

通过查看ElementUi官网组件库，使用官方提供的组件与方法实现自定义开关效果。修改数据库商品状态时，使用change事件触发函数，调用接口完成状态修改。

3. 实例代码

提出两个问题：如何根据数据库状态显示开关状态，以及如何在改变开关时更新数据库状态。解决方法包括前端页面展示时对商品状态处理，以及通过change事件调用后端接口传输商品状态和主键。

前端代码中，使用axios二次封装的方法进行接口调用，后端通过mybatis-plus实现商品信息的修改。

4. 遇到的问题

作者提到在前端传输map参数时后端无法接收，解决方法是切换接收方式至@RequestBody。另外，作者在使用mybatis-plus时误用了QueryWrapper代替UpdateWrapper导致错误修改信息。

5. 后语

作者认为学习是一个不断进步的过程，并提出学习中遇到的困难和解决方案。