Bagaimana untuk membuat halaman dalam nod express dari route.post?

Question

Saya mempunyai halaman yang mendapat 100 meme daripada api. Ia memaparkan meme dalam jadual, dan setiap meme mempunyai butang butiran yang membawa pengguna ke halaman butiran meme. Saya perlu melakukan permintaan POST ke laluan meme dan memberikan halaman butiran meme. Permintaan siaran berjaya, tetapi halaman meme tidak dipaparkan daripada render() dalam 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;

butang

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

Tindak balas dalam terminal ialah: POST /meme 200 10.677 ms - 2703, tetapi tiada apa-apa yang dipaparkan pada halaman.

Answer 1

Mula-mula saya ingin menyebut "tetapi tiada apa yang dipaparkan pada halaman".

Ia tidak akan memaparkan halaman secara automatik, seperti yang ditunjukkan dalam MDN Webdocs bahawa dalam fetch() 用于使用 AJAX 调用从网络获取资源。您获取的资源将存储在 response pembolehubah anda perlu mengendalikan data yang anda dapat secara manual (sama ada memanipulasi DOM insideText atau mengubah hala ke halaman lain, mis. menggunakan window. href.lokasi )

Walau bagaimanapun, permintaan POST biasanya digunakan untuk mencipta/mengubah suai data pada pelayan (sila baca Kaedah HTTP). Saya nampak anda menggunakan permintaan POST untuk memaparkan halaman/menavigasi ke halaman lain. GET ialah kaedah HTTP yang digunakan untuk meminta data daripada pelayan.

Saya rasa anda lebih baik mengubah cara anda mengendalikan handleDetailsClick的方式。您可以使用 或者简单地修改 元素的 onclick 行为，使其具有 window.location.href=".../meme?id= "handleDetailsClick. Daripada menghantar keseluruhan data meme, anda boleh menggunakan elemen HTML seperti

Atau cuma ubah suai gelagat

onclick elemen untuk mempunyai window.location.href=".../meme?id= "

Kemudian, di sebelah Express, anda boleh mengubah suai laluan POST untuk GET dan mendapatkan ID tertentu dalam rentetan pertanyaan supaya anda boleh mencarinya daripada pangkalan data dan lain-lain dan memaparkan halaman menggunakan

res.render()

Suka contoh di bawah.

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

Semoga ia membantu anda

res.render () 要渲染 html 页面，您只需使用 res.JSON()Dikemas kini

Seperti yang anda sebutkan keperluan pengedaran, anda boleh mengubah suai sedikit kod penghalaan POST di atas (anda boleh menggunakan hanya ID atau keseluruhan data, bergantung pada keperluan pengedaran) dan bukannya menggunakan

res.render () kepada To render halaman html, anda hanya gunakan

res.JSON() dan manfaatkan respons

JSON

menggunakan 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 (anda boleh meletakkan sebarang elemen yang akan menjadi bekas meme untuk butiran yang dipilih)

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

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

🎜