模板引擎简介 #

一、什么是模板引擎？ #

1.1 定义 #

模板引擎是一种将模板文件和数据结合生成HTML的工具。它允许你使用变量、条件、循环等逻辑来动态生成页面。

1.2 工作原理 #

text

模板文件 + 数据 = HTML输出

javascript

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index', { title: '首页', user: '张三' });
});

二、常用模板引擎 #

2.1 Express支持的模板引擎 #

引擎	说明	特点
EJS	嵌入式JavaScript	语法简单，类似HTML
Pug	缩进式模板	简洁，不写标签
Handlebars	逻辑少模板	安全，分离关注点
Nunjucks	模板继承	功能强大
Mustache	无逻辑模板	简单通用

2.2 选择建议 #

场景	推荐引擎
简单项目	EJS
追求简洁	Pug
团队协作	Handlebars
复杂布局	Nunjucks
多语言支持	Mustache

三、配置模板引擎 #

3.1 设置视图引擎 #

javascript

app.set('view engine', 'ejs');

3.2 设置视图目录 #

javascript

app.set('views', path.join(__dirname, 'views'));

3.3 自定义视图目录 #

javascript

app.set('views', [
    path.join(__dirname, 'views'),
    path.join(__dirname, 'templates')
]);

四、渲染模板 #

4.1 res.render() #

javascript

app.get('/', (req, res) => {
    res.render('index', { title: '首页' });
});

4.2 传递数据 #

javascript

app.get('/user/:id', (req, res) => {
    res.render('user', {
        title: '用户详情',
        userId: req.params.id,
        user: {
            name: '张三',
            email: 'zhangsan@example.com'
        },
        items: ['项目1', '项目2', '项目3']
    });
});

4.3 使用app.locals #

全局变量：

javascript

app.locals.siteName = '我的网站';
app.locals.version = '1.0.0';

app.get('/', (req, res) => {
    res.render('index');
});

模板中可直接使用 siteName 和 version。

4.4 使用res.locals #

请求级变量：

javascript

app.use((req, res, next) => {
    res.locals.user = req.user || null;
    res.locals.isAuthenticated = !!req.user;
    next();
});

app.get('/dashboard', (req, res) => {
    res.render('dashboard');
});

五、模板缓存 #

5.1 开发环境 #

javascript

if (process.env.NODE_ENV === 'development') {
    app.set('view cache', false);
}

5.2 生产环境 #

javascript

if (process.env.NODE_ENV === 'production') {
    app.set('view cache', true);
}

六、错误处理 #

6.1 模板不存在 #

javascript

app.get('/page', (req, res, next) => {
    res.render('nonexistent', (err, html) => {
        if (err) {
            return next(err);
        }
        res.send(html);
    });
});

6.2 渲染错误 #

javascript

app.use((err, req, res, next) => {
    console.error('模板错误:', err);
    res.status(500).send('模板渲染失败');
});

七、EJS快速示例 #

7.1 安装 #

bash

npm install ejs

7.2 配置 #

javascript

app.set('view engine', 'ejs');

7.3 模板文件 #

views/index.ejs：

html

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
    <ul>
        <% items.forEach(item => { %>
            <li><%= item %></li>
        <% }); %>
    </ul>
</body>
</html>

7.4 路由 #

javascript

app.get('/', (req, res) => {
    res.render('index', {
        title: '首页',
        message: '欢迎',
        items: ['项目1', '项目2']
    });
});

八、Pug快速示例 #

8.1 安装 #

bash

npm install pug

8.2 配置 #

javascript

app.set('view engine', 'pug');

8.3 模板文件 #

views/index.pug：

pug

doctype html
html
    head
        title= title
    body
        h1= message
        ul
            each item in items
                li= item

8.4 路由 #

javascript

app.get('/', (req, res) => {
    res.render('index', {
        title: '首页',
        message: '欢迎',
        items: ['项目1', '项目2']
    });
});

九、总结 #

模板引擎要点：

概念	说明
视图引擎	app.set(‘view engine’, ‘ejs’)
视图目录	app.set(‘views’, path)
渲染方法	res.render(‘template’, data)
全局变量	app.locals
请求变量	res.locals

下一步，让我们深入学习EJS模板！