不租服务器、不建数据库,两天用 AI 搓出一个股票管理系统。0 后端 · 0 数据库 · 0 备案 · 免端口。
先说结论:一个能管自己股票仓位、带实时盈亏、深色科技感 UI、已经上线跑着的股票管理系统,我用了 两天 、靠 AI 辅助 做出来了。没有后端、没有数据库、没有备案。代码开源,你也能直接用。
缘起:一个偷懒的想法
记账式管仓位------建仓、加仓、止盈、止损,每笔留痕,再算出当前持仓和浮动盈亏。这种小工具最省事的做法不是去租云服务器、装数据库、写一套后端 CRUD,而是......直接把飞书多维表格当数据库。
这个想法够"野",但也够"懒"。于是我让 AI 帮我从 0 到 1 把它做出来,两天时间,成品不丑、能用、还上线了。
这篇文章先亮成果 + 使用方式。开发思路和部署思路,后面会在 java4u.cn 陆续发,欢迎关注。
两天,AI 到底帮我做了什么
| 目标与产出 | |
|---|---|
| Day 1 · 定调与骨架 | 定架构(飞书当数据库) 搭前端骨架(React+TS+Vite+Tailwind) 把深色玻璃拟态 UI 和涨红跌绿配色定下来 |
| Day 2 · 接通与上线 | 接飞书 API(读写操作记录) 写极薄 CORS 代理 用 Cloudflare Tunnel 免备案上线 |
说"AI 生成"不是噱头------从组件、样式到部署脚本,大部分代码确实是 AI 起草、我来做决策和校验。把"想清楚要什么"和"让 AI 填空"分工好,速度就起来了。两天,是真实的两天。
它到底能干什么
| 功能 | 说明 |
|---|---|
| 持仓总览 | 浮动盈亏、各股持仓卡(持仓中 / 已清仓),一眼看清仓位。 |
| 操作记录 | 买入 / 卖出流水,支持筛选、新增 / 编辑 / 删除,含「未卖出手数」列。 |
| 派生聚合 | 用 FIFO 算未卖出手数与持仓成本,再算浮动盈亏------只存流水,不存冗余汇总。 |
| 标签体系 | 等手卖出 / 不等手卖出 / 清仓 / 止盈 / 建仓......飞书写标签会自动建选项。 |
科技感从哪来
实际页面是「深色玻璃拟态」风格:
- 页面底色
#0b1220,卡片用半透明白底rgba(255,255,255,0.06)+ 模糊边框rgba(255,255,255,0.12),即「玻璃」感。 - 持仓卡示意:浮盈亏
+1,280(涨色#fda4af),成本12.30(跌色#86efac)。 - 操作记录示意:买入
600 股(涨色)、卖出400 股(跌色)。
深色玻璃拟态(半透明卡 + 模糊边框)+ 涨红 / 跌绿 (A 股约定,与欧美相反)。语义色全站只在一处定义,业务代码只引用常量,绝不在代码里临时写
#f00。
零后端的魔法:飞书 = 云端数据库
零后端架构:你的数据存在飞书,前端通过一层极薄代理直连。
飞书多维表格本质是一张带类型约束的在线表格:日期、单选、多选、数字、文本......正好覆盖交易记录需要的字段类型,还自带开放 API。前端能调通 API,就等于拥有了一个免运维的云端数据库 。浏览器因同源策略不能直接调飞书,所以前端和飞书之间放一个极薄的代理(开发用 Vite 中间件,生产用常驻 Node 进程),只转发 + 换 token,不存业务数据、密钥不落盘。
浏览器绝不直连飞书(被 CORS 拦截);凭据经
X-Feishu-Credentials头由代理内存解码后转发,服务器不落盘。其中 nginx 仅本机监听 8888、feishu-proxy 仅本机监听 8787,公网入口由 Cloudflare Tunnel 建立,本机端口不暴露给公网。
轻量级接入:你也可以直接用
- ① 下载模板 ------ 拿一个脱敏的
.base结构文件 - ② 飞书导入 ------ 导入生成你自己的空表
- ③ 填凭据 ------ App ID/Secret + 表 ID
- ④ 即刻可用 ------ 数据全在你的飞书,天然隔离
不需要懂代码,不需要租服务器------这是它最"轻"的地方。每个人导入的都是自己的空表,数据天然隔离,谁也看不到谁的持仓。
已经上线了
部署走的是免端口免备案 方案:静态资源丢 nginx,飞书调用丢常驻代理,公网入口交给 Cloudflare Tunnel------不开入站端口、不备案,国内也能稳稳访问。
开源 + 后续
- 代码开源,欢迎拿去改、拿去用。
- 源码和项目使用说明:java4u.cn/ai/2385.htm...
- 后面我会接着写 开发思路 (飞书当数据库的细节、CORS 怎么绕)和 部署思路 (Tunnel 怎么配、两个真坑),会首发在 java4u.cn。
如果你也想"零后端"一把,这篇先收藏;开发 / 部署的硬核细节,咱们下篇见。
本文首发于 java4u.cn,转载请注明出处。