express.js分頁點擊頁面時引數重復-有解無憂

我創建了一個 html 頁面來過濾 MongoDb 中的一些資料并將資料呈現到顯示頁面。并在顯示頁面設定分頁。每當我選擇一個新的頁碼時，URL 都會在分頁中附加頁碼。

索引.js

  let results = await db.collection("bookings").find(whereClause,
    {
      limit: perPage,
      skip: perPage * (Math.max(req.query.page - 1, 0) || 0)
    }
    ).toArray();

  var fullUrl = req.protocol   '://'   req.get('host')   req.originalUrl;

return res.render('search', { bookings: results, pages: pages, perPage: perPage, fullUrl:fullUrl });

分頁頁面：

  <nav aria-label="Page navigation example">
    <ul class="pagination flex-wrap">
      <% for (var i = 1; i <= pages; i  ) { %>
        <li class="page-item"></li>
          <a class="page-link" href="<%=fullUrl%>&perPage=<%=perPage%>&page=<%= i %>">
            <%= i %>
          </a>
        </li>
      <% } %>
    </ul>
  </nav>

問題是每次我在分頁中單擊新頁碼時，它都會將 perPage 和 page 引數附加到原始鏈接中。

http://localhost:3000/search?numTickets=1&name=somename&perPage=6&page= 5&perPage=6&page=3

uj5u.com熱心網友回復：

將原始 URL 決議為URL實體。然后您可以更輕松地操作searchParams

const fullUrl = new URL(
  `${req.protocol}://${req.get("host")}${req.originalUrl}`
);
fullUrl.searchParams.set("perPage", perPage);
fullUrl.searchParams.delete("page");

return res.render("search", {
  bookings: results,
  pages,
  fullUrl,
});

在你的模板中......

<% for (var i = 1; i <= pages; i  ) { %>
<li class="page-item">
  <a class="page-link" href="<%=fullUrl%>&amp;page=<%=i%>">
    <%= i %>
  </a>
</li>
<% } %>

uj5u.com熱心網友回復：

嘗試在回傳之前洗掉perPageandpage引數：fullUrl

let results = await db
  .collection('bookings')
  .find(whereClause, {
    limit: perPage,
    skip: perPage * (Math.max(req.query.page - 1, 0) || 0),
  })
  .toArray();

var newUrl = req.protocol   '://'   req.get('host')   req.baseUrl;
var fullUrl = req.protocol   '://'   req.get('host')   req.originalUrl;

const urlSplit = fullUrl.split('?');
if (urlSplit.length > 1) {
  const queryParams = urlSplit[1]
    .split('&')
    .map((q) => {
      const split = q.split('=');
      if (split.length < 2 || split[0] === 'perPage' || split[0] === 'page')
        return '';
      return q;
    })
    .filter(q => q != '')
    .join('&');
  newUrl  = '?'   queryParams;
}

return res.render('search', {
  bookings: results,
  pages: pages,
  perPage: perPage,
  fullUrl: newUrl,
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/512436.html

標籤：javascript节点.jsmongodb表示

上一篇：.addNumberOption錯誤（斜杠命令）

下一篇：Express：在等待之后，在catch內未正確呼叫next