理解前端和后端的区别，是搞懂网站工作原理的核心。
前端和后端分别在哪
┌─────────────────────────┐ ┌─────────────────────────┐
│ 你的浏览器（前端） │ │ 远方的服务器（后端） │
│ │ │ │
│ • 显示页面（HTML/CSS） │ ←─网络─→ • 存数据（数据库） │
│ • 按钮、表单、交互 │ │ • 处理业务逻辑 │
│ • JavaScript代码 │ │ • 验证权限 │
│ • 你眼睛能看到的一切 │ │ • 返回HTML/JSON数据 │
│ │ │ │
│ 在你自己电脑上运行 │ │ 在服务器上运行 │
└─────────────────────────┘ └─────────────────────────┘
- 前端：运行在用户浏览器里的代码，用户看得到、改得了、控制得了
- 后端：运行在远方服务器上的代码，用户看不到源码，只能通过HTTP请求和它交互
前端做什么
前端负责用户能看到和交互的一切：
| 职责 | 举例 |
|---|---|
| 页面结构 | HTML：标题、段落、图片、按钮、表单 |
| 页面样式 | CSS：颜色、字体、布局、动画、响应式 |
| 用户交互 | JavaScript：点击按钮弹窗、表单提交前检查、动态更新内容 |
| 用户体验 | 实时提示（“密码太短”）、加载动画、路由切换 |
| 发送请求 | 用 fetch/axios 调后端API获取数据 |
前端技术栈：HTML、CSS、JavaScript，以及React、Vue、Angular等框架。
后端做什么
后端负责用户看不到但必须有人做的事情：
| 职责 | 举例 |
|---|---|
| 存储数据 | 读写数据库（用户信息、文章、订单） |
| 业务逻辑 | 注册/登录、下单支付、权限判断 |
| 安全控制 | 验证用户身份、检查权限、防止恶意请求 |
| 数据处理 | 计算、筛选、生成动态内容 |
| 提供API | 接收前端请求，返回JSON数据 |
后端技术栈：Python（Django/Flask/FastAPI）、Node.js（Express/Koa/Nest）、Java（Spring）、Go、PHP 等。
为什么安全检查必须在后端做
前端代码在用户手里，用户想怎么改就怎么改。
比如登录页面前端检查”密码不能少于6位”：
// 前端JavaScript——在用户浏览器里运行
function login() {
if (password.length < 6) {
alert("密码不能少于6位！");
return; // 拦住请求
}
fetch("/api/login", { body: JSON.stringify({password}) });
}
攻击者可以轻松绕过：
- F12打开开发者工具，删掉这段检查代码
- 用Postman/curl直接构造HTTP请求，不走浏览器
- 在控制台自己写fetch发请求
# 直接发请求，完全绕过前端检查
curl -X POST https://example.com/api/login -d '{"password":"123"}'
前端检查是为了用户体验，后端检查才是为了安全。
| 前端检查 | 后端检查 | |
|---|---|---|
| 能被绕过吗 | ✅ 轻易绕过 | ❌ 绕不过（代码在服务器上） |
| 作用 | 即时反馈、减少无效请求、引导用户 | 真正的安全防线 |
| 比喻 | 餐厅门口迎宾员（提醒衣冠不整） | 真正的检票员（必须有票） |
规则：两边都要做，但安全只信后端。 前端做了的检查，后端必须再做一遍。
静态站 vs 动态站
Hexo、Hugo、Quartz（你的数字花园）这类工具叫静态站点生成器（SSG），它们有一个特殊的工作模式：
你本地电脑 服务器（用户访问时）
┌─────────────┐ ┌──────────────────┐
│ Hexo/Quartz│ 构建生成 │ 只有静态文件 │
│ (Node.js) │ public/ │ │
│ Markdown ───┼──────────────────→ │ HTML/CSS/JS │
│ 主题/配置 │ 上传部署 │ 图片 │
│ │ │ ❌ 没有数据库 │
│ 构建时有后端 │ │ ❌ 没有后端代码 │
│ 逻辑（本地） │ │ ❌ 没有用户系统 │
└─────────────┘ └──────────────────┘
构建阶段 运行阶段（只有前端）
关键区别是构建阶段和运行阶段：
| 静态博客（Hexo/Quartz/Hugo） | 动态博客（WordPress/Halo） | |
|---|---|---|
| 服务器上跑什么 | 只有HTML文件，Web服务器直接返回 | 后端程序 + 数据库，每次请求实时生成页面 |
| 有后端吗 | ❌ 部署后没有 | ✅ 有后端代码持续运行 |
| 有数据库吗 | ❌ 没有 | ✅ 有（MySQL/PostgreSQL等） |
| 用户评论/注册 | 需要接入第三方（Giscus/Waline） | 自带 |
| 性能 | 极快（直接返回文件，CDN缓存友好） | 需查数据库、渲染模板 |
| 安全性 | 极高（攻击面极小） | 需要持续更新补丁 |
| 托管成本 | 免费（GitHub Pages/Cloudflare Pages） | 需要买服务器 |
你的数字花园属于哪种
你的 rgarden 是纯静态站：
- Quartz 在你本地构建时生成HTML
- GitHub Actions 构建后推送到 Cloudflare Pages
- 用户访问时，Cloudflare 直接返回静态HTML文件
- 没有数据库、没有后端代码、没有登录系统
这也是为什么你的数字花园天然很安全——没有后端，大部分Web漏洞根本不存在。详见 06-Web安全入门。
静态站怎么实现动态功能
纯静态站只能”看”，但通过以下方式可以获得交互能力：
-
第三方服务嵌入：评论用Giscus、搜索用本地JS/Algolia、统计用Cloudflare Analytics。调用外部API，你服务器还是只返回静态文件。
-
Serverless函数：Cloudflare Pages/Vercel支持部署无服务器函数（如
/api/xxx写一小段JS），访问时按需运行。这有一点点”后端”，但不是传统常驻服务器。 -
JavaScript在浏览器端完成：比如全站搜索可以在浏览器里用JS加载索引数据搜索，不需要后端。
下一步：06-Web安全入门
相关：04-Web基础 ｜ 03-端口与HTTPS ｜ 返回目录