【商城实战(10)】解锁商品信息录入与展示的技术密码

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

---

一、搭建商品录入前端页面

1.1 移动前端（uniapp 实现）

在使用 uniapp 搭建移动前端商品录入页面时，为实现多图上传功能，可借助uni.chooseImage API 。此 API 能方便地从本地相册选择图片或使用相机拍照获取图片，代码如下：

<template><view class="container"><view class="form-item"><label>商品图片：</label><view class="image-upload"><view v-for="(image, index) in images" :key="index" class="image-preview"><image :src="image" mode="aspectFill"></image><view class="delete-icon" @click="deleteImage(index)">删除</view></view><view class="upload-button" @click="chooseImages">上传图片</view></view></view><view class="form-item"><label>商品描述：</label><editor v-model="description" :config="editorConfig"></editor></view><button @click="submitForm">提交</button></view>
</template><script>
export default {data() {return {images: [],description: '',editorConfig: {// 富文本编辑器配置项toolbar: ['bold', 'italic', 'underline', 'link', 'image'],// 更多配置...}};},methods: {chooseImages() {uni.chooseImage({count: 9, // 最多选择9张图片sizeType: ['compressed'], // 图片尺寸类型，这里选择压缩图sourceType: ['album', 'camera'], // 图片来源，相册和相机success: res => {this.images = this.images.concat(res.tempFilePaths);}});},deleteImage(index) {this.images.splice(index, 1);},submitForm() {// 提交表单逻辑，将images和description等数据发送到后端console.log('提交表单，商品图片：', this.images);console.log('提交表单，商品描述：', this.description);}}
};
</script><style scoped>
.container {padding: 20px;
}
.form-item {margin-bottom: 20px;
}
.form-item label {display: block;margin-bottom: 5px;
}
.image-upload {display: flex;flex-wrap: wrap;
}
.image-preview {position: relative;margin-right: 10px;margin-bottom: 10px;
}
.image-preview image {width: 100px;height: 100px;
}
.delete-icon {position: absolute;top: 5px;right: 5px;color: red;cursor: pointer;
}
.upload-button {width: 100px;height: 100px;border: 1px dashed #ccc;display: flex;justify-content: center;align-items: center;cursor: pointer;
}
</style>

上述代码中，chooseImages 方法调用 uni.chooseImage 实现图片选择，并将选择的图片路径添加到 images 数组中。deleteImage 方法用于删除已选择的图片。对于富文本描述，使用了 editor 组件（这里假设项目中已引入合适的富文本编辑器组件），通过 v-model 绑定 description 实现数据双向绑定，用户在编辑器中输入的内容会实时更新到 description 变量中。

1.2 PC 前端（Element Plus 实现）

基于 Element Plus 搭建 PC 端商品录入页面，对于多图上传，可使用el-upload 组件。它提供了丰富的属性和事件，方便实现各种上传需求 ，示例代码如下：

<template><el-form ref="form" :model="form" label-width="120px"><el-form-item label="商品图片："><el-uploadclass="upload-demo"action="#":multiple="true":on-success="handleUploadSuccess":on-remove="handleRemove":file-list="form.images"><el-button slot="trigger" size="small" type="primary">选择图片</el-button><el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div></el-upload></el-form-item><el-form-item label="商品描述："><el-input type="textarea" v-model="form.description" :rows="5"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item></el-form>
</template><script setup>
import { ref } from 'vue';const form = ref({images: [],description: ''
});const handleUploadSuccess = (response, file, fileList) => {// 上传成功后的处理，这里假设response包含图片的urlform.value.images.push(response.url);
};const handleRemove = (file, fileList) => {// 删除图片时的处理const index = form.value.images.indexOf(file.response.url);if (index > -1) {form.value.images.splice(index, 1);}
};const submitUpload = () => {// 实际项目中，这里应发送图片到服务器，并更新form.images为服务器返回的图片urlconsole.log('上传图片到服务器，当前图片列表：', form.value.images);
};const submitForm = () => {// 提交表单逻辑，将form.images和form.description等数据发送到后端console.log('提交表单，商品图片：', form.value.images);console.log('提交表单，商品描述：', form.value.description);
};
</script><style scoped>
.upload-demo {width: 100%;
}
</style>

在这段代码中，el-upload 组件的 action 属性指定上传的地址（这里暂时设置为 # ，实际项目中应替换为真实的上传接口），multiple 属性允许上传多张图片。handleUploadSuccess 方法在图片上传成功时被调用，将服务器返回的图片 url 添加到 form.images 数组中；handleRemove 方法在用户删除图片时被调用，从 form.images 数组中移除对应的图片。对于商品描述，使用 el-input 组件并设置 type 为 textarea 来实现多行文本输入。PC 端和移动前端在布局和交互上存在差异，PC 端屏幕较大，可展示更多信息和操作按钮，布局上更倾向于使用栅格系统等进行规整排版；而移动前端更注重简洁性和触摸交互，在组件选择和样式上会更适配小屏幕设备。

二、编写后端商品信息添加接口

2.1 商品数据入库

使用 Spring Boot 进行后端开发时，首先要设计商品数据存储的数据库表结构 。以 MySQL 数据库为例，假设商品表名为product，其字段定义如下：

CREATE TABLE product (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(255) NOT NULL,description TEXT,price DECIMAL(10, 2) NOT NULL,stock INT NOT NULL DEFAULT 0
);

上述表结构中，id作为商品的唯一标识，自动递增；name字段用于存储商品名称，为必填项；description字段使用TEXT类型，可存储较长的商品描述信息；price字段使用DECIMAL类型，精确表示商品价格，保留两位小数；stock字段记录商品库存，默认值为 0 。

在 Spring Boot 项目中，使用 MyBatis-Plus 框架来操作数据库会更加便捷。首先在pom.xml文件中添加 MyBatis-Plus 和 MySQL 驱动依赖：

<dependencies><!-- MyBatis-Plus依赖 --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>最新版本号</version></dependency><!-- MySQL驱动依赖 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency>
</dependencies>

接着定义商品实体类Product，与数据库表结构对应：

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;@Data
@TableName("product")
public class Product {private Integer id;private String name;private String description;private java.math.BigDecimal price;private Integer stock;
}

然后创建商品数据访问层接口ProductMapper：

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> {
}

最后在服务层实现商品数据入库方法：

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
import com.example.demo.entity.Product;
import com.example.demo.mapper.ProductMapper;@Service
public class ProductService extends ServiceImpl<ProductMapper, Product> {public boolean addProduct(Product product) {return save(product);}
}

在上述代码中，ProductService继承自ServiceImpl，通过调用save方法即可将商品数据插入到数据库中。如果插入成功，save方法返回true，否则返回false。

2.2 图片存储

图片存储有多种方案，常见的有存储至文件系统和云存储。

• 文件系统存储：即将图片直接存储在服务器的本地磁盘中。优点是实现简单，成本低，不需要额外的网络请求和第三方服务依赖。例如在 Linux 服务器上，可以将图片存储在/data/images目录下 。缺点是可扩展性差，当图片数量增多，存储容量不足时，扩展存储较为麻烦；同时，文件系统的可靠性相对较低，一旦服务器磁盘损坏，可能导致图片数据丢失 。适用于小型项目或对图片存储性能和可靠性要求不高的场景，如个人博客的图片存储。在 Java 中实现文件系统存储图片的代码示例如下：

import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;public class FileSystemImageStorage {private static final String UPLOAD_DIR = "/data/images/";public String saveImage(MultipartFile file) {String originalFileName = file.getOriginalFilename();assert originalFileName != null;String fileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));String newFileName = UUID.randomUUID().toString() + fileExtension;File targetFile = new File(UPLOAD_DIR + newFileName);try {file.transferTo(targetFile);} catch (IOException e) {e.printStackTrace();return null;}return newFileName;}
}

上述代码中，saveImage方法接收一个MultipartFile类型的文件，生成一个唯一的文件名，将文件保存到指定的目录，并返回保存后的文件名。

• 云存储：如使用阿里云 OSS、腾讯云 COS 等云存储服务。优点是具有高可靠性、高可用性和良好的扩展性，云服务提供商负责维护存储系统的稳定性和安全性；同时，通常提供 CDN 加速功能，能显著提高图片加载速度，提升用户体验 。缺点是需要支付一定的费用，费用根据存储容量、流量等因素计算；并且依赖于网络，若网络不稳定，可能影响图片的上传和下载 。适用于中大型电商项目，对图片存储的可靠性、扩展性和加载速度有较高要求的场景。以阿里云 OSS 为例，使用 Java SDK 实现图片存储的代码如下：

首先在pom.xml文件中添加阿里云 OSS 依赖：

<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>最新版本号</version>
</dependency>

然后编写存储方法：

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;public class AliyunOSSImageStorage {private static final String ENDPOINT = "oss-cn-hangzhou.aliyuncs.com";private static final String ACCESS_KEY_ID = "yourAccessKeyId";private static final String ACCESS_KEY_SECRET = "yourAccessKeySecret";private static final String BUCKET_NAME = "yourBucketName";public String saveImage(MultipartFile file) {OSS ossClient = new OSSClientBuilder().build(ENDPOINT, ACCESS_KEY_ID, ACCESS_KEY_SECRET);String originalFileName = file.getOriginalFilename();assert originalFileName != null;String fileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));String newFileName = UUID.randomUUID().toString() + fileExtension;try (InputStream inputStream = file.getInputStream()) {ossClient.putObject(BUCKET_NAME, newFileName, inputStream);} catch (IOException e) {e.printStackTrace();ossClient.shutdown();return null;}ossClient.shutdown();return newFileName;}
}

