如何在 Node.js 中设置视图引擎？(1) - 芒果文档

📌 相关文章

📜 如何在 Node.js 中设置视图引擎？(1)

📅 最后修改于: 2023-12-03 15:24:18.011000 🧑 作者: Mango

如何在 Node.js 中设置视图引擎？

视图引擎是指将数据呈现给用户的工具。在 Node.js 中，我们可以使用不同的视图引擎来呈现我们的数据。在本篇文章中，我们将讨论如何在 Node.js 中设置视图引擎。

步骤

以下是在 Node.js 中设置视图引擎的步骤：

创建一个新的 Node.js 应用程序。
```
$ mkdir myapp
$ cd myapp
$ npm init -y
```
安装所需的视图引擎。

在本篇文章中，我们将使用 EJS 作为我们的视图引擎。在终端中执行以下命令来安装 EJS：
```
$ npm install ejs
```
配置应用程序以使用视图引擎。

在 app.js 文件中，添加以下代码：
```
const express = require('express');
const app = express();
const port = 3000;

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

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

app.listen(port, () => {
  console.log(`App running on port ${port}.`);
});
```
在该代码中，我们使用 app.set() 方法设置视图引擎为 EJS。然后，我们使用 app.get() 方法创建一个路由，该路由返回 index 视图文件，并将 title 变量传递给该视图。
创建视图文件。

在 views 目录下创建 index.ejs 文件，并在该文件中添加以下代码：
```
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
  </body>
</html>
```
在该代码中，我们使用 EJS 的模板语言，使用 <%= var %> 插入 title 变量的值。
运行应用程序。

在终端中执行以下命令来启动应用程序：
```
$ node app.js
```
在浏览器中访问 http://localhost:3000，您将看到 "Hello World" 字符串被呈现为标题和主要内容。

总结

在 Node.js 中使用视图引擎是一种将数据呈现给用户的好方法。在本篇文章中，我们使用 EJS 作为我们的视图引擎，详细介绍了在 Node.js 中设置视图引擎的步骤。