AI工具平台 为你提供最新AI工具及常用工具的一站式平台

前端

Ejs

EJS（Embedded JavaScript）是一个简单的模板引擎，允许你将 JavaScript 代码嵌入到 HTML 文件中，从而动态生成 HTML 页面。

链接直达手机查看

EJS（Embedded JavaScript）是一个简单的模板引擎，允许你将 JavaScript 代码嵌入到 HTML 文件中，从而动态生成 HTML 页面。以下为你详细介绍：

特点

简单易用：语法简单，容易上手，开发者可以快速将 JavaScript 逻辑嵌入到 HTML 中。
高效执行：在服务器端快速解析和渲染模板，生成最终的 HTML 内容。
灵活性高：支持条件语句、循环语句等 JavaScript 逻辑，可以根据不同的数据动态生成不同的 HTML 结构。

基本语法

输出表达式：使用 <%= %> 包裹 JavaScript 表达式，用于输出表达式的值到 HTML 中。

html

<p>Hello, <%= name %>!</p>

代码块：使用 <% %> 包裹 JavaScript 代码块，用于执行 JavaScript 逻辑，不输出结果。

html

<% for (var i = 0; i < items.length; i++) { %>
  <li><%= items[i] %></li>
<% } %>

注释：使用 <%# %> 包裹注释内容，注释不会在生成的 HTML 中显示。

html

<%# 这是一个注释 %>

使用示例

以下是一个简单的 EJS 使用示例，展示了如何在 Node.js 中使用 EJS 渲染动态 HTML 页面。

javascript

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

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

// 定义路由
app.get('/', (req, res) => {
    const data = {
        title: 'EJS Example',
        message: 'Welcome to EJS!',
        items: ['Apple', 'Banana', 'Cherry']
    };
    // 渲染 EJS 模板
    res.render('index', data);
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

对应的 index.ejs 文件内容如下：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
    <ul>
        <% for (var i = 0; i < items.length; i++) { %>
            <li><%= items[i] %></li>
        <% } %>
    </ul>
</body>
</html>