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,转载请注明出处。

相关推荐
SomeB1oody1 小时前
【RustyML入门】7.2. 深入模型持久化
开发语言·后端·机器学习·rust·教程
风流 少年1 小时前
Spring AI 2.0:阿里云百炼平台(工作流应用)
java·后端·spring
__zRainy__1 小时前
Node系列 · 数据库:单表查询
数据库·后端·mysql·node.js
雪芽蓝域zzs1 小时前
Element‑Plus icon 图标名称查询 & 和菜单 meta.icon 字段映射
前端
诺伦1 小时前
Rust 错误处理实战:从 unwrap 到优雅 Result 的进阶之路
开发语言·后端·rust
01_ice2 小时前
前端学习css
前端·css·学习
不能放弃治疗2 小时前
上下文压缩机制
后端
QQ_21696290962 小时前
【项目编号:project95315】SpringBoot公共自习室管理系统:座位预约、房间管理、签到核销、公告规则完整实战
java·spring boot·后端
愚公搬代码2 小时前
【愚公系列】《Web应用安全》010-Repeater模块的使用
前端·安全