预计阅读时间：19 分钟

🚀 超前科技感个人博客 — 前后端分离架构设计

一、整体架构概览

┌─────────────────────────────────────────────────────────────────┐
│                          CDN / 负载均衡                          │
│                        Cloudflare / Nginx                       │
└────────┬────────────────────────┬────────────────┬──────────────┘
         │                        │                │
    ┌────▼────┐            ┌──────▼──────┐   ┌────▼────┐
    │ 前端 SPA │            │ 后端 API     │   │ 管理后台 │
    │ React +  │   HTTP/REST│ NestJS      │   │ React   │
    │ Vite     │ ◄────────► │ + WebSocket  │   │ Admin   │
    │          │            │              │   │         │
    └──────────┘            └──────┬───────┘   └─────────┘
                                   │
                    ┌──────────────┼──────────────────┐
                    │              │                   │
              ┌─────▼─────┐  ┌────▼────┐       ┌──────▼──────┐
              │ PostgreSQL │  │  Redis  │       │  MinIO/S3   │
              │  主数据库   │  │  缓存   │       │  对象存储   │
              └───────────┘  └─────────┘       │ (图片/文件)  │
                                                └─────────────┘

层级	技术选型	作用
前端	React 19 + Vite + TypeScript	用户界面，SSR 可选
后端	NestJS + TypeScript	RESTful API + WebSocket
数据库	PostgreSQL 16	主数据存储
缓存	Redis 7	会话缓存、文章缓存、队列
存储	MinIO / 阿里云OSS	图片、附件、静态资源
网关	Nginx / Cloudflare	反向代理、限流、SSL

二、顶级项目结构（Monorepo）

