> 本文介绍一款面向家庭场景的儿童成长管理系统「成长基金小管家」的完整技术架构，涵盖微信小程序客户端、Python FastAPI 后端、Supabase 云数据库，以及 Vue3 官网的双服务器部署方案。适合想用小成本实现全栈产品的独立开发者参考。

---

## 一、产品背景

「成长基金小管家」是一款家庭共用的微信小程序，核心逻辑：

- **孩子**：完成家务、学习打卡任务，获得「成长金」积分
- **家长**：审核任务、发放奖励、管理礼品兑换和抽奖
- 家庭成员通过二维码扫码组建「家庭」，角色分为家长和孩子

配套 **kidnow.club** 官网负责品牌展示和 AI 选书顾问功能。

---

## 二、整体架构

```
┌──────────────────────────────────────────────────┐
│                    用户侧                         │
│                                                  │
│   微信小程序           浏览器                     │
│   (家长 + 孩子)       kidnow.club                │
└──────────┬─────────────────┬────────────────────┘
           │                 │
           │ HTTPS API       │ HTTP / HTTPS
           ▼                 ▼
┌──────────────────┐  ┌────────────────────────────┐
│   服务器A         │  │       服务器B               │
│                  │  │                             │
│  FastAPI :8000   │◄─┤  Nginx :80 / :443           │
│  Python 后端     │  │  ├── 静态站点                │
│                  │  │  └── /api/* 反向代理 →  A    │
└────────┬─────────┘  └─────────────────────────────┘
         │
         ▼
┌───────────────────┐
│     Supabase      │
│    PostgreSQL     │
│    (云数据库)      │
└───────────────────┘
```

**设计思路：双服务器解耦**

- **服务器A**：专跑 FastAPI，只对外暴露 API，不管静态资源
- **服务器B**：跑 Nginx，托管 Vue3 官网静态文件，同时把 `/api/*` 请求代理到服务器A
- 好处：官网和 API 互不影响，官网挂了不影响小程序正常运行，未来可独立扩展

> 两台轻量云服务器即可跑通，月成本控制在百元级别。

---

## 三、微信小程序（前端）

### 3.1 页面结构

```
miniprogram/pages/
├── index/       # 首页：用户信息 + 家庭管理 + 打卡入口
├── checkin/     # 打卡页：选择任务、记录完成
├── passbook/    # 存折页：积分流水明细
├── mall/        # 商城页：礼品兑换
└── admin/       # 管理页：家长专属，审核打卡、发放奖励
```

### 3.2 登录流程

微信小程序的登录是个经典问题，我们的方案：

```
用户打开小程序
     │
     ▼
wx.login() → 拿到 code
     │
     ▼
POST /api/auth/wechat-login
(code → 后端 → 微信服务器 → openid)
     │
     ├─ 已注册 → 返回 JWT → 进入首页
     │
     └─ 新用户 → 引导注册页（填小名 + 选角色）
                    │
                    ▼
               POST /api/auth/register
                    │
                    ▼
               返回 JWT → 进入首页
```

**关键设计**：用微信 `openid` 作为唯一标识符，无需手机号验证。每个微信用户的 `openid` 是全局唯一且不变的，天然就是账号体系。

### 3.3 家庭系统

家庭是整个产品的核心概念，数据结构如下：

```
families（家庭表）
├── id：UUID 主键
├── name：家庭名称
├── owner_id：家长用户 ID
└── qr_token：邀请二维码 Token（可重新生成）

users（用户表）
├── id：UUID 主键
├── openid：微信唯一标识
├── nickname：小名
├── role：parent / child
└── family_id：所属家庭 ID（外键）
```

**加入流程**：孩子扫描家长的二维码，携带 `qr_token` 调用 `/api/family/join`。家长可随时重新生成 token 防止被滥用。

**权限控制**：家长可创建家庭、审核打卡、管理礼品；孩子只能打卡、查看自己的积分和参与抽奖。

---

## 四、后端（Python FastAPI）

### 4.1 技术选型

| 对比项 | 选择 FastAPI 的理由 |
|--------|--------------------|
| vs Django | 更轻量，适合 API-only 场景，内置异步支持 |
| vs Flask | Pydantic 数据验证、自动生成 Swagger 文档 |
| vs Node.js | Python 生态对接 AI 模型更便捷（后续 AI 功能） |

