2024-08-15发表2024-08-16更新编程 / Express.js教程5 分钟读完 (大约776个字)0次访问

25 使用EJS模板引擎

在本章中，我们将学习如何在Express.js应用中使用EJS（嵌入式JavaScript）作为模板引擎。EJS是一种简单易用的模板引擎，使我们能够生成动态HTML页面。

1. EJS简介

EJS允许我们在HTML中嵌入JavaScript代码。我们可以在页面中动态插入数据，控制内容的显示和样式等。这对于构建动态Web应用程序非常非常重要。

EJS的基本语法如下：

<%- variable %>：输出未经转义的内容。
<%= variable %>：输出经过HTML转义的内容。
<% code %>：执行JavaScript代码，但不输出内容。
<% if (condition) { %> ... <% } %>：条件语句。

2. 安装EJS

要在你的Express应用程序中安装EJS，你需要使用npm命令：

1	npm install ejs

安装完成后，我们需要在Express中进行一些配置，以使用EJS作为模板引擎。

3. 配置Express使用EJS

在你的app.js或主应用文件中，添加以下代码来设置EJS为视图引擎：

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

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

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

// 其他中间件和路由

在这个配置中，我们设置了视图引擎为ejs，并指定了视图文件的存放目录为views。现在，我们就可以在这个目录下创建EJS模板文件。

4. 创建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>使用EJS模板引擎</title>
</head>
<body>
    <h1>欢迎来到EJS模板引擎的世界!</h1>
    <p>当前时间: <%= new Date() %></p>
    <ul>
        <% for(let item of items) { %>
            <li><%= item %></li>
        <% } %>
    </ul>
</body>
</html>

在这个EJS模板中，我们使用了<%= new Date() %>来展示当前时间，并使用了一个循环来显示一个items数组的内容。

5. 渲染EJS模板

在Express的路由中，我们可以渲染这个EJS模板并传递数据。

app.get('/', (req, res) => {
    const items = ['苹果', '香蕉', '橘子'];
    res.render('index', { items });
});

在这个路由中，我们定义了一个数组items，它包含了一些水果的名称。我们将这个数组作为数据传递给index.ejs模板。

6. 运行应用

确保一切设置正确，然后运行你的应用：

1	node app.js

访问 http://localhost:3000，你将看到渲染的EJS模板，显示了欢迎信息和当前时间，以及水果列表。

7. 总结

在本章中，我们学习了如何：

使用 npm 安装EJS。
配置Express使用EJS作为模板引擎。
创建一个基本的EJS模板。
渲染EJS模板并传递数据。

通过使用EJS，我们可以轻松创建动态的HTML页面，为我们的应用增添活力。在下一章中，我们将深入讨论如何渲染更加复杂的模板，继续探讨EJS的强大功能。

25 使用EJS模板引擎

https://zglg.work/expressjs-zero/25/

作者

IT教程网(郭震)

发布于

2024-08-15

更新于

2024-08-16

许可协议

#Express.js教程

25 使用EJS模板引擎

1. EJS简介

2. 安装EJS

3. 配置Express使用EJS

4. 创建EJS模板文件

5. 渲染EJS模板

6. 运行应用

7. 总结

作者

发布于

更新于

许可协议

分享转发

学习下节

复习上节

交流

打卡评论