【商城实战(20)】商品管理功能深化实战

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想深入钻研技术细节，还是探寻商城运营之道，本专栏都能提供从 0 到 1 的系统讲解，助力你打造独具竞争力的电商平台，开启电商实战之旅。

---

一、商品批量上架、下架功能实现

在电商系统中，商品的批量上架与下架操作是提升商品管理效率的关键环节。当商家需要快速调整一批商品的展示状态时，逐个操作不仅耗时费力，还容易出错。批量操作功能能够一次性处理多个商品，大大节省了时间和人力成本，使得商家能够更高效地应对市场变化和业务需求。接下来，我们将详细介绍如何使用 uniapp、Element Plus、SpringBoot 和 Mybatis-plus 实现这一功能。

1.1 前端交互设计

• uniapp 实现：在 uniapp 中，使用checkbox组件实现商品选择，checkbox-group组件用于收集选中的商品。通过v-model指令绑定选中的商品列表，然后添加 “批量上架” 和 “批量下架” 按钮，并绑定对应的点击事件。示例代码如下：

<template><view><checkbox-group v-model="selectedIds"><view v-for="(item, index) in productList" :key="index"><checkbox :value="item.id">{{ item.productName }}</checkbox></view></checkbox-group><button @click="batchOperate('上架')">批量上架</button><button @click="batchOperate('下架')">批量下架</button></view>
</template><script>
export default {data() {return {selectedIds: [],productList: []};},methods: {async batchOperate(status) {if (this.selectedIds.length === 0) {uni.showToast({ title: '请选择商品', icon: 'none' });return;}const res = await uni.request({url: 'http://your-backend-url/batchProduct',method: 'POST',data: {status,productIds: this.selectedIds}});if (res.data.success) {uni.showToast({ title: `批量${status}成功`, icon:'success' });// 刷新商品列表await this.getProductList();} else {uni.showToast({ title: `批量${status}失败`, icon: 'none' });}},async getProductList() {const res = await uni.request({url: 'http://your-backend-url/products',method: 'GET'});this.productList = res.data.data;}},onLoad() {this.getProductList();}
};
</script>

• Element Plus 实现：Element Plus 中，使用el-checkbox和el-checkbox-group组件实现商品选择，同样通过v-model绑定选中的商品 ID 数组。按钮部分使用el-button组件，并绑定点击事件。示例代码如下：

<template><el-container><el-main><el-checkbox-group v-model="selectedIds"><el-checkbox v-for="(item, index) in productList" :key="index" :label="item.id">{{ item.productName }}</el-checkbox></el-checkbox-group><el-button @click="batchOperate('上架')">批量上架</el-button><el-button @click="batchOperate('下架')">批量下架</el-button></el-main></el-container>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const selectedIds = ref([]);
const productList = ref([]);const batchOperate = async (status) => {if (selectedIds.value.length === 0) {alert('请选择商品');return;}try {const res = await axios.post('http://your-backend-url/batchProduct', {status,productIds: selectedIds.value});if (res.data.success) {alert(`批量${status}成功`);await getProductList();} else {alert(`批量${status}失败`);}} catch (error) {console.error('操作失败', error);alert(`批量${status}失败`);}
};const getProductList = async () => {const res = await axios.get('http://your-backend-url/products');productList.value = res.data.data;
};onMounted(() => {getProductList();
});
</script>

1.2 后端接口开发（SpringBoot）

在 SpringBoot 中，创建一个 Controller 来接收前端传递的批量操作请求。通过@RequestBody注解获取前端发送的参数，包括操作状态（上架或下架）和商品 ID 数组。然后调用 Service 层方法来处理业务逻辑。示例代码如下：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
public class ProductController {@Autowiredprivate ProductService productService;@PostMapping("/batchProduct")public Result batchProduct(@RequestBody BatchProductDTO batchProductDTO) {try {productService.batchUpdateProductStatus(batchProductDTO.getStatus(), batchProductDTO.getProductIds());return Result.success("操作成功");} catch (Exception e) {e.printStackTrace();return Result.error("操作失败");}}
}class BatchProductDTO {private String status;private List<Long> productIds;// 省略getter和setter方法
}class Result {private boolean success;private String message;public static Result success(String message) {Result result = new Result();result.success = true;result.message = message;return result;}public static Result error(String message) {Result result = new Result();result.success = false;result.message = message;return result;}// 省略getter和setter方法
}

1.3 数据库操作（Mybatis-plus）

Mybatis-plus 提供了强大的 CRUD 操作，无需手写 mapper 文件。在 Service 层中，通过LambdaUpdateWrapper来构建更新条件，实现批量更新商品的上下架状态。示例代码如下：

import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;import javax.annotation.Resource;
import java.util.List;@Service
public class ProductService {@Resourceprivate ProductMapper productMapper;@Transactionalpublic void batchUpdateProductStatus(String status, List<Long> productIds) {LambdaUpdateWrapper<Product> updateWrapper = new LambdaUpdateWrapper<>();updateWrapper.in(Product::getId, productIds);updateWrapper.set(Product::getStatus, status);productMapper.update(null, updateWrapper);}
}

1.4 完整源码展示与分析

上述代码分别展示了 uniapp、Element Plus 前端以及 SpringBoot 后端和 Mybatis-plus 数据库操作实现商品批量上架、下架功能的关键部分。前端部分通过checkbox组件实现商品选择，点击按钮触发请求，将选中的商品 ID 和操作状态发送到后端。后端 Controller 接收请求后，调用 Service 层方法，Service 层利用 Mybatis-plus 的LambdaUpdateWrapper构建更新条件，实现对数据库中商品状态的批量更新。这样，通过前后端的协同工作，高效地实现了商品批量上架、下架功能，提升了商品管理的效率。

二、商品库存管理页面开发

商品库存管理是商城运营的核心环节之一，它直接关系到商品的供应与销售。准确的库存管理能够避免缺货现象，提升客户满意度，同时防止库存积压，减少资金占用。开发支持库存预警和库存盘点功能的页面，有助于商家及时掌握库存动态，做出合理的采购与销售决策，保障商城的稳定运营。

2.1 库存管理页面布局设计

• uniapp 实现：使用view组件构建页面布局，u-table组件展示库存数据表格，每列展示商品 ID、名称、库存数量、预警阈值等信息。在表格列中添加操作按钮，如盘点按钮，绑定点击事件。示例代码如下：

<template><view><u-table :columns="columns" :data="stockList"><template #default="{ row }"><view :key="row.id" class="u-table-cell">{{ row.productId }}</view><view :key="row.id + 'name'" class="u-table-cell">{{ row.productName }}</view><view :key="row.id + 'quantity'" class="u-table-cell">{{ row.stockQuantity }}</view><view :key="row.id + 'threshold'" class="u-table-cell">{{ row.threshold }}</view><view :key="row.id + 'operation'" class="u-table-cell"><button @click="startStockTaking(row.id)">盘点</button></view></template></u-table></view>
</template><script>
export default {data() {return {columns: [{ title: '商品ID' },{ title: '商品名称' },{ title: '库存数量' },{ title: '预警阈值' },{ title: '操作' }],stockList: []};},methods: {async getStockList() {const res = await uni.request({url: 'http://your-backend-url/stockList',method: 'GET'});this.stockList = res.data.data;},async startStockTaking(productId) {// 发起盘点请求逻辑}},onLoad() {this.getStockList();}
};
</script>

• Element Plus 实现：通过el-table组件展示库存数据，el-table-column定义每列内容。操作按钮使用el-button，并绑定点击事件。示例代码如下：

<template><el-container><el-main><el-table :data="stockList" border><el-table-column prop="productId" label="商品ID"></el-table-column><el-table-column prop="productName" label="商品名称"></el-table-column><el-table-column prop="stockQuantity" label="库存数量"></el-table-column><el-table-column prop="threshold" label="预警阈值"></el-table-column><el-table-column label="操作"><template #default="scope"><el-button @click="startStockTaking(scope.row.productId)">盘点</el-button></template></el-table-column></el-table></el-main></el-container>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const stockList = ref([]);const getStockList = async () => {const res = await axios.get('http://your-backend-url/stockList');stockList.value = res.data.data;
};const startStockTaking = async (productId) => {// 发起盘点请求逻辑
};onMounted(() => {getStockList();
});
</script>

2.2 库存预警功能实现

• 后端实现：在 SpringBoot 的 Service 层中，通过LambdaQueryWrapper查询库存数量小于预警阈值的商品。当查询到符合条件的商品时，将预警信息封装成对象返回给前端。示例代码如下：

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import java.util.List;@Service
public class StockService {@Resourceprivate StockMapper stockMapper;public List<Stock> getLowStockProducts() {LambdaQueryWrapper<Stock> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.lt(Stock::getStockQuantity, Stock::getThreshold);return stockMapper.selectList(queryWrapper);}
}

• 前端实现：在 uniapp 或 Element Plus 前端页面，通过定时器定时调用后端接口获取预警信息。当接收到预警信息后，在页面上以红色字体或特殊图标标识预警商品。在 uniapp 中，可以在u-table组件的对应列中根据数据判断添加样式；在 Element Plus 中，在el-table-column的default插槽中根据数据判断添加样式。示例代码（以 Element Plus 为例）：

<template><el-container><el-main><el-table :data="stockList" border><el-table-column prop="productId" label="商品ID"></el-table-column><el-table-column prop="productName" label="商品名称"><template #default="scope"><span :class="scope.row.stockQuantity < scope.row.threshold? 'warning-text' : ''">{{ scope.row.productName }}</span></template></el-table-column><el-table-column prop="stockQuantity" label="库存数量"></el-table-column><el-table-column prop="threshold" label="预警阈值"></el-table-column><el-table-column label="操作"><template #default="scope"><el-button @click="startStockTaking(scope.row.productId)">盘点</el-button></template></el-table-column></el-table></el-main></el-container>
</template><script setup>
import { ref, onMounted, setInterval } from 'vue';
import axios from 'axios';const stockList = ref([]);const getStockList = async () => {const res = await axios.get('http://your-backend-url/stockList');stockList.value = res.data.data;
};const startStockTaking = async (productId) => {// 发起盘点请求逻辑
};onMounted(() => {getStockList();setInterval(getStockList, 60 * 1000); // 每分钟获取一次预警信息
});
</script><style scoped>
.warning-text {color: red;
}
</style>

2.3 库存盘点功能实现

• 后端实现：在 SpringBoot 的 Controller 中接收前端传递的盘点数据，包括商品 ID 和实际盘点数量。调用 Service 层方法更新数据库中的库存数据。在 Service 层中，通过LambdaUpdateWrapper构建更新条件，实现库存数据的更新。示例代码如下：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;@RestController
public class StockController {@Autowiredprivate StockService stockService;@PostMapping("/stockTaking")public Result stockTaking(@RequestBody StockTakingDTO stockTakingDTO) {try {stockService.updateStock(stockTakingDTO.getProductId(), stockTakingDTO.getActualQuantity());return Result.success("盘点成功");} catch (Exception e) {e.printStackTrace();return Result.error("盘点失败");}}
}class StockTakingDTO {private Long productId;private Integer actualQuantity;// 省略getter和setter方法
}import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;import javax.annotation.Resource;@Service
public class StockService {@Resourceprivate StockMapper stockMapper;@Transactionalpublic void updateStock(Long productId, Integer actualQuantity) {LambdaUpdateWrapper<Stock> updateWrapper = new LambdaUpdateWrapper<>();updateWrapper.eq(Stock::getProductId, productId);updateWrapper.set(Stock::getStockQuantity, actualQuantity);stockMapper.update(null, updateWrapper);}
}

• 前端实现：当用户点击盘点按钮时，弹出盘点弹窗。在弹窗中，用户输入实际盘点数量，点击确认按钮后，将盘点数据发送到后端。在 uniapp 中，使用uni.showModal弹出确认框，获取用户输入后发送请求；在 Element Plus 中，使用el-dialog组件作为弹窗，通过表单获取用户输入，点击按钮时发送请求。示例代码（以 Element Plus 为例）：

<template><el-container><el-main><el-table :data="stockList" border><el-table-column prop="productId" label="商品ID"></el-table-column><el-table-column prop="productName" label="商品名称"></el-table-column><el-table-column prop="stockQuantity" label="库存数量"></el-table-column><el-table-column prop="threshold" label="预警阈值"></el-table-column><el-table-column label="操作"><template #default="scope"><el-button @click="showStockTakingDialog(scope.row.productId)">盘点</el-button></template></el-table-column></el-table><el-dialog title="库存盘点" :visible.sync="stockTakingDialogVisible" width="30%"><el-form :model="stockTakingForm" label-width="80px"><el-form-item label="实际数量"><el-input v-model="stockTakingForm.actualQuantity" type="number"></el-input></el-form-item></el-form><template #footer><el-button @click="stockTakingDialogVisible = false">取消</el-button><el-button type="primary" @click="confirmStockTaking">确认</el-button></template></el-dialog></el-main></el-container>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const stockList = ref([]);
const stockTakingDialogVisible = ref(false);
const stockTakingForm = ref({productId: null,actualQuantity: null
});const getStockList = async () => {const res = await axios.get('http://your-backend-url/stockList');stockList.value = res.data.data;
};const showStockTakingDialog = (productId) => {stockTakingForm.value.productId = productId;stockTakingDialogVisible.value = true;
};const confirmStockTaking = async () => {try {const res = await axios.post('http://your-backend-url/stockTaking', stockTakingForm.value);if (res.data.success) {stockTakingDialogVisible.value = false;await getStockList();} else {alert('盘点失败');}} catch (error) {console.error('盘点失败', error);alert('盘点失败');}
};onMounted(() => {getStockList();
});
</script>

2.4 源码实现与解读

上述代码展示了库存管理页面前后端实现的关键部分。前端通过表格展示库存数据，实现了库存预警标识和库存盘点操作的交互。后端通过 SpringBoot 和 Mybatis-plus 实现了数据的查询、更新等业务逻辑。在整个实现过程中，前后端通过 HTTP 请求进行数据交互，确保了库存管理功能的正常运行。通过对这些源码的解读，可以清晰地了解库存管理功能的实现思路和技术细节，为进一步优化和扩展功能提供了基础。

三、完善商品信息编辑功能

在商城系统中，完善商品信息编辑功能是实现精细化商品管理的重要一环。随着业务的发展，商品的属性和关联信息可能会发生变化，例如商品的分类调整、品牌更换等。一个完善的商品信息编辑功能能够满足这些业务需求，确保商品数据的准确性和完整性，提升用户体验和商城的运营效率。接下来，我们将详细介绍如何使用 uniapp、Element Plus、SpringBoot 和 Mybatis-plus 来完善这一功能。

3.1 前端编辑页面优化

• uniapp 实现：在 uniapp 中，使用u-form组件搭建商品信息编辑表单。对于商品分类和品牌选择，使用u-picker组件实现下拉选择功能。通过v-model指令绑定表单数据，实现数据的双向绑定。示例代码如下：

<template><view><u-form :model="productForm" ref="productFormRef"><u-form-item label="商品名称"><u-input v-model="productForm.productName"></u-input></u-form-item><u-form-item label="商品分类"><u-picker :columns="categoryOptions" @change="handleCategoryChange" v-model="productForm.categoryId"></u-picker></u-form-item><u-form-item label="商品品牌"><u-picker :columns="brandOptions" @change="handleBrandChange" v-model="productForm.brandId"></u-picker></u-form-item><!-- 其他商品信息字段 --><button @click="submitEdit">提交编辑</button></u-form></view>
</template><script>
export default {data() {return {productForm: {productName: '',categoryId: '',brandId: ''},categoryOptions: [],brandOptions: []};},methods: {async getCategoryOptions() {const res = await uni.request({url: 'http://your-backend-url/categories',method: 'GET'});this.categoryOptions = res.data.data.map(item => ({ label: item.categoryName, value: item.id }));},async getBrandOptions() {const res = await uni.request({url: 'http://your-backend-url/brands',method: 'GET'});this.brandOptions = res.data.data.map(item => ({ label: item.brandName, value: item.id }));},handleCategoryChange(e) {this.productForm.categoryId = e.detail.value;},handleBrandChange(e) {this.productForm.brandId = e.detail.value;},async submitEdit() {await this.$refs.productFormRef.validate();const res = await uni.request({url: 'http://your-backend-url/products/' + this.productForm.id,method: 'PUT',data: this.productForm});if (res.data.success) {uni.showToast({ title: '编辑成功', icon:'success' });// 刷新商品列表或返回上一页} else {uni.showToast({ title: '编辑失败', icon: 'none' });}}},onLoad() {this.getCategoryOptions();this.getBrandOptions();// 从路由参数获取商品ID，查询商品信息并填充表单const productId = this.$route.query.productId;if (productId) {this.getProductDetail(productId);}},async getProductDetail(productId) {const res = await uni.request({url: 'http://your-backend-url/products/' + productId,method: 'GET'});this.productForm = res.data.data;}
};
</script>

• Element Plus 实现：利用el-form组件创建商品信息编辑表单，el-select组件实现商品分类和品牌的下拉选择。同样通过v-model绑定数据，实现数据的实时更新。示例代码如下：

<template><el-container><el-main><el-form :model="productForm" ref="productFormRef" label-width="120px"><el-form-item label="商品名称"><el-input v-model="productForm.productName"></el-input></el-form-item><el-form-item label="商品分类"><el-select v-model="productForm.categoryId" placeholder="请选择分类"><el-option v-for="item in categoryOptions" :key="item.id" :label="item.categoryName" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="商品品牌"><el-select v-model="productForm.brandId" placeholder="请选择品牌"><el-option v-for="item in brandOptions" :key="item.id" :label="item.brandName" :value="item.id"></el-option></el-select></el-form-item><!-- 其他商品信息字段 --><el-form-item><el-button type="primary" @click="submitEdit">提交编辑</el-button></el-form-item></el-form></el-main></el-container>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const productForm = ref({productName: '',categoryId: '',brandId: ''
});
const categoryOptions = ref([]);
const brandOptions = ref([]);const getCategoryOptions = async () => {const res = await axios.get('http://your-backend-url/categories');categoryOptions.value = res.data.data;
};const getBrandOptions = async () => {const res = await axios.get('http://your-backend-url/brands');brandOptions.value = res.data.data;
};const submitEdit = async () => {await productFormRef.value.validate();try {const res = await axios.put('http://your-backend-url/products/' + productForm.value.id, productForm.value);if (res.data.success) {alert('编辑成功');// 刷新商品列表或返回上一页} else {alert('编辑失败');}} catch (error) {console.error('编辑失败', error);alert('编辑失败');}
};onMounted(() => {getCategoryOptions();getBrandOptions();// 从路由参数获取商品ID，查询商品信息并填充表单const productId = new URLSearchParams(window.location.search).get('productId');if (productId) {getProductDetail(productId);}
});const getProductDetail = async (productId) => {const res = await axios.get('http://your-backend-url/products/' + productId);productForm.value = res.data.data;
};
</script>

3.2 后端编辑接口升级

在 SpringBoot 后端，创建一个 Controller 来接收前端传递的商品编辑请求。通过@PathVariable获取商品 ID，@RequestBody获取编辑后的商品数据。在 Service 层中，根据商品 ID 查询原有商品信息，更新需要修改的字段，如商品分类和品牌关联信息，然后调用 Mybatis-plus 的更新方法将数据持久化到数据库。示例代码如下：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/products")
public class ProductController {@Autowiredprivate ProductService productService;@PutMapping("/{id}")public Result updateProduct(@PathVariable Long id, @RequestBody Product product) {try {product.setId(id);productService.updateProduct(product);return Result.success("编辑成功");} catch (Exception e) {e.printStackTrace();return Result.error("编辑失败");}}
}import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;import javax.annotation.Resource;@Service
public class ProductService {@Resourceprivate ProductMapper productMapper;@Transactionalpublic void updateProduct(Product product) {// 根据ID查询原有商品信息Product originalProduct = productMapper.selectById(product.getId());// 更新需要修改的字段originalProduct.setProductName(product.getProductName());originalProduct.setCategoryId(product.getCategoryId());originalProduct.setBrandId(product.getBrandId());// 其他字段更新// 更新数据库productMapper.updateById(originalProduct);}
}

3.3 数据库关联更新（Mybatis-plus）

Mybatis-plus 提供了便捷的更新操作，无需编写复杂的 SQL 语句。在上述 Service 层代码中，通过productMapper.updateById(originalProduct)方法即可实现商品信息的更新。如果商品与分类、品牌存在关联关系，并且在数据库设计中通过外键关联，当更新商品的分类 ID 和品牌 ID 时，数据库会自动维护关联关系的一致性。例如，假设商品表product中有category_id和brand_id字段分别关联分类表category和品牌表brand的主键：

<!-- 假设Mybatis-plus的配置文件，虽然不需要手写mapper文件，但这里展示配置结构 -->
<configuration><settings><!-- 开启驼峰命名映射 --><setting name="mapUnderscoreToCamelCase" value="true"/></settings>
</configuration>

在 Java 代码中，当执行productMapper.updateById(originalProduct)时，Mybatis-plus 会根据originalProduct对象中的属性值生成对应的 SQL 语句，实现商品信息及关联字段的更新。例如，生成的 SQL 语句可能类似于：

UPDATE product 
SET product_name = #{productName}, category_id = #{categoryId}, brand_id = #{brandId} 
WHERE id = #{id}

这样就完成了商品信息及其关联的分类、品牌数据在数据库中的更新操作。

3.4 完整代码示例与解析

• 前端完整代码（以 Element Plus 为例）：

<template><el-container><el-main><el-form :model="productForm" ref="productFormRef" label-width="120px"><el-form-item label="商品名称"><el-input v-model="productForm.productName"></el-input></el-form-item><el-form-item label="商品分类"><el-select v-model="productForm.categoryId" placeholder="请选择分类"><el-option v-for="item in categoryOptions" :key="item.id" :label="item.categoryName" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="商品品牌"><el-select v-model="productForm.brandId" placeholder="请选择品牌"><el-option v-for="item in brandOptions" :key="item.id" :label="item.brandName" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="商品价格"><el-input-number v-model="productForm.price" :precision="2"></el-input-number></el-form-item><el-form-item label="商品库存"><el-input-number v-model="productForm.stock"></el-input-number></el-form-item><el-form-item><el-button type="primary" @click="submitEdit">提交编辑</el-button></el-form-item></el-form></el-main></el-container>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const productForm = ref({id: null,productName: '',categoryId: '',brandId: '',price: 0,stock: 0
});
const categoryOptions = ref([]);
const brandOptions = ref([]);const getCategoryOptions = async () => {const res = await axios.get('http://your-backend-url/categories');categoryOptions.value = res.data.data;
};const getBrandOptions = async () => {const res = await axios.get('http://your-backend-url/brands');brandOptions.value = res.data.data;
};const submitEdit = async () => {await productFormRef.value.validate();try {if (productForm.value.id) {const res = await axios.put('http://your-backend-url/products/' + productForm.value.id, productForm.value);if (res.data.success) {alert('编辑成功');// 刷新商品列表或返回上一页} else {alert('编辑失败');}} else {alert('商品ID为空，无法编辑');}} catch (error) {console.error('编辑失败', error);alert('编辑失败');}
};onMounted(() => {getCategoryOptions();getBrandOptions();const productId = new URLSearchParams(window.location.search).get('productId');if (productId) {getProductDetail(productId);}
});const getProductDetail = async (productId) => {const res = await axios.get('http://your-backend-url/products/' + productId);productForm.value = res.data.data;
};
</script>

• 后端完整代码：

// ProductController.java
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;@RestController
@RequestMapping("/products")
public class ProductController {@Autowiredprivate ProductService productService;@PutMapping("/{id}")public Result updateProduct(@PathVariable Long id, @RequestBody Product product) {try {product.setId(id);productService.updateProduct(product);return Result.success("编辑成功");} catch (Exception e) {e.printStackTrace();return Result.error("编辑失败");}}
}// ProductService.java
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;import javax.annotation.Resource;@Service
public class ProductService {@Resourceprivate ProductMapper productMapper;@Transactionalpublic void updateProduct(Product product) {Product originalProduct = productMapper.selectById(product.getId());originalProduct.setProductName(product.getProductName());originalProduct.setCategoryId(product.getCategoryId());originalProduct.setBrandId(product.getBrandId());originalProduct.setPrice(product.getPrice());originalProduct.setStock(product.getStock());productMapper.updateById(originalProduct);}
}// ProductMapper.java 由Mybatis-plus自动生成，继承BaseMapper
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import com.example.demo.entity.Product;@Mapper
public interface ProductMapper extends BaseMapper<Product> {
}// Product.java 商品实体类
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;@Data
public class Product {@TableIdprivate Long id;private String productName;private Long categoryId;private Long brandId;private Double price;private Integer stock;
}// Result.java 返回结果类
class Result {private boolean success;private String message;public static Result success(String message) {Result result = new Result();result.success = true;result.message = message;return result;}public static Result error(String message) {Result result = new Result();result.success = false;result.message = message;return result;}// 省略getter和setter方法
}

• 代码解析：
• • 前端部分通过el-form和el-select等组件构建了商品信息编辑表单，实现了用户与页面的交互。getCategoryOptions和getBrandOptions方法从后端获取商品分类和品牌数据，填充下拉选择框。submitEdit方法在用户点击提交按钮时，验证表单数据并将编辑后的商品信息发送到后端。
• • 后端ProductController接收前端的编辑请求，调用ProductService的updateProduct方法处理业务逻辑。ProductService中，先根据商品 ID 查询原有商品信息，然后更新需要修改的字段，最后通过ProductMapper的updateById方法将更新后的数据保存到数据库。
• • Mybatis-plus 的BaseMapper为ProductMapper提供了基本的 CRUD 操作，使得数据库操作更加便捷高效。通过上述前后端代码的协同工作，实现了完善的商品信息编辑功能，满足了商城对商品精细化管理的需求。

四、总结与展望

通过上述对商品批量上架、下架功能，商品库存管理页面，以及商品信息编辑功能的深化开发，我们显著提升了商城后台商品管理的效率和灵活性。商品批量操作功能极大地减少了商家调整商品展示状态的时间成本，使得商品能够更及时地响应市场需求；库存管理页面的开发实现了库存的可视化管理和预警机制，有效避免了缺货和库存积压问题；完善的商品信息编辑功能则确保了商品数据的准确性和完整性，为商城的精细化运营提供了有力支持。

展望未来，我们可以进一步优化和拓展商品管理功能。在技术层面，持续提升系统性能，引入更先进的缓存技术和数据库优化策略，以应对高并发场景下的商品管理需求；在功能拓展方面，增加商品数据分析功能，通过对商品销售数据、库存数据等的深入挖掘，为商家提供更具针对性的决策支持，如智能补货建议、商品推荐策略等；同时，随着移动端购物的普及，进一步优化 uniapp 前端的用户体验，实现更流畅的操作和更友好的界面设计。此外，考虑到多语言和多地区的业务拓展，商品管理系统应具备良好的国际化支持，以满足不同地区用户的需求。通过不断地优化和创新，我们将为商城的稳定发展和业务增长奠定坚实的基础。