1. 项目概述：SpringBoot+Vue前后端分离服装商城系统

这个毕业设计项目采用SpringBoot+Vue.js技术栈构建一个完整的服装电商平台。作为一套标准的前后端分离架构，后端使用SpringBoot提供RESTful API接口，前端通过Vue.js实现动态交互界面。系统包含商品展示、购物车、订单管理、用户中心等电商核心模块，特别针对服装品类设计了尺码选择、颜色切换、搭配推荐等特色功能。

我在实际开发中发现，这种架构组合特别适合在校学生作为全栈开发的学习项目。SpringBoot的约定优于配置原则能快速搭建后端服务，而Vue的组件化开发模式让前端逻辑更清晰。两者通过axios进行数据交互，配合JWT实现安全的用户认证，构成了一个典型的现代化Web应用开发范例。

2. 技术选型与架构设计

2.1 后端技术栈解析

SpringBoot 2.7.x作为后端框架，主要基于以下考虑：

• 内嵌Tomcat服务器，无需单独部署
• 自动配置特性大幅减少XML配置
• 丰富的Starter依赖（spring-boot-starter-web, spring-boot-starter-data-jpa）
• 完善的文档和社区支持

数据库选用MySQL 8.0，配合MyBatis-Plus实现ORM映射。这里特别推荐使用MyBatis-Plus而非原生MyBatis，因为它提供了：

• 通用CRUD操作（无需手写SQL）
• 分页插件（PageHelper集成）
• 代码生成器（自动生成Entity/Mapper/Service）

注意：生产环境建议配置主从复制，我们开发时可以使用单机MySQL，但需要在application.yml中正确配置连接池参数：

spring: datasource: url: jdbc:mysql://localhost:3306/fashion_mall?useSSL=false username: root password: 123456 hikari: maximum-pool-size: 20 connection-timeout: 30000

2.2 前端技术方案

Vue 3.x + Element Plus构成前端主体，技术组合优势在于：

• Composition API提升代码组织性
• Vue Router实现SPA路由跳转
• Pinia替代Vuex进行状态管理
• Axios处理HTTP请求
• Element Plus提供丰富的UI组件

一个典型的商品列表组件结构如下：

src/ ├── components/ │ └── ProductList.vue ├── api/ │ └── product.js └── stores/ └── productStore.js

我在实际开发中总结出三点优化经验：

1. 使用setup语法糖简化代码
2. 按需导入Element Plus组件减小打包体积
3. 封装axios拦截器统一处理错误和loading状态

3. 核心功能实现细节

3.1 商品模块设计

商品表核心字段设计：

