Penapis ungkapan biasa untuk kotak carian dan kotak semak tindanan MERN
P粉302160436
P粉302160436 2024-04-06 14:53:12
0
1
421

Saya cuba mempelajari cara tindanan MERN berfungsi bersama dengan belajar dengan melakukan dan saya mengikuti tutorial ini untuk bezcoder: Node.js/Express/MongoDb (Kod keseluruhan Github) dan Reactjs (kod keseluruhan Github)

Contoh data daripada pelayan

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

Keadaan semasa Pada masa ini, bahagian hadapan apl mempunyai bar carian tempat saya boleh mencari dan menapis data mengikut "tajuk" tutorial (cth. "Mi" untuk mendapatkan yang pertama). Saya dapati ini dilakukan dengan coretan kod berikut:

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

class TutorialDataService {

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

export default new TutorialDataService();

Apa yang saya ingin tahu ialah , bagaimana untuk menukar kod ini supaya saya boleh menapis mengikut perkataan dalam kotak carian "tajuk" dan "huraian" dan juga kotak pilihan published:true pass.

Jika bahagian hadapan kelihatan seperti ini:

Percubaan saya

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

Saya tidak pasti sama ada ini adalah penggunaan findByTitle yang betul dan cara melaksanakan fungsi ATAU dan DAN dengan betul.

P粉302160436
P粉302160436

membalas semua(1)
P粉792673958

Milik anda { 中的代码在教程查找查询中出错。 $or 每个查询都需要单独的 { }. Gunakannya seperti di bawah. Ia akan berfungsi. Digunakan untuk mencari dalam tajuk, perihalan dan kotak pilihan yang diterbitkan.

Tutorial.find:({
$or: [
        {title: { $regex: new RegExp(title), $options: "i"},
        {description: { $regex: new RegExp(description), $options: "i"}
    ],
published:true
})
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!