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

// 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>

输出

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>