用于渲染车把页面的 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 传递给网址

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

第二种方法

• 如果没有target_user，这意味着我们正在尝试渲染没有任何数据的索引页面，所以我们返回res.render('index')

• 在索引页面上，当单击搜索按钮时，我们使用 fetch 对同一端点 ("/specific-customer/:name") 进行 API 调用，但这次使用 target_name 作为 URL 参数。

• 现在因为我们传递了target_name，它不会再次res.render()，而是将SQL查询的结果作为JSON返回。

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

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)
        }
    })
  
});