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

在传统鲜花零售行业数字化转型的浪潮中，构建一个高效、易用的电子商务平台已成为行业发展的关键需求。本文深入解析的智能鲜花电商平台采用前沿的前后端分离架构，后端基于成熟的SSM（Spring+SpringMVC+MyBatis）框架技术栈，前端使用现代化的Vue.js框架，实现了功能完整的在线鲜花销售解决方案。

系统架构与技术栈选型

后端架构设计

平台采用经典的三层架构模式，确保代码的高内聚低耦合：

Spring框架：作为核心控制反转（IoC）容器，通过依赖注入（DI）机制管理业务组件的生命周期，降低模块间的耦合度
SpringMVC：负责HTTP请求路由分发，配合拦截器实现精细化的权限控制体系
MyBatis：作为数据持久层框架，通过XML配置实现灵活的SQL映射，支持动态SQL和复杂的关联查询

前端技术栈

Vue.js：构建响应式单页面应用（SPA），提供流畅的用户交互体验
Vue Router：管理前端路由状态，实现页面无刷新跳转
Axios：处理异步数据交互，支持请求拦截和响应拦截

开发与部署环境

构建工具：Maven管理项目依赖，确保依赖版本一致性
数据库：MySQL 5.7+，支持事务处理的ACID特性，保证数据一致性
会话管理：基于Redis实现分布式会话存储，支持集群部署

这种技术组合既保证了系统的稳定性和性能，又为后续功能扩展提供了良好的技术基础。

数据库设计亮点分析

鲜花信息表的核心设计

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字段可存储包含HTML格式的详细商品描述
精确定价：float类型支持小数定价，满足鲜花行业精细定价需求
性能优化：主键采用自增策略提升写入性能，建议为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(message = "用户ID不能为空")
    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){
        // 权限控制：非管理员只能查看自己的地址
        String role = request.getSession().getAttribute("role").toString();
        if(!"管理员".equals(role)) {
            address.setUserid((Long)request.getSession().getAttribute("userId"));
        }

        EntityWrapper<AddressEntity> ew = new EntityWrapper<>();
        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.insertOrUpdate(address);
        return R.ok();
    }
}

添加收货地址界面

商品信息管理后台

管理员通过后台系统实现对鲜花商品的全面管理，包括图片上传、库存管理和价格调整等功能：

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

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        // 实现商品信息的分页查询逻辑
        String xianhuamingcheng = (String) params.get("xianhuamingcheng");
        String huacaixuanze = (String) params.get("huacaixuanze");
        
        EntityWrapper<XianhuaxinxiEntity> ew = new EntityWrapper<>();
        if(StringUtils.isNotBlank(xianhuamingcheng)) {
            ew.like("xianhuamingcheng", xianhuamingcheng);
        }
        if(StringUtils.isNotBlank(huacaixuanze)) {
            ew.eq("huacaixuanze", huacaixuanze);
        }
        
        Page<XianhuaxinxiEntity> page = this.selectPage(
            new Query<XianhuaxinxiEntity>(params).getPage(), ew);
        
        return new PageUtils(page);
    }
}

技术实现要点：

数据验证：使用JSR-303注解实现声明式数据验证
权限控制：基于会话的角色权限管理，确保数据安全
事务管理：使用Spring声明式事务保证数据一致性
性能优化：MyBatis二级缓存和分页查询优化大数据量处理

该系统通过精心设计的架构和细致的代码实现，为鲜花电商业务提供了稳定可靠的技术支撑，具有良好的可扩展性和维护性。

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

文章摘要

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

系统架构与技术栈选型

后端架构设计

前端技术栈

开发与部署环境

数据库设计亮点分析

鲜花信息表的核心设计

通用收藏表的设计创新

核心功能实现详解

地址管理模块

商品信息管理后台

上下篇