模板引擎简介

模板引擎是用于生成动态 HTML 页面的工具。它可以将服务器端的数据与 HTML 模板结合，生成最终的页面内容。Express 支持多种模板引擎，如 EJS、Pug、Handlebars 等。

为什么使用模板引擎？

在传统的服务器端开发中，HTML 内容通常是静态的，无法根据用户请求的不同动态变化。通过模板引擎，服务器可以在响应中动态生成 HTML 内容，展示不同的数据。

模板引擎的优势：

动态内容渲染：根据请求动态渲染页面内容。
代码复用：模板文件可以复用 HTML 结构，减少代码重复。
可读性和维护性：模板语法简洁，易于维护。

Express 中使用模板引擎

Express 默认不自带模板引擎，但可以通过 view engine 设置与任意模板引擎结合。以 EJS 为例：

安装 EJS

bash

npm install ejs

配置模板引擎

在 app.js 中配置使用 EJS：

const express = require('express');
const app = express();

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 设置视图文件存放的文件夹
app.set('views', path.join(__dirname, 'views'));

app.listen(3000, () => {
  console.log('服务器启动在 http://localhost:3000');
});

渲染模板

使用 res.render() 渲染视图模板并传递数据：

app.get('/', (req, res) => {
  res.render('index', { title: 'Express Template Engine' });
});

在 views/index.ejs 模板中：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1>欢迎来到 <%= title %> 网站!</h1>
</body>
</html>

渲染结果

当用户访问根路径时，服务器将使用 index.ejs 模板和传递的 title 数据，生成如下 HTML 响应：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express Template Engine</title>
</head>
<body>
  <h1>欢迎来到 Express Template Engine 网站!</h1>
</body>
</html>

支持的模板引擎

除了 EJS，Express 还支持其他常用模板引擎：

Pug (原 Jade)：简洁且功能强大的模板引擎。
Handlebars：流行的逻辑模板引擎，支持模板继承和部分视图。

总结

模板引擎在 Express 中是生成动态内容的利器，可以让你根据用户的请求动态渲染 HTML 页面，提升应用的交互性和可定制性。

模板引擎简介 ​

为什么使用模板引擎？ ​

模板引擎的优势： ​

Express 中使用模板引擎 ​

安装 EJS ​

配置模板引擎 ​

渲染模板 ​

渲染结果 ​

支持的模板引擎 ​

总结 ​