基于SSM与Vue的在线鲜花商城系统 - 源码深度解析

JavaJavaScriptHTMLCSS使用VueSSM框架MavenMySQL
2026-02-0711 浏览

文章摘要

基于SSM与Vue的在线鲜花商城系统是一个整合前后端分离架构的综合性电子商务平台，旨在解决传统花店销售渠道单一、客户选购不便以及库存管理效率低下的核心痛点。该系统通过在线购物与商品展示两大核心模块，为商家提供了统一的商品信息管理与订单处理中心，同时为用户创造了直观、流畅的选购体验，有效缩短了从浏览到...

在传统鲜花零售行业面临线上转型的背景下，一个高效、易用的电子商务平台成为行业刚需。本文介绍的智能鲜花电商平台采用前后端分离架构，后端基于SSM框架技术栈，前端使用Vue.js，实现了完整的在线鲜花销售解决方案。

系统架构与技术栈

该平台采用经典的三层架构设计。后端使用Spring作为控制反转容器，通过依赖注入管理业务组件生命周期；SpringMVC处理HTTP请求路由，配合拦截器实现权限控制；MyBatis作为数据持久层框架，通过XML配置实现灵活的SQL映射。前端基于Vue.js构建单页面应用，使用Vue Router管理路由状态，Axios进行异步数据交互。

构建工具采用Maven管理项目依赖，数据库使用MySQL 5.7+，确保事务处理的ACID特性。这种技术组合既保证了系统的稳定性，又提供了良好的可扩展性。

数据库设计亮点分析

鲜花信息表的核心设计

CREATE TABLE `xianhuaxinxi` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `addtime` timestamp NOT NULL DEFAULT current_timestamp() COMMENT '创建时间',
  `xianhuamingcheng` varchar(200) NOT NULL COMMENT '鲜花名称',
  `huacaixuanze` varchar(200) NOT NULL COMMENT '花材选择',
  `tupian` varchar(200) DEFAULT NULL COMMENT '图片',
  `cailiao` varchar(200) DEFAULT NULL COMMENT '材料',
  `huayu` varchar(200) DEFAULT NULL COMMENT '花语',
  `xianhuayongtu` varchar(200) DEFAULT NULL COMMENT '鲜花用途',
  `zengsongduixiang` varchar(200) DEFAULT NULL COMMENT '赠送对象',
  `shuliang` int(11) DEFAULT NULL COMMENT '数量',
  `xianhuaxiangqing` longtext DEFAULT NULL COMMENT '鲜花详情',
  `clicktime` datetime DEFAULT NULL COMMENT '最近点击时间',
  `clicknum` int(11) DEFAULT 0 COMMENT '点击次数',
  `price` float NOT NULL COMMENT '价格',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1611546568411 DEFAULT CHARSET=utf8 COMMENT='鲜花信息'

该表设计体现了电商系统的专业考量：clicktime和clicknum字段用于用户行为分析，支持热门商品推荐功能；longtext类型的xianhuaxiangqing字段容纳富文本详情；价格字段使用float类型支持小数定价。索引策略方面，主键ID采用自增策略确保写入性能，后续可考虑为huacaixuanze添加索引优化分类查询。

通用收藏表的设计创新

CREATE TABLE `storeup` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `addtime` timestamp NOT NULL DEFAULT current_timestamp() COMMENT '创建时间',
  `userid` bigint(20) NOT NULL COMMENT '用户id',
  `refid` bigint(20) DEFAULT NULL COMMENT '收藏id',
  `tablename` varchar(200) DEFAULT NULL COMMENT '表名',
  `name` varchar(200) NOT NULL COMMENT '收藏名称',
  `picture` varchar(200) NOT NULL COMMENT '收藏图片',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1724117715943 DEFAULT CHARSET=utf8 COMMENT='收藏表'

此表采用通用设计模式，通过tablename和refid字段实现多态关联，可同时支持鲜花、资讯等多种类型的收藏功能。这种设计避免了为每种收藏类型创建单独表的结构冗余，提高了代码复用性。查询时通过联合查询实现数据获取，虽然增加了查询复杂度，但换来了系统的扩展灵活性。

收藏管理

