Bootstrap

EJS模板引擎:渲染知识点总结及用法详解

EJS模板引擎的渲染知识点总结及用法详解

引言

随着Web开发技术的快速发展,动态网页的需求日益增长。EJS(Embedded JavaScript Templates)作为一种流行的模板引擎,因其简洁性和强大的功能而受到开发者的青睐。本文将详细介绍EJS的概念、出现的原因、基本用法、高级用法以及常见的使用场景。

EJS模板引擎的概念

EJS是一种使用JavaScript作为模板语言的模板引擎,它允许开发者将HTML和JavaScript代码混合在一起,通过预编译的方式生成纯HTML页面。EJS的核心思想是将数据和视图逻辑分离,使得代码更加模块化和可重用。

EJS出现的原因

在EJS出现之前,开发者通常需要手动拼接字符串来生成HTML页面,这种方法不仅效率低下,而且难以维护。EJS的出现解决了以下问题:

  1. 代码复用:EJS允许开发者创建可重用的模板,减少了代码重复。
  2. 数据绑定:EJS提供了一种简洁的方式来将数据绑定到HTML元素上。
  3. 逻辑控制:EJS支持条件判断和循环控制,使得在模板中处理复杂逻辑变得简单。

Ejs渲染标识

在EJS中,渲染标识是用来在模板中插入动态内容的标记。以下是一些常用的EJS渲染标识和对应的代码示例:

1. 数据输出及执行代码 <%= %> <% %>

用于输出数据,HTML实体会被转义。

	<% var title = '轨道交通充值信息' %>
    <% var A = '东环城路'%>
    <% var B = '01284740'%>
    <% var C = '2024-7-8 10:42:55'%>
    <% var D = '19.67元'%>
    <% var E = '100.67元'%>
    <% var F = '119.67元'%>
    <section class="info">
        <h3><%=title%></h3>
        <p>车站名称:<%=A%></p>
        <p>设备编号:<%=B%></p>
        <p>充值时间:<%=C%></p>
        <p>交易前金额:<%=D%></p>
        <p>充值金额:<%=E%></p>
        <p>交易后金额:<%=F%></p>
    </section>

<section> 是 HTML5 中引入的一个语义化标签,用于定义文档中的一个区段(section、区块),通常包含一组内容。在 HTML 中,语义化标签有助于描述网页的结构和内容,使得代码更加清晰易懂,同时也有助于搜索引擎优化(SEO)和无障碍访问(Accessibility)。

<section> 标签的使用场景包括但不限于:

  1. 文章区块:一篇文章可以被分为多个部分,每个部分可以用 <section> 标签来标记。
  2. 博客帖子:博客中的每个帖子可以用 <section> 来包含。
  3. 论坛帖子:论坛中的每个讨论帖子可以用 <section> 来标记。
  4. 产品描述:电子商务网站中,产品的每个特性或描述部分可以用 <section> 来区分。

在你提供的代码示例中,<section> 标签被用来包含一些信息,这些信息可能是关于某个车站的充值信息。这个区段包含了标题(<h3>)和几个段落(<p>),每个段落包含不同的信息点,如车站名称、设备编号、充值时间等。使用 <section> 标签可以让浏览器和开发者更容易理解这部分内容是一个整体,并且可以应用样式或脚本

例如:

<section class="info">
    <h3>充值信息</h3>
    <p>车站名称:北京南站</p>
    <p>设备编号:001A</p>
    <p>充值时间:2023-11-27 10:00</p>
    <p>交易前金额:100元</p>
    <p>充值金额:50元</p>
    <p>交易后金额:150元</p>
</section>

在这个例子中,<section> 标签明确地表示了这是一个包含充值信息的区块。

2. 数据输出(不转义) <%- %>

用于输出数据,不进行HTML实体转义,用于插入HTML代码。

<!-- 假设我们有变量 user -->
<p><%- user.htmlContent %></p>

3. 条件语句 <% if %> <% else %> <% endif %>

用于在模板中进行条件判断。

<% if (user.isLoggedIn) { %>
  <p>Welcome back, <%= user.name %>!</p>
<% } else { %>
  <p>Please log in.</p>
<% } %>

4. 循环语句 <% for %> <% endfor %>

用于在模板中进行循环。

<ul>
  <% for (var i = 0; i < items.length; i++) { %>
    <li><%= items[i] %></li>
  <% } %>
</ul>

5. 包含其他模板 <% include %>

用于在一个模板中包含另一个模板。

<% include('header.ejs') %>
<!-- 页面内容 -->
<% include('footer.ejs') %>

6. 继承和布局 <% extends %> <% block %>

用于模板继承。

<!-- layout.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <% block content %>
  <% endblock %>
</body>
</html>

<!-- page.ejs -->
<% extends layout.ejs %>
<% block content %>
  <h1>My Page</h1>
  <p>This is my page content.</p>
<% endblock %>

