EJS模板的集成与视图渲染

在现代Web开发中，模板引擎是一个不可或缺的工具，它帮助开发者将数据与HTML结构结合起来，从而生成动态网页。EJS（Embedded JavaScript）是一个流行的模板引擎，因其简单易用和灵活性而受到广泛欢迎。在本教程中，我们将深入探讨如何在Node.js应用中集成EJS模板引擎，并进行视图渲染。

1. 什么是EJS？

EJS是一个简单的模板引擎，它允许你在HTML中嵌入JavaScript代码。EJS的语法非常直观，支持条件语句、循环、模板继承等功能，使得动态生成HTML变得简单。

优点：

简单易用：EJS的语法与JavaScript相似，易于上手。
灵活性：可以在模板中使用JavaScript逻辑，支持条件判断和循环。
良好的社区支持：EJS有着活跃的社区和丰富的文档，易于获取帮助。

缺点：

性能问题：在高并发场景下，EJS的性能可能不如一些编译型模板引擎。
安全性：如果不小心处理用户输入，可能会导致XSS（跨站脚本攻击）等安全问题。

2. 安装EJS

在开始之前，我们需要确保Node.js和npm已经安装。接下来，我们可以通过npm安装EJS。

npm install ejs

3. 创建一个简单的Node.js应用

我们将创建一个简单的Node.js应用，使用Express框架来处理HTTP请求，并集成EJS作为模板引擎。

3.1 初始化项目

首先，创建一个新的项目文件夹并初始化npm：

mkdir ejs-example
cd ejs-example
npm init -y

3.2 安装Express

接下来，安装Express框架：

npm install express

3.3 创建应用结构

创建以下文件结构：

ejs-example/
├── views/
│   ├── index.ejs
│   └── layout.ejs
├── public/
│   └── styles.css
└── app.js

3.4 编写`app.js`

在app.js中，我们将设置Express应用并配置EJS作为模板引擎。

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

const app = express();
const PORT = process.env.PORT || 3000;

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

// 设置视图文件夹
app.set('views', path.join(__dirname, 'views'));

// 静态文件中间件
app.use(express.static(path.join(__dirname, 'public')));

// 路由
app.get('/', (req, res) => {
    const data = {
        title: 'EJS示例',
        message: '欢迎使用EJS模板引擎！',
        items: ['苹果', '香蕉', '橙子']
    };
    res.render('index', data);
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`服务器正在运行在 http://localhost:${PORT}`);
});

3.5 创建EJS模板

3.5.1 `layout.ejs`

在views/layout.ejs中，我们可以定义一个基本的HTML结构，作为所有页面的布局。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div class="container">
        <%- body %>
    </div>
</body>
</html>

3.5.2 `index.ejs`

在views/index.ejs中，我们将使用EJS语法来渲染数据。

<% layout('layout') %>

<h1><%= title %></h1>
<p><%= message %></p>

<ul>
    <% items.forEach(function(item) { %>
        <li><%= item %></li>
    <% }); %>
</ul>

3.6 创建样式文件

在public/styles.css中添加一些基本样式：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

.container {
    max-width: 800px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

3.7 启动应用

在终端中运行以下命令启动应用：

node app.js

打开浏览器，访问 http://localhost:3000，你应该能看到渲染的页面。

4. EJS的高级用法

4.1 条件渲染

EJS支持条件渲染，可以根据不同的条件显示不同的内容。

<% if (items.length > 0) { %>
    <ul>
        <% items.forEach(function(item) { %>
            <li><%= item %></li>
        <% }); %>
    </ul>
<% } else { %>
    <p>没有可显示的项目。</p>
<% } %>

4.2 模板继承

EJS支持模板继承，可以创建一个基础模板，然后在其他模板中扩展它。

<% layout('layout') %>

<% block('content') %>
    <h1>这是一个子页面</h1>
<% endblock() %>

4.3 安全性注意事项

在使用EJS时，务必注意安全性。确保对用户输入进行适当的转义，以防止XSS攻击。EJS会自动对输出进行HTML转义，但在某些情况下，开发者需要手动处理。

<p><%= userInput %></p> <!-- 自动转义 -->
<p><%- userInput %></p> <!-- 不转义，需谨慎使用 -->

5. 总结

EJS是一个强大的模板引擎，适合用于Node.js应用的视图渲染。通过本教程，你应该能够成功集成EJS，并使用它来动态生成HTML页面。尽管EJS有其优缺点，但在许多场景下，它都是一个非常合适的选择。希望你能在实际项目中灵活运用EJS，提升开发效率。