全书目录

第十二篇：Express 完全指南 —— 老城区主干道宇宙

第十章：模板引擎 —— 老城区的公文印刷铺

1 分钟 323 字 第 248 / 962 个阅读单元

如果你不只想返回 JSON，而是想让服务器直接渲染 HTML 页面，就会用到模板引擎。

这像什么？

像老城区有一家印刷铺，你给它一份模板和一批数据，它帮你印成完整公告。

#1. 模板的意义

不是写死 HTML：

html
<h1>道路列表</h1>
<ul>
  <li>中山主路</li>
  <li>复兴大道</li>
</ul>

而是写一个带占位符的“公文模板”，让服务器把真实数据塞进去。

#2. Express 中的基本思路
js
const express = require('express');
const path = require('node:path');
const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/roads-page', (req, res) => {
  res.render('roads', {
    title: '老城区主干道列表',
    roads: ['中山主路', '复兴大道', '和平街']
  });
});

views/roads.ejs

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <ul>
      <% roads.forEach(road => { %>
        <li><%= road %></li>
      <% }) %>
    </ul>
  </body>
</html>
#3. 模板引擎适合什么场景

适合：

  • 管理后台
  • 简单内容站
  • 服务器渲染页面
  • 传统多页应用

不一定适合：

  • 前后端完全分离的大型 SPA
  • 前端已由 React / Vue / Next / Nuxt 承担页面渲染
#4. res.locals 是什么

可以把它当作：

这次办事流程里，临时放在窗口桌面上的公共资料。

js
app.use((req, res, next) => {
  res.locals.cityName = '老城区';
  next();
});

app.get('/notice', (req, res) => {
  res.render('notice');
});