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

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

引言

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

EJS模板引擎的概念

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

EJS出现的原因

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

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

Ejs渲染标识

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

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

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

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> 标签的使用场景包括但不限于：

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

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

例如：

html 复制代码

<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代码。

html 复制代码

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

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

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

html 复制代码

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

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

用于在模板中进行循环。

html 复制代码

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

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

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

html 复制代码

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

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

用于模板继承。

html 复制代码

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

安装EJS

首先，通过npm安装EJS模块：

bash 复制代码

npm install ejs --save

配置Express.js

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

javascript 复制代码

const express = require('express');
const app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

创建EJS模板文件

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

html 复制代码

<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

渲染EJS模板

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

javascript 复制代码

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

2. http中使用Ejs

环境准备

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

bash

bash 复制代码

npm install ejs

创建HTTP服务器

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

javascript

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

创建EJS模板

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

html

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的语法，用于插入传递给模板的数据。

运行服务器

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

bash

bash 复制代码

node your_script_name.js

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

扩展功能

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

结论

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

EJS的高级用法

条件判断

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

html 复制代码

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

循环控制

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

html 复制代码

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

<!-- 遍历对象 -->
<% for (let key in object) { %>
  <p><%= key %>: <%= object[key] %></p>
<% } %>

包含其他模板

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

html 复制代码

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

<!-- 在子模板中 -->
<% include('partials/header') %>

继承和布局

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

html 复制代码

<!-- 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 %>

未转义输出

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

html 复制代码

<%- user.htmlContent %>

只执行代码

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

html 复制代码

<% 
  var fullName = user.firstName + ' ' + user.lastName; 
%>
<p><%= fullName %></p>

过滤器

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

html 复制代码

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

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

html 复制代码

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

<%- macro.hello('John') %>

异步宏

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

javascript 复制代码

// 在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>
  <% } %>
<% }) %>

错误处理

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

html 复制代码

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

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

Ejs模块的数据传递

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

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

javascript 复制代码

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模块的数据传递

javascript 复制代码

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

在客服端接收数据

html 复制代码

<!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的使用场景

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

结论

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

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

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

引言

EJS模板引擎的概念

EJS出现的原因

Ejs渲染标识

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

2. 数据输出（不转义） <%- %>

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

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

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

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

EJS的基本用法

1. express中使用Ejs

2. http中使用Ejs

EJS的高级用法

Ejs模块的数据传递

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

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

在客服端接收数据

EJS的使用场景

结论

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

2. 数据输出（不转义） `<%- %>`

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

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

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

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