Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A relációs adatbázisok, mint például a MySQL, hagyományosan az adatbázis-választások közé tartoznak. A NoSQL-adatbázisok, például a MongoDB azonban egyre népszerűbbek az adattárolás rugalmas szerkezete és az adatok gyors tárolására és visszakeresésére való képességük miatt.

Ezek az adatbázisok alternatív lekérdezési nyelvet kínálnak, amelyet zökkenőmentesen integrálhat a modern webes és mobilalkalmazásokkal. Olvassa el a React adatok MongoDB adatbázisban való tárolásának módját.

Mi az a NoSQL adatbázis?

A NoSQL a Nem csak SQL rövidítése, egy nem relációs adatbázis. Az ilyen típusú adatbázisok nem támaszkodnak a hagyományos relációs adatbázis-modellre. Nem rendelkezik meghatározott oszlopsor-struktúrával, és számos különböző formátumban képes tárolni az adatokat, így rugalmasabb és méretezhető.

A fő különbség a NoSQL és a relációs adatbázisok között az, hogy a NoSQL adatbázisok sorok és oszlopok helyett adatokat tárolnak dokumentumokban, amelyek dinamikus szerkezetűek.

instagram viewer

MongoDB adatbázis beállítása

A MongoDB a legnépszerűbb NoSQL adatbázis. Ez egy nyílt forráskódú adatbázis, amely JSON-szerű dokumentumokban (táblázatokban) tárolja az adatokat gyűjteményekben (adatbázisokban).

Így néz ki egy egyszerű MongoDB dokumentumstruktúra:

{
 Keresztnév: "Andrew",
 Szerep: "háttérfejlesztő"
}

Az induláshoz először meg kell tennie állítson be egy MongoDB adatbázist. Miután befejezte a MongoDB konfigurálását, nyissa meg a MongoDB Compass alkalmazást. Ezután kattintson a Új kapcsolat gombot, hogy kapcsolatot hozzon létre a helyileg futó MongoDB szerverrel.

Ha nem fér hozzá a MongoDB Compass GUI eszközhöz, használhatja a MongoDB shell eszköz adatbázis és a gyűjtemény létrehozásához.

Adja meg a kapcsolat URI-jét és a kapcsolat nevét, majd nyomja meg a gombot Mentés és csatlakozás.

Végül kattintson az Adatbázis létrehozása gombra, írja be az adatbázis nevét, és adja meg a gyűjtemény nevét a bemutató gyűjteményhez.

Hozzon létre egy React klienst

Az alkalmazás kódja megtalálható benne GitHub adattár.

Egy React alkalmazás gyors indításához hozzon létre egy projektmappát a helyi gépen, váltson át arra a könyvtárra, és futtassa a következő terminálparancsokat a fejlesztői kiszolgáló létrehozásához és felpörgetéséhez:

npx create-react-app my-app
cd my-app
npm start

Ezután telepítse az Axiost. Ez a csomag lehetővé teszi, hogy HTTP-kéréseket küldjön a backend Express.js kiszolgálónak, hogy adatokat tároljon a MongoDB adatbázisában.

npm install axios

Hozzon létre egy bemutató űrlapot a felhasználói adatok gyűjtéséhez

Nyissa meg a src/App.js fájlban törölje a React kódot, és cserélje ki a következőre:

import'./App.css';
import React, { useState } tól től'reagál';
import Axios tól től"axiók";
funkcióApp() {
const [name, setName] = useState("")
const [role, setRole] = useState("")


const handleSubmit = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/betét", {
 teljes név: név,
 cégSzerep: szerep
 })
 }


