如何通过Node.js+Express将JS函数数据输出到Pug文件？

我来帮你搞定这个数据显示的问题！这种Express传数据到Pug模板失败的情况，大多是几个关键环节没做好，咱们一步步排查：

首先得打个日志，看看你的数据获取函数到底有没有成功拿到数据——别忙活半天，结果API请求根本没返回东西！比如给你的函数加个打印：

// 假设你的数据函数是这样的，加个console.log
async function getAPIData() {
  try {
    const res = await fetch("你的API地址");
    const data = await res.json();
    console.log("API返回的数据：", data); // 控制台看看有没有输出
    return data;
  } catch (err) {
    console.error("API请求翻车了：", err);
    return null;
  }
}

如果控制台没看到数据，那先解决API请求的问题——检查地址对不对、请求方法是不是GET/POST搞错了、有没有跨域或者权限限制。

Express渲染模板的时候，必须把数据作为第二个参数传给res.render()，而且如果你的数据是异步获取的，一定要等数据拿到再渲染！比如：

app.get("/", async (req, res) => {
  try {
    const apiData = await getAPIData();
    // 重点：把apiData传给模板，模板里就用这个变量名
    res.render("你的模板文件名", { apiData });
  } catch (err) {
    res.status(500).send("数据加载失败啦");
  }
});

注意哦！如果你的数据函数用的是回调而不是async/await，那必须把res.render()放在回调函数里面，不然会出现“还没拿到数据就先渲染模板”的情况，Pug自然拿不到数据：

// 错误示范：render在回调外面，数据还没拿到就执行了
app.get("/", (req, res) => {
  let data;
  getAPIData((err, result) => {
    data = result;
  });
  res.render("index", { data }); // data是undefined！
});

// 正确示范：在回调里渲染
app.get("/", (req, res) => {
  getAPIData((err, result) => {
    if (err) {
      res.status(500).send("出错了");
      return;
    }
    res.render("index", { data: result });
  });
});

假设你传给模板的变量是apiData，那在Pug里要对应上，比如：

// 如果apiData是对象，直接取属性
h1 #{apiData.title}
p 内容：#{apiData.description}

// 如果是数组，用each循环遍历
ul
  each item in apiData
    li #{item.name} - #{item.value}

另外，最好加个判断，防止数据为空的时候模板报错：

if apiData
  .data-container
    // 渲染数据内容
else
  p 数据加载中...或者暂无数据

• 变量名拼写错误：比如渲染时传的是apiData，模板里写成data，大小写也要完全一致！
• 模板路径不对：确保你的Pug文件在Express默认的views文件夹里，或者你已经通过app.set('views', './你的模板目录')设置了正确路径。
• 忘记异步等待：异步函数一定要用await或者Promise的.then()，不然数据还没返回就渲染，肯定拿不到。

要是按上面的步骤排查完还是不行，把你的app.js渲染代码、数据获取函数和Pug模板的具体代码贴出来，我再帮你精准定位问题！

内容的提问来源于stack exchange，提问作者beckyboo