@bernardo_nolan
Для подключения MongoDB к React.js необходимо использовать серверный язык программирования, такой как Node.js, для создания API, которое взаимодействует с базой данных MongoDB. Затем вы можете использовать React.js для создания пользовательского интерфейса и обращения к API для получения и отправки данных.
Вот общие шаги для подключения MongoDB к React.js:
Вот пример кода для серверной части приложения с использованием Node.js и Express.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
const express = require('express'); const app = express(); const bodyParser = require('body-parser'); const MongoClient = require('mongodb').MongoClient; const url = 'mongodb://localhost:27017/mydatabase'; MongoClient.connect(url, function(err, client) { if (err) throw err; const db = client.db('mydatabase'); const collection = db.collection('mycollection'); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.get('/api/data', function(req, res) { collection.find().toArray(function(err, data) { if (err) throw err; res.send(data); }); }); app.post('/api/data', function(req, res) { const newData = req.body; collection.insertOne(newData, function(err, result) { if (err) throw err; res.send(result); }); }); app.listen(3000, function() { console.log('Server started on port 3000'); }); }); |
Этот код создает сервер на порту 3000 и создает два маршрута API, которые будут обращаться к коллекции mycollection
в базе данных mydatabase
. Маршрут GET /api/data
получает все данные из коллекции и отправляет их клиенту, а маршрут POST /api/data
добавляет новые данные в коллекцию.
Затем вы можете использовать AJAX-запросы в React.js, чтобы получать и отправлять данные с сервера. Вот пример кода для фронтенда с использованием React.js:
1 2 3 4 5 6 7 8 9 10 11 |
import React, { useState, useEffect } from 'react'; import axios from 'axios'; function App() { const [data, setData] = useState([]); const [newData, setNewData] = useState({}); useEffect(() => { axios.get('/api/data') .then(res => { setData |