Express.js 的模板引擎及使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Web 技术的快速发展，现今的 Web 应用程序已经越来越复杂和庞大，而后端框架的选择也开始变得多样化。不难发现，使用 Node.js 开发后端的应用程序变得越来越流行。为了提高开发效率，Express.js 应运而生。

Express.js 是 Node.js 中最受欢迎的 Web 框架之一，它提供了一系列的函数和工具，用于快速开发 Web 应用程序。其中最重要的一部分是模板引擎。

本篇文章将全面地介绍 Express.js 的模板引擎及使用教程，以便开发者能够更高效地使用该框架。

什么是模板引擎

在处理后端数据时，通常需要将这些数据渲染出来呈现给用户。模板引擎就是用于生成 HTML 的一种工具。它允许开发者使用这种模板语法和动态数据生成 HTML 页面，并将其发送给客户端。

模板引擎能够让开发者在设计页面时更加专注于内容本身，而不是如何渲染它。同时，模板引擎也能够方便地管理模板的复用和更改。

Express.js 的模板引擎

Express.js 支持多种模板引擎。其中，最为流行的是以下三种：

EJS（Embedded JavaScript templates）
Pug（原名为 Jade）
Handlebars

EJS

EJS 是一种简单的模板语言，允许开发者通过 JavaScript 代码来动态生成 HTML。EJS 可以扩展为 Embedded JavaScript templates，即嵌入式 JavaScript 模板。

使用 EJS 时，可以通过在 HTML 标签内部使用 JavaScript 语法来在页面中嵌入变量和逻辑代码。在 Express.js 应用程序中，只需要在 app.js 文件中指定 EJS 作为视图引擎即可。

以下是一个简单的示例代码：

// javascriptcn.com 代码示例
<!-- index.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

// javascriptcn.com 代码示例
// app.js
const express = require('express');
const app = express();

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

app.get('/', (req, res) => {
  const message = 'Hello, world!';
  res.render('index', {message});
});

app.listen(3000, () => {
  console.log('Server started!');
});

Pug

Pug（原名为 Jade）是一种基于缩进的模板语言，被设计用于更快速、更简洁地编写 HTML。它使用的是类似于 Python 的缩进语法，而不是使用大量的尖括号和标签。

使用 Pug 时，可以通过定义变量，模板继承和使用控制流来动态生成 HTML。在 Express.js 应用程序中，只需要在 app.js 文件中指定 Pug 作为视图引擎即可。

以下是一个简单的示例代码：

// index.pug
doctype html
html
  head
    title= title
  body
    h1= message

// javascriptcn.com 代码示例
// app.js
const express = require('express');
const app = express();

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

app.get('/', (req, res) => {
  const message = 'Hello, world!';
  res.render('index', {title: 'Example', message});
});

app.listen(3000, () => {
  console.log('Server started!');
});

Handlebars

Handlebars 是另一种广泛使用的模板引擎，它允许开发者通过添加带标记的占位符来动态生成 HTML，而这些占位符将在运行时被替换为实际数据。

使用 Handlebars 时，为了生成 HTML，需要编写类似于 HTML 的代码以及表达式和标记。在 Express.js 应用程序中，只需要在 app.js 文件中指定 Handlebars 作为视图引擎即可。

以下是一个简单的示例代码：

// javascriptcn.com 代码示例
<!-- index.hbs -->
<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
    <h1>{{message}}</h1>
  </body>
</html>

// javascriptcn.com 代码示例
// app.js
const express = require('express');
const exphbs  = require('express-handlebars');
const app = express();

app.engine('.hbs', exphbs({extname: '.hbs'}));
app.set('view engine', '.hbs');

app.get('/', (req, res) => {
  const message = 'Hello, world!';
  res.render('index', {title: 'Example', message});
});

app.listen(3000, () => {
  console.log('Server started!');
});

总结

在本篇文章中，我们详细介绍了 Express.js 的模板引擎及使用教程。虽然不同的模板引擎之间在语法和细节上存在一些差异，但无论你选择使用哪个模板引擎，这些知识点都非常重要。

通过学习本篇文章，你应该已经了解了如何使用 EJS、Pug 和 Handlebars 这三种流行的模板引擎，在应用程序中动态生成 HTML。这些技术可以帮助你在开发 Web 应用程序时提高工作效率，同时也能让你更加专注于业务逻辑，从而得到更好的开发体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65328ba27d4982a6eb55104e