Node.js 项目中使用 EJS 实现 列表渲染 和 条件渲染，并结合实际代码示例，帮你更好地理解 EJS 的用法。
🧑💻 一、在 Node.js 中使用 EJS
我们已经知道如何在 Express 中使用 EJS，下面我们回顾一下如何在 Node.js 项目中配置 EJS 作为模板引擎：
1️⃣ 安装依赖
npm install express ejs
2️⃣ 创建项目结构
project/
├── views/
│ ├── index.ejs
│ ├── partials/
│ │ └── header.ejs
├── app.js
3️⃣ 配置 Express 使用 EJS
// app.js
const express = require('express');
const app = express();
const port = 3000;
// 设置 EJS 为视图引擎
app.set('view engine', 'ejs');
// 设置视图文件目录
app.set('views', './views');
// 路由定义
app.get('/', (req, res) => {
res.render('index', {
title: 'EJS 列表和条件渲染示例',
users: [
{ name: '小红', age: 25 },
{ name: '小明', age: 30 },
{ name: '小李', age: 35 }
]
});
});
// 启动服务器
app.listen(port, () => {
console.log(`服务已启动：http://localhost:${port}`);
});
🖼️ 二、EJS 列表渲染
在 EJS 中，我们使用 <% for ... %> 来遍历数组或对象列表。
示例：渲染用户列表
1️⃣ 创建视图：views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<h1>用户列表</h1>
<ul>
<% users.forEach(user => { %>
<li><%= user.name %> - <%= user.age %> 岁</li>
<% }) %>
</ul>
</body>
</html>
2️⃣ 渲染数据：app.js 中传递数据（如上例）
app.get('/', (req, res) => {
res.render('index', {
title: 'EJS 列表和条件渲染示例',
users: [
{ name: '小红', age: 25 },
{ name: '小明', age: 30 },
{ name: '小李', age: 35 }
]
});
});
📝 三、EJS 条件渲染
EJS 允许你在模板中使用常见的 JavaScript 语法，如 if 语句来实现条件渲染。
示例：条件渲染用户状态
1️⃣ 创建视图：views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<h1>用户状态</h1>
<ul>
<% users.forEach(user => { %>
<li>
<%= user.name %> -
<% if (user.age >= 30) { %>
<span>年纪较大</span>
<% } else { %>
<span>年纪较轻</span>
<% } %>
</li>
<% }) %>
</ul>
</body>
</html>
2️⃣ 渲染数据：app.js 中传递数据（如上例）
app.get('/', (req, res) => {
res.render('index', {
title: 'EJS 条件渲染示例',
users: [
{ name: '小红', age: 25 },
{ name: '小明', age: 30 },
{ name: '小李', age: 35 }
]
});
});
💡 四、EJS 语法回顾与扩展
1. 输出变量：
-
<%= %>：输出变量并转义（防止 XSS 攻击）<%= username %> <!-- 输出并转义 --> -
<%- %>：输出原始 HTML，不转义<%- content %> <!-- 直接输出 HTML -->
2. 条件判断：
<% if ... %>：条件判断<% if (age >= 18) { %> <p>成人</p> <% } else { %> <p>未成年</p> <% } %>
3. 循环：
-
<% for ... %>：循环遍历<% for (let i = 0; i < list.length; i++) { %> <li><%= list[i] %></li> <% } %> -
forEach：
<% users.forEach(user => { %> <li><%= user.name %> - <%= user.age %></li> <% }) %>
🗂️ 五、项目最佳实践
项目结构：
project/
├── views/
│ ├── partials/
│ │ └── header.ejs
│ ├── index.ejs
│ └── about.ejs
├── public/
│ └── css/
│ └── style.css
├── routes/
│ ├── index.js
│ └── user.js
├── app.js
路由模块化
// routes/index.js
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.render('index', {
title: '首页',
users: [
{ name: '小红', age: 25 },
{ name: '小明', age: 30 }
]
});
});
module.exports = router;
// app.js
const express = require('express');
const app = express();
const indexRouter = require('./routes/index');
app.set('view engine', 'ejs');
app.set('views', './views');
app.use('/', indexRouter);
app.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});
💡 六、总结
- 列表渲染：使用
forEach或for循环来渲染数组或对象。 - 条件渲染：通过
if、else语句来根据条件显示不同内容。 - EJS 优势：简单、易学、灵活，可以结合 Express 渲染动态页面。