Visszatérés (


"Alkalmazás">
"Alkalmazás fejléc"> 
"Bejelentkezési űrlap">


Keresztnév</p>


 osztálynév = "Név"
 típus="szöveg"
 helyőrző="Keresztnév ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Vállalati szerep</p>


 osztálynév = "Szerep"
 típus="szöveg"
 helyőrző = "Szerep..."
 onChange={(e) => {setRole (e.target.value)}}
 />








exportalapértelmezett App;

Bontsuk fel:

  • Deklaráljon két állapotot, egy nevet és egy szerepállapotot a beviteli mezőkből gyűjtött felhasználói adatok tárolására a useState hook segítségével.
  • A onChange Az egyes beviteli mezők metódusa egy visszahívást futtat, amely az állapotmetódusokat használja a felhasználó által az űrlapon keresztül elküldött adatok rögzítésére és tárolására.
  • Az adatok háttérkiszolgálóra való elküldéséhez az onSubmit kezelő függvény a Axios.post metódussal küldheti el az állapotokból objektumként átadott adatokat a háttér API-végponthoz.

A megjelenített űrlap stílusához adja hozzá a következő kódot az App.css fájlhoz.

* {
párnázás: 0;
árrés: 0;
doboz-méretezés: border-box;
}
test {
betűtípus család: 'Poppins', sans-serif;
háttérszín: #8EC1D6;
}


.Bejelentkezési űrlap {
árrés: 100pxauto;
szélesség: 200px;
magasság: 250px;
háttérszín: #fff;
határ-sugár: 10px; 
}


.Bejelentkezési űrlapp {
szöveg igazítás: központ;
betűméret: 12px;
font-weight: 600;
szín: #B8BFC6;
párnázás: 10px 10px;
}


.Bejelentkezési űrlapbemenet {
kijelző: Blokk;
szélesség: 80%;
magasság: 40px;
árrés: 10pxauto;
határ: 1pxszilárd#ccc;
határ-sugár: 5px;
párnázás: 0 10px;
betűméret: 16px;
szín: fekete;
}
.Bejelentkezési űrlapgomb {
háttérszín: #8EC1D6;
szín: #fff;
kurzor: mutató;
betűméret: 15px;
határ-sugár:7px;
párnázás: 5px 10px;
határ: egyik sem;
}

Most pörgesse fel a fejlesztői kiszolgálót a módosítások frissítéséhez, és navigáljon a webhelyre http://localhost: 3000 a böngészőjében az eredmények megtekintéséhez.

Hozzon létre egy Express.js háttérprogramot

Az Express háttérrendszer köztes szoftverként működik a React-ügyfél és a MongoDB adatbázis között. A szerverről definiálhatja adatsémáit, és kapcsolatot létesíthet a kliens és az adatbázis között.

Hozzon létre egy Express webszervert és telepítse ezt a két csomagot:

npm mongoose cors telepítése

A Mongoose egy Object Data Modeling (ODM) könyvtár a MongoDB és a Node számára. Egyszerűsített séma alapú módszert biztosít az alkalmazásadatok modellezésére és MongoDB adatbázisban való tárolására.

A CORS (Cross-Origin Resource Sharing) csomag mechanizmust biztosít a háttérkiszolgáló és a frontend ügyfél számára az API-végpontokon keresztül történő kommunikációhoz és adatok továbbításához.

Hozzon létre egy adatsémát

Hozzon létre egy új mappát a kiszolgáló projekt mappájának gyökérkönyvtárában, és nevezze el modellek. Ebben a mappában hozzon létre egy új fájlt: dataSchema.js.

A séma ebben az esetben az adatbázis logikai struktúráját képviseli. Meghatározza az adatbázison belüli gyűjteményeket alkotó dokumentumokat (rekordokat) és mezőket (tulajdonságokat).

Adja hozzá a következő kódot a dataSchema.js fájlhoz:

const mangúz = igényelnek('indiai menyét');
const ReactFormDataSchema = új indiai menyét. Séma({
 név: {
 típus: Húr,
 kívánt: igaz
 },
 szerep: {
 típus: Húr,
 kívánt: igaz
 }
});
const User = mongoose.model("Felhasználó", ReactFormDataSchema);
modult.exports = Felhasználó;

Ez a kód Mongoose sémát hoz létre egy felhasználói modellhez. Ez a séma határozza meg a felhasználói adatok adatszerkezetét, beleértve a felhasználó nevét és szerepét. A séma ezután modell létrehozására szolgál a felhasználó számára. Ez lehetővé teszi, hogy a modell adatokat tároljon egy MongoDB gyűjteményben a sémában meghatározott struktúra szerint.

Állítsa be az Express szervert

Ezután nyissa meg a index.js fájlt a szerver projekt mappájába, és adja hozzá ezt a kódot:

const expressz = igényelnek('Expressz');
const mangúz = igényelnek('indiai menyét');
const cors = igényelnek("cors");
const app = express();
const Felhasználó= igényelnek('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mongoose.connect("mongodb://localhost: 27017/reactdata", { használja a NewUrlParser-t: igaz });


app.post('/beszúrás', async(req, res) => {
const Keresztnév = req.body.firstName
const CompanyRole = req.body.companyRole


const formData = új Felhasználó({
 név: Keresztnév,
 szerep: CompanyRole
 })


próbáld ki {
várja formData.save();
 res.send("adat beszúrva..")
 } fogás(hiba) {
konzol.log (hiba)
 }
});


const port = process.env. PORT || 4000;
app.listen (port, () => {
konzol.log(`A szerver elindult a porton ${port}`);
});

Bontsuk fel:

  • Inicializálja az Express-t, a mongoose-t és a CORS-t a szerveren.
  • A Mongoose csomag létrehozza a kapcsolatot a MongoDB adatbázissal a csatlakozni metódus, amely beveszi az URI tartományt és egy objektumot. Az URI egy kapcsolati karakterlánc, amely a MongoDB adatbázissal való kapcsolat létrehozására szolgál. Az objektum meghatározza a konfigurációt; ebben az esetben tartalmaz egy beállítást az URL-elemző legújabb formájának használatára.
  • A webszerver elsősorban a különböző útvonalakról érkező kérésekre válaszol a megfelelő kezelő funkcióval. Ebben az esetben a szerver rendelkezik egy POST útvonallal, amely adatokat fogad a React klienstől, tárolja azokat egy változóban, és továbbítja az importált adatmodellnek.
  • A kiszolgáló ezután egy try-and-catch blokk segítségével tárolja és menti az adatokat a MongoDB adatbázisban, és kijelentkezi az esetleges hibákat, ha vannak.

Végül forgassa fel a fejlesztői kiszolgálót a módosítások frissítéséhez, és lépjen a React-kliensre a böngészőben. Írjon be bármilyen adatot az űrlapon, és tekintse meg az eredményeket a MongoDB adatbázisban.

A MERN Stack használata alkalmazások létrehozásához

A MERN verem hatékony és hatékony szerszámkészletet biztosít az építési alkalmazásokhoz. Teljes értékű valós alkalmazásokat hozhat létre a MongoDB, Express, React és Node.js használatával,

A React ökoszisztéma csomagokat is biztosít a webes űrlapokkal való munkavégzéshez. A legnépszerűbbek a Formik, a KendoReact Form és a React Hook Form.