24 篇文章，覆盖了从「浏览器里输入网址」到「全栈架构复盘」的整条链路。这篇把整个路线串起来，画一张你可以照着走的地图。

路线总览

第 1-3 篇   浏览器基础 — 网页怎么打开、三件套是什么
第 4-7 篇   HTML/CSS 布局 — 语义化、Flexbox、Grid、响应式
第 8-10 篇  JavaScript 基础 — DOM、Fetch、异步
第 11-12 篇 开发环境 + 第一个网站
第 13-15 篇 框架入门 — Astro、组件化、daisyUI
第 16-18 篇 后端 + API + 数据库
第 19-20 篇 全栈联调 — 前端调后端
第 21-22 篇 部署上线 — Nginx、域名、HTTPS
第 23 篇    白物集完整架构复盘
第 24 篇    [本篇] 路线图汇总

每一篇都引用白物集项目的真实代码，你不是在学「某个教程的 demo」，你是在看一个线上产品怎么搭的。

四个阶段，逐级进阶

阶段一：地基（第 1-3 篇）

理解浏览器的工作方式。打开 Chrome DevTools 的 Network 面板，刷新任何一个页面，看请求列表——这就是你的调试起点。

阶段二：三件套实战（第 4-12 篇）

从语义化 HTML 到 CSS Grid 布局，再到 JavaScript 控制 DOM。这个阶段的目标不是背 API，是能写出一个不依赖框架的静态页面。白物集的首页用 Astro 组件拼接，但每个组件内部依然是 HTML template + CSS class + 少量交互 JS——框架只是胶水，核心还是三件套。

阶段三：全栈框架（第 13-20 篇）

这是从「写页面」到「写产品」的跨越。

以白物集为例，它的技术栈是：

Astro (SSR)  →  Express API  →  Supabase (PostgreSQL)
    ↑               ↑
  缓存层           Zod 校验
  (进程内 Map)     限流 (rate-limit)

前端调用后端的流程在 src/lib/api.js 中清晰可见：

const cache = new Map();
const TTL = { list: 60_000, detail: 120_000 };

function cached(key, ttl, fetcher) {
  const entry = cache.get(key);
  if (entry && (Date.now() - entry.time) < ttl) {
    return entry.data;  // 命中缓存，跳过网络请求
  }
  return fetcher().then(data => {
    cache.set(key, { data, time: Date.now() });
    return data;
  });
}

这段代码只有 20 行，但它实现了一个 SSR 级缓存层——首页列表 60 秒过期，文章详情 120 秒过期，比后端 API 的缓存更早失效，确保用户能看到新内容又不压垮数据库。

后端 19 个路由按职责分层挂载：

const v1 = express.Router();
v1.use('/articles', apiLimiter, articlesRouter);
v1.use('/content/ingest', ingestLimiter, ingestRouter);
v1.use('/knowledge-cards', apiLimiter, cardsRouter);
// 限流、健康检查、统计…
app.use('/api/v1', v1);

全栈联调的痛点：前端 SSR 渲染时 API 不可用，页面直接抛 500。白物集的方案是 api.js 里的缓存降级——只要缓存没过期，即便后端重启页面也能正常显示。

阶段四：部署与运维（第 21-23 篇）

Nginx 反向代理 → systemd 托管进程 → 域名 DNS 解析 → HTTPS 证书续期。这些是让网站能被「外面的人」访问的最小基础设施。

白物集的 Astro SSR 构建产出一个 Node.js 独立的 server entry，不需要额外 Node 框架就能跑：

// astro.config.mjs
export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' }),
  site: 'https://baiwuji.top',
});

这个 standalone 模式意味着 node ./dist/server/entry.mjs 一行命令就能启动，配合 Nginx 反向代理就是一套完整的线上架构。

你的下一步

到这 24 篇学完，你可以做三件事：

1. 复刻一个白物集 — 从 API 层到前端 SSR，全链路自己搭一遍。白物集的源码就在那里，每个路由、每个组件都是实际在线上跑的。
2. 换个框架试试 — 把同样的内容用 Next.js 或 Nuxt 实现一遍，你会发现「架构思路是一样的，只是语法不同」。
3. 加功能 — 给白物集加一个搜索功能、加评论系统、加用户登录。路线图上的每个模块你都知道它在哪一层、调哪个接口。

你打开的每个页面背后，都是这三样东西：前端渲染 → API 调取 → 数据库读写。现在你都知道它们怎么连起来的了。

下一篇，就没有下一篇了——动手写你自己的第一个全栈项目吧。