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输出。我们必须传入一个包含我们想在模板中使用的数据的对象。

For example, we can render the above template with the following data −

const data = { name: 'World' };
const html = ejs.render(template, data);

第5步 - 现在，我们可以使用一个服务器端的JavaScript平台，如Node.js来处理EJS代码，并将渲染的HTML发送到客户端的网络浏览器。

例如，我们可以创建一个简单的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文件被渲染成动态内容，并被发送到客户端的网络浏览器。

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 ');
});

视图/index.ejs

<!DOCTYPE html>
<html>
<head>
   <title><%= title %></title>
</head>
<body>
   <h1> <%= heading %> </h1>
   <h3> <%= description %> </h3>
</body>
</html>

输出

如何在JavaScript中使用Ejs？

例子

在这个例子中，我们使用EJS模板引擎来渲染一个显示博客文章列表的动态HTML页面。

在这里，我们使用一个循环来迭代一个数组的文章，并在页面上显示它们。我们还使用EJS标签将数据对象中的值插到HTML中。

当我们访问http://localhost: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>