Question

我有一个应用程序，在索引页面上显示食谱（mywebsite.com/recipes）。我想按日期或受欢迎程度对它们进行排序，并在页面上直接显示一个按钮，以便用户可以选择他想要如何对食谱进行排序。我正在使用bootstrap的下拉菜单，它使用锚标签（选择菜单会更适合吗？）。

这是下拉菜单：

<div class="dropdown indexDropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Sort by
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#(WHAT SHOULD I PUT HERE)">Most recent</a></li>
      <li><a href="#(WHAT SHOULD I PUT HERE)">Most popular</a></li>
    </ul>
  </div>

这是我选择“日期”或用户点击任何内容时我想要使用的路线（默认排序）：

//INDEX ROUTE (SORT BY DATE)
router.get("/WHAT SHOULD I PUT HERE", function(req, res){
    if(req.query.search && req.xhr) {
       const regex = new RegExp(escapeRegex(req.query.search), 'gi');
       // Get all recipes from DB
       Recipe.find({title: regex}).limit(9).sort({"createdAt": -1}).exec(function(err, foundRecipes){
          if(err){
             console.log(err);
          } else {
             res.status(200).json(foundRecipes);
          }
       });
   } else {
       // Get all recipes from DB if no search input
       Recipe.find({}).sort({"createdAt": -1}).limit(9).exec(function(err, foundRecipes){
          if(err){
              console.log(err);
          } else {
             if(req.xhr) {
               res.json(foundRecipes);
             } else {
               res.render("recipes/index",{recipes: foundRecipes});
             }
          }
       });
   }
});

这是我选择“流行度”时或用户点击任何内容时要使用的路线（默认排序）：

//INDEX ROUTE (SORT BY POPULARITY)

    router.get("/WHAT SHOULD I PUT HERE", function(req, res){
        if(req.query.search && req.xhr) {
           const regex = new RegExp(escapeRegex(req.query.search), 'gi');
           // Get all recipes from DB
           Recipe.find({title: regex}).limit(9).sort({"createdAt": -1}).exec(function(err, foundRecipes){
              if(err){
                 console.log(err);
              } else {
                 res.status(200).json(foundRecipes);
              }
           });
       } else {
           // Get all recipes from DB if no search input
           Recipe.find({}).sort({"numberOfPins": -1}).limit(9).exec(function(err, foundRecipes){
              if(err){
                  console.log(err);
              } else {
                 if(req.xhr) {
                   res.json(foundRecipes);
                 } else {
                   res.render("recipes/index",{recipes: foundRecipes});
                 }
              }
           });
       }
    });

我该怎么做？我应该在下拉菜单中为每个锚标签分配什么样的href？我应该添加像href =“/ recipes？_sort = POPULARITY”的东西吗？

非常感谢！

Answer 1

<a href='/route1'></a>为route1创建get请求。所以我创建了两个单独的路由（route1和route2）来排序mongo数据。

<a href='/route1'>Sort by Popularity</a>
 <a href='/route2'>Sort by Date</a>

router.get("/route1",function(){
   Sort data by popularity
})

router.get("/route2",function(){
   Sort data by Date
})

适合我。可能不是一个最佳的方法，但它只是工作

如何使用Bootstrap的Dropdown菜单对要显示的项目进行排序

1 个答案: