基于到期日期创建Listing归档路由的技术实现咨询

1. 后端新增归档路由（以Express+EJS为例） #

在路由文件中添加新路由，筛选出所有到期日期早于当前时间的Listing，再渲染归档页面：

// 示例：routes/listings.js
router.get('/archive', async (req, res) => {
  const currentDate = new Date();
  // 查询endDate小于当前日期的Listing
  const archivedListings = await Listing.find({
    endDate: { $lt: currentDate }
  });
  res.render('listings/archive', { archivedListings });
});

2. 编写归档页面模板 #

创建views/listings/archive.ejs，复用主页面的卡片布局，调整数据来源并补充到期日期展示：

<div class="container">
  <h2 class="mt-4">已归档Listing</h2>
  <div class="row allcards mt-4">
    <% if(archivedListings.length === 0) {%>
      <p>暂无已归档的Listing</p>
    <% } else { %>
      <% for(let listing of archivedListings){%>
      <div class="card p-3 justify-center items-center" style="width: 18rem">
        <div class="card-body">
          <a href="/listings/<%= listing._id %>" class="listing-link">
            <h5 class="card-title"><%= listing.title%></h5>
            <p class="card-text">
              current installment: <span id="input" value=""></span> <br />
              commenced month: <%= listing.startDate ? listing.startDate.toLocaleDateString() : "N/A" %> <br />
              expired on: <%= listing.endDate.toLocaleDateString() %>
            </p>
          </a>
        </div>
      </div>
      <%}%>
    <% } %>
  </div>
</div>

3. 调整主路由逻辑（可选） #

如果需要主页面仅展示未到期的Listing，可修改主路由的查询条件：

router.get('/', async (req, res) => {
  const currentDate = new Date();
  const allListings = await Listing.find({
    endDate: { $gte: currentDate }
  });
  res.render('listings/index', { allListings });
});

4. 添加归档入口（可选） #

在页面导航栏中加入归档页面的链接，方便用户快速访问：

<nav>
  <a href="/listings">全部Listing</a>
  <a href="/listings/archive">已归档Listing</a>
</nav>

内容的提问来源于stack exchange，提问作者khonshu