如何将后端查询的结果返回到前端以显示在页面上

如何解决如何将后端查询的结果返回到前端以显示在页面上

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”子字符串的零食，因此返回带有“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>
        )
    }

}

如有必要，这是我的简单前端。我还想问我如何实现反向操作，在那里我获取用户输入并将其作为变量“输入”发送到我的后端并再次返回结果。我希望我不会因为我的简单问题而要求直接回答/解决方案。我不介意是否提供任何类型的提示/指导或资源/视频，以便我可以学习自己。我曾尝试研究 axios 和 ajax 的使用，但我不确定如何应用这两个。

解决方法

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

您可以使用使用 res.send(myData) 的快速 endpoint 来执行此操作。端点可以负责调用数据库。

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