我如何 return 我的后端查询结果到我的前端以显示在页面上

Question

simple query

var MongoClient = require('mongodb').MongoClient;

var input = "ito";
var regexInput = new RegExp(input);

//I have removed the url and db name for privacy purposes
MongoClient.connect('', function(err, db) {
  if (err) throw err;
  var dbo = db.db("");
  var query = { brand_name: regexInput };
  dbo.collection("snacks").find(query).toArray(function(err, result) {
    if (err) throw err;
    console.log(result);
    db.close();
  });
});

我目前正在尝试了解 MERN 堆栈并开发应用程序。这是我的简单查询，我只是在其中搜索带有“orit”子字符串的零食，因此 return 带有“Doritos”等的零食。我如何整合此查询或获取结果并将其显示在我前端的页面上.或者也许有一种可能的方法可以完全在前端完成所有事情？

frontend page

import React, { Component } from 'react';
import styles from "./styles.module.css";

export default class SnackSearch extends Component {
    render() {

        return (
            <div>
                <h1 className = {styles.h1}>Search for your snack</h1>
                
            </div>
        )
    }

}

如有必要，这是我的简单前端。我还想问一下如何实现反向操作，在那里我获得用户输入并将其作为变量“input”发送到我的后端并再次 returning 结果。我希望我不会因为我的简单问题而要求直接 answer/solution。我不介意是否给出任何类型的 hint/guidance 或 resource/video，以便我可以自己学习。我试图研究 axios 和 ajax 的使用，但我不确定如何应用这两个。

Answer 1

由于服务器和客户端是两个不同的环境，您必须将从数据库获取的数据从服务器传输到客户端。

您可以使用 res.send(myData) 的表达 endpoint 来完成此操作。端点可以负责调用数据库。

在客户端上，您必须调用该端点来请求数据。然后你可以使用这些数据在你的反应页面中显示它。 React官方documentation有一个清晰的抓取数据的例子

我如何 return 我的后端查询结果到我的前端以显示在页面上

How can I return the results of my backend Query onto my frontend to display on a page

javascript

mongodb

mern