0 后端 · 0 数据库 · 0 备案:用 AI 两天搓出的股票管理系统,开源了

不租服务器、不建数据库,两天用 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。

零后端的魔法:飞书 = 云端数据库

零后端架构:你的数据存在飞书,前端通过一层极薄代理直连。

flowchart TB A[浏览器 / 使用者] A -->|https 访问| B[Cloudflare Tunnel 公网 HTTPS 免备案免端口] B --> C[nginx 仅本机] C -->|/stock/* 静态资源| D[dist 前端 JS CSS 模板 base] C -->|/api/feishu/* 代理转发| E[feishu-proxy 飞书 API 代理 仅本机] D --> F[飞书多维表格 open.feishu.cn 云端数据库] E -->|带 X-Feishu-Credentials 头| F style A fill:#eff6ff,stroke:#2563eb,color:#0f172a style B fill:#eff6ff,stroke:#2563eb,color:#0f172a style C fill:#eff6ff,stroke:#2563eb,color:#0f172a style D fill:#ffffff,stroke:#64748b,color:#0f172a style E fill:#fffbeb,stroke:#d97706,color:#0f172a style F fill:#ecfdf5,stroke:#10b981,color:#0f172a

飞书多维表格本质是一张带类型约束的在线表格:日期、单选、多选、数字、文本......正好覆盖交易记录需要的字段类型,还自带开放 API。前端能调通 API,就等于拥有了一个免运维的云端数据库 。浏览器因同源策略不能直接调飞书,所以前端和飞书之间放一个极薄的代理(开发用 Vite 中间件,生产用常驻 Node 进程),只转发 + 换 token,不存业务数据、密钥不落盘。

浏览器绝不直连飞书(被 CORS 拦截);凭据经 X-Feishu-Credentials 头由代理内存解码后转发,服务器不落盘。其中 nginx 仅本机监听 8888、feishu-proxy 仅本机监听 8787,公网入口由 Cloudflare Tunnel 建立,本机端口不暴露给公网。

轻量级接入:你也可以直接用

  1. ① 下载模板 ------ 拿一个脱敏的 .base 结构文件
  2. ② 飞书导入 ------ 导入生成你自己的空表
  3. ③ 填凭据 ------ App ID/Secret + 表 ID
  4. ④ 即刻可用 ------ 数据全在你的飞书,天然隔离

不需要懂代码,不需要租服务器------这是它最"轻"的地方。每个人导入的都是自己的空表,数据天然隔离,谁也看不到谁的持仓。

已经上线了

部署走的是免端口免备案 方案:静态资源丢 nginx,飞书调用丢常驻代理,公网入口交给 Cloudflare Tunnel------不开入站端口、不备案,国内也能稳稳访问。

开源 + 后续

  • 代码开源,欢迎拿去改、拿去用。
  • 源码和项目使用说明:java4u.cn/ai/2385.htm...
  • 后面我会接着写 开发思路 (飞书当数据库的细节、CORS 怎么绕)和 部署思路 (Tunnel 怎么配、两个真坑),会首发在 java4u.cn。

如果你也想"零后端"一把,这篇先收藏;开发 / 部署的硬核细节,咱们下篇见。


本文首发于 java4u.cn,转载请注明出处。

相关推荐
仿生狮子4 小时前
OpenAI 攻下千禧年难题之后,开发者似乎无动于衷
前端·数学·vibecoding
Lvan的前端笔记7 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker
苍何7 小时前
开源微信流 Windows,微信聊天记录,可以直接给 Codex 和 Obsidan 了
后端
三天不学习7 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs194058 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
10年前端老司机8 小时前
你的RAG检索正在“高效地重复废话”:一文彻底搞懂MMR算法
langchain·llm·agent
stereohomology9 小时前
大模型的观点谨:StoryTold 「Crafting Apps」四件套 · 深度总览
人工智能·llm
代码什么用9 小时前
Spring基础使用
java·后端·spring
明月_清风9 小时前
Deno 终局来了:从挑战 Node 到被 Cloudflare 收编
前端·后端·node.js
蜗牛互联网10 小时前
Java 17 HttpClient调用文件转写API的超时与失败回退
java·人工智能·后端