模板引擎
ejs、pug、marko。
25 分钟
模板引擎
纯 JSON API 之外,Node 仍常 服务端渲染 HTML:管理后台、邮件预览、旧站迁移。Express/Fastify 通过适配器挂载 EJS、Pug、Marko 等模板引擎。
学习目标
- 在 Fastify 中渲染 EJS 页面
- 了解 Pug 缩进语法与 Marko 组件化
- 判断 SSR 模板 vs 前端 SPA 的边界
EJS + Fastify
import Fastify from "fastify";
import fastifyView from "@fastify/view";
import ejs from "ejs";
const app = Fastify();
await app.register(fastifyView, {
engine: { ejs },
root: "views",
});
app.get("/tracks", async (req, reply) => {
return reply.view("tracks.ejs", {
tracks: [{ slug: "nodejs-essentials", title: "Node 基础" }],
});
});
<!-- views/tracks.ejs -->
<ul>
<% tracks.forEach(t => { %>
<li><%= t.title %> (<%= t.slug %>)</li>
<% }) %>
</ul>
EJS 语法接近 HTML + <% %>,Java 开发者可类比 JSP。
引擎对比
| 引擎 | 语法 | 特点 |
|---|---|---|
| EJS | HTML + JS 片段 | 直白、易混用逻辑 |
| Pug | 缩进 DSL | 简洁,需适应无尖括号 |
| Marko | 组件 + 流式 | 偏性能与组件复用 |
本站 platform 以 React/Next 为主前端(nextjs-essentials);模板课面向 遗留 SSR、邮件、内网工具页。
与 API 分层
公开站点 → Next SSR/SSG
管理/API → Fastify JSON + Drizzle
内网报表 → EJS/Pug 快速出页
避免在模板里写复杂业务;数据在 handler 查好再传入 view。
练习
- 用 EJS 渲染 tracks 列表页
- 读一段 Pug 官方 Quick Start,对照 EJS 差异
- 讨论:何种页面你会选 Next 而非 EJS
小结
模板引擎适合快出 HTML;现代对外站点优先 Next。 下一课 Vitest:Node 里的测试选型。
加载本节练习…