留一口给你 · 家庭点餐小程序产品系统Vibe Coding

我要开发同款
RZRzision2026年11月04日
8阅读

技术信息

语言技术
HTML5、CSS、JavaScript、Node.js、MySQL
系统类型
小程序轻应用
行业分类
生活旅游

作品详情

行业场景

两个人住在一起,每天最纠结的就是“今天吃什么”。外卖平台面向陌生人和商家,家里买菜做饭这件事反而没有合适的工具:菜单散在备忘录里、谁付了多少钱记不清、做完的菜也留不下记录。这个项目把“今天吃什么”做成一个只有家庭内部可见的私有小程序:家人各自登录后共享同一份菜单,看到想吃的点一下加入购物车,点完生成订单;每完成一单自动生成一条记账和一条做饭日记,月底能一眼看出这段时间花了多少,也能翻回去看“上周三那顿饭”。适用场景是两人或小家庭的日常点餐、做饭记录与共同开销管理,不涉及对外营业、桌号、库存等商家功能。

功能介绍

小程序共 16 个页面、四个主 Tab。点餐:分类与菜品列表、搜索、购物车、结算下单;菜品详情展示所需材料和做饭步骤。订单:按月份查看历史订单,可取消或删除,并能一键记一笔。饭饭日记:按日期记录每餐的花费、评分、照片和心得,支持从已完成订单自动生成。我的:点菜榜单(家庭里最受欢迎的菜)、菜品与分类管理(增删改,上传图片走微信内容安全审核)、家庭成员(邀请码加入、权限与退出)、记账本(月历按天显示当日支出,点某一天只看那天的账单)、使用说明。此外首页支持自定义背景:上传图片经内容安全审核后按账号保存到云端,换手机登录后自动恢复。游客模式下可在本地试记一笔,不上传不同步。

项目实现

我独立完成了产品设计、前端开发、后端接口与服务器部署的整个流程。前端为微信原生小程序(WXML/WXSS/JS),自定义导航栏和底部 TabBar,自行搭建了一套凝光玻璃视觉体系:backdrop-filter 模糊、渐变描边、按压回弹与滚动入场动效,所有图标都是内联 SVG 组件绘制,没有引入第三方 UI 库。后端 Node.js + Express + mysql2,部署在腾讯云轻量服务器:PM2 守护进程,Nginx 反向代理 HTTPS 域名,MySQL 按家庭划分数据。实现了 JWT 登录、家庭成员与数据隔离,以及订单、账单、日记、菜品几套 REST 接口;图片上传先落到隔离目录,调用微信内容安全接口审核通过后才移入静态目录。难点在数据一致性与边界处理:订单完成后要同时生成账单和日记,用 clientId 去重避免重复记账;自定义背景要处理本地缓存、审核轮询、换设备同步和旧文件清理。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论