这些标识是EJS模板引擎中的核心,它们允许你将服务器端的数据和逻辑嵌入到HTML模板中,生成动态的网页内容。使用这些标识,你可以构建出功能丰富、响应迅速的Web应用。

EJS的基本用法

1. express中使用Ejs

  1. 安装EJS

首先,通过npm安装EJS模块:

npm install ejs --save
  1. 配置Express.js

在Express.js应用中设置EJS为模板引擎,并指定视图文件的存放目录:

const express = require('express');
const app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
  1. 创建EJS模板文件

views目录下创建EJS模板文件,使用EJS语法插入动态数据:

<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>
  1. 渲染EJS模板

使用res.render()函数渲染模板并发送响应:

app.get('/', (req, res) => {
  const title = 'Express.js Template Engine';
  const message = 'Hello, EJS!';
  res.render('index', { title: title, message: message });
});

2. http中使用Ejs

  1. 环境准备

在开始之前,请确保你的开发环境中已经安装了Node.js。你还需要安装EJS模板引擎,可以通过npm来安装:

bash

npm install ejs
  1. 创建HTTP服务器

我们将使用Node.js的内置http模块来创建一个简单的HTTP服务器。这个服务器将负责接收HTTP请求,并根据请求返回相应的响应。

javascript

const http = require('http');
const fs = require('fs');
var ejs = require('ejs');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
  // 处理根目录请求
  if (req.url === '/' && req.method === 'GET') {
    // 使用EJS模板渲染页面
	// ejs.renderFile 是 EJS 模板引擎提供的一个函数,它用于将 EJS 模板文件渲染成 HTML 字符串
    ejs.renderFile('index.ejs', { title: 'Hello EJS' }, {}, (err, str) => {
      if (err) {
        // 处理错误
        res.writeHead(500, {'Content-Type': 'text/plain'});
        res.end('Error: ' + err.message);
      } else {
        // 发送渲染后的HTML
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(str);
      }
    });
  }
});

// 监听端口
server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});
  1. 创建EJS模板

EJS模板是一种HTML文件,其中可以包含JavaScript代码。这些代码通常用于动态地插入数据。创建一个名为index.ejs的文件,并添加以下内容:

html

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1>Welcome to <%= title %></h1>
  <p>This is a dynamic page rendered by EJS.</p>
</body>
</html>

在这个模板中,<%= title %>是EJS的语法,用于插入传递给模板的数据。

  1. 运行服务器

保存你的代码和模板文件后,运行Node.js脚本:

bash

node your_script_name.js

打开浏览器,访问http://localhost:3000,你将看到一个标题为"Hello EJS"的网页,这正是我们在模板数据中设置的标题。

  1. 扩展功能

EJS模板引擎的功能远不止于此。你可以在模板中使用循环、条件语句等JavaScript特性来进一步控制HTML内容的生成。例如,你可以传递一个数组到模板,并使用<% for %>循环来渲染列表。

结论

通过本文的介绍,你应该已经了解了如何使用Node.js、http模块和fs模块来创建一个简单的HTTP服务器,并使用EJS模板引擎来渲染动态网页。EJS是一个强大而灵活的工具,可以帮助你快速构建动态Web应用。随着你对EJS的深入了解,你将能够创建更加复杂和功能丰富的网页。

EJS的高级用法

  1. 条件判断

EJS模板中的条件判断使用JavaScript的if语句。这允许模板根据数据动态显示内容。

<!-- 检查用户是否登录 -->
<% if (user) { %>
  <p>Welcome back, <%= user.name %>!</p>
<% } else { %>
  <p>Please log in.</p>
<% } %>
  1. 循环控制

EJS模板中的循环控制使用JavaScript的forwhile循环。这允许模板遍历数组或对象,并为每个元素生成HTML。

<!-- 遍历数组 -->
<% for (let i = 0; i < items.length; i++) { %>
  <li><%= items[i] %></li>
<% } %>

<!-- 遍历对象 -->
<% for (let key in object) { %>
  <p><%= key %>: <%= object[key] %></p>
<% } %>
  1. 包含其他模板

EJS允许在一个模板中包含另一个模板,这有助于代码复用和模块化。

<!-- 在布局模板中 -->
<%- include('header') %>
<%- include('footer') %>

<!-- 在子模板中 -->
<% include('partials/header') %>
  1. 继承和布局

EJS支持模板继承,允许你创建一个基础模板(layout),然后在其他模板中继承这个基础模板。

<!-- layout.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <%- body %>
</body>
</html>

<!-- page.ejs -->
<%- extend ../layout.ejs %>
<%- block content %>
  <h1>My Page</h1>
  <p>This is my page content.</p>
<%- endblock %>
  1. 未转义输出

使用<%- %>可以输出未转义的HTML,这对于插入HTML代码片段非常有用。

<%- user.htmlContent %>
  1. 只执行代码

<% %>标签内的代码不会被输出,只执行代码。

