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

     2023-03-11     142

关键词:

【中文标题】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 语句中。

【讨论】:

根据功能组件中的数据有条件地渲染元素

】根据功能组件中的数据有条件地渲染元素【英文标题】:Conditionallyrenderelementsbasedondatainfunctionalcomponent【发布时间】:2020-04-2708:36:08【问题描述】:我的React应用程序中有一个功能组件,它进行API调用并返回包含两种联系方式Ph... 查看详情

猫鼬用数组元素的条件填充嵌套数组

】猫鼬用数组元素的条件填充嵌套数组【英文标题】:mongoosepopulatenestedarraywithconditionforarrayelement【发布时间】:2016-11-1409:42:02【问题描述】:我有一个包含文章的ArticleGroup,模型看起来像这样varArticleGroup=newmongoose.Schema(articles:[ty... 查看详情

为啥在 Node.js 中使用猫鼬模式

】为啥在Node.js中使用猫鼬模式【英文标题】:WhyusemongooseschemainNode.js为什么在Node.js中使用猫鼬模式【发布时间】:2020-08-1319:17:17【问题描述】:我正在学习Node.js和Mongoose。然后,我遇到了术语模式,它被定义为数据结构、默认... 查看详情

node.js 的猫鼬外键问题

】node.js的猫鼬外键问题【英文标题】:mongooseforeignkeyproblemwithnode.js【发布时间】:2020-06-0317:41:47【问题描述】:我有3个收藏:constLeaveSchema=newmongoose.Schema(employee:type:mongoose.Schema.Types.ObjectId,ref:\'User\')constUserSchema=newmongoose.S 查看详情

mongoose populate() 方法有啥相反的吗? (猫鼬,node.js,快递)

】mongoosepopulate()方法有啥相反的吗?(猫鼬,node.js,快递)【英文标题】:Isthereanoppositetomongoosepopulate()method?(Mongoose,node.js,express)mongoosepopulate()方法有什么相反的吗?(猫鼬,node.js,快递)【发布时间】:2019-05-1902:50:20【问题描... 查看详情

如何按 ID node.js 过滤猫鼬集合

】如何按IDnode.js过滤猫鼬集合【英文标题】:HowtofiltermongoosecollectionbyIdnode.js【发布时间】:2019-01-1214:21:20【问题描述】:假设我有一个像这样的简单猫鼬模式constmongoose=require(\'mongoose\');constSchema=mongoose.Schema;constUserSchema=newSchema(na... 查看详情

react——条件渲染

在React中,你可以创建各种不同的组件,然后根据应用的状态渲染出它们其中的一般部分。一.用变量存储元素可以将元素保存到一个变量中,通过为变量赋不同的值去渲染不同的元素functionLoginButton(props){return<buttononClick={props.ha... 查看详情

无法在 node.js 中用猫鼬填充数组

】无法在node.js中用猫鼬填充数组【英文标题】:can\'tpopulatethearraywithmongooseinnode.js【发布时间】:2013-03-3101:51:32【问题描述】:这是我在课程中的架构varCourseSchema=mongoose.Schema(students:[type:ObjectId,ref:\'User\']);varCourseModel=mongoose.model(\'... 查看详情

在猫鼬中,我如何按日期排序? (node.js)

】在猫鼬中,我如何按日期排序?(node.js)【英文标题】:InMongoose,howdoIsortbydate?(node.js)【发布时间】:2011-08-1502:16:00【问题描述】:假设我在Mongoose中运行此查询:Room.find(,(err,docs)=>).sort(date:-1);这行不通!【问题讨论】:【参考... 查看详情

在猫鼬中,我如何按日期排序? (node.js)

】在猫鼬中,我如何按日期排序?(node.js)【英文标题】:InMongoose,howdoIsortbydate?(node.js)【发布时间】:2011-08-1502:16:00【问题描述】:假设我在Mongoose中运行此查询:Room.find(,(err,docs)=>).sort(date:-1);这行不通!【问题讨论】:【参考... 查看详情

猫鼬更新对象数组中匹配条件的元素的值

】猫鼬更新对象数组中匹配条件的元素的值【英文标题】:mongooseupdatevalueinarrayofobjectsatelementsthatmatchacondition【发布时间】:2021-09-2321:46:45【问题描述】:我有一个模式,每个模式都包含一个看起来像这样的数组:path:[null,_id:AAAAA... 查看详情

Node.js 检查猫鼬验证并提醒用户

】Node.js检查猫鼬验证并提醒用户【英文标题】:Node.jscheckmongoosevalidationandalertuser【发布时间】:2013-11-2916:45:14【问题描述】:您好,我正在使用mongoose和mongooseuniqure验证器,这是一个用于轻松验证mongoose的模块。我想知道解决此... 查看详情

带有 Q 承诺的 Node.JS 猫鼬请求返回空

】带有Q承诺的Node.JS猫鼬请求返回空【英文标题】:Node.JSmongooserequestwithQpromisereturnempty【发布时间】:2017-07-1008:33:37【问题描述】:使用mongoose和Q表示承诺。但结果为空varQ=require("q");vardeferred=Q.defer();User.find(,function(err,users)if(err)de... 查看详情

ReferenceError:TextEncoder 没有用猫鼬定义 Node.js

】ReferenceError:TextEncoder没有用猫鼬定义Node.js【英文标题】:ReferenceError:TextEncoderisnotdefinedNode.jswithmongoose【发布时间】:2021-10-3101:50:44【问题描述】:问题似乎出在mongoose和mongodb包上,因为它可以正常工作mongoose.connect(\'mongodb+srv:... 查看详情

Node.js 检测两个猫鼬查找何时完成

】Node.js检测两个猫鼬查找何时完成【英文标题】:Node.jsdetectwhentwomongoosefindarefinished【发布时间】:2017-01-2101:24:27【问题描述】:我正在尝试使用library使用自动完成功能初始化两个输入。当我加载我的页面时,我会触发一个Ajax... 查看详情

q node.js,猫鼬的“帖子”之后的回调[重复]

】qnode.js,猫鼬的“帖子”之后的回调[重复]【英文标题】:qnode.js,callbackaftermongoose\'s"post"[duplicate]【发布时间】:2014-08-2104:45:23【问题描述】:我有这个源代码:UserSchema.post(\'save\',function(next)doSomethingAsync(function()next()););m... 查看详情

Node JS 从数组中删除特定对象(猫鼬)

】NodeJS从数组中删除特定对象(猫鼬)【英文标题】:NodeJSremoveaspecificobjectfromarray(mongoose)【发布时间】:2021-12-1821:39:30【问题描述】:我有一个对象数组-列表[];和一个对象-obj;这是列表数组:_id:newObjectId("61840c5ce237f22a1c7a1ac7"),nam... 查看详情

如何使用猫鼬更新子文档数组中的特定元素? [复制]

】如何使用猫鼬更新子文档数组中的特定元素?[复制]【英文标题】:Howtoupdateaspecificelementinsideasub-documentarrayusingmoongoose?[duplicate]【发布时间】:2018-05-2712:57:39【问题描述】:我在我的应用程序中使用node.js和mongoose。我有一个架... 查看详情