Filtre d'expression régulière pour les champs de recherche et les cases à cocher de la pile MERN
P粉302160436
P粉302160436 2024-04-06 14:53:12
0
1
593

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粉302160436
P粉302160436

répondre à tous(1)
P粉792673958

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
})
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal