什么是模板引擎？

在 Node.js 开发中，我们通常需要把数据渲染到一个 HTML 页面中展示给用户，这就需要一个模板引擎。模板引擎是将数据和模板进行组合，生成的最终的 HTML 页面。ejs 是 Node.js 中最流行的一种模板引擎。

安装 ejs

在 Node.js 中安装 ejs 最简单的方法是使用 npm 包管理器，在命令行中输入以下命令安装 ejs：

npm install ejs

使用 ejs

1. 编写模板文件

ejs 的模板文件后缀名为 .ejs，它本质上是一个普通的 HTML 文件，只不过在其中使用 ejs 提供的语法。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ejs 渲染示例</title>
</head>
<body>
    <h1> <%= title %> </h1>
    <p>文章内容：</p>
    <% for(var i=0; i < articles.length; i++) { %>
        <div>
            <h2><%= articles[i].title %></h2>
            <p><%= articles[i].content %></p>
        </div>
    <% } %>
</body>
</html>

2. 使用 ejs 渲染数据

在 Node.js 中使用 ejs 渲染数据非常简单，通过 ejs.render() 函数即可实现。

示例：

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

// 读取模板文件
const template = fs.readFileSync(__dirname + '/views/index.ejs', 'utf8');

// 渲染数据
const data = {
    title: '使用 ejs 渲染数据',
    articles: [
        {
            title: '大数据时代的 Node.js',
            content: 'Node.js 的强大性能，在大数据处理方面发挥了更加重要的作用。'
        },
        {
            title: 'Node.js 开发微服务',
            content: '微服务架构是 Node.js 重要的应用场景之一。'
        },
        {
            title: '异步编程思维',
            content: 'Node.js 异步编程思维的重要性与基本原理。'
        }
    ]
};
const html = ejs.render(template, data);

console.log(html);

第一步是通过 Node.js 内置的 fs 模块读取 views/index.ejs 文件内容，第二步是定义要渲染的数据 data，第三步是通过 ejs.render() 函数渲染数据。最后输出渲染后的 HTML 内容。

ejs 的语法

ejs 这种模板引擎的语法有很多，这里只介绍最常用的几个语法。

输出数据

在 ejs 中，要输出数据使用 <%= %> 语法，如：

<h1> <%= title %> </h1>

执行语句

在 ejs 中，执行语句使用 <% %> 语法，如：

<% if (articles.length > 0) { %>
    <ul>
        <% for (var i = 0; i < articles.length; i++) { %>
            <li><%= articles[i] %></li>
        <% } %>
    </ul>
<% } else { %>
    <p>暂无文章</p>
<% } %>

注释语句

在 ejs 中，注释语句使用 <%# %> 语法，如：

<%# 代码注释 %>

包含子模板

在 ejs 中，可以使用 <%- include(file) %> 语法引入其他模板文件。

示例：

假如我们有两个文件 parent.ejs 和 child.ejs，其中 parent.ejs 引用了 child.ejs。

child.ejs 内容：

<h2>子模板</h2>

parent.ejs 内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>模板引用</title>
</head>
<body>
    <%- include('child.ejs') %>
    <p>主模板</p>
</body>
</html>

控制流语句

在 ejs 中，有一些特殊的语法，可以用来循环、判断等。

示例：

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

<% if (user) { %>
    <h2><%= user.name %></h2>
<% } %>

<% switch (type) { %>
    <% case 'fruit': %>
        <p>水果</p>
    <% case 'vegetable': %>
        <p>蔬菜</p>
    <% default: %>
        <p>未知类型</p>
<% } %>

示例1：使用 ejs 渲染动态网页

下面是一个简单使用 ejs 渲染动态网页的示例。

假设我们有一个用户信息的数据对象：

const user = {
    name: '王妍',
    age: 20,
    gender: '女'
};

接下来我们使用 ejs 模板来渲染这个用户信息：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户信息</title>
</head>
<body>
    <h1><%= user.name %> 的个人信息</h1>
    <ul>
        <li>姓名： <%= user.name %> </li>
        <li>年龄： <%= user.age %> </li>
        <li>性别： <%= user.gender %> </li>
    </ul>
</body>
</html>

注意：在 ejs 中，我们可以使用 <%= %>语法来展示变量的值。

最后通过 ejs 的渲染函数来渲染这个模板：

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

const user = {
    name: '王妍',
    age: 20,
    gender: '女'
};

const template = fs.readFileSync(__dirname + '/views/user.ejs', 'utf8');
const html = ejs.render(template, { user: user });
console.log(html);

示例2：使用 ejs 来编写一个简单的文章列表

下面是一个示例，使用 ejs 模板引擎来渲染一个文章列表。

模板文件：views/articles.ejs：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章列表</title>
</head>
<body>
    <h1>文章列表</h1>
    <ul>
        <% for (var i = 0; i < articles.length; i++) { %>
            <li><a href="<%= articles[i].url %>"><%= articles[i].title %></a></li>
            <p><%= articles[i].summary %></p>
        <% } %>
    </ul>
</body>
</html>

数据对象：

const articles = [
    {
        title: 'Node.js 进阶教程',
        summary: '本教程详细讲解了 Node.js 的进阶特性和使用技巧。',
        url: 'http://www.example.com/nodejs-advanced'
    },
    {
        title: '如何学习 HTML5',
        summary: 'HTML5 是现代 Web 应用开发的核心技术，本文教你如何学习它。',
        url: 'http://www.example.com/learn-html5'
    },
    {
        title: 'React Web 开发实战',
        summary: '本课程详细讲解 React Web 开发的实战技巧和经验。',
        url: 'http://www.example.com/react-web'
    }
];

渲染代码：

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

const template = fs.readFileSync(__dirname + '/views/articles.ejs', 'utf8');
const html = ejs.render(template, { articles: articles });

console.log(html);

以上就是使用 ejs 的入门教程了，相信读者已经对其基本使用有所掌握了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Node.js的Web模板引擎ejs的入门使用教程 - Python技术站

Node.js的Web模板引擎ejs的入门使用教程