EJS

简介

EJS（Embedded JavaScript）是一种简单的模板引擎，用于在服务器端生成 HTML 页面。它允许在 HTML 文件中嵌入 JavaScript 代码，从而动态生成内容。EJS 非常适合与 Express.js 一起使用，特别是在构建视图渲染层时。

EJS 的特点

简洁的语法：
- EJS 使用 <% %> 作为其模板标签，嵌入 JavaScript 代码非常方便。
- <%= %> 用于输出变量和表达式，<% %> 用于执行任意 JavaScript 代码，<%- %> 用于输出未转义的 HTML。
与 Express.js 集成：
- EJS 可以轻松地集成到 Express.js 应用程序中，用于渲染视图。
- 通过 Express.js 的 res.render 方法，可以将数据传递给 EJS 模板进行渲染。
支持包括部分和布局：
- EJS 支持在模板中包含其他模板文件，方便代码复用和模块化。
- 可以通过布局和部分模板（partials）来构建复杂的页面结构。

安装 EJS

首先，使用 npm 安装 EJS 模块：

npm install ejs

配置 Express.js 使用 EJS

在 Express.js 应用中，可以通过以下方式配置 EJS 作为模板引擎：

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

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

// 设置视图文件夹路径
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('index', { title: 'EJS Example', message: 'Hello, World!' });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

编写 EJS 模板

创建一个名为 views/index.ejs 的文件，并添加以下内容：

<!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>
</body>
</html>

使用 EJS 的常见语法

输出变量

<p><%= variableName %></p>

执行逻辑语句

<% if (user) { %>
  <h2>Welcome, <%= user.name %>!</h2>
<% } else { %>
  <h2>Welcome, Guest!</h2>
<% } %>

循环

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

包含其他模板文件

创建一个名为 views/partials/header.ejs 的文件：

<header>
  <h1><%= title %></h1>
</header>

在主模板文件中包含部分模板：

<%- include('partials/header') %>
<p>Some content here...</p>

运行 Express.js 应用

通过运行以下命令启动服务器：

node app.js

在浏览器中访问 http://localhost:3000，你将看到渲染的 EJS 模板。

总结

EJS 是一个强大的模板引擎，允许在 HTML 文件中嵌入 JavaScript 代码，生成动态内容。它与 Express.js 无缝集成，提供了简单易用的语法，可以轻松实现复杂的视图渲染需求。

基本使用方式

使用 EJS 作为模板引擎来构建动态网页应用非常简单，特别是在与 Express.js 一起使用时。以下是基本步骤，包括安装、配置、编写 EJS 模板，以及渲染视图。

基本步骤

1. 安装 Node.js 和 Express.js

首先，确保你已经安装了 Node.js 和 npm（Node Package Manager）。然后通过 npm 安装 Express.js 和 EJS 模块。

npm install express ejs

2. 创建项目目录和文件

在你的项目目录中创建以下文件： - app.js：主应用文件 - views：用于存放 EJS 模板的文件夹

3. 配置 Express.js 使用 EJS

在 app.js 文件中配置 Express.js 使用 EJS 作为模板引擎：

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

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

// 设置视图文件夹路径
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('index', { title: 'EJS Example', message: 'Hello, World!' });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

4. 创建 EJS 模板文件

在 views 文件夹中创建一个名为 index.ejs 的文件，并添加以下内容：

<!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>
</body>
</html>

5. 启动 Express.js 服务器

通过运行以下命令启动服务器：

node app.js

在浏览器中访问 http://localhost:3000，你将看到渲染的 EJS 模板。

使用 EJS 的常见语法

输出变量

在 EJS 模板中输出变量：

<p><%= variableName %></p>

执行逻辑语句

在 EJS 模板中执行逻辑语句：

<% if (user) { %>
  <h2>Welcome, <%= user.name %>!</h2>
<% } else { %>
  <h2>Welcome, Guest!</h2>
<% } %>

循环

在 EJS 模板中进行循环：

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

包含其他模板文件

在 EJS 模板中包含其他模板文件（例如部分模板）：

创建一个名为 views/partials/header.ejs 的文件：

<header>
  <h1><%= title %></h1>
</header>

在主模板文件中包含部分模板：

<%- include('partials/header') %>
<p>Some content here...</p>

完整示例

项目结构

my-ejs-app/
│
├── app.js
└── views/
    ├── index.ejs
    └── partials/
        └── header.ejs

`app.js` 文件

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

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

// 设置视图文件夹路径
app.set('views', './views');

