这是一个仿美团的本地生活服务全栈 Demo 项目，定位是前端工程化练习与全栈架构实践，并非生产级应用。项目以美团外卖 / 到店页面为参考原型，还原了首页信息流、商家点餐、购物车、订单配送、个人中心等核心交互链路，并在动效体验和代码分层上做了较多打磨。技术选型上刻意保持轻量 —— 前端使用 Vue 3 + Vite，后端不依赖 Express/Koa 等框架，直接基于 Node.js 原生 `http` 模块实现路由与分层，数据持久化采用 JSON 文件而非数据库，目的是在最小依赖下跑通完整业务链路，同时暴露底层实现细节便于学习理解。
项目围绕浏览、选品、下单、履约的本地生活核心链路设计，主要功能如下。
1. 首页信息流：包含顶部搜索栏与城市切换、公告跑马灯、分类导航网格、限时秒杀（带倒计时与抢购进度条）、红包优惠券中心（领取后 localStorage 持久化）、推荐商家列表，支持按分类筛选与排序。
2. 商家与点餐：商家列表展示封面、评分、月售、配送费、起送价等信息；点击商家弹出详情抽屉，内含点餐与评价双 Tab，支持商品加入购物车、商家收藏（localStorage 持久化），个人页可通过常逛的店直达。
3. 购物车与下单：底部悬浮购物车栏实时显示数量与金额，点击展开抽屉可调整商品数量、清空购物车；提交订单后触发撒花庆祝动效，订单写入后端存储。
4. 订单履约：订单页展示配送进度时间线（接单、制作、配送、送达），状态随时间自动推进，支持再来一单快速复购。
5. 账号体系：支持手机号注册与登录，密码加密存储，登录态通过 Bearer Token 维护，刷新页面后自动恢复登录态；未登录时触发操作会弹出登录模态框。
6. 动效与体验：包含滚动渐入（自定义 v-reveal 指令）、头部导航随滚动方向自动隐藏和显示、Hero 区视差与 3D 倾斜、加菜飞入购物车抛物线动画、页面切换过渡、骨架屏加载、回到顶部等，并尊重系统 prefers-reduced-motion 设置。
前端基于 Vue 3（Composition API）加 Vite 构建，未引入 Pinia、Vuex 等状态管理库，而是通过 Vue 3 的 composables 模式组织可复用状态与逻辑。项目内包含 useAuth（登录态）、useCart（购物车）、useCoupons（优惠券）、useFavorites（收藏）、useHomeData（首页数据）、useToast（全局提示）、useFlyToCart（飞入动画）、useConfetti（撒花）等十余个 composable，每个负责单一领域的状态与行为。
请求层基于原生 fetch 封装（src/api/request.js），支持通过环境变量 VITE_API_BASE_URL 配置后端地址，也支持 VITE_USE_MOCK=true 切换为纯前端 mock 模式，无需后端即可预览页面。接口按领域拆分为 auth.js、home.js、order.js，与后端路由一一对应。
UI 组件按职责分为三层：components/layout（跨页面布局，如顶部导航、底部 Tab 栏）、components/ui（通用基础组件，如 Toast、回到顶部、弹窗遮罩层）、features/*/components（业务组件，按首页、商家、购物车、订单、个人等领域归档）。此外通过自定义指令 v-reveal 实现元素进入视口时的渐入动画，通过 directives 目录统一管理。
后端基于 Node.js 原生 http 模块（createServer）实现，未使用 Express、Koa、NestJS 等框架，路由分发由 routes/index.js 手动匹配请求方法与路径完成。虽然没有框架加持，但代码严格按照 routes、controllers、services、repositories 四层架构组织。
routes 层定义路由表，将 HTTP 请求映射到对应 controller 方法。
controllers 层处理请求入参解析、响应格式封装，不包含业务逻辑。
services 层承载核心业务逻辑，如用户注册校验、订单创建、状态流转。
repositories 层封装数据读写，本项目通过 jsonStore.js 以 JSON 文件（backend/data/store.json）作为持久化存储，使用 fs/promises 异步读写。
鉴权采用 Bearer Token 机制，middleware/auth.js 从请求头提取 token 并通过 sessionService 校验用户身份，受保护接口在 controller 层调用 requireUser 中间件。密码通过 password.js 工具加密后存储，不保存明文。
当前提供 7 个接口：健康检查 GET /api/health、首页数据 GET /api/home、注册 POST /api/auth/register、登录 POST /api/auth/login、当前用户 GET /api/auth/me、订单列表 GET /api/orders、创建订单 POST /api/orders。首页的商家、商品、分类等静态数据存放在 shared/home-data.js，前后端共享同一份数据源，避免重复维护。
评论