如何在 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)的数据的动态网页。