如何在 JavaScript 中使用 Ejs?
EJS 是一种模板语言，允许我们使用纯 JavaScript 生成 HTML 标记。它提供了一种简单直观的方式来在我们的 Web 应用程序中生成动态内容，从而更轻松地管理和组织我们的代码。EJS 易于使用，只需几个步骤即可集成到任何 JavaScript 项目中。
在本教程中，我们将学习如何在 JavaScript 中使用 EJS 的基础知识，包括如何设置我们的项目、创建 EJS 模板以及渲染模板以生成动态 HTML 输出
在 JavaScript 应用程序中使用 EJS 的步骤
用户可以按照以下步骤在其 JavaScript 应用程序中使用 EJS。
步骤 1 - 首先，我们将使用 npm 安装 EJS。
npm install ejs
步骤 2 − 接下来，在我们的 JavaScript 文件中，我们需要使用 require('ejs') 来引用 EJS。
const ejs = require('ejs');
步骤 3 − 之后，我们可以将 EJS 模板创建为字符串或在单独的 .ejs 文件中。
例如，我们可以按如下方式创建一个简单的 EJS 模板 −
const template = '<h1>Hello <%= name %></h1>';
步骤 4 − 接下来，我们可以使用 ejs.render() 函数来呈现 EJS 模板并生成动态 HTML 输出。我们必须传入一个包含我们想要在模板中使用的数据的对象。
例如，我们可以使用以下数据呈现上述模板 -
const data = { name: 'World' };
const html = ejs.render(template, data);
步骤 5 - 现在，我们可以使用服务器端 JavaScript 平台(如 Node.js)来处理 EJS 代码并将呈现的 HTML 发送到客户端的 Web 浏览器。
例如，我们可以创建一个简单的 Node.js 服务器文件，如下所示 -
const express = require('express'); const app = express(); app.get('/', (req, res) => { const data = { name: 'World' }; const html = ejs.render(template, data); res.send(html); }); app.listen(3000, () => { console.log(' Server listening on port 3000 '); });
第 6 步 - 最后，我们可以将生成的 HTML 输出到浏览器、控制台或文件。
示例
在下面的示例中，我们使用 EJS 和 Express 来呈现动态 HTML 内容。
在 index.js 文件中，我们首先导入所需的依赖项:express 和 ejs。然后，我们将 EJS 设置为应用程序的视图引擎。
接下来，我们定义一个路由以使用 res.render() 呈现 index.ejs 文件。我们传入一个名为 data 的对象，其中包含页面的标题、标题和描述的属性。
在 index.ejs 文件中，我们使用 EJS 语法将从数据对象传递的值插入 HTML 模板中。
访问路由时，index.ejs 文件将使用动态内容呈现并发送到客户端的 Web 浏览器。
Index.js
const express = require('express');
const app = express();
const ejs = require('ejs');
// 将 EJS 设置为视图引擎
app.set('view engine' , 'ejs');
// 定义一个路由来呈现索引页
app.get('/', (req , res) => {
const data = {
title: 'My Homepage',
heading: 'Welcome to my homepage!',
description: 'This is an example of using EJS with Express to render dynamic HTML content.'
};
res.render('index', data) ;
});
// 启动服务器
app.listen(3000, () => {
console.log(' Server started on port 3000 ');
});
Views/index.ejs
<!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <h1> <%= heading %> </h1> <h3> <%= description %> </h3> </body> </html>
输出
示例
在此示例中，我们使用 EJS 模板引擎来呈现显示博客文章列表的动态 HTML 页面。
在这里，我们使用循环遍历文章数组并将它们显示在页面上。我们还使用 EJS 标签将数据对象的值插入到 HTML 中。
当我们访问 http://localhost:3000 时，服务器会呈现 index.ejs 文件并将生成的 HTML 返回给浏览器，浏览器会显示博客文章列表。
Index.js
const express = require('express');
const app = express();
const ejs = require('ejs');
// 将 EJS 设置为视图引擎
app.set('view engine' , 'ejs');
// 定义路由以呈现索引页
app.get('/', (req, res) => {
const data = {
title: 'My Blog',
posts: [
{title: 'Post 1', body : 'This is the first post.' },
{title: 'Post 2', body : 'This is the second post.' },
{title: 'Post 3', body : 'This is the third post.' }
]
};
res.render('index', data);
});
// 启动服务器
app.listen(3000, () => {
console.log(' Server started on port 3000 ');
});
Index.ejs
<!DOCTYPE html>
<html>
<head>
<title> <%= title %> </title>
<style>
body{
background-color: antiquewhite;
text-align: center;
}
h1{
color: red;
}
ul{
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: space-around;
}
li{
border: 2px solid red;
padding: 1rem 3rem;
}
</style>
</head>
<body>
<h1> <%= title %> </h1>
<ul>
<% for (let i = 0; i < posts.length; i++) { %>
<li>
<h2> <%= posts[i].title %> </h2>
<p> <%= posts[i].body %> </p>
</li>
<% } %>
</ul>
</body>
</html>
输出
在本教程中，用户学习了如何设置使用 EJS 作为模板引擎的 JavaScript 项目。他们学习了如何创建 EJS 模板，这是一个带有 EJS 标签的 HTML 文件，允许在运行时插入动态内容。
此外，用户还学习了如何使用 Node.js 呈现 EJS 模板并生成动态 HTML 输出。这涉及设置 Express 服务器来处理 HTTP 请求，然后使用 render 方法呈现 EJS 模板以响应请求。
通过掌握这些概念，用户可以创建显示来自各种来源(例如数据库或 API)的数据的动态网页。
