在网页上显示 NodeJS 查询结果

Question

我有一个基本的 Web 应用程序，用户可以在其中上传图片。我可以列出这些图片的 URL-s，但我不知道如何在页面上显示它们。目前我正在使用 form 来执行获取请求，因为其他方法对我不起作用。

服务器端：

router.get('/pictures', async (req, res) => {
  try {
    let user = await User.find({ 
      name: req.query.name
    });
    let result = []
    user.map(user => {
      result.push(user.avatar)
    })
    res.json(result)
  } catch (error) {
    console.log(error)
  }
})

客户端：

  <form action="/pictures" method="get">
    <input type="text" name="name">
    <input type="submit" value="Get Images" name="submit">
  </form>

这是我得到的：

[
"https://res.cloudinary.com/fidohuncloud/image/upload/v1642794180/eyrfrf8orusaz2bnq7pj.jpg",
"https://res.cloudinary.com/fidohuncloud/image/upload/v1642795673/rrqsddzbjwtfkrm1vbco.jpg"
]

Answer 1

我上次处理表单提交已经有一段时间了。您可以使用一些 JS 框架，如 React 或 Angular 来非常快速地完成它。或者如果你想操纵 DOM，那么你可以即时添加它。

const images_from_client = [
  "https://res.cloudinary.com/fidohuncloud/image/upload/v1642794180/eyrfrf8orusaz2bnq7pj.jpg",
  "https://res.cloudinary.com/fidohuncloud/image/upload/v1642795673/rrqsddzbjwtfkrm1vbco.jpg"
];

images_from_client.forEach((img) => {
  const i_tag = document.createElement("img");
  i_tag.src = img;
  document.getElementById("app").appendChild(i_tag);
});

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>
</body>

</html>

Answer 2

如果您想使用原版 javascript，可以通过覆盖默认表单行为来实现。

<!DOCTYPE html>
<html>

<head>
    <title>Form submission</title>
    <meta charset="UTF-8" />
</head>

<body>

  <form id="image-form">
    <input type="text" name="name">
    <input type="submit" value="Get Images" name="submit">
  </form>
  <div class="images"></div>
</body>
</html>

并且您的 javascript 可以使用 Fetch API 向后端服务器发送 GET 请求并将图像附加到您的 HTML。

 document.getElementById("image-form").addEventListener("submit", function(e) {
    e.preventDefault();

    fetch("/pictures")
    .then(data => data.json())
    .then(data => {
      data.forEach(function(image) {
        let img = document.createElement("img");
        img.src = image;
        document.querySelector(".images").appendChild(img);
      });
    });
  });

在网页上显示 NodeJS 查询结果

Display NodeJS Query result on webpage

httprequest

node.js