菜鸟教程
教程 express tutorial

使用 EJS

EJS（Embedded 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 应用。

相关内容