数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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 − 现在，我们可以使用 Node.js 等服务器端 JavaScript 平台来处理 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 语法将从 data 对象传递的值插入到 HTML 模板中。
访问该路由时，index.ejs 文件将使用动态内容进行渲染并发送到客户端的 Web 浏览器。
Index.js
const express = require('express');
const app = express();
const ejs = require('ejs');
// Set EJS as the view engine
app.set('view engine' , 'ejs');
// Define a route to render the index page
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) ;
});
// Start the server
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 中。
当我们访问 https://127.0.0.1:3000 时，服务器会渲染 index.ejs 文件并将生成的 HTML 返回到浏览器，浏览器会显示博客文章列表。
Index.js
const express = require('express');
const app = express();
const ejs = require('ejs');
// Set EJS as the view engine
app.set('view engine' , 'ejs');
// Define a route to render the index page
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);
});
// Start the server
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 模板，这是一种 HTML 文件，其中包含 EJS 标签，允许在运行时插入动态内容。
此外，用户学习了如何使用 Node.js 渲染 EJS 模板并生成动态 HTML 输出。这涉及设置一个 Express 服务器来处理 HTTP 请求，然后使用 render 方法来响应请求渲染 EJS 模板。
通过掌握这些概念，用户可以创建动态网页，显示来自各种来源（如数据库或 API）的数据。
7K+ 浏览量
