引言

随着电子商务的快速发展，在线花店因其便捷性和多样性逐渐成为鲜花消费的主流渠道。一个功能完善的在线花店系统需涵盖商品展示、订单管理、支付集成、物流跟踪及用户交互等核心模块。本文将从系统架构设计、功能模块拆解、数据库设计及关键代码实现四个维度展开，结合Spring Boot后端框架与Vue.js前端技术栈，提供一套可落地的技术方案。

一、系统架构设计

1.1 整体架构分层

采用经典的三层架构设计：

• 表现层：基于Vue.js构建响应式Web界面，适配PC与移动端。
• 业务逻辑层：Spring Boot提供RESTful API，处理用户请求与业务规则。
• 数据访问层：MyBatis框架实现数据库交互，结合Redis缓存热点数据。

1.2 技术栈选型

• 后端：Spring Boot 2.7（快速开发）、Spring Security（安全认证）、Redis（缓存）。
• 前端：Vue 3（组件化开发）、Element Plus（UI组件库）、Axios（HTTP请求）。
• 数据库：MySQL 8.0（关系型数据存储）、Elasticsearch（商品搜索优化）。
• 支付集成：支付宝/微信支付SDK。
• 部署环境：Docker容器化部署，Nginx反向代理。

二、核心功能模块设计

2.1 商品管理模块

• 功能点：商品分类、详情展示、库存管理、价格动态调整。
• 实现逻辑：
  • 商品分类采用树形结构存储，支持多级分类。
  • 库存管理通过数据库事务保证并发操作下的数据一致性。
  • 价格动态调整基于定时任务（Quartz框架）实现促销活动自动生效。

2.2 订单管理模块

• 功能点：购物车、订单生成、支付、退款、物流跟踪。

• 关键代码示例（Spring Boot）：

  // 订单生成服务
  @Service
  public class OrderService {
    @Autowired
    private CartService cartService;
    @Autowired
    private PaymentService paymentService;
    public Order createOrder(Long userId, List<Long> cartItemIds) {
        // 1. 校验库存
        List<CartItem> items = cartService.getItemsByIds(cartItemIds);
        for (CartItem item : items) {
            if (item.getStock() < item.getQuantity()) {
                throw new RuntimeException("商品库存不足");
            }
        }
        // 2. 生成订单
        Order order = new Order();
        order.setUserId(userId);
        order.setTotalAmount(calculateTotal(items));
        order.setStatus(OrderStatus.UNPAID);
        orderRepository.save(order);
        // 3. 扣减库存
        for (CartItem item : items) {
            productRepository.updateStock(item.getProductId(), item.getStock() - item.getQuantity());
        }
        return order;
    }
  }

2.3 用户管理模块

• 功能点：注册/登录、地址管理、收藏夹、优惠券。
• 安全设计：
  • JWT令牌认证，结合Spring Security实现权限控制。
  • 密码加密存储（BCryptPasswordEncoder）。
  • 敏感操作（如修改密码）需短信/邮箱二次验证。

三、数据库设计

3.1 核心表结构

• 商品表（product）：id、name、price、stock、category_id、description、image_url。
• 订单表（order）：id、user_id、total_amount、status、create_time、payment_time。
• 订单明细表（order_item）：id、order_id、product_id、quantity、unit_price。
• 用户表（user）：id、username、password、phone、email、avatar_url。

3.2 索引优化

• 商品表：对category_id和name字段建立联合索引，加速分类筛选与搜索。
• 订单表：对user_id和status字段建立索引，优化用户订单列表查询。

四、关键代码实现

4.1 前端商品列表页（Vue 3）

<template>
  <div class="product-list">
    <el-row :gutter="20">
      <el-col v-for="product in products" :key="product.id" :span="6">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="product.imageUrl" class="product-image">
          <div class="product-info">
            <h4>{{ product.name }}</h4>
            <p class="price">¥{{ product.price }}</p>
            <el-button type="primary" @click="addToCart(product.id)">加入购物车</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getProducts } from '@/api/product';
import { addToCart } from '@/api/cart';
const products = ref([]);
onMounted(async () => {
  products.value = await getProducts();
});
const addToCart = async (productId) => {
  await addToCart(productId);
  ElMessage.success('已加入购物车');
};
</script>

4.2 后端支付接口（Spring Boot）

@RestController
@RequestMapping("/api/payment")
public class PaymentController {
    @Autowired
    private PaymentService paymentService;
    @PostMapping("/create")
    public ResponseEntity<PaymentResult> createPayment(@RequestBody PaymentRequest request) {
        // 1. 校验订单状态
        Order order = orderRepository.findById(request.getOrderId())
                .orElseThrow(() -> new RuntimeException("订单不存在"));
        if (!OrderStatus.UNPAID.equals(order.getStatus())) {
            throw new RuntimeException("订单状态异常");
        }
        // 2. 调用支付接口
        PaymentResult result = paymentService.createPayment(order);
        return ResponseEntity.ok(result);
    }
}

五、部署与优化

5.1 Docker化部署

• Dockerfile示例：

  FROM openjdk:17-jdk-slim
  WORKDIR /app
  COPY target/flower-shop.jar app.jar
  EXPOSE 8080
  ENTRYPOINT ["java", "-jar", "app.jar"]

5.2 性能优化

• 缓存策略：Redis缓存热门商品、分类数据，设置TTL（如5分钟）。
• 数据库优化：使用MyBatis二级缓存，分页查询避免全表扫描。
• CDN加速：静态资源（图片、JS/CSS）部署至CDN节点。

六、总结与展望

本文通过分层架构设计、模块化功能拆解及代码实现，构建了一个高可用的在线花店系统。未来可扩展方向包括：

1. 引入AI推荐算法（基于用户行为数据）。
2. 增加AR试花功能（WebXR技术）。
3. 对接第三方物流API实现实时物流跟踪。

通过持续迭代与优化，该系统可满足中小型花店的电商化需求，为开发者提供一套可复用的技术解决方案。