SpringBoot+Vue构建零食商铺全栈系统实战

1. 项目背景与核心价值

去年帮朋友改造他家的小零食店时，我深刻体会到传统零售管理的痛点：手工记账效率低、库存管理混乱、促销活动难追踪。这个基于SpringBoot+Vue的小零食商铺系统，就是为解决这些实际问题而设计的全栈解决方案。

系统采用前后端分离架构，后端用SpringBoot提供RESTful API，前端用Vue构建响应式管理界面，实现了商品管理、订单处理、会员体系、数据统计等核心功能。特别针对零食行业特性，设计了效期预警、组合促销、多规格商品等特色功能模块。

2. 技术架构设计

2.1 后端技术栈选型

选择SpringBoot 2.7作为后端框架主要考虑：

• 内嵌Tomcat简化部署
• 自动配置减少XML配置
• 丰富的Starter依赖（特别是Spring Data JPA和Spring Security）
• 与MySQL的天然兼容性

数据库采用MySQL 8.0，关键设计包括：

sql复制CREATE TABLE `snack` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL COMMENT '商品名称',
  `specs` json DEFAULT NULL COMMENT '规格参数（净含量/口味等）',
  `expiry_alert_days` int DEFAULT '7' COMMENT '临期预警天数',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.2 前端架构设计

Vue 3组合式API带来更好的逻辑封装：

javascript复制// 商品列表组件
const useSnackList = () => {
  const state = reactive({
    snacks: [],
    loading: false
  })

  const fetchSnacks = async () => {
    state.loading = true
    const res = await axios.get('/api/snacks')
    state.snacks =