在线鲜花商城系统：从设计到实现

 1. 项目设计思路

在线鲜花商城是一个在线电子商务平台，旨在为用户提供便捷的鲜花选购、定制和配送服务。采用前后端分离的系统机构设计，将功能模块拆分，数据单独存储，形成高可用、易扩展、安全稳定的在线鲜花商城系统。

2. 系统架构设计

系统采用前后端分离架构：

- 前端：Node.js + Element UI+VS Code

- 后端：Spring Boot + MyBatis Plus+Intellij IDEA

- 数据库：MySQL + Redis缓存

 3. 技术选型与理由

                                                                

前端框架:Vue 3 + TypeScript     

理由：渐进式框架，易于上手，组合式API提高代码复用性                           

UI组件库：Element Plus          

理由L:丰富的组件，良好的文档支持，适合中后台应用                              

后端框架：Spring Boot 2.7      

理由：快速开发，丰富的starter生态，企业级应用首选                             

ORM框架：MyBatis Plus          

理由：简化CRUD操作，内置分页插件                                              

安全框架：Spring Security + JWT

理由：完善的认证授权机制，无状态token适合前后端分离      

                     

4.核心模块解析

4.1 用户管理模块

 JWT认证流程

// JWT工具类核心代码

public class JwtUtil {

    private static final String SECRET_KEY = "flower-shop-secret";

    private static final long EXPIRATION = 86400000; // 24小时

    

    public static String generateToken(UserDetails userDetails) {

        return Jwts.builder()

                .setSubject(userDetails.getUsername())

                .setIssuedAt(new Date())

                .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION))

                .signWith(SignatureAlgorithm.HS256, SECRET_KEY)

                .compact();

    }

    

    public static boolean validateToken(String token, UserDetails userDetails) {

        final String username = extractUsername(token);

        return (username.equals(userDetails.getUsername()) && !isTokenExpired(token));

    }

}

权限控制实现

@Configuration

@EnableWebSecurity

public class SecurityConfig extends WebSecurityConfigurerAdapter {

    

    @Override

    protected void configure(HttpSecurity http) throws Exception {

        http.csrf().disable()

            .authorizeRequests()

            .antMatchers("/api/auth/**").permitAll()

            .antMatchers("/api/admin/**").hasRole("ADMIN")

            .antMatchers("/api/user/**").hasAnyRole("USER", "ADMIN")

            .anyRequest().authenticated()

            .and()

            .addFilter(new JwtAuthenticationFilter(authenticationManager()))

            .addFilter(new JwtAuthorizationFilter(authenticationManager()))

            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

    }

}

 4.2 数据管理模块

 动态查询与分页

// 商品分页查询接口

@GetMapping("/api/products")

public Result<Page<Product>> getProducts(

        @RequestParam(required = false) String name,

        @RequestParam(required = false) String category,

        @RequestParam(defaultValue = "1") Integer pageNum,

        @RequestParam(defaultValue = "10") Integer pageSize) {

    

    QueryWrapper<Product> queryWrapper = new QueryWrapper<>();

    if (StringUtils.isNotBlank(name)) {

        queryWrapper.like("name", name);

    }

    if (StringUtils.isNotBlank(category)) {

        queryWrapper.eq("category", category);

    }

    

    Page<Product> page = new Page<>(pageNum, pageSize);

    return Result.success(productService.page(page, queryWrapper));

}

订单的增、删、改、查

4.3 业务逻辑模块

 订单状态机设计

// 订单状态枚举与状态转换

public enum OrderStatus {

    PENDING_PAYMENT,   // 待支付

    PAID,             // 已支付

    SHIPPED,          // 已发货

    DELIVERED,        // 已送达

    CANCELLED,        // 已取消

    REFUNDED;         // 已退款

    

    private static final Map<OrderStatus, Set<OrderStatus>> transitions = new HashMap<>();

    

    static {

        transitions.put(PENDING_PAYMENT, EnumSet.of(PAID, CANCELLED));

        transitions.put(PAID, EnumSet.of(SHIPPED, REFUNDED));

        transitions.put(SHIPPED, EnumSet.of(DELIVERED));

        // 其他状态转换规则...

    }

    

