正文

轻松掌握 EJS 模板引擎：如何高效传递对象到视图

/0 浏览量
0614

在开发动态网页时，EJS（Embedded JavaScript）模板引擎是一种非常流行的选择，因为它允许开发者将JavaScript代码嵌入到HTML中，使得前后端分离的开发模式更加灵活。今天，我们就来聊聊如何高效地将对象传递到EJS视图。

什么是EJS？

EJS是一种简单的模板语言，它允许你将逻辑代码嵌入到HTML中。使用EJS，你可以将数据绑定到HTML模板，并在服务器端渲染页面。它常用于Node.js和Express框架中。

传递对象到视图的步骤

1. 初始化项目

首先，确保你的项目已经安装了Node.js和Express。然后，创建一个新的Express项目，并安装EJS模板引擎。

npm init -y
npm install express ejs

2. 设置EJS模板

在项目根目录下创建一个名为views的文件夹，并在该文件夹中创建一个名为index.ejs的文件。这是你的HTML模板文件，你可以在这里添加任何HTML代码。

<!DOCTYPE html>
<html>
<head>
    <title>EJS Example</title>
</head>
<body>
    <h1>{{title}}</h1>
    <ul>
        {{#each items}}
            <li>{{this}}</li>
        {{/each}}
    </ul>
</body>
</html>

3. 创建路由和传递对象

在app.js文件中，设置一个路由来处理请求，并传递一个对象到视图。

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

// 设置模板引擎为EJS
app.set('view engine', 'ejs');

// 设置静态文件目录
app.use(express.static('public'));

// 路由处理
app.get('/', (req, res) => {
    const data = {
        title: 'EJS Example',
        items: ['Apple', 'Banana', 'Cherry']
    };
    res.render('index', data);
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

4. 渲染视图

当用户访问http://localhost:3000/时，服务器会渲染index.ejs模板，并将data对象中的数据绑定到模板中的变量。

5. 使用EJS标签

在EJS模板中，你可以使用不同的标签来渲染数据。以下是一些常用的EJS标签：

  • {{ }}：用于输出变量值。
  • {{#each}}：用于遍历数组或对象。
  • {{/each}}：结束遍历。
  • {{this}}：在{{#each}}标签中使用，表示当前遍历的元素。

总结

通过以上步骤，你可以轻松地将对象传递到EJS视图，并渲染出动态的网页内容。EJS模板引擎提供了丰富的功能，可以帮助你构建灵活的动态网页。希望这篇文章能帮助你更好地理解EJS模板引擎的使用方法。

-- 展开阅读全文 --