模板引擎 - EJS 模板引擎 - 语法与使用

在 Web 开发中，模板引擎是一项非常实用的技术，它允许我们将数据和视图分离，提高代码的可维护性和可扩展性。EJS（Embedded JavaScript）是一个简单而强大的 JavaScript 模板引擎，它允许我们在 HTML 中嵌入 JavaScript 代码，从而动态生成 HTML 页面。本文将详细介绍 EJS 模板引擎的语法和使用方法。

什么是 EJS 模板引擎

EJS 是一个高效的嵌入式 JavaScript 模板引擎，它的核心思想是将 JavaScript 代码嵌入到 HTML 模板中，通过传入数据，动态生成最终的 HTML 页面。EJS 简单易学，不需要复杂的配置，非常适合初学者和小型项目。

安装 EJS

在使用 EJS 之前，我们需要先安装它。如果你使用的是 Node.js 项目，可以通过 npm 来安装 EJS：

npm install ejs

EJS 基本语法

EJS 使用特殊的标签来嵌入 JavaScript 代码，主要有以下几种标签：

1. `<%... %>`：执行 JavaScript 代码

这个标签用于执行 JavaScript 代码，例如循环、条件判断等。代码不会直接输出到 HTML 中。

<% for(var i = 0; i < 3; i++) { %>
  <p>这是第 <%= i + 1 %> 个段落</p>
<% } %>

2. `<%=... %>`：输出经过 HTML 转义后的变量值

这个标签用于输出变量的值，并且会对特殊字符进行 HTML 转义，防止 XSS 攻击。

<p>欢迎，<%= username %>！</p>

3. `<%-... %>`：输出原始的变量值

这个标签用于输出原始的变量值，不会进行 HTML 转义。通常用于输出 HTML 代码。

<%- htmlContent %>

4. `<%#... %>`：注释

这个标签用于添加注释，注释不会在最终的 HTML 中显示。

<%# 这是一个注释 %>

EJS 在 Node.js 中的使用示例

下面是一个完整的 Node.js 项目示例，演示如何使用 EJS 模板引擎。

项目结构

project/
├── app.js
├── views/
│   └── index.ejs

代码实现

1. 创建 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>EJS 示例</title>
</head>
<body>
  <h1>欢迎，<%= username %>！</h1>
  <h2>你的爱好有：</h2>
  <ul>
    <% hobbies.forEach(function(hobby) { %>
      <li><%- hobby %></li>
    <% }); %>
  </ul>
</body>
</html>

2. 创建 Node.js 服务器文件 `app.js`

const express = require('express');
const app = express();
const port = 3000;
// 设置视图引擎为 EJS
app.set('view engine', 'ejs');
// 定义路由
app.get('/', (req, res) => {
  const data = {
    username: '张三',
    hobbies: ['篮球', '阅读', '编程']
  };
  // 渲染 EJS 模板并传递数据
  res.render('index', data);
});
// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

运行项目

在终端中运行以下命令启动服务器：

node app.js

然后在浏览器中访问 http://localhost:3000，你将看到动态生成的 HTML 页面。

EJS 语法总结

标签	作用	示例
`<%... %>`	执行 JavaScript 代码	`<% for(var i = 0; i < 3; i++) { %>`
`<%=... %>`	输出经过 HTML 转义后的变量值	`<%= username %>`
`<%-... %>`	输出原始的变量值	`<%- htmlContent %>`
`<%#... %>`	注释	`<%# 这是一个注释 %>`

总结

EJS 是一个简单而强大的 JavaScript 模板引擎，通过嵌入 JavaScript 代码，我们可以动态生成 HTML 页面。本文介绍了 EJS 的基本语法和在 Node.js 中的使用方法，希望对你有所帮助。在实际项目中，你可以根据需要灵活运用 EJS，提高代码的可维护性和可扩展性。

模板引擎 - EJS 模板引擎 - 语法与使用