创之星花店多端业务闭环拆解

xiangzhihong82026-10-09 23:44

创之星花店

创之星花店是一个前后端分离、多端共用的鲜花电商演示项目。项目以 Spring Boot REST API 为核心，包含顾客 H5、管理后台、微信小程序和 Flutter 客户端，覆盖从浏览花礼、加入购物车、下单支付到后台履约和在线咨询的完整业务流程。

项目首次启动时会自动初始化门店信息、12 款花礼、送花场景、首页轮播、会员、收花地址、示例订单、定制需求和咨询会话，可直接用于功能演示与联调。

项目结构

目录 说明 默认地址
springboot-flower-shop Spring Boot 后端服务与业务 API http://127.0.0.1:8080
flower-shop-h5 Vue 3 顾客端 H5 http://localhost:5173
flower-shop-web-manager Vue 3 + Element Plus 管理后台 http://localhost:5174
flower-shop-wechat TypeScript 微信原生小程序 微信开发者工具
flower-shop-namager-h5 Vue 3 门店老板端 H5 Vite 开发服务器
flower-shop-manager-wechat Vue 3 + Vite 门店端微信小程序 微信开发者工具
flower-shop-app Flutter 移动客户端 Android / iOS

主要功能

顾客端

  • 首页轮播、门店信息、配送说明和搜索热词
  • 按送花场景或价格区间筛选花礼
  • 花礼搜索、详情、图集、规格选择和加购
  • 购物车数量修改、删除和批量结算
  • 收花地址新增、编辑、删除及默认地址
  • 确认订单、配送日期与时段、贺卡留言、匿名送花
  • 模拟支付、取消订单、确认收货和订单状态跟踪
  • 特殊定制需求提交与进度查询
  • 在线咨询与历史消息查看
  • 手机验证码登录、会员信息和退出登录

管理后台

  • 管理员登录与 Bearer Token 鉴权
  • 经营数据概览、订单状态分布和最近订单
  • 订单筛选、分页、详情、发货、完成和取消
  • 花礼新增、编辑、删除、上下架、推荐、图集和多规格价格
  • 定制需求筛选、跟进、状态更新和内部备注
  • 首页轮播和送花场景管理
  • 在线咨询会话查看与回复
  • 会员列表和增长概览
  • 门店资料、配送费、配送时段、营业时间和搜索热词设置
  • 图片上传与静态资源访问

技术栈

模块 技术
后端 Java 21、Spring Boot 3.4、Spring MVC、Spring Data JPA、Bean Validation、MySQL、Maven
顾客 H5 Vue 3、TypeScript、Vite、Pinia、Vue Router、Vant
管理后台 Vue 3、TypeScript、Vite、Pinia、Vue Router、Element Plus、ECharts、Axios
微信小程序 微信原生小程序、TypeScript
Flutter App Flutter、Dart、Dio、Provider、GoRouter、SharedPreferences
数据存储 MySQL 8，数据库名 flower_shop

环境要求

  • JDK 21
  • Maven 3.9+
  • MySQL 8+
  • Node.js 20.19+ 或 22.12+
  • npm 10+
  • 微信开发者工具（运行小程序）
  • Flutter SDK 与对应的 Android / iOS 开发环境（运行 App）

本地运行

1. 启动 MySQL

后端默认连接本机 MySQL：

text 复制代码 
地址：127.0.0.1:3306
数据库：flower_shop
用户名：root
密码：12345678

首次运行可先创建数据库：

bash 复制代码 
mysql -uroot -p12345678 -h127.0.0.1 \
  -e "CREATE DATABASE IF NOT EXISTS flower_shop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"

数据库连接配置位于 springboot-flower-shop/src/main/resources/application.yml，可按本机环境修改。

2. 启动后端

bash 复制代码 
cd springboot-flower-shop
mvn spring-boot:run

服务启动后可访问：

bash 复制代码 
curl http://127.0.0.1:8080/api/home

JPA 的 ddl-auto 为 update，首次启动会自动建表并写入演示数据。

3. 启动顾客 H5

bash 复制代码 
cd flower-shop-h5
npm install
npm run dev

访问 http://localhost:5173。开发服务器会将 /api 和 /uploads 代理到后端 8080 端口。

4. 启动管理后台

bash 复制代码 
cd flower-shop-web-manager
npm install
npm run dev

访问 http://localhost:5174。开发服务器会将 /api、/images 和 /uploads 代理到后端 8080 端口。

5. 运行门店端微信小程序

