正文

掌握EJS模板引擎：轻松构建动态网页，让HTML动起来

/0 浏览量
0414

EJS（Embedded JavaScript）是一种流行的模板引擎，它允许你将HTML和JavaScript代码嵌入到HTML文件中。这使得构建动态网页变得简单而高效。通过EJS，你可以轻松地根据后端数据生成动态内容，让你的网页充满活力。

EJS的基本用法

安装EJS

首先，你需要安装Node.js环境。然后，通过npm（Node.js包管理器）安装EJS：

npm install ejs --save

创建EJS模板

EJS模板通常以.ejs为文件扩展名。以下是一个简单的EJS模板示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <ul>
        <% for(var i = 0; i < items.length; i++){ %>
            <li><%= items[i] %></li>
        <% } %>
    </ul>
</body>
</html>

在这个例子中，我们使用<% %>来嵌入JavaScript代码，使用<%= %>来输出变量。

使用EJS渲染模板

在Node.js应用程序中，你可以使用ejs模块来渲染EJS模板。以下是一个简单的示例：

const ejs = require('ejs');
const fs = require('fs');

// 读取EJS模板文件
const template = fs.readFileSync('index.ejs', 'utf-8');

// 渲染模板
const rendered = ejs.render(template, {
    title: 'Hello, EJS!',
    items: ['Item 1', 'Item 2', 'Item 3']
});

// 输出渲染后的HTML内容
console.log(rendered);

在Express.js中使用EJS

如果你使用Express.js框架，可以更方便地集成EJS。以下是一个Express.js示例：

const express = require('express');
const ejs = require('ejs');
const app = express();

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

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

// 定义路由
app.get('/', (req, res) => {
    res.render('index', {
        title: 'Hello, EJS with Express!',
        items: ['Item 1', 'Item 2', 'Item 3']
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

在这个例子中，我们创建了一个名为index.ejs的模板文件，并将其渲染为HTML内容。然后，我们使用Express.js来处理HTTP请求，并返回渲染后的HTML内容。

EJS的高级特性

块和局部模板

EJS支持块和局部模板，这使得模板的重用和组件化变得简单。

过滤器

EJS过滤器允许你定义自定义的函数，用于转换数据。

控制结构

EJS支持条件语句和循环语句，这使得动态内容生成更加灵活。

总结

掌握EJS模板引擎可以帮助你轻松构建动态网页。通过EJS，你可以将HTML、CSS和JavaScript代码整合到一个文件中，从而提高开发效率。希望这篇文章能帮助你入门EJS，并在实践中不断进步。

-- 展开阅读全文 --