如何从route.post渲染节点express中的页面？

Question

我有一个页面可以从 api 获取 100 个模因。它在表格中显示模因，每个模因都有一个详细信息按钮，可将用户带到模因的详细信息页面。我必须对 meme 路由执行 POST 请求并呈现 meme 详细信息页面。 post 请求成功，但 meme 页面未从 router.post 中的 render() 渲染。

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 按钮：

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

终端中的响应是：POST /meme 200 10.677 ms - 2703，但页面上没有任何呈现。

Answer 1

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

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

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

我认为您最好更改处理handleDetailsClick的方式。您可以使用 或者简单地修改 元素的 onclick 行为，使其具有 window.location.href=".../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 = '';
  }
}