MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Node.js Express 集成模板引擎渲染动态页面

2022-07-195.0k 阅读

1. 前端开发与Node.js概述

在现代前端开发中，构建动态、交互式的用户界面是核心需求。传统的前端开发主要聚焦于浏览器端，通过HTML、CSS和JavaScript来呈现静态页面和实现基本交互。然而，随着应用复杂度的提升，服务器端的交互与数据处理变得愈发关键。Node.js的出现改变了这一局面，它让JavaScript能够在服务器端运行，提供了高效的I/O操作、事件驱动架构以及丰富的生态系统，使得前端开发者能够使用熟悉的JavaScript语言进行全栈开发。

Node.js基于Chrome V8引擎，其异步I/O模型极大地提升了性能，尤其适用于处理高并发的网络请求。在构建Web应用时，Node.js不仅可以作为后端服务器处理数据请求、数据库交互等任务，还能与前端紧密协作，提供无缝的用户体验。

2. Express框架简介

Express是基于Node.js平台的极简、灵活的Web应用开发框架。它为Web应用开发提供了丰富的功能，包括路由系统、中间件支持以及方便的HTTP请求处理。Express的设计理念是轻量级且可扩展，让开发者能够快速搭建Web服务器，专注于业务逻辑的实现。

以下是一个简单的Express应用示例：

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