在上述代码中，saveImage方法通过阿里云 OSS 的 Java SDK，将图片上传到指定的存储空间，并返回上传后的文件名。

三、开发商品详情展示页面

3.1 前端展示效果优化

商品详情展示页面的前端效果优化对于提升用户体验和促进购买转化至关重要。在页面布局方面，采用简洁明了的结构，将重要信息置于显眼位置。例如，商品图片通常占据页面上方较大区域，以吸引用户眼球。使用栅格系统进行布局，确保在不同屏幕尺寸下，页面元素都能合理排列。以 PC 端为例，借助 Element Plus 的el-row和el-col组件实现栅格布局：

<template><el-row><el-col :span="12"><!-- 商品图片区域 --><el-image :src="product.imageUrl" :preview-src-list="[product.imageUrl]" fit="contain"></el-image></el-col><el-col :span="12"><!-- 商品信息区域 --><h1>{{ product.name }}</h1><p>价格：{{ product.price }}</p><p>库存：{{ product.stock }}</p><p v-html="product.description"></p></el-col></el-row>
</template><script setup>
import { ref } from 'vue';// 模拟从后端获取的商品数据
const product = ref({name: '示例商品',imageUrl: 'https://example.com/image.jpg',price: 199.99,stock: 100,description: '<p>这是一款示例商品，具有多种特性...</p>'
});
</script>