blog/
├── packages/                     # 共享包
│   ├── shared/                   # 共享类型、DTO、常量
│   │   ├── src/
│   │   │   ├── types/            # 共用 TS 类型 (IArticle, IUser 等)
│   │   │   ├── dto/              # 请求/响应 DTO
│   │   │   ├── enums/            # 枚举常量
│   │   │   └── utils/            # 共享工具函数
│   │   └── package.json
│   │
│   └── eslint-config/            # 统一 ESLint 配置
│
├── apps/
│   ├── client/                   # ===== 前端 (SPA) =====
│   │   ├── public/
│   │   │   ├── fonts/            # 自定义字体
│   │   │   ├── images/           # 静态图片
│   │   │   └── models/           # 3D 模型文件
│   │   │
│   │   ├── src/
│   │   │   ├── main.tsx          # 入口
│   │   │   ├── App.tsx           # 根组件（路由 + 全局 Provider）
│   │   │   │
│   │   │   ├── pages/            # 路由页面
│   │   │   │   ├── Home/         # 首页（Terminal 入口 + 最新文章）
│   │   │   │   ├── Posts/        # 文章列表 + 详情
│   │   │   │   ├── Projects/     # 项目展示墙
│   │   │   │   ├── About/        # 关于页 + 技能星盘
│   │   │   │   ├── Guestbook/    # 留言板
│   │   │   │   ├── Snippets/     # 代码片段
│   │   │   │   └── NotFound/     # 404 故障风
│   │   │   │
│   │   │   ├── components/       # UI 组件目录
│   │   │   │   ├── ui/           # 基础组件（Button, Card, Input...）
│   │   │   │   │   ├── Button.tsx      # 霓虹光效按钮
│   │   │   │   │   ├── Card.tsx        # 玻璃态卡片
│   │   │   │   │   ├── Input.tsx       # 发光输入框
│   │   │   │   │   ├── Badge.tsx       # 全息标签
│   │   │   │   │   ├── Modal.tsx       # 毛玻璃模态框
│   │   │   │   │   └── Toast.tsx       # 流动光提示
│   │   │   │   │
│   │   │   │   ├── layout/       # 布局组件
│   │   │   │   │   ├── Navbar.tsx       # 悬浮导航（滚轮变色）
│   │   │   │   │   ├── Footer.tsx       # 底部星座连线
│   │   │   │   │   ├── Sidebar.tsx      # 侧边栏目录
│   │   │   │   │   └── MobileNav.tsx    # 移动端抽屉
│   │   │   │   │
│   │   │   │   ├── effects/      # 特效组件
│   │   │   │   │   ├── ParticleBackground.tsx  # Three.js 粒子
│   │   │   │   │   ├── GridGlow.tsx           # 网格光效
│   │   │   │   │   ├── GlitchText.tsx         # 故障文字
│   │   │   │   │   ├── TypeWriter.tsx         # 打字机
│   │   │   │   │   ├── ScanLine.tsx           # CRT 扫描线
│   │   │   │   │   └── Aurora.tsx             # 极光动态背景
│   │   │   │   │
│   │   │   │   ├── blog/         # 博客组件
│   │   │   │   │   ├── PostCard.tsx        # 3D 倾斜卡片
│   │   │   │   │   ├── PostHeader.tsx      # 文章头部
│   │   │   │   │   ├── TableOfContents.tsx # 悬浮目录
│   │   │   │   │   ├── ReadingProgress.tsx # 光效进度条
│   │   │   │   │   ├── CodeBlock.tsx       # 霓虹代码块
│   │   │   │   │   └── CommentSection.tsx  # 评论区
│   │   │   │   │
│   │   │   │   └── home/         # 首页组件
│   │   │   │       ├── HeroSection.tsx     # 3D 欢迎区
│   │   │   │       ├── TerminalIntro.tsx   # Terminal 交互
│   │   │   │       ├── FeaturedPosts.tsx   # 精选轮播
│   │   │   │       └── StatsBoard.tsx      # 数据面板
│   │   │   │
│   │   │   ├── hooks/            # 自定义 Hooks
│   │   │   │   ├── useMousePosition.ts
│   │   │   │   ├── useScrollProgress.ts
│   │   │   │   ├── useIntersectionObserver.ts
│   │   │   │   └── useApi.ts              # 封装 API 请求
│   │   │   │
│   │   │   ├── services/         # API 调用层
│   │   │   │   ├── http.ts               # Axios 实例（拦截器）
│   │   │   │   ├── postService.ts        # 文章模块 API
│   │   │   │   ├── projectService.ts     # 项目模块 API
│   │   │   │   ├── commentService.ts     # 评论模块 API
│   │   │   │   ├── authService.ts        # 认证模块 API
│   │   │   │   └── guestbookService.ts   # 留言模块 API
│   │   │   │
│   │   │   ├── stores/           # 状态管理（Zustand）
│   │   │   │   ├── useThemeStore.ts      # 主题状态
│   │   │   │   ├── useUserStore.ts       # 用户状态
│   │   │   │   └── useUIStore.ts         # UI 状态（侧边栏、弹窗）
│   │   │   │
│   │   │   ├── styles/           # 样式
│   │   │   │   ├── globals.css           # 全局样式 + CSS 变量
│   │   │   │   ├── animations.css        # 关键帧动画
│   │   │   │   └── markdown.css          # 文章内容样式
│   │   │   │
│   │   │   └── utils/            # 工具函数
│   │   │       └── cn.ts                 # classNames 合并
│   │   │
│   │   ├── index.html
│   │   ├── vite.config.ts
│   │   ├── tailwind.config.ts
│   │   ├── tsconfig.json
│   │   └── package.json
│   │
│   ├── server/                   # ===== 后端 API (NestJS) =====
│   │   ├── src/
│   │   │   ├── main.ts                   # 入口（启动 HTTP + WebSocket）
│   │   │   ├── app.module.ts             # 根模块
│   │   │   │
│   │   │   ├── common/                   # 公共模块
│   │   │   │   ├── decorators/           # 自定义装饰器
│   │   │   │   ├── filters/              # 异常过滤器
│   │   │   │   ├── guards/               # 守卫（JWT Auth Guard）
│   │   │   │   ├── interceptors/         # 拦截器（日志、响应格式）
│   │   │   │   ├── pipes/                # 管道（参数校验）
│   │   │   │   ├── middleware/           # 中间件（限流、CORS）
│   │   │   │   └── constants/            # 全局常量
│   │   │   │
│   │   │   ├── modules/                  # 业务模块
│   │   │   │   ├── posts/                # 文章模块
│   │   │   │   │   ├── posts.module.ts
│   │   │   │   │   ├── posts.controller.ts    # REST 路由
│   │   │   │   │   ├── posts.service.ts        # 业务逻辑
│   │   │   │   │   ├── posts.gateway.ts        # WebSocket 网关
│   │   │   │   │   ├── dto/                    # 请求 DTO
│   │   │   │   │   ├── entities/               # 实体/模型
│   │   │   │   │   └── posts.controller.spec.ts
│   │   │   │   │
│   │   │   │   ├── projects/             # 项目模块
│   │   │   │   ├── comments/             # 评论模块
│   │   │   │   ├── guestbook/            # 留言板模块
│   │   │   │   ├── snippets/             # 代码片段模块
│   │   │   │   ├── auth/                 # 认证模块（JWT + OAuth）
│   │   │   │   ├── users/                # 用户模块
│   │   │   │   ├── tags/                 # 标签模块
│   │   │   │   ├── analytics/            # 数据统计模块
│   │   │   │   ├── upload/               # 文件上传模块
│   │   │   │   └── search/               # 搜索模块
│   │   │   │
│   │   │   └── config/                   # 配置模块
│   │   │       ├── database.config.ts     # 数据库配置
│   │   │       ├── redis.config.ts        # Redis 配置
│   │   │       ├── jwt.config.ts          # JWT 配置
│   │   │       └── cors.config.ts         # CORS 配置
│   │   │
│   │   ├── prisma/                       # Prisma ORM
│   │   │   ├── schema.prisma             # 数据库模型定义
│   │   │   └── seed.ts                   # 种子数据
│   │   │
│   │   ├── test/                         # 端到端测试
│   │   ├── nest-cli.json
│   │   ├── tsconfig.json
│   │   └── package.json
│   │
│   └── admin/                     # ===== 管理后台 =====
│       ├── src/
│       │   ├── pages/             # 后台页面
│       │   │   ├── Dashboard/     # 仪表盘
│       │   │   ├── Posts/         # 文章管理（Markdown 编辑器）
│       │   │   ├── Comments/      # 评论审核
│       │   │   ├── Users/         # 用户管理
│       │   │   ├── Settings/      # 站点设置
│       │   │   └── Analytics/     # 数据看板
│       │   │
│       │   ├── components/        # 后台组件
│       │   │   ├── RichEditor.tsx # 富文本/Markdown 编辑器
│       │   │   ├── ImageUploader.tsx
│       │   │   └── DataTable.tsx
│       │   │
│       │   ├── services/          # API 调用
│       │   └── hooks/
│       │
│       ├── vite.config.ts
│       └── package.json
│
├── docker/                        # Docker 编排
│   ├── docker-compose.yml         # 全栈一键启动
│   ├── Dockerfile.client
│   ├── Dockerfile.server
│   └── nginx/
│       ├── nginx.conf             # 反向代理配置
│       └── ssl/                   # SSL 证书
│
├── scripts/                       # 开发/部署脚本
│   ├── dev.sh                     # 本地开发启动
│   ├── seed.sh                    # 数据初始化
│   └── deploy.sh                  # 部署脚本
│
├── .github/                       # CI/CD
│   └── workflows/
│       ├── ci.yml                 # PR 自动测试
│       └── deploy.yml             # 自动部署
│
├── .env.example                   # 环境变量模板
├── .gitignore
├── package.json                   # 根 Monorepo 配置
├── pnpm-workspace.yaml           # pnpm workspace
├── turbo.json                     # Turborepo 构建缓存
└── README.md

