Regulärer Ausdrucksfilter für MERN-Stack-Suchfelder und Kontrollkästchen

Question

Ich versuche durch Learning by Doing zu lernen, wie der MERN-Stack zusammenarbeitet, und folge diesen Tutorials für Bezcoder: Node.js/Express/MongoDb (Github-Gesamtcode) und Reactjs (Github-Gesamtcode)

Beispieldaten vom Server

[
  {
    "id": "5f9bdace778082303c859248",
    "title": "How to cook noodles",
    "description": "This is a tutorial about how to cook noodles in under 10 minutes.",
    "published": false
  },
  {
    "id": "5f9bdae3778082303c859249",
    "title": "How to bake a chocolate cake",
    "description": "This is a tutorial about how to bake chocolate cake using cocoa powder.",
    "published": true
  }
]

Aktuelle Situation Derzeit verfügt das Frontend der App über eine Suchleiste, in der ich die Daten nach dem „Titel“ des Tutorials suchen und filtern kann (z. B. „Nudeln“, um das erste zu erhalten). Ich habe herausgefunden, dass dies mit dem folgenden Codeausschnitt geschieht:

1. tutorial.controller.js

exports.findAll = (req, res) => {
  const title = req.query.title;
  var condition = title ? { title: { $regex: new RegExp(title), $options: "i" } } : {};

  Tutorial.find(condition)
    .then(data => {
      res.send(data);
    })
    .catch(err => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while retrieving tutorials."
      });
    });
};

2. services/tutorial.service.js (in Reactjs)

import http from "../http-common";

class TutorialDataService {

...
  
  findByTitle(title) {
    return http.get(`/tutorials?title=${title}`);
  }
}

export default new TutorialDataService();

Was ich wissen möchte ist, wie ich diese Codes ändern kann, damit ich nach Wörtern im Suchfeld „Titel“ und „Beschreibung“ und auch im Kontrollkästchen „Published:True“ filtern kann.

Wenn das Frontend so aussieht:

Mein Versuch

1. tutorial.controller.js

exports.findAll = (req, res) => {
  const title = req.query.title || "";
  const description = req.query.description || "";
  const published = req.query.published;

  Tutorial.find(
    {
    $or: [
        {title: { $regex: new RegExp(title), $options: "i"}}, {description: { $regex: new RegExp(description), $options: "i"}}
    ],
    $and: [
        .... and here if checked, then only show published, else show all ....
    ]

}

  )
    .then(data => {
      res.send(data);
    })
    .catch(err => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while retrieving tutorials."
      });
    });
};

2. services/tutorial.service.js (in Reactjs)

import http from "../http-common";

class TutorialDataService {

...
  
  findByTitle(title, description, published) {
    return http.get(`/tutorials?title=${title}`, `/tutorials?description=${description}`, `/tutorials?published=${published}`);
  }
}

export default new TutorialDataService();

Ich bin mir nicht sicher, ob dies die richtige Verwendung von findByTitle ist und wie man die OR- und AND-Funktionen richtig implementiert.

Answer 1

您的 { 中的代码在教程查找查询中出错。 $or 每个查询都需要单独的 { }。像下面这样使用。它会起作用的。用于在标题、描述和已发布复选框中进行搜索。

Tutorial.find:({
$or: [
        {title: { $regex: new RegExp(title), $options: "i"},
        {description: { $regex: new RegExp(description), $options: "i"}
    ],
published:true
})