Comment rendre une page dans node express à partir de route.post ?

Question

J'ai une page qui récupère 100 mèmes à partir d'une API. Il affiche les mèmes dans un tableau et chaque mème possède un bouton de détails qui amène l'utilisateur à la page de détails du mème. Je dois effectuer une requête POST sur la route du mème et afficher la page de détails du mème. La demande de publication réussit, mais la page mème n'est pas rendue depuis render() dans router.post.

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;

Bouton

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

La réponse dans le terminal est : POST /meme 200 10,677 ms - 2703, mais rien n'est rendu sur la page.

Answer 1

Je tiens d’abord à mentionner « mais rien n’est rendu sur la page ».

Il ne rendra jamais automatiquement la page, comme il est souligné dans MDN Webdocs que dans fetch() 用于使用 AJAX 调用从网络获取资源。您获取的资源将存储在 response variables, vous devez gérer manuellement les données que vous obtenez (soit en manipulant le DOM à l'intérieur du texte, soit en redirigeant vers une autre page, par exemple en utilisant window.href .emplacement )

Cependant, les requêtes POST sont généralement utilisées pour créer/modifier des données sur le serveur (veuillez lire Méthodes HTTP). Je vois que vous utilisez la requête POST pour afficher la page/accéder à une autre page. GET est la méthode HTTP utilisée pour demander des données au serveur.

Je pense que vous feriez mieux de changer la façon dont vous gérez handleDetailsClick的方式。您可以使用 或者简单地修改 元素的 onclick 行为，使其具有 window.location.href=".../meme?id= "handleDetailsClick. Au lieu de transmettre l'intégralité des données du mème, vous pouvez utiliser des éléments HTML tels que

Ou modifiez simplement le comportement

onclick de l'élément pour avoir window.location.href=".../meme?id= "

Ensuite, du côté Express, vous pouvez modifier la route POST en GET et obtenir l'ID spécifique dans la chaîne de requête afin de pouvoir le rechercher dans une base de données, etc. et afficher la page en utilisant

res.render()

Comme dans l'exemple ci-dessous.

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

J'espère que cela vous aidera

res.render () 要渲染 html 页面，您只需使用 res.JSON()Mise à jour

Comme vous avez mentionné les exigences de distribution, vous pouvez légèrement modifier le code de routage POST ci-dessus (vous pouvez utiliser uniquement l'ID ou l'intégralité des données, selon les exigences de distribution) au lieu d'utiliser

res.render () pour To rendre une page html, il vous suffit d'utiliser

res.JSON() et de profiter de la réponse

JSON

en utilisant JS.

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 (vous pouvez placer n'importe quel élément qui deviendra un conteneur de mèmes pour les détails sélectionnés)

<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>

Alors 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 = '';
  }
}

🎜