Web 服务器开发 - Express 框架 - 模板引擎集成

在 Node.js 的 Web 服务器开发领域，Express 框架是一个广受欢迎的选择，它简洁高效，能帮助开发者快速搭建 Web 应用。而模板引擎的集成则让 Express 更加强大，能够方便地生成动态 HTML 页面。本文将深入探讨在 Express 框架中集成不同模板引擎的方法，并给出详细的演示代码。

为什么需要模板引擎

在 Web 开发中，我们常常需要生成动态的 HTML 页面。如果手动拼接 HTML 字符串，代码会变得复杂且难以维护。模板引擎提供了一种更优雅的方式来处理动态内容，它允许我们在 HTML 模板中嵌入变量、条件语句和循环等逻辑，使代码更加清晰和易于管理。

常见的模板引擎

以下是一些常见的 Node.js 模板引擎：

模板引擎	特点
EJS（Embedded JavaScript）	语法类似于 JavaScript，简单易学，适合初学者。
Pug（原名 Jade）	采用缩进式语法，简洁优雅，减少了 HTML 标签的使用。
Handlebars	语法简单，具有强大的模板复用能力。

在 Express 中集成 EJS 模板引擎

步骤 1：创建项目并安装依赖

首先，创建一个新的项目目录，并初始化 package.json 文件：

mkdir express-ejs-example
cd express-ejs-example
npm init -y

然后安装 Express 和 EJS：

npm install express ejs

步骤 2：编写代码

创建一个 app.js 文件，内容如下：

const express = require('express');
const app = express();
// 设置视图引擎为 EJS
app.set('view engine', 'ejs');
// 设置视图文件的目录
app.set('views', './views');
// 定义路由
app.get('/', (req, res) => {
    const data = {
        title: 'EJS 示例',
        message: '欢迎使用 EJS 模板引擎！'
    };
    // 渲染 EJS 模板
    res.render('index', data);
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

步骤 3：创建 EJS 模板

在项目根目录下创建一个 views 文件夹，并在其中创建一个 index.ejs 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

步骤 4：运行项目

在终端中运行以下命令启动服务器：

node app.js

打开浏览器，访问 http://localhost:3000，你将看到页面显示“欢迎使用 EJS 模板引擎！”。

在 Express 中集成 Pug 模板引擎

步骤 1：安装依赖

在项目中安装 Pug：

npm install pug

步骤 2：修改代码

修改 app.js 文件如下：

const express = require('express');
const app = express();
// 设置视图引擎为 Pug
app.set('view engine', 'pug');
// 设置视图文件的目录
app.set('views', './views');
// 定义路由
app.get('/', (req, res) => {
    const data = {
        title: 'Pug 示例',
        message: '欢迎使用 Pug 模板引擎！'
    };
    // 渲染 Pug 模板
    res.render('index', data);
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

步骤 3：创建 Pug 模板

在 views 文件夹中创建一个 index.pug 文件，内容如下：

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title= title
  body
    h1= message

步骤 4：运行项目

同样，在终端中运行 node app.js，然后访问 http://localhost:3000，你将看到页面显示“欢迎使用 Pug 模板引擎！”。

在 Express 中集成 Handlebars 模板引擎

步骤 1：安装依赖

安装 express-handlebars：

npm install express-handlebars

步骤 2：修改代码

修改 app.js 文件如下：

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
// 配置 Handlebars 视图引擎
const hbs = exphbs.create({
    defaultLayout: 'main'
});
// 设置视图引擎为 Handlebars
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
// 设置视图文件的目录
app.set('views', './views');
// 定义路由
app.get('/', (req, res) => {
    const data = {
        title: 'Handlebars 示例',
        message: '欢迎使用 Handlebars 模板引擎！'
    };
    // 渲染 Handlebars 模板
    res.render('index', data);
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

步骤 3：创建 Handlebars 模板

在 views 文件夹中创建一个 layouts 文件夹，并在其中创建一个 main.handlebars 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
</head>
<body>
    {{{body}}}
</body>
</html>

在 views 文件夹中创建一个 index.handlebars 文件，内容如下：

<h1>{{message}}</h1>

步骤 4：运行项目

在终端中运行 node app.js，访问 http://localhost:3000，你将看到页面显示“欢迎使用 Handlebars 模板引擎！”。

总结

通过集成模板引擎，我们可以在 Express 框架中更方便地生成动态 HTML 页面。不同的模板引擎有不同的语法和特点，你可以根据项目的需求和个人喜好选择合适的模板引擎。希望本文能帮助你在 Node.js 的 Web 服务器开发中更好地使用 Express 框架和模板引擎。