Wie rendere ich eine Seite in Node Express aus route.post?

Question

Ich habe eine Seite, die 100 Memes von einer API abruft. Es zeigt Memes in einer Tabelle an und jedes Meme verfügt über eine Detailschaltfläche, die den Benutzer zur Detailseite des Memes führt. Ich muss eine POST-Anfrage an die Meme-Route durchführen und die Meme-Detailseite rendern. Die Post-Anfrage ist erfolgreich, aber die Meme-Seite wird nicht von render() in router.post gerendert.

Meme.js

var express = require("express");
var router = express.Router();
var bodyParser = require("body-parser");
var jsonParser = bodyParser.json();
var ensureLogIn = require("connect-ensure-login").ensureLoggedIn;
var ensureLoggedIn = ensureLogIn();


router.post("/", ensureLoggedIn, jsonParser, (req, res, next) => {
  const meme = req.body.meme;
  const user = req.body.user;
  try {
    res.render("meme", { meme: meme, user: user });
  } catch (error) {
    console.error(error);
    res.status(500).send("Internal Server Error");
  }
});


module.exports = router;

memes.egs-Schaltfläche:

<tbody>
            <% memes.forEach(meme=> { %>
              <tr class="meme-row <%= viewedMemeIds.includes(meme.id) ? 'viewed' : '' %>" data-meme-id="<%= meme.id %>">
                <td><img src="<%= meme.url %>" alt="<%= meme.name %>"></td>
                <td>
                  <%= meme.name %>
                </td>
                <% if (user) { %>
                  <td>
                    <button class="btn-meme details-button" onclick="handleDetailsClick(<%= JSON.stringify(meme) %>, <%= JSON.stringify(user) %>)">Details</button>
                  </td>
                  <% } %>
              </tr>
              <% }) %>
          </tbody>

MemeDetails.js:

async function handleDetailsClick(meme, user) {
  try {
    // Make a POST request to the meme route with the meme and user data
    const response = await fetch("/meme", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ meme, user }),
    });

    // Handle the response status
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

  } catch (error) {
    // Handle any errors
    console.error(error);
  }
}

Die Antwort im Terminal lautet: POST /meme 200 10.677 ms – 2703, aber auf der Seite wird nichts gerendert.

Answer 1

首先我想提一下“但是页面上没有任何内容呈现”。

它永远不会自动渲染页面，因为它在 MDN Webdocs 指出 fetch() 用于使用 AJAX 调用从网络获取资源。您获取的资源将存储在 response 变量中，您需要手动处理获取的数据（无论是操作 DOM insideText 还是重定向到另一个页面，例如使用 window.href.location< /代码>）

但是，POST 请求通常用于在服务器上创建/修改数据（请阅读HTTP方法）。我看到您使用 POST 请求来渲染页面/导航到另一个页面。 GET 是 HTTP 方法，用于从服务器请求数据。

我认为您最好更改处理handleDetailsClick的方式。您可以使用 或者简单地修改 元素的 onclick 行为，使其具有 window.location.href=".../meme?id= <%= meme.id %>"

然后，在 Express 端，您可以将 POST 路由修改为 GET 并获取查询字符串中的特定 ID，以便您可以从数据库等搜索它并使用 res.render() 渲染页面 就像下面的例子一样。

app.get("/meme", function (req, res) {
    const memeID = req.query.id;

    // Fetch the meme details from DB or any other data sources using the specified ID
    const memeDetails = db.findById(memeID);

    res.render("pages/meme", { memeDetails });
});

希望对你有帮助

已更新

正如您提到的分配要求，您可以稍微修改一下上面的 POST 路由代码（您可以仅使用 ID 或整个数据，具体取决于分配要求），而不是使用 res.render () 要渲染 html 页面，您只需使用 res.JSON() 并利用 使用 JS 的 JSON 响应。

Meme.js

app.post("/meme", function (req, res) {
    const memeID = req.body.id;

    // Fetch the meme details from DB or any other data sources using the specified ID
    const memeDetails = db.findById(memeID);

    res.json({
        success: true,
        data: {
            id  : memeDetails.id,
            name: memeDetails.name,
            url : memeDetails.url,
        }
    })
});

meme.ejs（您可以放置​​任何将成为所选详细信息模因容器的元素）

<table>
  <tbody>
    <% memes.forEach(meme=> { %>
      <tr class="meme-row <%= viewedMemeIds.includes(meme.id) ? 'viewed' : '' %>" data-meme-id="<%= meme.id %>">
        <td><img src="<%= meme.url %>" alt="<%= meme.name %>"></td>
        <td>
          <%= meme.name %>
        </td>
        <% if (user) { %>
          <td>
            <button class="btn-meme details-button" onclick="handleDetailsClick(<%= meme.id %>)">Details</button>
           </td>
        <% } %>
      </tr>
    <% }) %>
  </tbody>
</table>
<div id="selectedMeme"></div>

然后是 MemeDetails.js

async function handleDetailsClick(id) {
  try {
    // Make a POST request to the meme route with the meme id
    const response = await fetch("/meme", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: { id },
    });

    // Handle the response status
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    
    // Handle the response (convert to JSON and utilize it)
    const jsonResp = await response.json();
    if (!jsonResp.success) {
      throw new Error("Something is error");
    }
    
    // put the fetched data to HTML
    const memeData = jsonResp.data;
    document.getElementById('selectedMeme').innerHTML = `
      <b>Meme name: ${memeData.name}</b>
      <br />Meme url: <a href="${memeData.url}">Click me</a>
    `;

  } catch (error) {
    // Handle any errors
    console.error(error);
    document.getElementById('selectedMeme').innerHTML = '';
  }
}