Node.js：根据条件渲染猫鼬元素

Question

基本上，我正在尝试制作一种电子商务网站，其中包含男性和女性类别以及子类别。我的目标是使用 ejs 模板在一个页面上根据它们的类别呈现 mongoose 元素。

app.js：

//jshint esversion:6

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require("mongoose");

const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));


mongoose.connect('mongodb://localhost:27017/journalDB', {useNewUrlParser: true, useUnifiedTopology: true});





const journalSchema = new mongoose.Schema({
  title: String,
  category: String,
  subcategory: String,
  rating: Number,
  link: String,
  description: String,
});


const Journal = mongoose.model("Journal", journalSchema);



app.get("/", function(req, res){


Journal.find({}, function(err, journals){

  if(err){
    console.log(err);
  }



    else{

    res.render("home", {journals: journals});
    }
});


});




app.get("/category", function(req, res){
  Journal.find({$or:[{category: "Woman"},{category: "Man"}]}, function(err, journals){

    if(err){
      console.log(err);
    }

      else {
      res.render("category", {
        journals: journals
      });




    }
    });
});

app.get("/favourite", function(req, res){
  res.render("favourite");
});

app.get("/man", function(req, res){
  res.render("man");
});


app.get("/woman", function(req, res){

  res.render("woman");
});

app.get("/other", function(req, res){
  res.render("other");
});

app.get("/compose", function(req, res){
  res.render("compose");
});




app.post("/compose", function(req, res){

  const journal = new Journal({
    title: req.body.journalTitle,
    category: req.body.journalCategory,
    subcategory: req.body.journalSubcategory,
    link: req.body.journalLink,
    description: req.body.journalDescription
  });


  journal.save(function(err){
    if(!err){
      res.redirect("/");
    }
    else{
      console.log(err);
    }
  });


});



app.get("/journals/:journalId", function(req, res){


  const requestedJournalId = req.params.journalId;

  Journal.findOne({_id: requestedJournalId}, function(err, foundJournal){
      res.render("stats", {
        title: foundJournal.title,
        subcategory: foundJournal.subcategory,
        link: foundJournal.link,
        description: foundJournal.description
      });
  });


});





app.listen(process.env.PORT || 3000, function() {
  console.log("Server started on port 3000");
});

category.ejs：

<%- include("partials/header"); -%>

<div class="container py-4 new-offers">




          <a href="/woman" class="text-color"><h2 class="custom-heading">Women</h2></a>
          <div class="row">







            <% journals.forEach(function(journal){ %>


            <div class="col-md-4 col-6 target" >
              <a href="/journals/<%=journal._id%>">
              <div class="flex-container">
                    <div class="card-icon p-3">
                      <i class="fas fa-shopping-bag fa-3x"></i>
                    </div>
                    <div class="card-content p-3">
                      <% if(journal.category.toLowerCase() == "woman"){ %>
                        <h6><%=journal.category%></h6>
                        <p><%=journal.subcategory%></p>

                        <%}%>



                    </div>
                </div>
              </a>
            </div>


            <% }) %>


            <button type="button" name="button" class="btn woman"><h5>Show More</h5></button>




          </div>

        </div>



<div class="container py-4 special-offers">

            <a href="/man" class="text-color"><h2 class="custom-heading">Men</h2></a>
            <div class="row">


              <% journals.forEach(function(journal){ %>


              <div class="col-md-4 col-6 target" >
                <div class="flex-container">
                      <div class="card-icon p-3">
                        <a  href="/journals/<%=journal._id%>"><i class="fas fa-shopping-bag fa-3x"></i></a>
                      </div>
                      <div class="card-content p-3">
                        <% if(journal.category.toLowerCase() == "man"){ %>
                          <h6><%=journal.category%></h6>
                          <p><%=journal.subcategory%></p>
                       <%}%>




                      </div>
                  </div>
              </div>

              <% }) %>




              <button type="button" name="button" class="btn man"><h5>Show More</h5></button>
            </div>



          </div>

<script>

  $(function(){
    $(".target").slice(0, 6).show()
    $(".woman").on("click",function(){
      $(".target:hidden").slice(0, 3).slideDown()
      if($(".target:hidden").length == 0) {
        $(".woman").fadeout('slow');
      }
    });

});
</script>



<%- include("partials/footer"); -%>

但我得到的是：

从图片中可以看出，数据库中的所有项目都会在页面上呈现，即使 ejs 文件中的 if 语句指定了应该显示哪些元素。 我的主要目标是摆脱这些空卡片，只显示那些满足 if 语句中条件的元素。 我是 node.js 和 mongoose 的新手，我无法从堆栈上的类似问题中找到解决方案。

Answer 1

我无法理解您的问题。我想您是在问如何找到具有“男人”或“女人”类别的元素，如果是您正在搜索的内容，您可以尝试更改它：

---

Journal.find({$or:[{category: "Woman"},{category: "Man"}]}

通过这一行：

---

Journal.find({ category: [ 'Woman', 'Man' ] })

在您的情况下，您正在搜索具有多个值的同一字段。 尝试阅读此内容：mongoose query same field with different values 希望对你有帮助

Answer 2

问题出在 ejs 文件中的 if 语句放错了位置，而不是只包装标题和段落标签，整个 div（在这种情况下带有一个目标类）应该在 if 语句中。