在 express 中设置 ejs 视图目录

📌 相关文章

📜 在 express 中设置 ejs 视图目录 - Javascript (1)

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

在 Express 中，EJS 是一种常用的模板引擎，可以帮助我们动态渲染网页内容。但是默认情况下，Express 会在应用程序的根目录的 views 文件夹中寻找 EJS 模板文件。有时，我们希望把存放模板文件的目录设置为其他位置，例如根据不同的功能拆分成多个子目录。那么该如何在 Express 中设置 EJS 视图目录呢？

1. 创建视图文件

首先，我们需要在应用程序中准备一个或多个 EJS 视图文件。创建一个名为 view.ejs 的文件，将以下代码复制粘贴到文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS 视图文件</title>
</head>
<body>
    <h1>Hello, <%= name %>!</h1>
</body>
</html>

2. 安装 EJS 模板引擎

接着，我们需要确保已经安装 EJS 模板引擎。在命令行中执行以下命令：

npm install ejs --save

如果没有安装过 EJS，那么上述命令将会在当前目录下的 node_modules 文件夹中安装 EJS。

3. 创建 Express 应用程序

在应用程序中，我们需要引入并设置 EJS 模板引擎。另外，我们还需要设置存放模板文件的目录。

在项目根目录下，创建一个名为 app.js 的文件，将以下代码复制粘贴到文件中：

const express = require('express');

const app = express();

// 设置 EJS 模板引擎
app.set('view engine', 'ejs');

// 设置存放模板文件的目录
app.set('views', 'views');

// 监听端口
app.listen(3000, () => console.log('Server started at http://localhost:3000'));

上述代码中，app.set('view engine', 'ejs') 表示设置使用 EJS 模板引擎。app.set('views', 'views') 表示设置存放模板文件的目录为项目根目录下的 views 目录。也就是说，Express 将会在 views 目录下寻找模板文件。

4. 编写路由处理程序

最后，我们需要编写一个路由处理程序，将数据传递给视图文件，渲染生成 HTML 页面。在 app.js 中添加以下内容：

// 路由处理程序
function index(req, res) {
    // 渲染 EJS 视图文件
    res.render('view', { name: 'world' });
}

// 设置路由
app.get('/', index);

上述代码中，res.render('view', { name: 'world' }) 表示渲染名为 view 的视图文件，并传递一个 JSON 对象 { name: 'world' }，其中 name 变量的值为 'world'。这里使用的是 EJS 中的上下文变量，也就是数据模型。

5. 运行应用程序

现在，我们已经完成了在 Express 中设置 EJS 视图目录的所有步骤。在命令行中执行以下命令：

node app.js

然后，在浏览器中打开 http://localhost:3000，查看结果。

你应该会看到一条带有 Hello, world! 的消息。这证明了我们已经使用 EJS 渲染了一个视图文件，并成功将数据传递给了该文件。