三、数据库设计 (Prisma Schema)

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// ---- 用户 ----
model User {
  id        String   @id @default(cuid())
  username  String   @unique
  email     String   @unique
  password  String
  avatar    String?
  bio       String?
  role      Role     @default(USER)     // USER | ADMIN
  githubId  String?  @unique            // OAuth 绑定
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  posts       Post[]
  comments    Comment[]
  guestbooks  Guestbook[]
  likes       Like[]
  sessions    Session[]
}

// ---- 文章 ----
model Post {
  id          String   @id @default(cuid())
  title       String
  slug        String   @unique
  excerpt     String?                     // 文章摘要
  content     String                      // Markdown 正文
  coverImage  String?                     // 封面图
  published   Boolean  @default(false)
  pinned      Boolean  @default(false)    // 是否置顶
  views       Int      @default(0)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  publishedAt DateTime?

  authorId  String
  author    User     @relation(fields: [authorId], references: [id])

  tags      TagRelation[]
  comments  Comment[]
  likes     Like[]
}

// ---- 标签 ----
model Tag {
  id        String @id @default(cuid())
  name      String @unique
  color     String?                    // 标签颜色（用于 UI）

  posts     TagRelation[]
}

model TagRelation {
  postId String
  tagId  String
  post   Post @relation(fields: [postId], references: [id], onDelete: Cascade)
  tag    Tag  @relation(fields: [tagId], references: [id], onDelete: Cascade)

  @@id([postId, tagId])
}

