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

## 前言

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

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

![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-2047005/a1992ed57575088186319c9523fefaae.jpg)


## 一、为什么做

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

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

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

![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-2047005/cdc56dd0e6168e5a911a9127b80fedf0.jpg)


![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-2047005/663f0b4ff04c11cc8f6d7378d2df121b.jpg)
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-2047005/44cd9efe9f173de045eaa9c9282a81ea.jpg)


## 三、技术架构

```
┌─────────────────────────────────────────┐
│  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 回推，前端统一收口。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-2047005/9bf815bdb5339b5de5b7072fe891a617.jpg)


### 3. 数据可视化

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

![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-2047005/1ad053c5a95569168cdb7424bac32111.jpg)

![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-2047005/c82a0e8d4185d2109fe1bf8dad24ee9d.jpg)


### 4. 本地数据安全与缓存

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

### 5. AI 集成与代码沙箱

大模型 API 支持 SSE 流式输出；额外做了「AI 市场」，用 QuickJS（WASM）+ Pyodide（Python）在受限沙箱执行用户工具代码，配临时凭证域隔离与频控。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-2047005/4365c2d68739ed29d928eaf58a3cf857.jpg)


### 6. 静态资源：COS + CDN

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

## 五、独立开发心得

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

## 结语

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

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

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

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

前端

从0到1独立开发基金持仓记账与收益复盘网站，基于Node+Vue+ECharts实现多平台持仓管理、交易流水追踪、收益曲线及行情可视化。涵盖WebSocket实时推送、数据加密、AI对话等核心功能，分享完整技术架构与关键难点解决方案。

数据可视化

代码解释

数据安全

WebSocket

SQLite

Python

Nginx

ReAct 

Vite

CDN免费试用


对象存储COS新用户低至1元！


热销域名限时优惠，新客首年免费！


domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

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

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