<% 
  var fullName = user.firstName + ' ' + user.lastName; 
%>
<p><%= fullName %></p>
  1. 过滤器

EJS允许使用过滤器来处理输出,例如格式化日期或字符串。

<%= |capitalize %>
<%= user.name | capitalize %>

EJS允许定义宏来重用代码片段。

<% macro.hello(name) { %>
  <p>Hello, <%= name %>!</p>
<% } %>

<%- macro.hello('John') %>
  1. 异步宏

EJS也支持异步宏,这对于处理异步数据特别有用。

// 在Express中定义异步宏
app.locals.asyncMacro = {
  fetchData: function(callback) {
    // 异步获取数据
    callback(null, 'Data fetched');
  }
};

// 在模板中使用异步宏
<%- asyncMacro.fetchData(function(err, data) { %>
  <% if (err) { %>
    <p>Error: <%= err %></p>
  <% } else { %>
    <p><%= data %></p>
  <% } %>
<% }) %>
  1. 错误处理

EJS模板可以在渲染时捕获错误,并在模板中处理它们。

<% try { %>
  <!-- 可能出错的代码 -->
<% } catch (err) { %>
  <p>Error: <%= err.message %></p>
<% } %>

这些高级用法使得EJS成为一个非常灵活和强大的模板引擎,可以满足复杂的Web开发需求。通过这些用法,开发者可以构建出更加动态和交互性强的Web应用。

Ejs模块的数据传递

在Express.js中使用EJS模块的数据传递

在Express.js中,EJS是作为视图引擎集成的,所以数据传递通常是通过res.render()方法完成的。

const express = require('express');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs'); // 设置EJS为视图引擎

app.get('/', (req, res) => {
  // 准备数据对象
  const data = {
        No:'221#',
        orderTime:'2024-7-8 11:00',
        orderPrice:[
            {
                menu:'麻辣烫',
                orderNo:'*1',
                price:'30.00'
            },{
                menu:'可乐',
                orderNo:'*2',
                price:'5.00'
            },{
                menu:'合计',
                orderNo:'*3',
                price:'40.00'
            }
        ]
    }
  // 使用res.render()渲染EJS模板,并传递数据
  res.render('./static/6-2', data);
  // 这是第一个参数,通常是一个字符串,表示要渲染的视图文件的名称(不包括文件扩展名)。
  // 这是第二个参数,是一个对象,包含了所有要传递给视图模板的局部变量。 
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在这个例子中,template.ejs是EJS模板文件的名称,它应该位于views文件夹下(或者你可以通过app.set('views', path)设置自定义的模板文件夹路径)。data对象包含了所有模板中需要用到的数据。

在http模块中使用EJS模块的数据传递

const http = require('http')
const fs = require('fs')
const ejs = require('ejs')
http.createServer((request,response) =>{
    fs.readFile('./static/6-2.ejs','utf-8',(error,html) =>{
        response.writeHead(200, { 'Content-Type': 'text/html' });
        const data = {
            No:'221#',
            orderTime:'2024-7-8 11:00',
            orderPrice:[
                {
                    menu:'麻辣烫',
                    orderNo:'*1',
                    price:'30.00'
                },{
                    menu:'可乐',
                    orderNo:'*2',
                    price:'5.00'
                },{
                    menu:'合计',
                    orderNo:'*3',
                    price:'40.00'
                }
            ]
        }
        response.end(ejs.render(html,data));
    });
}).listen(52274,function(){
    console.log('服务器监听端口为 http://127.0.0.1:52274')
})

在客服端接收数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= No %></title>
</head>
<body>
    <h1>订单详情</h1>
    <p>订单编号:<strong><%= No %></strong></p>
    <p>订单时间:<strong><%= orderTime %></strong></p>
    <table border="1">
        <thead>
            <tr>
                <th>菜品名称</th>
                <th>数量</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <% orderPrice.forEach(function(item) { %>
                <tr>
                    <td><%= item.menu %></td>
                    <td><%= item.orderNo %></td>
                    <td><%= item.price %></td>
                </tr>
            <% }); %>
        </tbody>
    </table>
</body>
</html>

EJS的使用场景

  1. 快速搭建静态网站:EJS可以用于快速构建静态网页,只需将数据绑定到模板中,然后将渲染后的HTML保存到文件中。
  2. 构建动态网页:EJS也适用于构建动态网页,将数据绑定到模板中,然后将渲染后的HTML发送给客户端。
  3. 前后端不分离的项目:在一些项目中,后端服务直接连接数据库,查询数据后返回到EJS页面,根据EJS语法,从路由处拿到变量后渲染在EJS模板内。

结论

EJS作为一个强大的模板引擎,提供了灵活的方式来处理动态内容的生成,适用于各种Web开发场景,从简单的静态页面到复杂的业务型网站。通过EJS,开发者可以更高效地构建和维护Web应用,提高开发效率和代码质量。

;