进行排序并加载更多系统（NodeJS 路由 + MySQL）

Posted 2023-02-24

【中文标题】进行排序并加载更多系统（NodeJS 路由 + MySQL）

【英文标题】：Making a sort by and load more system (NodeJS routes + MySQL)

【发布时间】：2021-10-12 01:52:02

【问题描述】：

我想创建一个系统来限制显示的帖子数量和一个加载更多按钮，该按钮可以从之前限制停止的位置加载它们，并能够更改这些相同帖子的顺序。

现在我有：

html/ejs:

<main>
    <div class="container">
            <%
            if(results.lenght != 0)
                var i = 1;
                results.forEach(function(results)
            %>

            <div class="post">
                <div class="op"><%= results.username %></div>
                <h2 class="post-title"><%= results.title %></h2>
                <div class="content"><p class="post-content"><%= results.content %></p></div>
            </div>

            <% i++; ) %>
            <%  else  %>
                locals.message1 = 'No posts found :(';
            <%  %>
        </div>
        <div class="load-container"><a class="load" href="">Load more</a></div>
</main>

下拉选择排序：

<div class="drop">
    <button onclick="drop()" class="drop-btn">Sort by</button>
    <form id="dropdown-content" class="dropdown-content" method="POST">
        <button type="submit" formaction="/" value="1">Newest</button>
        <button type="submit" formaction="/" value="2">Oldest</button>
        <button type="submit" formaction="/" value="3">Popular</button>
    </form>
</div>

路线：

router.get('/', authController.isLoggedIn, (req, res, next) => 

  sql = 'SELECT posts.username, time, title, content, user_file, audio FROM posts JOIN user on posts.user_id = user.id';
  db.query(sql, function(err, results, fields)
    if(err) throw err;
    else if(results.length!=0)
      res.render('index', 
        user: results: results, time: moment.utc(new Date(results.time)).fromNow()
      );
    
    else 
      res.render('index', 
        user: message: 'Sorry, we don\'t have any posts :(', message1: 'Very sad...', results: results
      );
    
  )
);

我正在考虑在路径中设置两个变量来存储限制。有点像这样：

var limit1: 0; // where to start displaying posts
var limit2: 8; // how many to display before stopping
// ADD 8 to both when button is clicked
var limit = 'LIMIT ' + limit1 + ', ' + limit2 + ';' //combining it for LIMIT in mysql
db.query(sql + limit, function(err, results, fields)...

问题是我不知道如何跟踪我已经加载了多少，以及如何将数据从 EJS 文件中的加载更多按钮传递到路由器。我目前知道如何做的唯一方法是使用帖子表单，但我猜这根本不好。

对于排序，我想做基本相同的事情：

// when new sorting is selected
var sorting = sorting; //selecting a sorting algorithm based on the button  clicked
// reset the limits when new sorting is selected
limit1 = 0; limit 2 = 8;
db.query(sql + sorting + limit, function(err, results, fields)...

但我又不知道如何告诉路线有关更改以及如何存储限制...我尝试了一些方法，但无法从 EJS 中获取变量单击按钮route('/'... 所以如果我只从中得到一件事，我希望它是变量传递。

【参考方案1】：

我假设您在页面加载正确的情况下返回了一些结果？

假设你有你的主循环来显示帖子

<main>
    <div class="container">
            <%
            if(results.lenght !== 0)
              results.forEach(results =>
            %>

            <div class="post">
                <div class="op"><%= results.username %></div>
                <h2 class="post-title"><%= results.title %></h2>
                <div class="content"><p class="post-content"><%= results.content%>
            </p></div>
            </div>

            <%) %>
            <%  else  %>
               No posts found :(
            <%  %>
        </div>
        <input type="hidden" id="postCount" value="<%=results.length%>">
        <div class="load-container"><a class="load" href="">Load more</a></div>
</main>

（对使用箭头功能进行了轻微编辑，也不确定计数的用途？但据我所知，它并不是真正需要的，如果您需要计数，您可以随时使用结果的长度，因为他们会一样。）

现在，您需要某种 api 路由来传递更新变量，以便发出请求。它将与原始路线相似，因此在同一个路线文件中您将拥有类似

router.get('/update/:sort/:start', authController.isLoggedIn, (req, res, next) => 

  // place relevent SQL code here that uses the passed params
  // then send back JSON object back to the browser

   res.json(jsonresponse)
);

因此，在此示例中，您将作为 XHR/Fetch 请求的一部分传递 sort 和 start 参数，正如您在上面看到的，我们放置了一个隐藏变量，其中包含原始请求的长度，因此我们知道如何许多被返回，我们将把它作为“开始”值传递给更新端点并告诉 SQL 从该记录开始

（注意，您可以扩展该路由以通过其他限制等，同时执行这样的动态查询可以为 SQL 注入打开大门，因此您需要在将它们传递给 SQL 查询之前对其进行清理）

从这里您将在您的页面上有一个更改事件处理程序，它将侦听下拉列表中的更改事件，从那里您将获取该值并将其传递给 XHR 请求，该请求使用传递的 api 端点变量，它返回 JSON 对象，您只需循环它并附加到屏幕上，一旦循环完成，从隐藏对象中获取总数并从返回的对象中添加总数，以便下一个请求知道您离开的位置（更多的负载更多选项假设）