核心功能实现详解

地址管理模块

地址实体类通过注解实现数据验证和格式转换：

@Entity
@TableName("address")
public class AddressEntity<T> implements Serializable {
    private static final long serialVersionUID = 1L;
    
    @TableId
    private Long id;
    
    @NotNull
    private Long userid;
    
    @NotBlank(message = "地址不能为空")
    private String address;
    
    @NotBlank(message = "收货人不能为空")
    private String name;
    
    @Pattern(regexp = "^1[3-9]\\d{9}$", message = "手机号格式不正确")
    private String phone;
    
    private String isdefault;
    
    @JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
    private Date addtime;
    
    // Getter和Setter方法
    public Long getUserid() {
        return userid;
    }
    
    public void setUserid(Long userid) {
        this.userid = userid;
    }
}

地址控制器实现分页查询和权限控制：

@RestController
@RequestMapping("/address")
public class AddressController {
    @Autowired
    private AddressService addressService;

    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, 
                 AddressEntity address, HttpServletRequest request){
        // 权限控制：非管理员只能查看自己的地址
        if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
            address.setUserid((Long)request.getSession().getAttribute("userId"));
        }

        EntityWrapper<AddressEntity> ew = new EntityWrapper<AddressEntity>();
        PageUtils page = addressService.queryPage(params, 
            MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, address), params), params));
        return R.ok().put("data", page);
    }
    
    @RequestMapping("/save")
    public R save(@RequestBody AddressEntity address, HttpServletRequest request){
        // 设置用户ID并验证数据
        address.setUserid((Long)request.getSession().getAttribute("userId"));
        ValidatorUtils.validateEntity(address);
        
        // 如果设置为默认地址，取消其他默认地址
        if("是".equals(address.getIsdefault())) {
            AddressEntity defaultAddress = new AddressEntity();
            defaultAddress.setIsdefault("否");
            addressService.update(defaultAddress, 
                new EntityWrapper<AddressEntity>().eq("userid", address.getUserid()));
        }
        
        addressService.insert(address);
        return R.ok();
    }
}

添加收货地址

商品信息管理后台

管理员通过后台系统管理鲜花商品信息，支持图片上传、库存管理和价格调整：

@Service("xianhuaxinxiService")
public class XianhuaxinxiServiceImpl extends ServiceImpl<XianhuaxinxiDao, XianhuaxinxiEntity> 
    implements XianhuaxinxiService {

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<XianhuaxinxiEntity> page = this.selectPage(
                new Query<XianhuaxinxiEntity>(params).getPage(),
                new EntityWrapper<XianhuaxinxiEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
    public boolean updateClickStatus(Long id) {
        XianhuaxinxiEntity entity = this.selectById(id);
        if(entity != null) {
            entity.setClicknum(entity.getClicknum() + 1);
            entity.setClicktime(new Date());
            return this.updateById(entity);
        }
        return false;
    }
}

鲜花信息管理

购物车与订单处理

前端Vue组件实现购物车功能：

<template>
  <div class="cart-container">
    <div v-for="item in cartItems" :key="item.id" class="cart-item">
      <img :src="item.tupian" :alt="item.xianhuamingcheng" />
      <div class="item-info">
        <h3>{{ item.xianhuamingcheng }}</h3>
        <p>价格: ¥{{ item.price }}</p>
        <div class="quantity-control">
          <button @click="decreaseQuantity(item)">-</button>
          <span>{{ item.quantity }}</span>
          <button @click="increaseQuantity(item)">+</button>
        </div>
      </div>
      <button @click="removeItem(item)" class="remove-btn">删除</button>
    </div>
    <div class="cart-total">
      总价: ¥{{ totalPrice }}
      <button @click="checkout" class="checkout-btn">结算</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: []
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => {
        return total + (item.price * item.quantity)
      }, 0)
    }
  },
  methods: {
    async increaseQuantity(item) {
      item.quantity++
      await this.$axios.post('/cart/update', item)
    },
    async checkout() {
      const response = await this.$axios.post('/orders/create', {
        items: this.cartItems,
        total: this.totalPrice
      })
      if (response.data.code === 0) {
        this.$router.push('/order/' + response.data.orderId)
      }
    }
  }
}
</script>

