在Jade文件中显示Node.js Express应用程序中的变量

在Jade（现在称为Pug）模板引擎中显示Node.js Express应用程序中的变量，你需要使用Pug的语法来嵌入这些变量。以下是一些基础概念和相关步骤：

基础概念

1. Pug模板引擎：Pug是一个高性能的HTML模板引擎，用于生成HTML。它使用缩进来定义结构，使得代码更加简洁。
2. Express中间件：Express是一个简洁而灵活的Node.js Web应用程序框架，它提供了一系列强大的功能来构建各种Web和移动设备应用。

相关优势

• 简洁性：Pug的语法简洁，减少了模板中的冗余代码。
• 可维护性：通过将逻辑与视图分离，提高了代码的可维护性。
• 灵活性：可以在模板中嵌入动态数据，使得页面显示更加丰富和个性化。

类型与应用场景

• 类型：Pug主要用于服务器端渲染（SSR），可以与Node.js和Express无缝集成。
• 应用场景：适用于需要动态生成HTML内容的Web应用，如博客、电商网站等。

示例代码

假设你有一个Express应用，并且你想在Pug模板中显示一个变量title。

Express设置

const express = require('express');
const app = express();

app.set('view engine', 'pug'); // 设置视图引擎为Pug

app.get('/', (req, res) => {
  const title = 'Hello World';
  res.render('index', { title }); // 渲染index.pug并传递title变量
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Pug模板（index.pug）

doctype html
html
  head
    title= title // 使用等号直接插入变量
  body
    h1= title // 同样使用等号插入变量

遇到的问题及解决方法

问题：变量未显示

原因：可能是由于以下原因之一：

1. 变量名拼写错误。
2. 在Express路由中没有正确传递变量。
3. Pug模板文件路径不正确或文件名错误。

解决方法：

• 确保变量名在Express路由和Pug模板中完全一致。
• 检查res.render调用中传递的变量对象。
• 确认Pug模板文件位于正确的目录，并且文件名正确无误。

示例调试步骤

1. 检查变量传递：
2. 检查变量传递：
3. 打印日志： 在Express路由中添加日志输出，确认变量是否正确传递：
4. 打印日志： 在Express路由中添加日志输出，确认变量是否正确传递：
5. 验证模板路径： 确保Pug模板文件index.pug位于views目录下，这是Express默认查找模板的目录。

通过以上步骤，你应该能够在Jade/Pug文件中成功显示Node.js Express应用程序中的变量。