1. 项目概述与核心价值
这个基于SpringBoot+Vue的在线家具商城项目，是我去年指导某高校计算机专业毕业设计时开发的实战案例。整套系统采用前后端分离架构，包含完整的商品展示、购物车、订单管理、支付对接等电商核心功能模块，特别适合作为Java全栈开发的练手项目。
从技术选型来看，SpringBoot+Vue的组合既能体现现代Web开发的主流技术栈，又避免了过度复杂的技术堆砌。后端采用SpringBoot 2.7 + MyBatis Plus + MySQL 8.0，前端使用Vue 3 + Element Plus，都是当前企业级开发中的黄金组合。数据库设计包含20余张表，完整覆盖用户、商品、订单、物流等电商核心业务实体。
提示：项目源码已做好完整注释，关键业务逻辑都配有开发文档说明，特别适合需要快速理解电商系统开发流程的初学者。
2. 技术架构解析
2.1 后端技术栈设计
后端采用经典的三层架构：
- 控制层：Spring MVC处理HTTP请求
- 业务层：Spring事务管理保证数据一致性
- 持久层：MyBatis Plus简化数据库操作
我特别加入了这些企业级特性：
- 全局异常处理：使用@ControllerAdvice统一处理业务异常
- 参数校验：Hibernate Validator实现DTO验证
- 接口文档：Swagger UI自动生成API文档
- 安全控制：Spring Security + JWT实现认证授权
数据库设计示例（商品核心表）：
sql复制CREATE TABLE `product` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL COMMENT '商品名称',
`category_id` bigint NOT NULL COMMENT '分类ID',
`price` decimal(10,2) NOT NULL COMMENT '售价',
`stock` int NOT NULL DEFAULT '0' COMMENT '库存',
`sales` int DEFAULT '0' COMMENT '销量',
`main_image` varchar(255) COMMENT '主图URL',
`detail` text COMMENT '商品详情',
`status` tinyint DEFAULT '1' COMMENT '状态',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_category` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2.2 前端技术方案
前端采用Vue3组合式API开发，主要技术点包括：
- 状态管理：Pinia替代Vuex
- UI组件：Element Plus + 自定义主题
- 路由管理：Vue Router实现动态路由
- 请求封装：Axios拦截器处理Token刷新
典型页面组件结构：
code复制src/
├── api/ # 接口定义
├── assets/ # 静态资源
├── components/ # 公共组件
│ ├── Header.vue
│ ├── Footer.vue
│ └── SkuSelector.vue # 商品规格选择器
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── utils/ # 工具类
└── views/ # 页面组件
├── product/ # 商品相关
├── cart/ # 购物车
└── order/ # 订单流程
3. 核心功能实现
3.1 商品模块开发
商品模块采用SPU+SKU数据模型：
- SPU（标准产品单元）：定义商品基本属性
- SKU（库存量单位）：具体销售规格
后端接口设计：
java复制@RestController
@RequestMapping("/product")
public class ProductController {
@Autowired
private ProductService productService;
// 商品分页查询
@GetMapping("/list")
public PageResult<ProductVO> list(
@RequestParam(required = false) String keyword,
@RequestParam(required = false) Long categoryId,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize) {
return productService.queryProductPage(keyword, categoryId, pageNum, pageSize);
}
// 获取商品详情
@GetMapping("/detail/{id}")
public Result<ProductDetailVO> detail(@PathVariable Long id) {
return Result.success(productService.getProductDetail(id));
}
}
前端商品列表关键实现：
vue复制<script setup>
import { ref, onMounted } from 'vue'
import { getProductList } from '@/api/product'
const loading = ref(false)
const productList = ref([])
const pagination = ref({
pageNum: 1,
pageSize: 10,
total: 0
})
const fetchData = async () => {
loading.value = true
try {
const res = await getProductList({
pageNum: pagination.value.pageNum,
pageSize: pagination.value.pageSize
})
productList.value = res.list
pagination.value.total = res.total
} finally {
loading.value = false
}
}
onMounted(fetchData)
</script>
3.2 购物车系统设计
购物车实现考虑以下业务场景：
- 未登录用户使用本地存储临时购物车
- 登录后合并本地购物车到服务器
- 实时计算商品总价和优惠
核心数据结构：
java复制public class CartItem {
private Long skuId;
private String skuName;
private String skuImage;
private BigDecimal price;
private Integer quantity;
private BigDecimal totalPrice;
private List<String> specValues; // 规格属性
private boolean selected; // 是否选中
}
并发控制方案：
- 使用Redis缓存热门商品库存
- 数据库乐观锁保证库存准确性
java复制@Transactional
public void reduceStock(Long skuId, Integer quantity) {
int rows = productMapper.reduceStock(skuId, quantity);
if (rows == 0) {
throw new BusinessException("库存不足");
}
}
4. 典型问题解决方案
4.1 跨域问题处理
前后端分离项目常见跨域问题，解决方案：
后端配置（SpringBoot）：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.maxAge(3600);
}
}
前端开发环境代理配置（vite.config.js）：
javascript复制server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
4.2 文件上传实现
商品图片上传采用阿里云OSS方案：
- 前端获取OSS临时凭证
- 直接上传文件到OSS
- 服务端只记录文件URL
后端签名接口：
java复制@GetMapping("/oss/policy")
public Result<OssPolicyResult> policy() {
OssPolicyResult result = ossService.policy();
return Result.success(result);
}
前端上传组件：
vue复制<template>
<el-upload
action="https://your-oss-endpoint"
:data="uploadData"
:before-upload="beforeUpload"
:on-success="handleSuccess">
<el-button type="primary">点击上传</el-button>
</el-upload>
</template>
<script setup>
import { getOssPolicy } from '@/api/oss'
const uploadData = ref({})
const beforeUpload = async () => {
const res = await getOssPolicy()
uploadData.value = {
OSSAccessKeyId: res.accessKeyId,
policy: res.policy,
signature: res.signature,
key: res.dir + '${filename}'
}
}
</script>
5. 项目部署指南
5.1 后端部署
推荐使用Docker Compose部署：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: furniture_mall
ports:
- "3306:3306"
volumes:
- ./mysql/data:/var/lib/mysql
- ./mysql/conf:/etc/mysql/conf.d
redis:
image: redis:6
ports:
- "6379:6379"
volumes:
- ./redis/data:/data
app:
build: .
ports:
- "8080:8080"
depends_on:
- mysql
- redis
5.2 前端部署
Nginx配置示例：
nginx复制server {
listen 80;
server_name mall.example.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
6. 学习建议与扩展方向
对于想要基于本项目深入学习的开发者，建议从以下几个方向进行扩展：
-
性能优化：
- 添加Redis缓存热点数据
- 实现商品搜索的Elasticsearch集成
- 使用Spring Cache注解优化数据库查询
-
功能增强：
- 增加优惠券系统
- 实现分销功能
- 开发商家管理后台
-
架构升级：
- 引入Spring Cloud实现微服务化
- 使用Seata处理分布式事务
- 增加Prometheus监控
我在实际开发中发现，商品详情页的加载速度对转化率影响很大。通过以下优化手段，我们将首屏加载时间从2.1秒降低到了800毫秒：
- 启用MyBatis二级缓存
- 对商品图片进行懒加载
- 使用Vue的异步组件加载非关键模块