查看购物车

订单管理功能

后端订单控制器处理复杂的业务逻辑：

@RestController
@RequestMapping("/orders")
public class OrdersController {
    
    @Autowired
    private OrdersService ordersService;
    
    @Autowired
    private XianhuaxinxiService xianhuaxinxiService;
    
    @PostMapping("/create")
    public R createOrder(@RequestBody OrderRequest request, 
                        HttpServletRequest httpRequest) {
        // 验证库存
        for (OrderItem item : request.getItems()) {
            XianhuaxinxiEntity product = xianhuaxinxiService.selectById(item.getProductId());
            if (product.getShuliang() < item.getQuantity()) {
                return R.error("商品" + product.getXianhuamingcheng() + "库存不足");
            }
        }
        
        // 创建订单
        OrdersEntity order = new OrdersEntity();
        order.setUserid((Long) httpRequest.getSession().getAttribute("userId"));
        order.setTotalAmount(request.getTotal());
        order.setStatus("待付款");
        order.setAddtime(new Date());
        
        ordersService.insert(order);
        
        // 扣减库存
        for (OrderItem item : request.getItems()) {
            xianhuaxinxiService.reduceStock(item.getProductId(), item.getQuantity());
        }
        
        return R.ok().put("orderId", order.getId());
    }
}

订单管理

实体模型设计策略

系统采用MyBatis-Plus作为ORM框架，实体类设计遵循Java Bean规范，同时利用注解实现高级功能：

@TableName("xianhuaxinxi")
public class XianhuaxinxiEntity implements Serializable {
    private static final long serialVersionUID = 1L;
    
    @TableId(type = IdType.AUTO)
    private Long id;
    
    @TableField(fill = FieldFill.INSERT)
    private Date addtime;
    
    @NotBlank(message = "鲜花名称不能为空")
    private String xianhuamingcheng;
    
    // 其他字段...
    
    @TableField(exist = false)
    private List<String> imageList;
    
    public List<String> getImageList() {
        if (this.tupian != null) {
            return Arrays.asList(this.tupian.split(","));
        }
        return new ArrayList<>();
    }
}

这种设计支持自动填充创建时间、数据验证、以及非数据库字段的动态处理，提高了代码的可维护性。

功能展望与优化方向

  1. 引入Redis缓存层：针对商品信息、分类数据等读多写少的数据，可使用Redis缓存，减少数据库压力。实现商品详情页的缓存策略，将点击量高的商品信息缓存至Redis，设置合理的过期时间。

  2. 消息队列异步处理：订单创建后的库存扣减、短信通知等操作可通过RabbitMQ或Kafka异步处理，提高系统响应速度。特别是促销活动期间的高并发订单处理，消息队列能有效削峰填谷。

  3. 微服务架构改造：将单体应用拆分为用户服务、商品服务、订单服务、支付服务等微服务，提高系统可维护性和扩展性。使用Spring Cloud Alibaba套件实现服务治理。

  4. Elasticsearch搜索优化：替代MySQL的LIKE查询，实现更高效的商品搜索功能。支持分词搜索、拼音搜索、同义词扩展等高级搜索特性，提升用户体验。

  5. 移动端PWA应用：开发Progressive Web App，支持离线访问、推送通知等原生应用特性。利用Service Worker技术实现资源的缓存和更新策略。

总结

该智能鲜花电商平台通过合理的架构设计和细致的功能实现，解决了传统花店线上销售的核心痛点。SSM框架提供了稳定的后端支持，Vue.js创造了流畅的前端体验，MySQL数据库设计兼顾了性能与扩展性。系统在地址管理、商品展示、购物车、订单处理等核心功能上都体现了良好的工程实践。

特别是通用收藏表的设计展示了高内聚低耦合的设计思想，为系统后续的功能扩展奠定了良好基础。随着业务量的增长，通过引入缓存、消息队列、微服务等技术的升级改造，系统能够支撑更大规模的用户访问和更复杂的业务场景。

本文关键词
SSM框架Vue.js在线鲜花商城数据库设计前后端分离

上下篇

上一篇
没有更多文章
下一篇
没有更多文章