無法發布到新路由 Express NodeJs HTML 表單

Question

我正在通過 ExpressJS 函數 app.all 渲染一個頁面http://localhost:3000/book_results/ 。

當我點擊一個帶有動作POST的 HTML 表單到一個名為book_profile/的新路由時，而不是連接到app.post('/book_profile/encoded:id') ，它應該顯示頁面http://localhost:3000/book_profile/[search term] ，它會加載頁面http://localhost:3000/book_results/book_profile/ 。

我的代碼將新路由附加到舊路由的 URL /book_results 。

app.all('/book_results/:encoded_id', function(req, response, err) {
  var title_results = req.params.encoded_id;

  if (err) {
    console.log(err);
  }

  request("https://www.googleapis.com/books/v1/volumes?q=" + title_results + "&maxResults=40&printType=books",
    function(error, resp, data) {
      if (!error) {
        var gb_data2 = JSON.parse(data);

        for (var i = 0; i < 40; i++) {
          tempArray.push(gb_data2.items[i]);
          count++;
        }


        var bookArray = [];
        var bookList = [];

        if (err) {
          console.log(err);
        }


        const perPage = 10;
        let currentPage = 1;

        const totalBookList = tempArray.length;

        const pageCount = Math.ceil(totalBookList / perPage);

        if (req.query.page) {
          currentPage = parseInt(req.query.page, 10);
        }

        while (tempArray.length > 0) {
          bookArray.push(tempArray.splice(0, perPage))

        }

        bookList = bookArray[+currentPage - 1];

        const start = (currentPage - 1) * perPage;
        const end = currentPage * perPage;

        response.render('book_results', {
          books: bookList,
          bookSearchTerm: title_results,
          pageCount: pageCount,
          currentPage: currentPage
        });

      }
    });
});

這是頁面http://localhost:3000/book_results/[search term]上表單的代碼

<div id="seeResults">
  <h1>search results for " <%= bookSearchTerm%> "</h1>
  <% if(books){%>
  <%books.forEach(function(b) { %> <form id="results" method="post" action="book_profile/<%=b.title%>">
    <input id="book-image_search" type="image" src=<%=b.volumeInfo.imageLinks.thumbnail === undefined
                ? " "
                : b.volumeInfo.imageLinks.thumbnail   %>>

  </form>
  <%}); %>
  <%} %>
</div>

這是表單操作帖子應連接到的app.post('/book_results')代碼。

app.post('/book_profile/:encoded_id', function(req, response, err) {
  var title = req.params.encoded_id;

  if (err) {
    console.log(err);
  }

  request("https://www.googleapis.com/books/v1/volumes?q=" + title,
    function(error, resp, data) {
      if (error) {
        console.log(error);

      } else {
        var gb_data = JSON.parse(data);

        const gb_description = gb_data.items[0].volumeInfo.description;
        const gb_image = gb_data.items[0].volumeInfo.imageLinks.thumbnail;
        const gb_title = gb_data.items[0].volumeInfo.title;
        const gb_author = gb_data.items[0].volumeInfo.authors;
        const gb_isbn13 = gb_data.items[0].volumeInfo.industryIdentifiers[0].identifier;
        const gb_isbn10 = gb_data.items[0].volumeInfo.industryIdentifiers[1].identifier;
        const gb_pageCount = gb_data.items[0].volumeInfo.pageCount;
        const gb_printType = gb_data.items[0].volumeInfo.printType;

        response.render('book_profile', {
          book_description: gb_description,
          book_image: gb_image,
          book_title: gb_title,
          book_author: gb_author,
          book_isbnTen: gb_isbn10,
          book_isbnThirteen: gb_isbn13,
          book_pageCount: gb_pageCount,
          book_printType: gb_printType
        });
      }
    });
});

Answer 1

你的表單有action="book_profile/<%=b.title%>" ，它應該是action="/book_profile/<%=b.title%>" 。 沒有前導斜杠，路徑是相對的，這意味着它將被附加到當前路徑上，導致奇怪的/book_results/book_profile 。 前導斜杠告訴瀏覽器使用絕對路徑。