如何通过点击按钮返回MongoDB数据库的排序结果？

你的现有后端路由代码如下：

router.get('/', (req, res) =>{
    FILM
        .find().limit(6)
        .then(films => res.render('index.ejs', {films}))
})

下面是两种可行的排序实现方式：

方案一：后端排序（基于MongoDB查询） #

这种方式通过向后端传递排序参数，由MongoDB直接返回排序后的结果，适合数据量较大的场景。

步骤1：修改后端路由 #

添加对请求参数的判断，根据参数指定排序规则：

router.get('/', (req, res) =>{
    // 获取排序参数，默认按评分降序
    const sortRule = req.query.sort === 'asc' ? { rating: 1 } : { rating: -1 };
    FILM
        .find()
        .sort(sortRule) // 1为升序，-1为降序
        .limit(6)
        .then(films => res.render('index.ejs', {films, currentSort: req.query.sort}))
})

步骤2：在index.ejs中添加排序按钮 #

通过链接传递排序参数：

<div class="sort-buttons">
    <a href="/?sort=asc" class="btn">评分从低到高</a>
    <a href="/?sort=desc" class="btn">评分从高到低</a>
</div>

<!-- 渲染电影列表 -->
<div class="film-list">
    <% films.forEach(film => { %>
        <div class="film-item">
            <h3><%= film.title %></h3>
            <p>评分：<%= film.rating %></p>
        </div>
    <% }) %>
</div>

方案二：前端排序（纯JavaScript处理） #

这种方式一次性把数据加载到前端，通过JS对数组排序后重新渲染DOM，适合数据量较小的场景，无需频繁请求后端。

步骤1：在index.ejs中保存数据并添加按钮 #

把电影数据转成JSON字符串存在页面，同时添加排序按钮：

<div class="sort-buttons">
    <button onclick="sortFilms('asc')" class="btn">评分从低到高</button>
    <button onclick="sortFilms('desc')" class="btn">评分从高到低</button>
</div>

<div id="filmList" class="film-list">
    <% films.forEach(film => { %>
        <div class="film-item">
            <h3><%= film.title %></h3>
            <p>评分：<%= film.rating %></p>
        </div>
    <% }) %>
</div>

<script>
    // 保存原始电影数据
    const originalFilms = <%= JSON.stringify(films) %>;
    const filmListEl = document.getElementById('filmList');

    function sortFilms(order) {
        // 复制数组避免修改原始数据
        const sortedFilms = [...originalFilms].sort((a, b) => {
            return order === 'asc' ? a.rating - b.rating : b.rating - a.rating;
        });
        // 重新渲染电影列表
        renderFilms(sortedFilms);
    }

    function renderFilms(films) {
        filmListEl.innerHTML = films.map(film => `
            <div class="film-item">
                <h3>${film.title}</h3>
                <p>评分：${film.rating}</p>
            </div>
        `).join('');
    }
</script>

两种方案对比 #

• 后端排序：数据量大时更高效，MongoDB可利用索引优化查询；每次排序需刷新页面或发起AJAX请求。
• 前端排序：无需后端请求，交互更流畅，但仅适合数据量小的场景，需一次性加载所有数据到前端。

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