当前位置：首页 > news >正文

ejs列表渲染，条件渲染，在node中使用ejs

news 来源：原创 2025/4/25 10:01:35

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