在上述代码中，通过el-row创建行容器，el-col划分列，使商品图片和商品信息分占两列，布局清晰。对于图片展示，使用el-image组件，fit="contain"属性确保图片在保持原有比例的情况下完整显示在容器内，并且preview-src-list属性提供了图片预览功能，用户点击图片可查看大图。

在交互设计上，增加一些交互效果可以提升用户参与度。比如，当用户鼠标悬停在商品图片上时，添加一个简单的放大动画，吸引用户关注图片细节。利用 CSS 的transform属性实现该效果：

.el-image {transition: transform 0.3s ease;
}
.el-image:hover {transform: scale(1.1);
}

对于移动前端（uniapp 实现），考虑到触摸交互，页面布局更加注重简洁和操作便捷性。商品图片占据屏幕宽度的大部分，下方依次排列商品名称、价格、描述等信息。同时，使用uni-swipe-action组件实现滑动删除操作（假设在商品列表页面进入详情前有删除商品的需求场景）：

<template><view class="product-detail"><image :src="product.imageUrl" mode="aspectFill" class="product-image"></image><view class="product-info"><text class="product-name">{{ product.name }}</text><text class="product-price">价格：{{ product.price }}</text><text class="product-stock">库存：{{ product.stock }}</text><view v-html="product.description" class="product-desc"></view></view><!-- 假设在商品列表页面进入详情前有删除商品的需求场景 --><uni-swipe-action :left-options="leftOptions" :right-options="rightOptions"><view class="swipe-content"><!-- 商品详情内容 --></view></uni-swipe-action></view>
</template><script>
export default {data() {return {product: {name: '示例商品',imageUrl: 'https://example.com/image.jpg',price: 199.99,stock: 100,description: '<p>这是一款示例商品，具有多种特性...</p>'},leftOptions: [{text: '删除',style: { backgroundColor: 'red' },click: () => {// 删除商品逻辑}}],rightOptions: []};}
};
</script><style scoped>
.product-detail {padding: 20px;
}
.product-image {width: 100%;height: 300px;
}
.product-info {margin-top: 20px;
}
.product-name {font-size: 20px;font-weight: bold;
}
.product-price,
.product-stock {font-size: 16px;margin-top: 10px;
}
.product-desc {margin-top: 20px;
}
.swipe-content {/* 滑动操作内容的样式 */
}
</style>

优化后的商品详情展示页面在 PC 端和移动端都能为用户提供良好的视觉体验和交互感受，清晰地展示商品信息，引导用户进行购买决策。

3.2 调用后端接口获取商品信息

前端调用后端接口获取商品详细信息，以 Vue（Element Plus）为例，使用axios库来发送 HTTP 请求。首先，在项目中安装axios：

npm install axios

然后在组件中引入并使用：

<template><el-row><el-col :span="12"><el-image :src="product.imageUrl" :preview-src-list="[product.imageUrl]" fit="contain"></el-image></el-col><el-col :span="12"><h1>{{ product.name }}</h1><p>价格：{{ product.price }}</p><p>库存：{{ product.stock }}</p><p v-html="product.description"></p></el-col></el-row>
</template><script setup>
import axios from 'axios';
import { ref } from 'vue';const product = ref({});
const productId = 1; // 假设商品ID为1，实际应用中应从路由参数或其他方式获取axios.get(`/api/products/${productId}`).then(response => {product.value = response.data;}).catch(error => {console.error('获取商品信息失败', error);});
</script>

在上述代码中，通过axios.get方法向/api/products/${productId}发送 GET 请求，其中productId为商品的唯一标识。后端接收到请求后，根据productId从数据库中查询对应的商品信息并返回。前端在then回调函数中接收响应数据，并将其赋值给product变量，从而在页面上展示商品的详细信息。如果请求过程中出现错误，在catch回调函数中进行错误处理，将错误信息打印到控制台。

对于 uniapp 项目，同样可以使用axios或 uniapp 内置的uni.request方法来调用后端接口。以uni.request为例：

<template><view class="product-detail"><image :src="product.imageUrl" mode="aspectFill" class="product-image"></image><view class="product-info"><text class="product-name">{{ product.name }}</text><text class="product-price">价格：{{ product.price }}</text><text class="product-stock">库存：{{ product.stock }}</text><view v-html="product.description" class="product-desc"></view></view></view>
</template><script>
export default {data() {return {product: {}};},onLoad(options) {const productId = options.productId; // 从页面跳转参数中获取商品IDuni.request({url: `/api/products/${productId}`,method: 'GET',success: res => {this.product = res.data;},fail: err => {console.error('获取商品信息失败', err);}});}
};
</script><style scoped>
.product-detail {padding: 20px;
}
.product-image {width: 100%;height: 300px;
}
.product-info {margin-top: 20px;
}
.product-name {font-size: 20px;font-weight: bold;
}
.product-price,
.product-stock {font-size: 16px;margin-top: 10px;
}
.product-desc {margin-top: 20px;
}
</style>

在 uniapp 项目中，通过uni.request方法发送请求，success回调函数处理成功响应，fail回调函数处理请求失败情况。通过这种方式，前端能够顺利调用后端接口获取商品详细信息，并展示在商品详情页面上。