当前位置：首页 > web >正文

Ejs模版引擎介绍，什么是模版引擎，什么是ejs,ejs基本用法

web 2025/7/3 13:53:31

** 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	大型复杂前端应用