### 4.2 路由模块

```
backend/app/routes/
├── auth.py       # 登录、注册、用户信息
│   ├── POST /auth/wechat-login
│   ├── POST /auth/register
│   ├── GET  /me
│   └── PUT  /me/profile
│
├── family.py     # 家庭管理
│   ├── POST   /family/create
│   ├── POST   /family/join
│   ├── GET    /family/info
│   ├── POST   /family/regenerate-qr
│   ├── POST   /family/leave
│   └── DELETE /family/delete
│
├── checkin.py    # 打卡任务
│   ├── POST /checkin
│   └── GET  /checkin/progress
│
├── fund.py       # 成长金积分
│   ├── GET /fund/balance
│   ├── GET /fund/income
│   └── GET /fund/expense
│
├── lottery.py    # 抽奖
│   ├── POST /lottery
│   ├── GET  /lottery/history
│   └── GET  /lottery/available
│
├── gifts.py      # 礼品兑换
│   ├── GET  /gifts
│   └── POST /gifts/exchange
│
├── admin.py      # 家长管理端
└── ai.py         # AI 功能（选书顾问等）
    ├── POST /ai/book-advisor
    └── POST /ai/book-advisor/stream
```

### 4.3 认证机制

所有需要身份的接口通过 JWT 鉴权：

```python
# 请求头携带 Token
Authorization: Bearer <jwt_token>

# FastAPI 依赖注入方式鉴权
async def get_current_user(token: str = Depends(oauth2_scheme)):
    payload = jwt.decode(token, SECRET_KEY)
    return payload["user_id"]
```

JWT 的 `SECRET_KEY` 与 Supabase 项目的 JWT Secret 保持一致，减少密钥管理复杂度。

---

## 五、数据库（Supabase PostgreSQL）

### 5.1 为什么选 Supabase

Supabase 本质是**托管 PostgreSQL + PostgREST + 认证服务**。对于独立开发者：

- 免费额度够用（500MB 存储、50k 月活）
- 免运维，有可视化管理后台
- 支持 REST API 直接操作，也可用 Python SDK
- 自带 Row Level Security，数据安全有保障

我们的用法：FastAPI 后端用 `supabase-py` SDK 操作数据，把 Supabase 当普通 PostgreSQL 用，同时借助其认证基础设施。

### 5.2 核心数据表关系

```
users（用户表）
  │
  ├── family_id ──► families（家庭表）
  │
  ├── checkin_records（打卡记录）
  │     ├── task_type：任务类型
  │     ├── points_earned：获得积分
  │     └── status：pending / approved / rejected
  │
  ├── fund_transactions（积分流水）
  │     ├── amount：金额
  │     ├── type：income / expense
  │     └── description：说明
  │
  └── lottery_records（抽奖记录）
        └── gift_id ──► gifts（礼品库）
```

---

## 六、kidnow.club 官网（Vue3 + Vite）

### 6.1 为什么单独做官网

小程序不能被搜索引擎索引，也没有独立域名入口。官网解决两个问题：

1. **品牌落地页**：用户搜索到后可了解产品全貌
2. **AI 选书顾问**：需要 Web 界面提供更丰富的交互体验

### 6.2 项目结构

```
kidnow-web/
├── src/
│   ├── views/
│   │   ├── Home.vue        # 首页：产品介绍 + 功能亮点
│   │   ├── AIStudy.vue     # AI 选书顾问对话界面
│   │   └── Products.vue    # 产品页
│   ├── components/
│   │   ├── NavBar.vue      # 顶部导航栏
│   │   ├── HeroSection.vue # 首屏大图区
│   │   ├── FeatureCards.vue# 功能卡片列表
│   │   └── AppFooter.vue   # 页脚
│   ├── api/
│   │   └── index.js        # 统一 API 请求封装
│   └── router/
│       └── index.js        # Vue Router 路由配置
├── dist/                   # 构建产物（直接上传服务器）
└── vite.config.js
```

### 6.3 Nginx 配置要点

