在Express应用中，模板引擎是一个重要的工具，它允许你使用静态模板文件生成动态的HTML。模板文件通常包含占位符变量和表达式，这些变量和表达式在渲染时会被实际数据替换。使用模板引擎可以使得前端代码和后端逻辑分离，提升开发效率和代码维护性。
本章节将详细介绍如何在Express中使用三种常见的模板引擎：EJS、Pug和Handlebars。通过学习本章内容，你将能够熟练地在Express应用中集成和使用这些模板引擎。
1. 使用 EJS
EJS（Embedded JavaScript）是一种简单的模板语言，它使用JavaScript语法嵌入到HTML中，使得前端页面动态化。
安装与配置
首先，我们需要安装EJS模块：
npm install ejs
然后，在Express应用中配置EJS作为模板引擎：
const express = require('express');
const app = express();
// 设置EJS为模板引擎
app.set('view engine', 'ejs');
app.set('views', './views'); // 设置模板文件存放目录
app.get('/', (req, res) => {
res.render('index', { title: 'Express EJS Example', message: 'Hello, EJS!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
创建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><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
在上面的模板中，<%= %>用于输出变量的值。渲染时，title和message变量会被替换为实际的数据。
传递数据和逻辑
你可以在EJS模板中使用JavaScript逻辑，比如条件判断和循环：
<body>
<h1><%= message %></h1>
<% if (user) { %>
<p>Welcome, <%= user.name %>!</p>
<% } else { %>
<p>Please log in.</p>
<% } %>
</body>
2. 使用 Pug
Pug（原名Jade）是一种简洁的模板引擎，通过缩进表示HTML的嵌套结构，语法简洁优雅。
安装与配置
首先，安装Pug模块：
npm install pug
然后，在Express应用中配置Pug作为模板引擎：
const express = require('express');
const app = express();
// 设置Pug为模板引擎
app.set('view engine', 'pug');
app.set('views', './views'); // 设置模板文件存放目录
app.get('/', (req, res) => {
res.render('index', { title: 'Express Pug Example', message: 'Hello, Pug!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
创建Pug模板
在views目录下创建一个名为index.pug的模板文件：
doctype html
html
head
title= title
body
h1= message
Pug的缩进表示HTML标签的嵌套，=用于插入变量的值。
传递数据和逻辑
你可以在Pug模板中使用条件判断和循环：
body
h1= message
if user
p Welcome, #{user.name}!
else
p Please log in.
3. 使用 Handlebars
Handlebars是一种逻辑少的模板语言，设计上强调了保持模板的清晰性和简单性。
安装与配置
首先，安装Handlebars模块：
npm install hbs
然后，在Express应用中配置Handlebars作为模板引擎：
const express = require('express');
const app = express();
// 设置Handlebars为模板引擎
app.set('view engine', 'hbs');
app.set('views', './views'); // 设置模板文件存放目录
app.get('/', (req, res) => {
res.render('index', { title: 'Express Handlebars Example', message: 'Hello, Handlebars!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
创建Handlebars模板
在views目录下创建一个名为index.hbs的模板文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<h1>{{message}}</h1>
</body>
</html>
Handlebars使用双花括号{{ }}来插入变量的值。
传递数据和逻辑
Handlebars模板中也可以使用条件判断和循环：
<body>
<h1>{{message}}</h1>
{{#if user}}
<p>Welcome, {{user.name}}!</p>
{{else}}
<p>Please log in.</p>
{{/if}}
</body>
模板引擎是Express应用中不可或缺的一部分，熟练掌握这些技术能够让你更高效地开发和维护Web应用。
标签：Express,Handlebars,app,Pug,引擎,模板,EJS From： https://blog.csdn.net/imdeity/article/details/140300443