这一组覆盖「网页前端」全部章节，在后端 API 之上用 Leaf 模板搭出可交互的网站：页面、表单、登录、分类、用户页等。

Vapor 大型教程2026-08-05

Leaf 模板引擎

接口返回 JSON 是给前端 App 用的；但要做一个人人能直接打开的网站，得返回 HTML。Leaf 就是 Vapor 自带的模板语言：把变量塞进页面，动态生成最终 HTML。

Vapor 大型教程2026-08-05

中间件

中间件夹在「客户端请求」和「服务端响应」中间，能在请求到达路由前、响应返回浏览器前做各种处理。本文先认识 Vapor 的几个内置中间件。

Vapor 大型教程2026-08-05

数据校验

表单提交的数据不一定靠谱。本文教你用 Vapor 3 的 Validatable 协议校验注册表单：既支持字段级规则，也能自定义「两次密码一致」这样的跨字段校验，并把错误提示回显到页面。

Vapor 大型教程2026-08-05

Cookie 与 Session

网站要记住「你是谁」，靠的就是 Cookie 和 Session。本文用 Vapor 3 的 SessionMiddleware 实现登录与会话认证，并用 Cookie 确认提示和 CSRF Token 加固 Web 应用。

Vapor 大型教程2026-08-05

提供文件下载

网站离不开图片、样式表这些静态资源。本文用 Vapor 3 的 FileMiddleware 把 Public 目录变成文件服务根目录，轻松托管与下载文件。

Vapor 大型教程2026-08-05

数据库迁移

随着功能迭代，数据表结构也得跟着变。本文用 Vapor 3 的 Fluent 迁移，给 User 加 Twitter 字段、给 Category 加唯一约束，并按环境创建管理员账号。

Vapor 大型教程2026-08-05

美化页面

内容有了，页面还丑？本文用 Leaf 的模板嵌套复用骨架，再引入 Bootstrap，让 Vapor 3 的网站快速变美观、且移动端友好。

Vapor 大型教程2026-08-05

缓存

缓存能让接口变快、少调外部 API。本文介绍 Vapor 3 的 KeyedCache 协议，以及内存缓存、数据库/Redis 缓存各自适合什么场景。

Vapor 大型教程2026-08-05

创建缩略语页面

本章我们在网站前端加上一个「创建缩略语」的网页：既有填写表单的页面，也有接收表单提交、把数据存进数据库的接口。

Vapor 大型教程2026-08-05

编辑缩略语页面

本章学习如何给缩略语做「编辑」功能：用同一个表单页显示已有数据，提交后把改动写回数据库。

Vapor 大型教程2026-08-05

删除缩略语页面

本章用最简单的方式实现「删除缩略语」：受浏览器表单限制，用 POST 请求触发删除并跳回首页。

Vapor 大型教程2026-08-05

全部分类页

本章实现网站上的「分类」相关页面：一个列出所有分类的列表页，以及点进去查看某分类下全部缩略语的详情页。

Vapor 大型教程2026-08-05

添加分类

本章给缩略语加上「分类标签」：先在模型层实现给缩略语挂分类的方法，再用 Select2 美化多选框，最后在创建与编辑时保存并同步分类。

Vapor 大型教程2026-08-05

全部用户页

本章做一个「所有用户」的列表页，并在每个页面的导航栏里加上访问入口，方便随时查看。

Vapor 大型教程2026-08-05

用户主页

本章实现一个「用户主页」：展示用户的基本信息，并列出他创建的所有缩略语。

Vapor 大型教程2026-08-05

Google 登录

有时用户不想每到一个网站都注册新账号，本章用 Vapor 3 配合 Imperial 接入 Google 的 OAuth 2.0，让用户用 Google 账号一键登录。