// ---- 项目 ----
model Project {
  id          String   @id @default(cuid())
  title       String
  slug        String   @unique
  description String
  content     String?                    // 详细介绍（Markdown）
  coverImage  String?
  techStack   String[]                   // ["React", "Three.js", "Go"]
  liveUrl     String?                    // 线上地址
  githubUrl   String?                    // 源码地址
  featured    Boolean  @default(false)
  sortOrder   Int      @default(0)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

// ---- 评论 ----
model Comment {
  id        String   @id @default(cuid())
  content   String
  postId    String
  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
  authorId  String
  author    User     @relation(fields: [authorId], references: [id])
  parentId  String?                      // 回复某条评论（嵌套评论）
  parent    Comment?  @relation("CommentReplies", fields: [parentId], references: [id])
  replies   Comment[] @relation("CommentReplies")
  likes     Int      @default(0)
  createdAt DateTime @default(now())
}

// ---- 留言板 ----
model Guestbook {
  id        String   @id @default(cuid())
  content   String
  authorId  String
  author    User     @relation(fields: [authorId], references: [id])
  createdAt DateTime @default(now())
}

// ---- 点赞 ----
model Like {
  id        String   @id @default(cuid())
  userId    String
  user      User     @relation(fields: [userId], references: [id])
  postId    String?
  post      Post?    @relation(fields: [postId], references: [id], onDelete: Cascade)
  commentId String?
  comment   Comment? @relation(fields: [commentId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())

  @@unique([userId, postId])      // 一篇文章一个用户只能点一次赞
}

// ---- 站点统计 ----
model SiteStats {
  id         String @id @default("main")
  totalViews Int    @default(0)
  totalPosts Int    @default(0)
  totalUsers Int    @default(0)
  updatedAt  DateTime @updatedAt
}

// ---- 会话 ----
model Session {
  id        String   @id @default(cuid())
  userId    String
  user      User     @relation(fields: [userId], references: [id])
  token     String   @unique
  expiresAt DateTime
  createdAt DateTime @default(now())
}

enum Role {
  USER
  ADMIN
}

四、API 接口设计 (RESTful)

4.1 文章模块 `/api/v1/posts`

方法	路径	说明	权限
GET	`/posts`	文章列表（分页+筛选+排序）	公开
GET	`/posts/:slug`	文章详情	公开
POST	`/posts`	创建文章	ADMIN
PUT	`/posts/:id`	更新文章	ADMIN
DELETE	`/posts/:id`	删除文章	ADMIN
POST	`/posts/:id/views`	阅读量 +1	公开
POST	`/posts/:id/like`	点赞/取消	USER

4.2 其他模块

方法	路径	说明
GET/POST	`/api/v1/comments`	评论列表 / 发表评论
GET/POST	`/api/v1/guestbook`	留言列表 / 发表留言
GET/POST	`/api/v1/projects`	项目列表 / CRUD
POST	`/api/v1/auth/login`	登录（JWT）
POST	`/api/v1/auth/register`	注册
POST	`/api/v1/auth/github`	GitHub OAuth
GET	`/api/v1/search?q=xxx`	全站搜索
POST	`/api/v1/upload`	文件上传
GET	`/api/v1/analytics`	统计数据

4.3 WebSocket 事件

事件	方向	说明
`post:view`	Client → Server	实时阅读量推送
`post:updated`	Server → Client	文章更新通知
`comment:new`	Server → Client	新评论通知
`online:count`	Server → Client	实时在线人数

五、数据流设计

┌──────────┐     ┌─────────────┐     ┌─────────────┐     ┌──────────┐
│ 用户操作   │ ──→│  前端 Service │ ──→│  NestJS API  │ ──→│    DB    │
│ (点击/输入)│    │ (Axios)     │     │ (Controller) │     │ Prisma   │
└──────────┘     └─────────────┘     └──────┬──────┘     └──────────┘
                                            │
                                     ┌──────▼──────┐     ┌──────────┐
                                     │  Redis 缓存   │ ◄──│  缓存策略 │
                                     │              │     │          │
                                     └─────────────┘     └──────────┘

缓存策略:
  Cache-Aside: 读: 先查 Redis → 未命中 → 查 DB → 写回 Redis
               写: 更新 DB → 删除缓存 → 下次读重建
  TTL:         文章详情: 1h / 文章列表: 30min / 标签: 1h
  Cache Key:   blog:post:{slug}  /  blog:posts:page:{n}  /  blog:tags

六、交互设计（客户端渲染流程）

页面加载
  │
  ├── 1. 初始化 Three.js 粒子背景
  │     （低优先级，不影响首屏）
  │
  ├── 2. 获取站点元数据
  │     GET /api/v1/site-meta
  │     → 站点名、头像、标语、标签云
  │
  ├── 3. 首页 → 并发请求
  │     ├── GET /api/v1/posts?page=1&limit=6  (最新文章)
  │     ├── GET /api/v1/projects?featured=true (精选项目)
  │     └── GET /api/v1/analytics             (统计数据)
  │
  └── 4. 文章页 → 瀑布请求
        ├── GET /api/v1/posts/:slug           (文章内容)
        ├── GET /api/v1/comments?postId=xxx   (评论列表)
        └── WebSocket connect                 (实时在线)

七、环境配置 & 部署

7.1 环境变量 (.env)

# 数据库
DATABASE_URL="postgresql://user:pass@localhost:5432/blog"
REDIS_URL="redis://localhost:6379"

# JWT
JWT_SECRET="your-secret-key"
JWT_EXPIRES_IN="7d"

# OAuth
GITHUB_CLIENT_ID="xxx"
GITHUB_CLIENT_SECRET="xxx"

# 对象存储
OSS_ENDPOINT="https://oss-cn-hangzhou.aliyuncs.com"
OSS_ACCESS_KEY="xxx"
OSS_SECRET_KEY="xxx"
OSS_BUCKET="blog-assets"

# 前端
VITE_API_BASE_URL="https://api.blog.com/api/v1"
VITE_WS_URL="wss://api.blog.com"

7.2 docker-compose.yml

version: "3.8"
services:
  client:
    build:
      context: ./apps/client
      dockerfile: ../../docker/Dockerfile.client
    ports:
      - "3000:80"
    depends_on:
      - server

  server:
    build:
      context: ./apps/server
      dockerfile: ../../docker/Dockerfile.server
    ports:
      - "4000:4000"
    env_file: .env
    depends_on:
      - postgres
      - redis

  admin:
    build:
      context: ./apps/admin
      dockerfile: ../../docker/Dockerfile.client
    ports:
      - "3001:80"
    depends_on:
      - server

  postgres:
    image: postgres:16-alpine
    volumes:
      - pgdata:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: blog
      POSTGRES_USER: blog
      POSTGRES_PASSWORD: ${DB_PASSWORD}

  redis:
    image: redis:7-alpine
    volumes:
      - redisdata:/data
    command: redis-server --requirepass ${REDIS_PASSWORD}

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./docker/nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./docker/nginx/ssl:/etc/nginx/ssl
    depends_on:
      - client
      - server
      - admin

volumes:
  pgdata:
  redisdata:

7.3 部署架构

                         Cloudflare
                             │
                    ┌────────▼────────┐
                    │    Nginx 网关    │
                    │  → SSL 终止      │
                    │  → 限流 / WAF   │
                    │  → 路由分发      │
                    └───┬────┬────┬───┘
                        │    │    │
                   ┌────▼┐ ┌▼───┐ ┌▼───┐
                   │前端  │ │后端 │ │后台 │
                   │:80   │ │:4000│ │:80  │
                   └─────┘ └────┘ └────┘
                        │         │
                   ┌────▼┐  ┌────▼────┐
                   │CDN   │  │PostgreSQL│
                   │静态  │  │+ Redis   │
                   │缓存  │  └─────────┘
                   └─────┘

部署方案选项:
  方案 A: 单机 Docker Compose（推荐起步）
  方案 B: K8s 集群（高流量时迁移）
  方案 C: 云端托管（Vercel 前端 + Railway 后端 + Neon DB）

八、视觉语言系统（科技感 UI）

8.1 色彩体系

:root {
  /* 背景层级 */
  --bg-deep:      #06060c;   /* 最深空背景 */
  --bg-primary:   #0a0a12;   /* 主背景 */
  --bg-secondary: #11111a;   /* 卡片/区域背景 */
  --bg-glass:     rgba(255, 255, 255, 0.03);  /* 玻璃背景 */

  /* 光效色彩 */
  --accent-cyan:    #00e5ff;
  --accent-purple:  #b388ff;
  --accent-pink:    #ff2d95;
  --accent-gold:    #ffd54f;

  /* 文字 */
  --text-primary:   #e8eaed;
  --text-secondary: #9aa0a6;
  --text-dim:       #5f6368;

  /* 辉光 */
  --glow-cyan:     0 0 15px #00e5ff, 0 0 30px rgba(0, 229, 255, 0.3);
  --glow-purple:   0 0 15px #b388ff, 0 0 30px rgba(179, 136, 255, 0.3);

  /* 边框 */
  --border-glass:  1px solid rgba(255, 255, 255, 0.06);
  --border-glow:   1px solid rgba(0, 229, 255, 0.3);
}

8.2 字体体系

用途	字体	来源
Logo / 大标题	Orbitron 700-900	Google Fonts
正文标题	Syne 600-700	Google Fonts
正文	Inter 300-500	Google Fonts
代码	JetBrains Mono 400-600	本地字体
装饰文字	Major Mono Display	Google Fonts

8.3 科技感 UI 元素清单

元素	技术方案	效果描述
全局粒子背景	Three.js + R3F	动态粒子流，鼠标交互产生波纹
网格光效	Canvas 2D / CSS	科技网格 + 渐变光晕
CRT 扫描线	CSS pseudo-element	复古屏幕叠层，可选开关
玻璃卡片	backdrop-filter: blur	毛玻璃 + 边框发光
故障文字	CSS @keyframes clip	文字错位 + 颜色偏移闪烁
打字机效果	JS cursor + setInterval	Terminal 风格逐字输出
霓虹按钮	box-shadow + filter	悬浮时彩色辉光扩散
3D 倾斜卡片	useMousePosition + transform	鼠标移动时卡片 3D 旋转
滚动进度条	CSS linear-gradient + JS	固定在顶部的光效进度条
加载骨架屏	CSS pulse 动画	内容加载时的科技轮廓占位

九、关键 npm 包清单

9.1 前端 (apps/client)

{
  "dependencies": {
    "react": "^19.x",
    "react-dom": "^19.x",
    "react-router-dom": "^7.x",
    "framer-motion": "^11.x",
    "three": "^0.170.x",
    "@react-three/fiber": "^8.x",
    "@react-three/postprocessing": "^2.x",
    "axios": "^1.x",
    "zustand": "^5.x",
    "dayjs": "^1.x",
    "clsx": "^2.x",
    "tailwind-merge": "^2.x",
    "react-markdown": "^9.x",
    "react-syntax-highlighter": "^15.x",
    "react-helmet-async": "^2.x",
    "swr": "^2.x"
  },
  "devDependencies": {
    "typescript": "^5.x",
    "vite": "^6.x",
    "tailwindcss": "^4.x",
    "@tailwindcss/typography": "^0.5.x",
    "postcss": "^8.x",
    "autoprefixer": "^10.x",
    "eslint": "^9.x",
    "prettier": "^3.x"
  }
}

9.2 后端 (apps/server)

{
  "dependencies": {
    "@nestjs/core": "^11.x",
    "@nestjs/common": "^11.x",
    "@nestjs/platform-express": "^11.x",
    "@nestjs/websockets": "^11.x",
    "@nestjs/jwt": "^11.x",
    "@nestjs/passport": "^11.x",
    "@nestjs/throttler": "^6.x",
    "@nestjs/serve-static": "^5.x",
    "@prisma/client": "^6.x",
    "passport": "^0.7.x",
    "passport-jwt": "^5.x",
    "passport-github2": "^0.1.x",
    "bcrypt": "^5.x",
    "class-validator": "^0.14.x",
    "class-transformer": "^0.5.x",
    "redis": "^4.x",
    "ioredis": "^5.x",
    "socket.io": "^4.x",
    "sharp": "^0.33.x",
    "minio": "^8.x",
    "helmet": "^8.x",
    "reflect-metadata": "^0.2.x",
    "rxjs": "^7.x"
  },
  "devDependencies": {
    "@nestjs/cli": "^11.x",
    "@nestjs/testing": "^11.x",
    "@types/node": "^22.x",
    "prisma": "^6.x",
    "ts-node": "^10.x",
    "ts-loader": "^9.x",
    "typescript": "^5.x",
    "jest": "^29.x",
    "supertest": "^7.x"
  }
}

十、开发路线图

Phase 1 — Monorepo 骨架（Day 1-2）
  □ 初始化 pnpm workspace + Turborepo
  □ 搭建 apps/client (Vite + React + TS)
  □ 搭建 apps/server (NestJS + Prisma)
  □ 搭建 packages/shared
  □ 配置 ESLint + Prettier 统一规则

Phase 2 — 数据库 + API（Day 3-6）
  □ 编写 Prisma Schema → 生成迁移
  □ 实现 User / Auth 模块（JWT + GitHub OAuth）
  □ 实现 Post CRUD + 分页 + 筛选
  □ 实现 Comment、Guestbook、Project 模块
  □ 添加 Redis 缓存层

Phase 3 — 前端基础 UI（Day 7-12）
  □ 科技感色彩系统 + 全局样式
  □ 布局组件（Navbar / Footer / Sidebar）
  □ 特效组件（粒子背景 / 网格光效 / 故障文字）
  □ 基础 UI 组件（Button / Card / Input / Modal）
  □ 主题切换（暗黑 / 赛博 / 浅色）

Phase 4 — 前端交互（Day 13-18）
  □ API Service 层 + Zustand 状态管理
  □ 首页（Terminal 交互 + 精选内容）
  □ 文章列表页（网格/时间轴切换 + 3D 卡片）
  □ 文章详情页（代码高亮 + TOC + 进度条）
  □ 项目展示墙 + 关于页

Phase 5 — 动态功能（Day 19-22）
  □ 评论系统（嵌套回复 + @提及）
  □ 留言板（粒子墙动效）
  □ 全站搜索 + 标签云
  □ WebSocket 实时在线 + 阅读量

Phase 6 — Admin 后台（Day 23-26）
  □ 后台仪表盘
  □ Markdown 编辑器（文章发布）
  □ 图片上传 + 文件管理
  □ 评论审核 + 数据看板

Phase 7 — 部署上线（Day 27-30）
  □ Docker Compose 全栈编排
  □ Nginx 反向代理 + SSL
  □ CI/CD 流水线（GitHub Actions）
  □ 性能优化 + Lighthouse 90+
  □ 自定义域名 + CDN

十一、性能策略

┌────────────────────────────────────────────────────────┐
│                   性能优化策略                            │
├────────────────────────────────────────────────────────┤
│                                                        │
│  前端优化                                               │
│  ────────                                               │
│  • 代码分割: React.lazy + Suspense 按路由分割            │
│  • 图片优化: 延迟加载 + WebP/AVIF 格式 + 模糊占位        │
│  • 字体优化: preload + font-display: swap + 子集化      │
│  • 3D 优化: 移动端降低粒子数 (2000→500)                 │
│  • 动画优化: 仅用 transform/opacity, avoid 重排         │
│  • 请求优化: SWR 缓存 + 乐观更新 + 防抖                 │
│  • 构建优化: Vite 摇树 + 按需 polyfill                  │
│                                                        │
│  后端优化                                               │
│  ────────                                               │
│  • 数据库: 索引覆盖 + 查询优化 + 连接池                  │
│  • 缓存: Redis Cache-Aside + 缓存预热                   │
│  • 限流: @nestjs/throttler 防止刷接口                    │
│  • 压缩: 响应 Gzip/Brotli 压缩                          │
│  • 连接池: Prisma 连接池 + 合理 max_connections          │
│                                                        │
│  部署优化                                               │
│  ────────                                               │
│  • CDN: 静态资源全量缓存到 Cloudflare                    │
│  • Nginx: 静态文件直接响应，不经过 Node                   │
│  • 水平扩展: 后端无状态设计，可多实例部署                 │
│  • 自动备份: 每日数据库 + 文件快照                        │
│                                                        │
└────────────────────────────────────────────────────────┘

本文由 admin 原创，转载请注明出处。

🚀 超前科技感个人博客 — 前后端分离架构设计（全栈版）

🚀 超前科技感个人博客 — 前后端分离架构设计

一、整体架构概览

二、顶级项目结构（Monorepo）

三、数据库设计 (Prisma Schema)

四、API 接口设计 (RESTful)

4.1 文章模块 `/api/v1/posts`

4.2 其他模块

4.3 WebSocket 事件

五、数据流设计

六、交互设计（客户端渲染流程）

七、环境配置 & 部署

7.1 环境变量 (.env)

7.2 docker-compose.yml

7.3 部署架构

八、视觉语言系统（科技感 UI）

8.1 色彩体系

8.2 字体体系

8.3 科技感 UI 元素清单

九、关键 npm 包清单

9.1 前端 (apps/client)

9.2 后端 (apps/server)

十、开发路线图

十一、性能策略

相关推荐

评论

发表评论

🚀 超前科技感个人博客 — 前后端分离架构设计（全栈版）

🚀 超前科技感个人博客 — 前后端分离架构设计

一、整体架构概览

二、顶级项目结构（Monorepo）

三、数据库设计 (Prisma Schema)

四、API 接口设计 (RESTful)

4.1 文章模块 /api/v1/posts

4.2 其他模块

4.3 WebSocket 事件

五、数据流设计

六、交互设计（客户端渲染流程）

七、环境配置 & 部署

7.1 环境变量 (.env)

7.2 docker-compose.yml

7.3 部署架构

八、视觉语言系统（科技感 UI）

8.1 色彩体系

8.2 字体体系

8.3 科技感 UI 元素清单

九、关键 npm 包清单

9.1 前端 (apps/client)

9.2 后端 (apps/server)

十、开发路线图

十一、性能策略

相关推荐

评论

发表评论

4.1 文章模块 `/api/v1/posts`