CREATE TABLE `product` ( `id` bigint NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL COMMENT '商品名称', `price` decimal(10,2) NOT NULL COMMENT '售价', `original_price` decimal(10,2) DEFAULT NULL COMMENT '原价', `cover_image` varchar(255) DEFAULT NULL COMMENT '封面图', `detail_images` text COMMENT '详情图(JSON数组)', `stock` int DEFAULT '0' COMMENT '库存', `sizes` varchar(255) DEFAULT NULL COMMENT '尺码(JSON数组)', `colors` varchar(255) DEFAULT NULL COMMENT '颜色(JSON数组)', `sales` int DEFAULT '0' COMMENT '销量', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

后端接口示例（SpringBoot Controller）：

@RestController @RequestMapping("/api/products") public class ProductController { @Autowired private ProductService productService; @GetMapping public Result<List<Product>> listProducts( @RequestParam(required = false) String keyword, @RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size) { Page<Product> products = productService.searchProducts(keyword, page, size); return Result.success(products); } }

3.2 购物车实现方案

购物车采用两种存储方式：

1. 未登录用户：使用localStorage临时存储
2. 已登录用户：同步到服务端数据库

购物车数据结构设计：

{ "items": [ { "productId": 123, "skuId": "123_red_m", "quantity": 2, "selected": true, "price": 199.00, "image": "/images/123_cover.jpg", "name": "男士纯棉T恤", "specs": { "color": "红色", "size": "M" } } ] }

前端购物车操作逻辑（Vue组合式函数）：

// stores/cartStore.js export const useCartStore = defineStore('cart', { actions: { async addItem(product, specs) { const skuId = `${product.id}_${specs.color}_${specs.size}` const existing = this.items.find(item => item.skuId === skuId) if (existing) { existing.quantity += 1 } else { this.items.push({ productId: product.id, skuId, quantity: 1, selected: true, price: product.price, image: product.coverImage, name: product.name, specs }) } if (this.isLogin) { await api.saveCart(this.items) } else { localStorage.setItem('cart', JSON.stringify(this.items)) } } } })

4. 关键问题解决方案

4.1 图片上传与展示优化

采用阿里云OSS存储图片，前端实现方案：

1. 封装上传组件（支持拖拽、预览、进度显示）
2. 限制文件类型为image/*
3. 前端压缩大图（使用compressorjs库）
4. 生成缩略图（OSS图片处理服务）

后端签名生成接口：

@GetMapping("/oss/policy") public Result<Map<String, String>> getOssPolicy() { String accessId = "<your-access-key>"; String accessKey = "<your-access-secret>"; String endpoint = "https://oss-cn-hangzhou.aliyuncs.com"; String bucket = "fashion-mall"; // 设置过期时间 long expireTime = 30; long expireEndTime = System.currentTimeMillis() + expireTime * 1000; Date expiration = new Date(expireEndTime); // 生成Policy PolicyConditions policyConds = new PolicyConditions(); policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000); policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, "images/"); String postPolicy = OSSClient.generatePostPolicy(expiration, policyConds); byte[] binaryData = postPolicy.getBytes(StandardCharsets.UTF_8); String encodedPolicy = BinaryUtil.toBase64String(binaryData); String postSignature = OSSClient.calculatePostSignature(postPolicy, accessKey); Map<String, String> respMap = new HashMap<>(); respMap.put("accessid", accessId); respMap.put("policy", encodedPolicy); respMap.put("signature", postSignature); respMap.put("dir", "images/"); respMap.put("host", "https://" + bucket + "." + endpoint); respMap.put("expire", String.valueOf(expireEndTime / 1000)); return Result.success(respMap); }

4.2 支付模块集成

采用支付宝沙箱环境实现支付流程：

1. 后端创建支付订单

@PostMapping("/orders/{id}/pay") public Result<String> createPayment(@PathVariable Long id) { Order order = orderService.getById(id); if (order == null) { return Result.error("订单不存在"); } AlipayClient alipayClient = new DefaultAlipayClient( "https://openapi.alipaydev.com/gateway.do", APP_ID, APP_PRIVATE_KEY, "json", "UTF-8", ALIPAY_PUBLIC_KEY, "RSA2"); AlipayTradePagePayRequest request = new AlipayTradePagePayRequest(); request.setReturnUrl("https://yourdomain.com/orders/" + id); request.setNotifyUrl("https://yourdomain.com/api/pay/notify"); JSONObject bizContent = new JSONObject(); bizContent.put("out_trade_no", order.getOrderNo()); bizContent.put("total_amount", order.getActualPrice()); bizContent.put("subject", "时尚商城订单：" + order.getOrderNo()); bizContent.put("product_code", "FAST_INSTANT_TRADE_PAY"); request.setBizContent(bizContent.toString()); String form = alipayClient.pageExecute(request).getBody(); return Result.success(form); }

2. 前端处理支付结果

const handlePay = async (orderId) => { const { data } = await api.createPayment(orderId) const div = document.createElement('div') div.innerHTML = data document.body.appendChild(div) document.forms[0].submit() }

5. 部署与性能优化

5.1 后端部署方案

推荐使用Docker Compose部署：

# Dockerfile FROM openjdk:11-jdk ARG JAR_FILE=target/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT ["java","-jar","/app.jar"]

docker-compose.yml配置：

version: '3' services: app: build: . ports: - "8080:8080" environment: - SPRING_PROFILES_ACTIVE=prod - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/fashion_mall depends_on: - mysql - redis mysql: image: mysql:8.0 environment: - MYSQL_ROOT_PASSWORD=123456 - MYSQL_DATABASE=fashion_mall volumes: - mysql_data:/var/lib/mysql redis: image: redis:6 ports: - "6379:6379" volumes: mysql_data:

5.2 前端性能优化

1. 路由懒加载

const routes = [ { path: '/', component: () => import('@/views/Home.vue') }, { path: '/product/:id', component: () => import('@/views/ProductDetail.vue') } ]

2. 开启Gzip压缩（nginx配置示例）：

server { gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; gzip_min_length 1k; gzip_comp_level 4; gzip_vary on; }

3. CDN引入常用库（vue.config.js配置）：

configureWebpack: { externals: { vue: 'Vue', 'element-plus': 'ElementPlus', axios: 'axios' } }

6. 开发经验与避坑指南

1. 跨域问题解决方案：

• 开发环境：配置Vue代理

// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }

• 生产环境：Nginx反向代理

location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }

2. 表单验证最佳实践：

• 前端使用Element Plus表单验证

<el-form :model="form" :rules="rules" ref="formRef"> <el-form-item prop="username" label="用户名"> <el-input v-model="form.username"></el-input> </el-form-item> </el-form> <script setup> const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 4, max: 16, message: '长度在4到16个字符', trigger: 'blur' } ] } </script>

• 后端使用Spring Validation

@PostMapping("/register") public Result register(@Valid @RequestBody UserRegisterDTO dto) { // 业务逻辑 } // UserRegisterDTO.java public class UserRegisterDTO { @NotBlank(message = "用户名不能为空") @Size(min = 4, max = 16, message = "用户名长度4-16位") private String username; // 其他字段... }

3. 数据库连接池配置要点：

spring: datasource: hikari: maximum-pool-size: 20 # 根据服务器CPU核心数设置 minimum-idle: 5 # 最小空闲连接 idle-timeout: 600000 # 空闲连接超时时间(ms) max-lifetime: 1800000 # 连接最大存活时间(ms) connection-timeout: 30000 # 连接超时时间(ms) leak-detection-threshold: 60000 # 连接泄漏检测阈值(ms)

4. 缓存使用策略：

• 商品详情使用Redis缓存

@Cacheable(value = "product", key = "#id") public Product getProductById(Long id) { return productMapper.selectById(id); } @CacheEvict(value = "product", key = "#product.id") public void updateProduct(Product product) { productMapper.updateById(product); }

5. 日志记录规范：

@Slf4j @RestController @RequestMapping("/api/products") public class ProductController { @GetMapping("/{id}") public Result<Product> getProduct(@PathVariable Long id) { log.info("查询商品详情，商品ID: {}", id); Product product = productService.getById(id); if (product == null) { log.warn("商品不存在，ID: {}", id); return Result.error("商品不存在"); } return Result.success(product); } }

这个项目完整实现了电商平台的核心功能链，从技术选型到部署上线提供了全流程解决方案。在实际开发中，我特别建议重视以下几点：

1. 接口文档使用Swagger或YApi及时维护
2. 前端组件按功能划分保持高内聚
3. 后端服务层做好异常统一处理
4. 重要操作添加日志记录
5. 定期备份数据库

对于想深入学习的同学，可以进一步扩展：

• 接入ELK实现日志分析
• 使用Prometheus+Grafana搭建监控系统
• 实现分布式锁处理秒杀场景
• 集成消息队列削峰填谷