    public boolean canTransitionTo(OrderStatus newStatus) {

        return transitions.getOrDefault(this, Collections.emptySet()).contains(newStatus);

    }

}

 4.4 数据分析模块

 ECharts数据可视化

// 前端销售数据统计实现

async function initSalesChart() {

  const res = await axios.get('/api/statistics/sales');

  const chart = echarts.init(document.getElementById('sales-chart'));

  

  const option = {

    title: { text: '月度销售统计' },

    tooltip: {},

    xAxis: {

      data: res.data.months

    },

    yAxis: {},

    series: [{

      name: '销售额',

      type: 'bar',

      data: res.data.amounts,

      itemStyle: {

        color: '#ff7b89'

      }

    }]

  };

  

  chart.setOption(option);

  window.addEventListener('resize', chart.resize);

}

```

5. 关键问题与解决方案

5.1 高并发下单问题

问题描述：鲜花属于时效性商品，热门商品在节日期间会出现超卖问题。

解决方案：

1. 采用Redis分布式锁控制库存扣减

2. 数据库使用乐观锁机制

// 基于Redis的分布式锁实现

public boolean tryLock(String key, long expireTime) {

    String value = UUID.randomUUID().toString();

    Boolean success = redisTemplate.opsForValue()

        .setIfAbsent(key, value, expireTime, TimeUnit.MILLISECONDS);

    return Boolean.TRUE.equals(success);

}

// 商品下单核心逻辑

@Transactional

public Result createOrder(OrderDTO orderDTO) {

    // 1. 获取分布式锁

    String lockKey = "product_lock:" + orderDTO.getProductId();

    try {

        if (!redisLockUtil.tryLock(lockKey, 3000)) {

            return Result.error("系统繁忙，请稍后再试");

        }

        

        // 2. 校验并扣减库存

        Product product = productMapper.selectById(orderDTO.getProductId());

        if (product.getStock() < orderDTO.getQuantity()) {

            return Result.error("库存不足");

        }

        

        // 3. 使用乐观锁更新

        int updated = productMapper.updateStock(

            orderDTO.getProductId(),

            orderDTO.getQuantity(),

            product.getVersion());

            

        if (updated == 0) {

            throw new RuntimeException("并发修改冲突");

        }

        

        // 4. 创建订单...

    } finally {

        redisLockUtil.unlock(lockKey);

    }

}

 5.2 文件上传性能优化

问题描述：鲜花图片文件较大，上传速度慢且占用带宽。

解决方案：

1. 前端实现图片压缩

2. 使用阿里云OSS分片上传

// 前端图片压缩实现

async function compressImage(file, quality = 0.8) {

  return new Promise((resolve) => {

    const reader = new FileReader();

    reader.onload = (event) => {

      const img = new Image();

      img.onload = () => {

        const canvas = document.createElement('canvas');

        const ctx = canvas.getContext('2d');

        canvas.width = img.width;

        canvas.height = img.height;

        ctx.drawImage(img, 0, 0);

        canvas.toBlob((blob) => {

          resolve(new File([blob], file.name, { type: 'image/jpeg' }));

        }, 'image/jpeg', quality);

      };

      img.src = event.target.result;

    };

    reader.readAsDataURL(file);

  });

}

 6. 创新点说明

1.智能推荐系统：

   - 基于用户浏览历史和购买记录，使用协同过滤算法推荐相关商品

   - 实现节日主题自动推荐功能

2.AR虚拟花束预览：

   - 集成ARKit/ARCore，用户可通过手机摄像头查看花束在真实环境中的效果

3. 动态定价策略：

   - 根据库存、季节性和市场需求自动调整价格

   - 实现算法：

     def calculate_dynamic_price(base_price, stock, days_until_event):

         # 库存因素 (0.8-1.2)

         stock_factor = 0.8 + (0.4 * (stock / 100)) if stock < 100 else 1.2

         

         # 时间因素 (1.0-1.5)

         time_factor = 1.0 + (0.5 * (1 - min(days_until_event, 30)/30))

         

         return base_price * stock_factor * time_factor

    

4. 配送路线优化：

    - 基于GIS系统的最优路径规划，减少配送时间和成本

- Element Plus: 2.2.0