// 路由处理
app.get('/', (req, res) => {
  res.render('index', { title: 'EJS Example', message: 'Hello, World!' });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

`views/index.ejs` 文件

<!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>
  <%- include('partials/header') %>
  <h1><%= message %></h1>
</body>
</html>

`views/partials/header.ejs` 文件

<header>
  <h1>Welcome to <%= title %></h1>
</header>

EJS 常用

EJS（Embedded JavaScript）是一种简洁的模板引擎，用于在 HTML 中嵌入 JavaScript 代码，从而生成动态内容。以下是一些常用的 EJS 代码片段和模式，这些可以帮助你在实际项目中高效地使用 EJS。

常用代码片段

输出变量

<p><%= variableName %></p>

执行逻辑语句

<% if (user) { %>
  <h2>Welcome, <%= user.name %>!</h2>
<% } else { %>
  <h2>Welcome, Guest!</h2>
<% } %>

循环

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

包含其他模板文件

<%- include('partials/header') %>

输出未转义的 HTML

<%- unescapedHTML %>

设置模板变量默认值

<%= typeof variableName !== 'undefined' ? variableName : 'Default Value' %>

示例代码

条件渲染

<% if (isLoggedIn) { %>
  <p>Welcome, <%= user.username %>!</p>
  <a href="/logout">Logout</a>
<% } else { %>
  <a href="/login">Login</a>
  <a href="/register">Register</a>
<% } %>

列表渲染

<ul>
  <% products.forEach(product => { %>
    <li>
      <h2><%= product.name %></h2>
      <p>Price: $<%= product.price %></p>
    </li>
  <% }); %>
</ul>

嵌套模板

创建一个 header.ejs 文件：

<header>
  <h1><%= title %></h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

在主模板文件中包含 header.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <%- include('header') %>
  <main>
    <h2>Content goes here</h2>
  </main>
</body>
</html>

渲染表单数据

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="<%= user ? user.name : '' %>">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="<%= user ? user.email : '' %>">
  
  <button type="submit">Submit</button>
</form>

高级用法

自定义函数

你可以在渲染模板时传递自定义函数，以便在模板中使用：

app.get('/', (req, res) => {
  res.render('index', {
    title: 'EJS Example',
    formatDate: (date) => {
      return new Date(date).toLocaleDateString();
    },
    currentDate: new Date()
  });
});

在 EJS 模板中使用该函数：

<p>Today's date is: <%= formatDate(currentDate) %></p>

过滤器

EJS 本身不支持过滤器，但你可以通过自定义函数实现类似功能：

app.get('/', (req, res) => {
  res.render('index', {
    title: 'EJS Example',
    uppercase: (str) => {
      return str.toUpperCase();
    },
    message: 'hello world'
  });
});

在 EJS 模板中使用过滤器：

<p><%= uppercase(message) %></p>

总结

通过这些常用的 EJS 代码片段和模式，你可以高效地构建动态网页应用。理解这些基本语法和模式将帮助你更好地利用 EJS 进行模板渲染，从而提升开发效率。

简单的例子

当然，下面是一个简单的 EJS 示例，它包括一个 Express.js 应用程序和一个 EJS 模板。这个示例展示了如何在 EJS 模板中渲染动态内容，并包含一个基本的 HTML 页面。

项目结构

simple-ejs-app/
│
├── app.js
└── views/
    └── index.ejs

步骤 1：创建项目目录和文件

在你的项目目录中创建以下文件和文件夹：

app.js：主应用文件
views 文件夹：用于存放 EJS 模板

步骤 2：安装 Express 和 EJS

在项目目录中运行以下命令来安装 Express 和 EJS：

npm init -y
npm install express ejs

步骤 3：配置和编写 Express 应用

在 app.js 文件中编写以下代码：

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

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

// 设置视图文件夹路径
app.set('views', './views');

// 路由处理
app.get('/', (req, res) => {
  const data = {
    title: 'Simple EJS Example',
    message: 'Hello, World!',
    items: ['Item 1', 'Item 2', 'Item 3']
  };
  res.render('index', data);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

步骤 4：创建 EJS 模板文件

在 views 文件夹中创建一个名为 index.ejs 的文件，并添加以下内容：

<!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>
    <% items.forEach(item => { %>
      <li><%= item %></li>
    <% }); %>
  </ul>
</body>
</html>

步骤 5：启动 Express 服务器

在项目目录中运行以下命令启动服务器：

node app.js

在浏览器中访问 http://localhost:3000，你将看到渲染的 EJS 模板，显示标题、消息和一个项目列表。

总结

这个简单的示例展示了如何使用 EJS 作为模板引擎在 Express.js 应用程序中渲染动态内容。通过这种方式，你可以轻松地创建动态网页应用。

基本概念

在使用 EJS（Embedded JavaScript）作为模板引擎时，有几个重要但少数的概念需要掌握，以便高效地创建和管理动态网页。这些概念将帮助你更好地理解和利用 EJS 的功能。

1. 视图引擎设置

设置视图引擎是使用 EJS 的第一步。这一步骤告诉 Express.js 使用 EJS 来渲染视图。

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

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

2. 渲染视图

在路由处理器中使用 res.render() 方法渲染视图，并传递数据到模板。

app.get('/', (req, res) => {
  const data = { title: 'Home', message: 'Welcome to EJS!' };
  res.render('index', data);
});

3. 嵌入 JavaScript 代码

在 EJS 模板中，你可以嵌入 JavaScript 代码来实现动态内容渲染。常用的语法有 <%= %> 和 <% %>。

<%= %>：用于输出变量的值。
<% %>：用于执行 JavaScript 代码但不输出。

<p><%= message %></p>
<% if (user) { %>
  <p>Welcome, <%= user.name %>!</p>
<% } %>

4. 循环渲染

使用循环语句（如 forEach）在模板中动态渲染列表。

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

5. 包含其他模板

使用 include 语法将其他模板文件嵌入到当前模板中，以便重用代码和模块化。

<%- include('header') %>

6. 转义与未转义输出

<%= %>：默认输出并转义 HTML。
<%- %>：输出未转义的 HTML。

<p><%= safeContent %></p>  <!-- 转义输出 -->
<p><%- unsafeContent %></p> <!-- 未转义输出 -->

7. 条件渲染

在模板中使用条件语句动态控制内容的渲染。

<% if (isLoggedIn) { %>
  <p>Welcome, <%= user.name %>!</p>
<% } else { %>
  <p>Please log in.</p>
<% } %>

8. 模板变量默认值

在 EJS 模板中设置变量的默认值，防止变量未定义时出现错误。

<%= typeof variableName !== 'undefined' ? variableName : 'Default Value' %>

9. 自定义函数

你可以在渲染模板时传递自定义函数，以便在模板中使用。

app.get('/', (req, res) => {
  res.render('index', {
    formatDate: (date) => new Date(date).toLocaleDateString(),
    currentDate: new Date()
  });
});

在 EJS 模板中使用该函数：

<p>Today's date is: <%= formatDate(currentDate) %></p>

10. 调试与错误处理

在 EJS 模板中可以捕获并处理错误，确保模板渲染时不会中断应用程序。

<% try { %>
  <p><%= riskyOperation() %></p>
<% } catch (e) { %>
  <p>Error: <%= e.message %></p>
<% } %>

总结

掌握这些重要但少数的概念，将帮助你在使用 EJS 时更加高效地创建动态网页应用。这些概念涵盖了从基础设置到高级用法的各个方面，为你提供了构建和管理模板所需的基本工具。

Ejs

米霖

2024-07-14

EJS

简介

EJS 的特点

安装 EJS

配置 Express.js 使用 EJS

编写 EJS 模板

使用 EJS 的常见语法

输出变量

执行逻辑语句

循环

包含其他模板文件

运行 Express.js 应用

总结

基本使用方式

基本步骤

1. 安装 Node.js 和 Express.js

2. 创建项目目录和文件

3. 配置 Express.js 使用 EJS

4. 创建 EJS 模板文件

5. 启动 Express.js 服务器

使用 EJS 的常见语法

输出变量

执行逻辑语句

循环

包含其他模板文件

完整示例

项目结构

app.js 文件

views/index.ejs 文件

views/partials/header.ejs 文件

EJS 常用

常用代码片段

输出变量

执行逻辑语句

循环

包含其他模板文件

输出未转义的 HTML

设置模板变量默认值

示例代码

条件渲染

列表渲染

嵌套模板

渲染表单数据

高级用法

自定义函数

过滤器

总结

简单的例子

项目结构

步骤 1：创建项目目录和文件

步骤 2：安装 Express 和 EJS

步骤 3：配置和编写 Express 应用

步骤 4：创建 EJS 模板文件

步骤 5：启动 Express 服务器

总结

基本概念

1. 视图引擎设置

2. 渲染视图

3. 嵌入 JavaScript 代码

4. 循环渲染

5. 包含其他模板

6. 转义与未转义输出

7. 条件渲染

8. 模板变量默认值

9. 自定义函数

10. 调试与错误处理

总结

`app.js` 文件

`views/index.ejs` 文件

`views/partials/header.ejs` 文件