資料結構
網路
關係資料庫管理系統
作業系統
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://: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+ 瀏覽量
