Express中的EJS模板引擎：深入解析、高级用法与代码示例

软考鸭

已于 2024-08-31 13:59:19 修改

阅读量1.2k

点赞数 21

分类专栏： nodejs帮助文档文章标签： express node.js

于 2024-08-31 13:58:33 首次发布

本文链接：https://blog.csdn.net/gusushantang/article/details/141751801

版权

nodejs帮助文档专栏收录该内容

164 篇文章 1 订阅

订阅专栏

在Web开发中，模板引擎是一个不可或缺的工具，它允许开发者将HTML模板与JavaScript代码分离，使得页面的渲染更加灵活和高效。Express作为Node.js的流行Web框架，支持多种模板引擎，其中EJS（Embedded JavaScript templating）因其简洁和易用性而广受欢迎。本文将深入解析Express中EJS模板引擎的原理，并通过代码示例展示如何使用EJS来渲染页面。

一、EJS模板引擎的基本原理

EJS是一种简单的模板语言，它允许开发者将JavaScript代码嵌入到HTML模板中。当Express应用接收到一个请求并需要渲染一个页面时，它会查找对应的EJS模板文件，执行其中的JavaScript代码，并将结果插入到HTML中，最终生成完整的HTML页面发送给客户端。

EJS模板使用特殊的标签来标记需要插入JavaScript代码的位置。例如，<% %>用于执行其中的JavaScript代码，<%= %>用于输出表达式的结果到模板中，而<%- %>则用于输出HTML转义的内容。

二、在Express中使用EJS

要在Express应用中使用EJS模板引擎，首先需要安装EJS并通过app.set()方法将其设置为应用的模板引擎。然后，可以通过res.render()方法来渲染EJS模板并发送响应给客户端。

安装EJS

在Express项目中，通过npm安装EJS模板引擎：
```
npm install ejs
```

设置EJS为模板引擎

在Express应用中，使用app.set()方法将EJS设置为模板引擎：

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

创建EJS模板

在项目的views目录下创建一个EJS模板文件，例如index.ejs：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

渲染EJS模板

在路由处理函数中，使用res.render()方法来渲染EJS模板并发送响应：
```
app.get('/', (req, res) => {
    res.render('index', { title: 'Express EJS', message: 'Hello, EJS!' });
});
```
当访问根路由时，Express会渲染index.ejs模板，并将title和message变量的值插入到模板中，最终生成完整的HTML页面发送给客户端。

三、EJS的高级用法

EJS不仅支持基本的变量替换和条件判断，还支持循环、包含其他模板、自定义函数等高级功能。这些功能使得EJS在处理复杂页面时更加灵活和强大。

循环

使用<% %>标签和JavaScript的循环语句来遍历数组或对象：

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

包含其他模板

使用<% include filename %>语法来包含其他EJS模板文件：
```
<% include header %>
<h1><%= message %></h1>
<% include footer %>
```

自定义函数

在渲染模板时，可以传递一个包含自定义函数的对象作为局部变量：

app.get('/', (req, res) => {
    res.render('index', {
        title: 'Express EJS',
        message: 'Hello, EJS!',
        upperCase: function(str) {
            return str.toUpperCase();
        }
    });
});