# 使用 EJS

URL: https://caijiao.org/express/chapter4/2-ejs
Source: docs/express/chapter4/2-ejs.md
Description: 本章节介绍如何在 Express 中使用 EJS 模板引擎，讲解 EJS 的基本用法、模板语法及动态内容渲染。

EJS（Embedded JavaScript）是一个流行的 [JavaScript](/javascript/) 模板引擎，具有简单、灵活的模板语法，广泛应用于动态生成 HTML 内容。Express 可以非常方便地与 EJS 集成，快速渲染动态页面。

## 安装 EJS

首先，在你的项目中安装 EJS 模板引擎：

```bash
npm install ejs
````

## 配置 EJS

在 Express 应用中设置 EJS 作为模板引擎：

```js
const express = require('express');
const path = require('path');
const app = express();

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

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

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

## 渲染 EJS 模板

使用 `res.render()` 方法渲染 EJS 模板，并传递数据到视图：

```js
app.get('/', (req, res) => {
  res.render('index', { title: 'Express 和 EJS' });
});
```

### 创建 `views/index.ejs` 模板

在 `views` 文件夹中创建一个名为 `index.ejs` 的文件：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1>欢迎来到 <%= title %> 网站！</h1>
</body>
</html>
```

### 渲染结果

访问 `http://localhost:3000` 时，Express 会渲染 `index.ejs` 模板，并插入传递的数据，最终生成以下 HTML：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express 和 EJS</title>
</head>
<body>
  <h1>欢迎来到 Express 和 EJS 网站！</h1>
</body>
</html>
```

## EJS 模板语法

EJS 提供了简洁的语法来嵌入 JavaScript 代码到 HTML 模板中：

### 输出变量

用 `<%= %>` 语法输出变量值：

```html
<p>欢迎，<%= username %>!</p>
```

### 控制结构

使用 `<% %>` 包裹 JavaScript 代码逻辑：

* **if 条件判断**：

```html
<% if (user.isLoggedIn) { %>
  <p>欢迎回来，<%= user.name %>!</p>
<% } else { %>
  <p>请登录</p>
<% } %>
```

* **for 循环**：

```html
<ul>
  <% items.forEach(item => { %>
    <li><%= item.name %></li>
  <% }) %>
</ul>
```

### 代码注释

EJS 允许在模板中添加注释：

```html
<%-- 这是一个注释 --%>
```

### 传递复杂数据

可以传递对象、数组或嵌套数据结构到 EJS 模板：

```js
app.get('/user/:id', (req, res) => {
  const user = { id: req.params.id, name: '张三' };
  res.render('profile', { user });
});
```

模板 `profile.ejs`：

```html
<h1>用户：<%= user.name %></h1>
<p>ID：<%= user.id %></p>
```

## 处理表单数据

EJS 模板也可以用来处理和渲染表单：

```html
<form action="/submit" method="POST">
  <input type="text" name="username" />
  <button type="submit">提交</button>
</form>
```

在 `app.js` 中处理表单提交：

```js
app.post('/submit', (req, res) => {
  const username = req.body.username;
  res.render('welcome', { username });
});
```

### 总结

通过与 EJS 的集成，Express 应用可以动态渲染 HTML 内容，轻松实现数据和页面的结合。掌握 EJS 的基础用法后，可以更加灵活地开发动态 Web 应用。