【问题标题】:How to get mongodb database to react.js frontend?如何让 mongodb 数据库到 react.js 前端?
【发布时间】:2021-07-05 10:27:57
【问题描述】:

我的后端已准备好使用 express 和 MongoDB。 MongoDB 包含各种集合。

我想访问 MongoDB 数据库以进行 react.js 前端并迭代 MongoDB 数据库,以便 我可以在 UI 上显示(打印)集合的名称。 我该怎么做?

这是后端代码

import express from "express";
import mongoose from "mongoose";
import Messages from "./messages.js";
import cors from "cors";

// app configuration

const app = express();
const port = process.env.PORT || 9000;

//middleware
app.use(express.json());
app.use(cors());

// DB Configuration

const url = "mongodb+srv://suraj_bisht_99:password@aaa.bbb.mongodb.net/database_name";
mongoose.connect(url, {useCreateIndex: true, useNewUrlParser: true, useUnifiedTopology: true})
        .then(()=> console.log('mongoDB is connected'))
        .then(err => console.log(err));

// API routes

app.get("/", (req, res) => {
    res.status(200).send("Hello World");
})


app.get("/messages/sync", async (req, res) => {
        await Messages.find( (err, data) => {
            if(err){
                console.log(err);
                res.status(500).send(err);
            }else{
                res.status(200).send(data);
            }
        })
})

app.post("/messages/new", async (req, res) => {
     
    try{
        const newMessage = new Messages(req.body);
        const newMessageCreated = await newMessage.save();
        res.status(201).send(newMessageCreated);
    }
    catch(err){
        res.status(400).send(err);
    }
});


// listening part 

app.listen(port, () => console.log(`listening on port number ${port}`));

【问题讨论】:

  • 在没有看到任何代码的情况下很难准确地说出如何为您的数据提供服务,但是您需要以 express 方式制作 API 端点,然后使用 Axios(或 Fetch)从您的 React 应用程序调用端点API)。您可能需要在 Webpack 配置中代理您的服务器,具体取决于您如何设置项目。
  • 我已经更新了我的代码,并且在 url 末尾的代码中,我有我的 database_name。所以,根据你的说法,如果我只是使用 axios 将我的数据库名称传递给前端,那么我可以遍历 database_name 的集合吗?
  • 这样做的方法是使用您的 express API 从前端访问 MongoDB 数据库,然后将数据返回到您的前端。它实际上与您在GET 路由中为/messages/sync 所拥有的非常相似。只需为您想要的快递设置一条路线,然后从您的前端发送一个 GET 请求到该路线,该路线返回您需要的数据。您不应该直接从前端访问数据库,不要将任何数据库 url、密码、用户名传递给前端,将其全部留给后端。

标签: javascript reactjs mongodb express axios


【解决方案1】:

在大多数情况下,不要这样做。这可能会带来安全风险。

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

这是一个在 express 上使用猫鼬的例子。这只是一个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 } })
    });
})

【讨论】:

  • 感谢您的首次贡献。您能否更正“moongose”的拼写:)这将改善您的出色答案并允许直接搜索它。谢谢老哥!
  • 已修复。感谢 Bjorn 指出这一点。 :D
  • 是的,它在控制台上给出了正确的输出,但在申请从前端获取请求时给出了 404 not found 错误。您能否就应用什么而不是 console.log(collection) 提出一些建议,以便它将 JSON 格式的数据发送到输出?
  • 你试过将数组数据放入json响应吗?常量数据Arr = []; collection.forEach(el => dataArr.push(el.name)); res.status(200).json({ status: 'success', data: { dataArr } })
  • 另外,删除 next();因为 res.json 已经结束了事件循环。
【解决方案2】:

{ "name": "复仇者联盟:终局之战", "时间": ["14:15", "16:00", "21:30", "23:00"], “评分”:8.8 }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-05-21
    • 1970-01-01
    • 2023-02-15
    • 2021-12-27
    • 1970-01-01
    • 1970-01-01
    • 2018-02-08
    • 2019-09-05
    相关资源
    最近更新 更多