app.get('/', (req, res) => {
    res.send('Hello, World!');
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在上述代码中，我们首先引入了Express模块，创建了一个Express应用实例app。接着，定义了一个根路径/的GET请求处理函数，当客户端访问根路径时，服务器会返回Hello, World!。最后，应用监听在3000端口。

3. 模板引擎的作用

在Web开发中，模板引擎扮演着至关重要的角色。它允许开发者将动态数据与静态HTML模板相结合，生成最终发送给客户端的HTML页面。传统的方式是在服务器端直接拼接HTML字符串，这种方法不仅代码可读性差，维护成本高，而且容易出现安全漏洞，如跨站脚本攻击（XSS）。

模板引擎通过特定的语法，将数据嵌入到模板中，使得代码逻辑与页面展示分离。这不仅提高了代码的可维护性和复用性，还增强了安全性，因为模板引擎通常会对输出数据进行转义处理，防止恶意代码注入。

常见的模板引擎有EJS、Pug（原名Jade）、Handlebars等，它们各自有不同的语法和特点，但都旨在实现动态页面的高效渲染。

4. Node.js Express集成EJS模板引擎

4.1 安装EJS

首先，我们需要在项目中安装EJS模板引擎。在项目目录下执行以下命令：

npm install ejs --save

这将把EJS安装到项目的node_modules目录，并将其添加到package.json文件的依赖列表中。

4.2 配置Express使用EJS

在Express应用中配置EJS非常简单。修改前面的Express示例代码如下：

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

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

app.get('/', (req, res) => {
    // 渲染index.ejs模板
    res.render('index');
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在上述代码中，我们通过app.set('view engine', 'ejs')告诉Express应用使用EJS作为视图引擎。res.render('index')方法用于渲染名为index.ejs的模板文件，并将其作为响应发送给客户端。

4.3 创建EJS模板文件

在项目根目录下创建一个名为views的文件夹（Express默认查找视图文件的目录），然后在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>Document</title>
</head>
<body>
    <h1>Welcome to my EJS page</h1>
</body>
</html>

此时，启动Express应用，访问http://localhost:3000/，你将看到页面上显示Welcome to my EJS page。

4.4 传递数据到EJS模板

EJS允许我们将服务器端的数据传递到模板中进行动态渲染。修改Express应用代码如下：

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const data = {
        title: 'My Dynamic Page',
        message: 'This is a message from the server'
    };
    res.render('index', data);
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在index.ejs模板中，我们可以使用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>

在上述代码中，<%= title %>和<%= message %>是EJS的输出标签，用于将传递过来的title和message数据嵌入到HTML中。

4.5 EJS模板中的控制结构

EJS支持常见的控制结构，如if语句、for循环等。例如，假设我们有一个数组数据要在模板中循环展示：

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const items = ['Apple', 'Banana', 'Orange'];
    res.render('index', { items });
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在index.ejs模板中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Items List</title>
</head>
<body>
    <ul>
        <% for (let i = 0; i < items.length; i++) { %>
            <li><%= items[i] %></li>
        <% } %>
    </ul>
</body>
</html>

上述代码使用for循环遍历items数组，并将每个元素渲染为一个列表项。

5. Node.js Express集成Pug模板引擎

5.1 安装Pug

同样，先在项目中安装Pug：

npm install pug --save

5.2 配置Express使用Pug

修改Express应用代码：

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

// 设置视图引擎为Pug
app.set('view engine', 'pug');

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

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

5.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 Document
    body
        h1 Welcome to my Pug page

Pug使用缩进和简洁的语法来定义HTML结构，与传统的HTML标签写法有较大不同。

5.4 传递数据到Pug模板

在Express应用中传递数据：

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

app.set('view engine', 'pug');

app.get('/', (req, res) => {
    const data = {
        title: 'My Dynamic Page with Pug',
        message: 'This is a message from the server'
    };
    res.render('index', data);
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在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}

在Pug中，使用#{}来输出变量数据。

5.5 Pug模板中的控制结构

例如，使用each循环来展示数组数据：

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

app.set('view engine', 'pug');

app.get('/', (req, res) => {
    const items = ['Apple', 'Banana', 'Orange'];
    res.render('index', { items });
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在index.pug模板中：

doctype html
html(lang='en')
    head
        meta(charset='UTF-8')
        meta(name='viewport', content='width=device-width, initial-scale=1.0')
        title Items List
    body
        ul
            each item in items
                li= item

这里的each循环简洁地遍历了items数组并渲染列表项。

6. Node.js Express集成Handlebars模板引擎

6.1 安装Handlebars

执行以下命令安装Handlebars：

npm install express-handlebars --save

这里使用express-handlebars是一个针对Express优化的Handlebars集成模块。

6.2 配置Express使用Handlebars

修改Express应用代码：

const express = require('express');
const app = express();
const port = 3000;
const exphbs = require('express-handlebars');

// 设置Handlebars视图引擎
app.engine('handlebars', exphbs.engine());
app.set('view engine', 'handlebars');

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

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

6.3 创建Handlebars模板文件

在views文件夹中创建index.handlebars文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Welcome to my Handlebars page</h1>
</body>
</html>

6.4 传递数据到Handlebars模板

在Express应用中传递数据：

const express = require('express');
const app = express();
const port = 3000;
const exphbs = require('express-handlebars');

app.engine('handlebars', exphbs.engine());
app.set('view engine', 'handlebars');

app.get('/', (req, res) => {
    const data = {
        title: 'My Dynamic Page with Handlebars',
        message: 'This is a message from the server'
    };
    res.render('index', data);
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在index.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>
    <h1>{{message}}</h1>
</body>
</html>

Handlebars使用{{}}来输出变量数据。

6.5 Handlebars模板中的控制结构

例如，使用each和if语句：

const express = require('express');
const app = express();
const port = 3000;
const exphbs = require('express-handlebars');

app.engine('handlebars', exphbs.engine());
app.set('view engine', 'handlebars');

app.get('/', (req, res) => {
    const items = ['Apple', 'Banana', 'Orange'];
    const hasItems = items.length > 0;
    res.render('index', { items, hasItems });
});

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在index.handlebars模板中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Items List</title>
</head>
<body>
    {{#if hasItems}}
        <ul>
            {{#each items}}
                <li>{{this}}</li>
            {{/each}}
        </ul>
    {{else}}
        <p>No items available</p>
    {{/if}}
</body>
</html>

这里使用{{#if}}和{{#each}}等控制结构来根据数据动态渲染页面内容。

7. 模板引擎选择的考量因素

在选择模板引擎时，有多个因素需要考虑：

7.1 语法复杂度

不同的模板引擎语法差异较大。EJS的语法接近JavaScript，对于熟悉JavaScript的开发者来说容易上手。Pug采用独特的缩进式语法，简洁但需要一定时间适应。Handlebars的语法较为直观，以{{}}为主要标识，但功能相对有限。如果团队成员对特定语法有偏好，或者项目对代码简洁性有较高要求，语法复杂度会是重要的考量因素。

7.2 性能

在性能方面，不同模板引擎在编译和渲染速度上会有所差异。一般来说，Pug在编译阶段性能较好，因为它的语法简洁，编译速度快。EJS和Handlebars在渲染简单页面时性能相近，但随着数据量和模板复杂度的增加，性能可能会有所不同。在高并发、大数据量的应用场景下，性能是关键因素。

7.3 生态系统和社区支持

一个活跃的社区意味着更多的文档、教程、插件和解决方案。EJS和Handlebars都有广泛的社区支持，在遇到问题时容易找到答案。Pug也有一定的社区活跃度，但相对来说可能稍逊一筹。如果项目依赖社区资源进行快速开发和问题解决，社区支持程度需要重点考虑。

7.4 与项目架构的契合度

如果项目已经有特定的设计模式或架构要求，模板引擎的选择需要与之契合。例如，如果项目强调代码的简洁性和文件结构的清晰，Pug可能更适合；如果项目对JavaScript语法的兼容性要求高，EJS可能是更好的选择。

8. 部署与优化

在将集成了模板引擎的Express应用部署到生产环境时，有几个优化点需要注意：

8.1 模板缓存

大多数模板引擎都支持模板缓存。启用模板缓存可以避免每次请求都重新编译模板，显著提高性能。例如，在EJS中，可以通过app.set('view cache', true)来启用模板缓存。

8.2 压缩与合并

在生产环境中，对静态资源（如CSS、JavaScript文件）进行压缩和合并可以减少文件大小，加快页面加载速度。可以使用工具如uglify - js和css - minify来实现。

8.3 服务器配置

合理配置服务器，如使用反向代理（如Nginx）来处理静态文件和负载均衡，可以提升应用的整体性能和稳定性。Nginx能够高效地处理静态资源请求，减轻Express服务器的负担。

通过以上步骤和优化措施，开发者可以在Node.js Express应用中高效集成模板引擎，实现动态页面的渲染，为用户提供流畅的体验。无论是选择EJS、Pug还是Handlebars，都应根据项目的具体需求和特点来决定，以达到最佳的开发效率和应用性能。