獨立開發｜用 Node + Vue + ECharts 從 0 到 1 建立基金持倉記帳與收益復盤網站

2026-10-26 8

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这是一套由前端转全栈开发者独立完成的基金记账与收益复盘工具（Node+Vue+ECharts），涵盖持仓管理、交易流水、收益曲线、行情可视化及AI助手等功能。技术上攻克了行情抓取、WebSocket+SSE实时推送、加密缓存、沙箱AI集成等难点，纯个人项目，不荐基不荐股，仅作数据参考。（239字）

独立开发｜从 0 到 1 做一个基金持仓记账与收益复盘网站（Node + Vue + ECharts）

前言

作为一名前端出身的全栈开发，我利用业余时间独立完成了一个基金持仓记账与收益复盘网站，前后端、数据抓取、可视化、部署全部由一个人完成。这篇文章记录整体架构和几个关键难点的实现思路，供同样想做个人项目的同学参考。

先说明边界：本站是个人开发的记账与数据展示工具，不提供任何投资建议，不荐股不荐基，数据仅供参考。

在这里插入图片描述

一、为什么做

持仓分散在多个平台、交易流水一多就算不清实际收益率、想复盘又翻不动历史数据——这些是我自己的真实痛点。与其继续用 Excel 凑，不如自己写一个。

二、功能概览（纯工具向）

持仓管理：多组合分账，记录成本、份额、市值，自动算收益率；
交易流水：买入/卖出/加仓/减仓/定投，全程可追溯；
收益复盘：历史收益曲线、收益日历；
行情可视化：指数走势、涨跌分布、板块资金流；
AI 对话助手：接入大模型，做行情速览和问答（技术演示）。

在这里插入图片描述

三、技术架构

┌─────────────────────────────────────────┐
│  funds-front（Vue 2.7 + Vite + Pinia）    │
│  首页 / 广场 / AI 市场 / 管理后台           │
└──────────────┬──────────────────────────┘
               │ HTTP / WebSocket / SSE
┌──────────────▼──────────────────────────┐
│  funds-server（Node.js + Express）        │
│  routes / services / 定时任务 / AI 集成     │
└──────────────┬──────────────────────────┘
               │
        ┌──────┴───────┐
        │ SQLite(WAL)  │   腾讯云 COS + CDN
        └──────────────┘

前端：Vue 2.7 + Vite 4 + Pinia，ECharts 6 可视化；大盘云图为独立 Next.js/React 子应用，iframe 嵌入。
后端：Node.js + Express + SQLite，手写 SQL，读写连接分离 + WAL，node-cron 定时任务，ws 长连接。
部署：Windows Server + PM2 + Nginx，PowerShell 一键部署。

四、关键技术难点

1. 行情数据源与接口协议还原

公开行情接口普遍带签名校验与设备指纹，直接抓取会被拦截。我梳理了签名算法、请求头与设备注册流程，还原了整条链路，稳定获取指数、涨跌分布与基金历史数据。出于合规考虑，具体算法与密钥不展开。

2. 实时推送：WebSocket + SSE 代理

单例 WebSocket 全站复用，心跳保活 + 指数退避重连；
用「连接世代号」解决重连时的新旧连接时序竞态；
第三方行情 SSE 流由后端建连后经 WebSocket 回推，前端统一收口。

3. 数据可视化

大盘分时用 ECharts Custom 系列绘制多空能量柱与悬浮信息层；板块资金流用 Treemap 展示；大盘云图是独立 React 子项目，自绘 treemap 热力图，更轻、可控性更强。

在这里插入图片描述

4. 本地数据安全与缓存

localStorage 用 AES 加密 + 完整性校验，防止通过 DevTools 篡改本地状态；大体量基金数据放 IndexedDB，避开 localStorage 容量上限并跨页复用。

5. AI 集成与代码沙箱

大模型 API 支持 SSE 流式输出；额外做了「AI 市场」，用 QuickJS（WASM）+ Pyodide（Python）在受限沙箱执行用户工具代码，配临时凭证域隔离与频控。
在这里插入图片描述

6. 静态资源：COS + CDN

头像、帖子图、背景图统一走腾讯云 COS，出站用自定义 CDN 域名；Nginx 对旧路径做 302 兜底，图片迁移对用户无感。

五、独立开发心得

先解决自己真实的痛点、别贪功能、部署自动化、守住个人项目的合规边界。无资质就不碰推荐与预测，踏实做工具才能走得远。

结语

从 0 到 1 一个人做完，欢迎体验交流：https://yjc.fund

免责声明：个人开发的记账与数据展示工具，数据来自公开渠道、仅供参考，不构成任何投资建议，投资有风险。