Javascript 如何让mongodb数据库进入react.js前端？

我已经为express和MongoDB准备好了后端。MongoDB包含各种集合

我想访问MongoDB数据库来react.js frontend并迭代MongoDB数据库，以便 我可以在UI上显示（打印）集合的名称。 我该怎么做

这是后端代码

从“express”导入express；
从“猫鼬”进口猫鼬；
从“/Messages.js”导入消息；
从“cors”导入cors；
//应用程序配置
常量app=express（）；
const port=process.env.port | 9000；
//中间件
使用（express.json（））；
应用程序使用（cors（））；
//数据库配置
const url=“mongodb+srv://suraj_bisht_99:password@aaa.bbb.mongodb.net/database_name”；
connect（url，{useCreateIndex:true，useNewUrlParser:true，useUnifiedTopology:true}）
。然后（（）=>console.log（'mongoDB已连接'））
.then（err=>console.log（err））；
//API路线
应用程序获取（“/”，（请求，请求）=>{
res.status（200）。发送（“你好世界”）；
})
app.get（“/messages/sync”），异步（req，res）=>{
等待消息。查找（（错误，数据）=>{
如果（错误）{
控制台日志（err）；
资源状态（500）。发送（错误）；
}否则{
资源状态（200）。发送（数据）；
}
})
})
app.post（“/messages/new”），异步（req，res）=>{
试一试{
const newMessage=新消息（请求正文）；
const newMessageCreated=等待newMessage.save（）；
res.status（201）.send（newMessageCreated）；
}
捕捉（错误）{
资源状态（400）。发送（错误）；
}
});
//听力部分
app.listen（端口，（）=>console.log（`listening on port number${port}`））在大多数情况下，不要这样做。这可能是一种安全风险

从前端直接连接到数据库可能会使数据库受到攻击。您应该从Express服务器创建一个API端点，该端点只为前端提供所需的数据

app.get('/collections', (req,res,next)=>{
    mongoose.connection.db.listCollections().toArray().then(collection => {
        const dataArr = []; 
        collection.forEach(el => dataArr.push(el.name));
        res.status(200).json({ status: 'success', data: { dataArr } })
    });
})

下面是一个在express上使用mongoose的示例。这只是一个console.log。您可以从服务器端迭代数据，只发送名称

app.get('/collections', (req,res,next)=>{
    mongoose.connection.db.listCollections().toArray().then(collection => {
        console.log(collection)
    });
    next();
})

以下是我的控制台输出：

[
  {
    name: 'tours',
    type: 'collection',
    options: {},
    info: { readOnly: false, uuid: [Binary] },
    idIndex: { v: 2, key: [Object], name: '_id_' }
  },
  {
    name: 'users',
    type: 'collection',
    options: {},
    info: { readOnly: false, uuid: [Binary] },
    idIndex: { v: 2, key: [Object], name: '_id_' }
  }
]

编辑：
下面是示例代码，其中包含将集合名称作为数组发送到前端的响应

app.get('/collections', (req,res,next)=>{
    mongoose.connection.db.listCollections().toArray().then(collection => {
        const dataArr = []; 
        collection.forEach(el => dataArr.push(el.name));
        res.status(200).json({ status: 'success', data: { dataArr } })
    });
})

{
“名字”：“复仇者：终局”，
“时间”：[“14:15”、“16:00”、“21:30”、“23:00”]，
“评级”：8.8
}
在没有看到任何代码的情况下，很难说清楚如何为数据提供服务，但您需要在express中创建API端点，然后使用Axios（或Fetch API）从React应用程序调用端点。您可能需要在Webpack配置中代理服务器，具体取决于您如何设置项目。我已更新了我的代码，在url末尾的代码中，我有我的数据库名称。因此，根据您的说法，如果我只是使用axios将我的数据库名称传递给前端，那么我可以迭代数据库名称集合吗？方法是使用express API从前端访问MongoDB数据库，然后将数据返回给前端。它实际上与
/messages/sync
的
GET
路径非常相似。只需在express中设置所需的路由，然后从前端向该路由发送GET请求，该路由将返回所需的数据。您不应该直接从前端访问数据库，不要向前端传递任何数据库URL、密码、用户名，请将所有内容留给后端。感谢您的第一次贡献。你能纠正一下“moongose”的拼写吗？：）这将改进你的答案，并允许直接搜索它。谢谢你，伙计！固定的。谢谢比约恩指出这一点Dya，它在控制台上给出正确的输出，但在应用从前端获取请求时给出404未找到错误。您是否可以给出一些建议，说明应用什么来代替console.log（collection），以便它将JSON格式的数据发送到输出？您是否尝试过将数组数据放入JSON响应中？常量dataArr=[]；collection.forEach（el=>dataar.push（el.name））；json（{status:'success'，data:{dataArr}}}）同时，删除next（）；因为res.json已经结束了事件循环。