Express 使用模板引擎 EJS - JavaScript 编程网

在 Express.js 中使用 EJS 作为模板引擎是一个很常见的做法。EJS（Embedded JavaScript Templates）是一种简单且强大的模板引擎，它允许你使用普通的 JavaScript 语法来生成 HTML。

下面是如何设置一个基本的 Express.js 应用并使用 EJS 的步骤：

步骤 1: 创建项目文件夹和初始化 Node.js 项目

首先，创建一个新的文件夹，并在该文件夹中初始化一个新的 Node.js 项目：

mkdir myapp
cd myapp
npm init -y

步骤 2: 安装必要的依赖包

接下来安装 Express 和 EJS：

npm install express ejs

步骤 3: 配置 Express.js 应用

创建一个 app.js 文件，并配置你的 Express 应用以使用 EJS：

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

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

// 设置视图文件的目录
app.set('views', './views');

// 用于解析请求体中的 URL 编码数据
app.use(express.urlencoded({ extended: true }));

// 静态文件中间件
app.use(express.static('public'));

// 路由
app.get('/', (req, res) => {
    // 渲染 index.ejs 文件
    res.render('index', { title: 'Welcome to My Site' });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

步骤 4: 创建 EJS 视图文件

在你的项目根目录下创建一个名为 views 的文件夹，并在其中添加一个 index.ejs 文件。例如：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is an example of using EJS with Express.js.</p>
</body>
</html>

步骤 5: 运行应用

现在你可以运行你的应用了：

node app.js

打开浏览器并访问 http://localhost:3000，你应该能看到 EJS 渲染的内容。

以上就是如何在 Express.js 中使用 EJS 的基本介绍。你可以根据需要扩展这个示例，添加更多的路由、视图以及功能。

EJS 教程

嵌入变量

<%- title %> 和 <%= name %> 会被 JavaScript 变量的值替换。

注释

EJS 支持两种类型的注释：HTML 注释和 EJS 注释。

<!-- HTML 注释 -->
<%-- EJS 注释 --%>

条件语句

你可以在 EJS 中使用标准的 JavaScript 控制结构，如 if 语句。

<% if (user) { %>
    <p>Welcome, <%= user.name %>!</p>
<% } else { %>
    <p>Please log in.</p>
<% } %>

循环

你可以使用 for 或 forEach 来循环遍历数组或对象。

<ul>
<% users.forEach(function(user) { %>
    <li><%= user.name %></li>
<% }); %>
</ul>

布局和包含

EJS 支持布局和文件包含，这样可以让你重用通用的 HTML 结构。

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <nav>
        <% include('./partials/nav') %>
    </nav>
    <main>
        <%- body %>
    </main>
</body>
</html>

partials/nav.ejs 文件

<!-- partials/nav.ejs -->
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