expressjs 中用于渲染车把页面的 Res.render 不起作用

Question

所以在我的客户端，我有以下 javascript

search_button.addEventListener("click", event => {
    fetch("/api/specific-customer/" + search_input.value).then(res => {
        console.log(res.status)
    })
})

然后在我的服务器端，我有以下端点

router.get("/specific-customer/:name", (req, res) => {
    let target_user = req.params.name;
    let sqlQuery = "SELECT * FROM Customers WHERE customer_name = ?";
    mysql.pool.query(sqlQuery, [target_user], (err, result) => {
        if (err) {
            console.log(err);
        }
        else {
            console.log(result)
            let data = {
                customer: result
            }
            res.render("index", data)
        }
    })
});

res.render 根本不渲染索引页，它只是不执行任何操作。我当前位于索引页面上，但我想使用不同的数据而不是默认的 SELECT * FROM Products 重新呈现它。大家有什么建议吗？

Answer 1

如果您的 SQL 查询没有返回任何错误，那么这里有几种方法可以实现您想要的结果。

第一种方法

• 不要在搜索按钮点击事件上使用 fetch
• 只需使用

  window.location.replace

重定向即可
• 将

  name

  传递到 URL

search_button.addEventListener("click", event => {
   window.location.replace("/api/specific-customer/" + search_input.value);
})

第二种方法

• 如果没有

  target_user

  ，则意味着我们正在尝试渲染没有任何数据的索引页，因此我们返回

  res.render('index')

• 在索引页面上，单击搜索按钮时，我们使用

  fetch

  对同一端点进行 API 调用

  ("/specific-customer/:name")

  ，但这次使用

  target_name

  作为 URL 参数。

• 现在因为我们传递了

  target_name

  ，所以它不会再次

  res.render()

  ，而是以 JSON 形式返回 SQL 查询的结果。

• 最后，使用获得的数据填充页面。

router.get("/specific-customer/:name", (req, res) => {
  let target_user = req.params.name;

  if (!target_user) {
    return res.render('index')
  }

  let sqlQuery = "SELECT * FROM Customers WHERE customer_name = ?";
    mysql.pool.query(sqlQuery, [target_user], (err, result) => {
        if (err) {
            console.log(err);
            res.json(err)
        } else {
            console.log(result)
            let data = {
                customer: result
            }
            res.json(data)
        }
    })
  
});

Answer 2

试试这个：

在目录中，找到文件

views/layouts/main.handlebars

编辑它以包括：

{{> navbar}}
{{{body}}}
{{> footer}}

这个结构对我来说效果很好。它集成了导航栏和页脚部分，而

{{{body}}}

是注入主要内容的地方。