【发布时间】: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