做网站客户没有付定金,公司网站建设维护的岗位,wordpress 文章页调用,做什么类型网站可以吸引用户【商城实战】专栏重磅来袭#xff01;这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建#xff0c;运用 uniapp、Element Plus、SpringBoot 搭建商城框架#xff0c;到用户、商品、订单等核心模块开发#xff0c;再到性能优化、安全加固、多端适配#xf… 【商城实战】专栏重磅来袭这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建运用 uniapp、Element Plus、SpringBoot 搭建商城框架到用户、商品、订单等核心模块开发再到性能优化、安全加固、多端适配乃至运营推广策略102 章内容层层递进。无论是想深入钻研技术细节还是探寻商城运营之道本专栏都能提供从 0 到 1 的系统讲解助力你打造独具竞争力的电商平台开启电商实战之旅。 目录 一、搭建商品录入前端页面1.1 移动前端uniapp 实现1.2 PC 前端Element Plus 实现 二、编写后端商品信息添加接口2.1 商品数据入库2.2 图片存储 三、开发商品详情展示页面3.1 前端展示效果优化3.2 调用后端接口获取商品信息 一、搭建商品录入前端页面
1.1 移动前端uniapp 实现
在使用 uniapp 搭建移动前端商品录入页面时为实现多图上传功能可借助uni.chooseImage API 。此 API 能方便地从本地相册选择图片或使用相机拍照获取图片代码如下
templateview classcontainerview classform-itemlabel商品图片/labelview classimage-uploadview v-for(image, index) in images :keyindex classimage-previewimage :srcimage modeaspectFill/imageview classdelete-icon clickdeleteImage(index)删除/view/viewview classupload-button clickchooseImages上传图片/view/view/viewview classform-itemlabel商品描述/labeleditor v-modeldescription :configeditorConfig/editor/viewbutton clicksubmitForm提交/button/view
/templatescript
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);}}
};
/scriptstyle 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 组件。它提供了丰富的属性和事件方便实现各种上传需求 示例代码如下
templateel-form refform :modelform label-width120pxel-form-item label商品图片el-uploadclassupload-demoaction#:multipletrue:on-successhandleUploadSuccess:on-removehandleRemove:file-listform.imagesel-button slottrigger sizesmall typeprimary选择图片/el-buttonel-button sizesmall typesuccess clicksubmitUpload上传到服务器/el-buttondiv slottip classel-upload__tip只能上传jpg/png文件且不超过5MB/div/el-upload/el-form-itemel-form-item label商品描述el-input typetextarea v-modelform.description :rows5/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm提交/el-button/el-form-item/el-form
/templatescript 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);
};
/scriptstyle 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依赖 --dependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion最新版本号/version/dependency!-- MySQL驱动依赖 --dependencygroupIdmysql/groupIdartifactIdmysql-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 BaseMapperProduct {
}最后在服务层实现商品数据入库方法
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 ServiceImplProductMapper, 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 依赖
dependencygroupIdcom.aliyun.oss/groupIdartifactIdaliyun-sdk-oss/artifactIdversion最新版本号/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组件实现栅格布局
templateel-rowel-col :span12!-- 商品图片区域 --el-image :srcproduct.imageUrl :preview-src-list[product.imageUrl] fitcontain/el-image/el-colel-col :span12!-- 商品信息区域 --h1{{ product.name }}/h1p价格{{ product.price }}/pp库存{{ product.stock }}/pp v-htmlproduct.description/p/el-col/el-row
/templatescript 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组件fitcontain属性确保图片在保持原有比例的情况下完整显示在容器内并且preview-src-list属性提供了图片预览功能用户点击图片可查看大图。
在交互设计上增加一些交互效果可以提升用户参与度。比如当用户鼠标悬停在商品图片上时添加一个简单的放大动画吸引用户关注图片细节。利用 CSS 的transform属性实现该效果
.el-image {transition: transform 0.3s ease;
}
.el-image:hover {transform: scale(1.1);
}对于移动前端uniapp 实现考虑到触摸交互页面布局更加注重简洁和操作便捷性。商品图片占据屏幕宽度的大部分下方依次排列商品名称、价格、描述等信息。同时使用uni-swipe-action组件实现滑动删除操作假设在商品列表页面进入详情前有删除商品的需求场景
templateview classproduct-detailimage :srcproduct.imageUrl modeaspectFill classproduct-image/imageview classproduct-infotext classproduct-name{{ product.name }}/texttext classproduct-price价格{{ product.price }}/texttext classproduct-stock库存{{ product.stock }}/textview v-htmlproduct.description classproduct-desc/view/view!-- 假设在商品列表页面进入详情前有删除商品的需求场景 --uni-swipe-action :left-optionsleftOptions :right-optionsrightOptionsview classswipe-content!-- 商品详情内容 --/view/uni-swipe-action/view
/templatescript
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: []};}
};
/scriptstyle 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 调用后端接口获取商品信息
前端调用后端接口获取商品详细信息以 VueElement Plus为例使用axios库来发送 HTTP 请求。首先在项目中安装axios
npm install axios然后在组件中引入并使用
templateel-rowel-col :span12el-image :srcproduct.imageUrl :preview-src-list[product.imageUrl] fitcontain/el-image/el-colel-col :span12h1{{ product.name }}/h1p价格{{ product.price }}/pp库存{{ product.stock }}/pp v-htmlproduct.description/p/el-col/el-row
/templatescript 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为例
templateview classproduct-detailimage :srcproduct.imageUrl modeaspectFill classproduct-image/imageview classproduct-infotext classproduct-name{{ product.name }}/texttext classproduct-price价格{{ product.price }}/texttext classproduct-stock库存{{ product.stock }}/textview v-htmlproduct.description classproduct-desc/view/view/view
/templatescript
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);}});}
};
/scriptstyle 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回调函数处理请求失败情况。通过这种方式前端能够顺利调用后端接口获取商品详细信息并展示在商品详情页面上。
