Maison  >  Questions et réponses  >  le corps du texte

Filtre d'expression régulière pour les champs de recherche et les cases à cocher de la pile MERN

J'essaie d'apprendre comment la pile MERN fonctionne ensemble en apprenant par la pratique, et je suis ces tutoriels pour bezcoder : Node.js/Express/MongoDb (code entier Github) et Reactjs (code entier Github)

Exemples de données du serveur

[
  {
    "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
  }
]

Situation actuelle Actuellement, l'interface de l'application dispose d'une barre de recherche dans laquelle je peux rechercher et filtrer les données par le "titre" du didacticiel (par exemple "Noodles" pour obtenir le premier). J'ai trouvé que cela se faisait avec l'extrait de code suivant :

  1. tutoriel.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."
      });
    });
};
  1. services/tutorial.service.js (dans Reactjs)
import http from "../http-common";

class TutorialDataService {

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

export default new TutorialDataService();

Ce que je veux savoir , c'est comment modifier ces codes afin de pouvoir filtrer par mots dans les champs de recherche "titre" et "description" ainsi que dans la case à cocher publié : vrai passage.

Si le frontend ressemble à ceci :

Mon essai

  1. tutoriel.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."
      });
    });
};
  1. services/tutorial.service.js (dans 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();

Je ne sais pas si c'est l'utilisation correcte de findByTitle et comment implémenter correctement les fonctions OR et AND.

P粉302160436P粉302160436216 Il y a quelques jours509

répondre à tous(1)je répondrai

  • P粉792673958

    P粉7926739582024-04-07 00:09:45

    Le vôtre { 中的代码在教程查找查询中出错。 $or 每个查询都需要单独的 { }. Utilisez-le comme ci-dessous. Ça va marcher. Utilisé pour effectuer une recherche dans le titre, la description et les cases à cocher publiées.

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

    répondre
    0
  • Annulerrépondre