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

Express.js 是一个 Node.js 的框架，用于快速搭建 Web 应用程序。其中的视图引擎可以帮助我们实现动态的 HTML 页面，使页面的内容可以根据数据变化而改变。接下来，我将为大家介绍 Express.js 视图引擎的基本知识和使用方法。

视图引擎的作用

首先，我们需要了解视图引擎的作用。视图引擎就是将数据、模板和 HTML 页面组合在一起生成最终的 HTML 页面。在 Express.js 中，视图引擎可以让我们将后端的数据以模板变量的形式传递给前端，方便渲染动态页面。

口碑还不错的 Express.js 视图引擎有很多种，常用的有以下几种：

在这里，我以 Pug 为例来介绍 Express.js 视图引擎的使用方法。

在项目目录中，通过以下命令安装 Pug：

npm install pug

通过以下代码来设置 Express.js 的视图引擎：

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

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

以上代码中，我们将视图引擎设置为 Pug，将视图文件夹设置为 ./views。

接下来，我们需要创建一个 Pug 模板文件 index.pug，在其中可以使用 Pug 的版本的 HTML 标签，例如：

doctype html
html(lang="en")
  head
    title= title
  body
    h1= message

这个例子中，我们使用了 Pug 版本的 title 和 h1 标签，同时使用了 message 和 title 这两个变量来动态地修改标签的内容。

最后，通过以下代码将 Pug 模板文件与数据关联起来，以生成最终的 HTML 文件：

app.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})

通过以上代码，我们将 title 和 message 两个变量传递给了 Pug 模板文件中的 title 和 h1 标签，得到最终的 HTML 页面内容。

通过本文的介绍，我们可以初步了解 Express.js 视图引擎的使用方法，进一步掌握及实践不同的视图引擎将会更好地满足网站开发的需求。

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