一般后臺對商品的信息管理、包含商品的上架與下架 。為了提高用戶的體驗、將商品上下架的操作做成開關的形式 。同時后臺數據庫中保存的商品狀態能夠根據開關狀態改變 。1、效果展示這種效果:== 當開關是開啟狀態、代表此時商品是上架狀態 。商品頁面可以看到對應的商品 。如果開關是關閉狀態、代表該商品暫未上架，商品頁面看不到該商品
1.1 前端頁面效果
文章插圖
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進行了二次封裝 。你們就按照你們的方式調用接口就行，主要是把兩個參數（商品狀態和主鍵）傳輸到后端中 ?！靖鶕麈I修改對應商品的狀態】
//切換是否上架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參數給后端、后端接收不到對應的信息 。- 將axios進行了二次封裝、由于不是使用url地址欄拼接的形式，我就想使用map的形式傳遞給后端（map可以傳遞多個自定義參數、前兩天剛解決使用map傳遞多個自定義參數【使用Get、后端的接口方法是
@RequestParam推薦閱讀
- 4 Java I/O：AIO和NIO中的Selector
- 躍遷旅人鉆石怎么分配
- 時空中的繪旅人諸界歸一出行服裝羽翼獲取方法是什么
- 時空中的繪旅人服裝的獲取方法是什么
- 三國演義中趙云是怎么死的（老三國趙云哪一集死的)
- 基于tauri+vue3.x多開窗口|Tauri創建多窗體實踐
- [C#]SourceGenerator實戰: 對任意對象使用await吧!!!
- Hyperf使用ElasticSearch記錄
- 原神赤念果在什么位置
- 完全看懂《冒死記錄中國神秘事件》4部的高手進 冒死記錄中國神秘事件
