Express.js 中的视图引擎-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 应用开发中，视图是 Web 应用的重要组成部分，它是展示给用户的页面内容。而视图引擎就是用来帮助我们在服务器端生成视图内容的工具。

在 Express.js 中，视图引擎是一个非常重要的功能，它使开发人员可以轻松地使用 JavaScript 代码来生成 HTML 代码，并将其返回到客户端。

下面我们将介绍 Express.js 中常用的视图引擎，包括 EJS、Pug 和 Handlebars。并探讨如何在 Express.js 中使用它们。

EJS 是一种简单的 JavaScript 模板引擎，它允许你在客户端和服务器端使用同一套模板代码。Express.js 支持 EJS，你可以在你的 Express 应用中使用它来创建视图。

要使用 EJS，首先需要安装 EJS 模块：

npm install ejs --save

在 Express.js 应用中，通过设置模板引擎为 EJS，来使用 EJS 模板引擎。例如：

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

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

在 EJS 模板中，你可以使用 JavaScript 语法来生成 HTML 内容。例如：

<h1>Hello <%= name %></h1>

这里的 <%= name %> 将会被 JavaScript 代码所替换，在服务器端执行后，生成最终的 HTML 内容。

Pug 是另一个流行的模板引擎，它有一个简单易用的语法，被广泛应用于 Node.js 应用程序。Pug 模板引擎能够提供强大的功能，例如条件语句、循环、继承等。

要使用 Pug，需要先安装 Pug 模块：

npm install pug --save

同样地，在 Express 应用中，通过设置模板引擎为 Pug，来使用 Pug 模板引擎。例如：

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

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

在 Pug 模板中，你可以使用类似 HTML 的语法编写模板，只不过它是用缩进来表示嵌套的。例如：

html
  head
    title My Title
  body
    h1 My Heading
    p My Paragraph

在服务器端，通过渲染这个模板，可以生成最终的 HTML 内容。

Handlebars 是一个流行的开源模板引擎，它允许你使用灵活的模板语法来创建和渲染 HTML。

要使用 Handlebars，需要先安装 Handlebars 模块：

npm install handlebars --save

同样地，在 Express 应用中，通过设置模板引擎为 Handlebars，来使用 Handlebars 模板引擎。例如：

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

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

在 Handlebars 模板中，可以使用预定义的模板变量和表达式创建动态内容。例如：

<h1>Hello, {{name}}</h1>
<p>Today is {{date}}</p>

这里的 {{name}} 和 {{date}} 将会在服务器端运行时替换为动态内容。

以上是三种常用的 Express.js 视图引擎介绍。选择适合自己的视图引擎，有助于开发人员更快速地创建丰富的 Web 应用程序。

值得注意的是，在使用视图引擎时，需要以简约的方式编写模板，同时保证模板的可维护性和可扩展性。我们要充分利用视图引擎的功能和优势，充分体现前端技术的价值。

以上就是本文的全部内容，希望本文能帮助到初学者在 Express.js 中使用视图引擎。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67444e33c22b09372b12ccfa