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

Posted 2023-03-11

【中文标题】Node.js：根据条件渲染猫鼬元素

【英文标题】：Node.js: Render mongoose elements based on conditions

【发布时间】：2021-10-04 21:47:31

【问题描述】：

基本上，我正在尝试制作一种电子商务网站，其中包含男性和女性类别以及子类别。我的目标是使用 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 的新手，我无法从堆栈上的类似问题中找到解决方案。

【参考方案1】：

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

---

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

通过这一行：

---

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

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

【讨论】：

我了解如何找到它们，问题出在 ejs 文件中。我希望屏幕截图上的这些空卡片不会显示。无论如何，我想通了，原来我只是把 if 语句检查类别放在 category.ejs 中的错误位置。

【参考方案2】：

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