门店端对接管理接口 /api/admin/**，演示账号 admin / admin123。

bash 复制代码 
cd flower-shop-manager-wechat
npm install
npm run dev:mp-weixin

用微信开发者工具导入 flower-shop-manager-wechat/dist/dev/mp-weixin，并关闭合法域名校验。真机调试时把 src/config.ts 中的接口地址改为电脑局域网 IP。

6. 运行顾客微信小程序

  1. 启动后端并确认 http://127.0.0.1:8080 可访问。
  2. 使用微信开发者工具导入 flower-shop-wechat 目录。
  3. 确认开发者工具已关闭合法域名校验。
  4. 真机调试时，将 flower-shop-wechat/utils/config.ts 中的 API_BASE 改为电脑局域网 IP。

7. 运行 Flutter App

bash 复制代码 
cd flower-shop-app
flutter pub get
flutter run

默认接口地址：

  • Android 模拟器：http://10.0.2.2:8080
  • iOS 模拟器：http://127.0.0.1:8080

真机或自定义环境可通过参数覆盖：

bash 复制代码 
flutter run --dart-define=API_BASE=http://192.168.1.8:8080

测试账号

角色 账号 密码 / 验证码 使用位置
后台管理员 admin admin123 管理后台
预置会员 13800138000 短信验证码 123456 H5、小程序、Flutter
新顾客 任意合法 11 位手机号 短信验证码 123456 H5、小程序、Flutter

顾客首次使用新手机号登录时会自动创建会员。预置会员"林小姐"带有默认收花地址、两笔示例订单、一条定制需求和一段咨询记录。

常用示例数据：

类型 数据
配送中订单 FS202609250001
已完成订单 FS202609180002
店铺电话 400-820-5200

配置说明

后端

springboot-flower-shop/src/main/resources/application.yml 包含：

  • 服务端口：8080
  • MySQL 连接信息
  • 演示短信验证码：flower.sms-code
  • 上传文件目录：flower.upload-dir

上传文件默认保存在后端运行目录下的 uploads/，并通过 /uploads/** 对外访问。

前端接口地址

  • H5：设置 VITE_API_BASE，例如 VITE_API_BASE=http://127.0.0.1:8080
  • 管理后台：设置 VITE_API_BASE
  • 微信小程序：修改 flower-shop-wechat/utils/config.ts 中的 API_BASE
  • Flutter：使用 --dart-define=API_BASE=...

本地开发使用 Vite 代理或默认本机地址时，通常无需额外配置。

构建与检查

后端

bash 复制代码 
cd springboot-flower-shop
mvn test
mvn clean package

顾客 H5

bash 复制代码 
cd flower-shop-h5
npm run typecheck
npm run build

管理后台

bash 复制代码 
cd flower-shop-web-manager
npm run typecheck
npm run build

微信小程序

bash 复制代码 
cd flower-shop-wechat
npm install
npm run typecheck

Flutter App

bash 复制代码 
cd flower-shop-app
flutter analyze
flutter build apk

主要 API

后端统一返回：

json 复制代码 
{
  "code": 200,
  "message": "success",
  "data": {}
}

顾客端常用接口：

  • GET /api/home、GET /api/store、GET /api/scenes
  • GET /api/products、GET /api/products/{id}
  • POST /api/auth/sms、POST /api/auth/login、GET /api/auth/me
  • GET|POST|PUT|DELETE /api/addresses
  • GET|POST|PUT|DELETE /api/cart
  • GET|POST /api/orders、POST /api/orders/{id}/pay|cancel|confirm
  • GET|POST /api/custom-requests
  • GET /api/chat/session、POST /api/chat/messages

管理端接口统一位于 /api/admin/**，登录接口为 POST /api/admin/login。除登录外，请求需携带：

http 复制代码 
Authorization: Bearer <token>

说明

当前项目定位为演示和开发样板，验证码、固定管理密码和本地 MySQL 凭据均为演示配置。用于生产环境前，应替换为真实短信服务、安全的密钥管理、密码哈希方案、文件存储与 HTTPS 部署。

相关推荐
奈落242 小时前
AI 编程从助手到 Agent：基于两份资料看哪些环节可以交出去，哪些必须自己攥住
大数据·人工智能
Joker可视化开发平台2 小时前
AI短剧接棒真人剧：开机量跌七成，普通人进场窗口在收窄
大数据·人工智能
澳鹏Appen2 小时前
澳鹏电子书 | 强化学习环境：为AI智能体打造高保真训练场
人工智能
吴佳浩2 小时前
单卡5090跑125B 大模型：Strata 把服务器级 MoE 拉进普通 PC
人工智能
Data-Miner2 小时前
AI做表格软件哪个好？专业评测：五维对比看清差距
人工智能
Raspberry_Pi_官方账号3 小时前
观察、理解与响应：Raspberry Pi 5 上的低功耗 CNN、VLM 和 SLM 工作负载
人工智能·神经网络·cnn·树莓派·raspberrypi
AI日报派送佬3 小时前
2026年10月8日AI行业日报｜GPT-6可视化UI全面上线、AI PC硬件革新、智能体安全与商业化提速
人工智能·gpt·openai·谷歌·deepseek·ai日报·智能体技术
MobotStone3 小时前
做了几个 Agent 项目后，我发现：真正拉开 AI 产品经理差距的，不是技术
人工智能·架构
孟健3 小时前
Qwen3.8-27B 本地推理实测：从 14 tok/s 到 159 tok/s 的投机解码调优
人工智能·llm·ai编程
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02历年考研数学一、数学二、数学三真题试卷及答案PDF03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04GitHub 镜像站点05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06Telegram APK 下载安装完整指南 — 2026年最新07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新102026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享