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

在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();}});
});

然后在模板中使用这个自定义函数：

<h1><%= upperCase(message) %></h1>

四、总结

EJS是一个简单而强大的模板引擎，它允许开发者将JavaScript代码嵌入到HTML模板中，从而实现了页面的动态渲染。在Express应用中使用EJS，可以极大地提高开发效率和页面的可维护性。通过本文的介绍和代码示例，相信你已经掌握了在Express中使用EJS模板引擎的基本方法和高级技巧。

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

最新新闻

热搜词