** EJS 模板引擎**，讓你徹底搞明白什么是模板引擎、什么是 EJS、怎么用、語法、最佳實踐等等：
📚 一、什么是模板引擎？
模板引擎是前后端分離之前的一種服務器端“渲染技術”。它的主要作用是：
將 HTML 頁面和后端傳遞過來的數據結合起來，生成真正能展示給用戶的 HTML 頁面。
🛠? 工作原理：
- 編寫模板頁面（包含 HTML 和變量占位符）
- 后端把數據傳進去
- 模板引擎渲染成真正的 HTML 返回給瀏覽器
🎯 二、什么是 EJS？
EJS（Embedded JavaScript Templates） 是 Node.js 中使用廣泛的模板引擎之一，和 HTML 長得很像，但支持 JavaScript 嵌入。
EJS 特點：
| 特點 | 描述 |
|---|---|
| JS 語法嵌入 | 可以寫原生 JavaScript 表達式和語句 |
| HTML 格式友好 | 看起來就是 HTML，不需要特殊縮進 |
| 靈活易學 | 初學者也能很快上手 |
🚀 三、Express 中使用 EJS（從零開始）
1?? 安裝依賴
npm install express ejs
2?? 創建基本目錄結構
project/
├── views/ ← EJS 頁面模板放這里
│ └── index.ejs
├── app.js ← 主程序
3?? 配置 Express 使用 EJS（app.js）
const express = require('express');
const app = express();
const port = 3000;// 設置 EJS 為視圖引擎
app.set('view engine', 'ejs');// 設置視圖文件目錄（默認就是 'views'，可省略）
app.set('views', './views');// 路由
app.get('/', (req, res) => {res.render('index', {title: '歡迎使用 EJS',username: '小紅',skills: ['JavaScript', 'Vue', 'Node.js']});
});app.listen(port, () => {console.log(`服務已啟動：http://localhost:${port}`);
});
4?? 創建 EJS 頁面 views/index.ejs
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title><%= title %></title>
</head>
<body><h1>你好，<%= username %> 👋</h1><p>你掌握的技能有：</p><ul><% skills.forEach(skill => { %><li><%= skill %></li><% }) %></ul>
</body>
</html>
🧪 四、EJS 語法大全（常用）
| 寫法 | 說明 |
|---|---|
<%= variable %> | 輸出變量并自動轉義（安全） |
<%- html %> | 原樣輸出 HTML，不轉義（慎用） |
<% code %> | 執行 JS 代碼（無輸出） |
<% if (...) { %> ... <% } %> | 條件判斷 |
<% array.forEach(...) %> | 循環輸出 |
📝 示例補充
<!-- 輸出變量 -->
<p>用戶名：<%= username %></p><!-- 條件語句 -->
<% if (username === 'admin') { %><p>歡迎管理員！</p>
<% } else { %><p>普通用戶</p>
<% } %><!-- 輸出 HTML（注意 XSS） -->
<%- '<strong>這是粗體</strong>' %>
🧩 五、模板復用（Layout）
雖然 EJS 本身不內置布局系統，但你可以用 <%- include('header') %> 來實現“模板片段復用”。
示例：
1. 創建公共頭部：views/partials/header.ejs
<header><h1>網站導航</h1><hr/>
</header>
2. 主模板中引入
<!DOCTYPE html>
<html>
<head><title><%= title %></title>
</head>
<body><%- include('partials/header') %><p>主內容區</p></body>
</html>
📦 六、文件結構推薦（實戰項目）
project/
├── views/
│ ├── partials/
│ │ └── header.ejs
│ ├── index.ejs
│ └── user.ejs
├── public/ ← 靜態資源
│ └── css/style.css
├── routes/
│ └── user.js
├── app.js
💬 七、EJS 與前端分離框架的區別
| 項目 | EJS（SSR） | Vue/React（SPA） |
|---|---|---|
| 渲染方式 | 服務端渲染 | 客戶端渲染 |
| 首屏加載 | ? 快 | ? 需加載 JS |
| SEO 支持 | ? 好 | ? 差（需 SSR） |
| 動態交互性 | ? 差（需刷新） | ? 很強 |
| 場景適合 | 簡單后臺、CMS | 大型復雜前端應用 |
? 八、總結
- EJS 是輕量、高效、易學的模板引擎。
- 它適合用在中小型后臺項目、管理平臺。
- 不建議用 EJS 做前端復雜交互（如 Vue/React 更合適）。
)