```nginx
server {
    listen 80;
    server_name kidnow.club www.kidnow.club;

    root /var/www/kidnow;
    index index.html;

    # Vue Router history 模式：所有路由回退到 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源长效缓存（Vite 构建带 hash，可安全开启永久缓存）
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # API 反向代理：官网请求 → 服务器A FastAPI
    location /api/ {
        proxy_pass http://<服务器A_IP>:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```

> **`try_files $uri $uri/ /index.html` 是关键**——Vue Router 用 history 模式时，用户刷新 `/ai-study` 这类子页面，Nginx 找不到对应文件就会 404。加了这行后会自动回退到 `index.html`，让前端路由接管。

---

## 七、部署流程

### 7.1 服务器A（FastAPI 后端）

```bash
# 使用 uvicorn 启动
uvicorn app.main:app --host 0.0.0.0 --port 8000

# 生产环境建议配合 supervisor 或 systemd 保活
```

### 7.2 服务器B（Nginx + Vue3 静态站）

```bash
# ① 本地构建
cd kidnow-web
npm run build      # 生成 dist/

# ② 上传到服务器B
scp -r dist/* user@<服务器B_IP>:/var/www/kidnow/

# ③ 服务器B 安装 Nginx + Certbot
sudo apt install nginx certbot python3-certbot-nginx

# ④ 写入 Nginx 配置（参考上文 6.3 节）
sudo nginx -t && sudo systemctl reload nginx

# ⑤ 备案通过后申请 SSL 证书
sudo certbot --nginx -d kidnow.club -d www.kidnow.club
```

### 7.3 DNS 解析

```
kidnow.club     A 记录  →  <服务器B_IP>
www.kidnow.club A 记录  →  <服务器B_IP>
```

API 不需要单独域名，通过 Nginx 的 `/api/` 路径代理透明转发。

---

## 八、后续规划

| 功能 | 技术方案 |
|------|---------|
| AI 选书顾问 | 接入大模型 + 知识库，流式返回 |
| 小程序 HTTPS | 备案通过 → Certbot 申请证书 → 配置合法域名 |
| 消息推送 | 微信订阅消息（打卡审核结果通知） |
| 数据统计 | 孩子成长报告，按周/月汇总展示 |

---

## 总结

| 层级 | 技术选型 | 理由 |
|------|---------|------|
| 小程序前端 | 微信原生框架 | 无需审核额外框架，发布最快 |
| 后端 API | Python FastAPI | 轻量异步，AI 扩展方便 |
| 数据库 | Supabase PostgreSQL | 托管省心，免费额度够用 |
| 官网前端 | Vue3 + Vite | 构建快，组件化好维护 |
| Web 服务器 | Nginx | 静态托管 + 反向代理一体 |
| 域名 / DNS | 腾讯云 DNSPod | 国内解析快，管理方便 |

整套架构两台轻量服务器即可跑通，适合独立开发者从 0 到 1 快速验证产品。

---

> 项目目前处于内测阶段，欢迎交流探讨。

本文介绍一款面向家庭场景的儿童成长管理系统「成长基金小管家」的完整技术架构，涵盖微信小程序客户端、Python FastAPI 后端、Supabase 云数据库，以及 Vue3 官网的双服务器部署方案。适合想用小成本实现全栈产品的独立开发者参考。

从零搭建儿童成长激励系统：微信小程序 + Web 官网全栈架构解析

云计算

前端

后端

「成长基金小管家」是一款家庭共用的微信小程序，采用Python FastAPI后端+Supabase云数据库+双服务器部署方案。孩子通过完成任务获得积分，家长可管理家庭账户。系统包含微信小程序、Vue3官网，支持AI选书顾问功能，适合独立开发者低成本实现全栈产品。

数据结构

密钥管理

数据安全

云数据库

云服务器

PostgreSQL

数据库

服务器

路由

Python

2026上云采购 | AI焕新·智启新局

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


domain

4核4G3M云服务器 新用户低至38元/年！

lighthouse

DNS解析新购特惠59元起，续费优惠低至5.3折！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

从零搭建儿童成长激励系统：微信小程序 + Web 官网全栈架构解析-腾讯云开发者社区-腾讯云

从零搭建儿童成长激励系统：微信小程序 + Web 官网全栈架构解析

从零搭建儿童成长激励系统：微信小程序 + Web 官网全栈架构解析

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