Hogyan lehet egy adatbázist beállítani, ha Ön front-end fejlesztő

Valaki nemrég megkérdezte tőlem, hogy a kezelőfelület fejlesztőjének hogyan lehet a legegyszerűbben menteni a felhasználók adatait. Tehát elmagyarázom, hogyan kell ezt megtenni.

Az adatbázis beállítása

Először egy tényleges adatbázisra lesz szükségünk. Irány a tábla ingyen. Miután regisztrált, kattintson az Új létrehozása gombraa MongoDB Deployments fülön. A homokozó adatbázis ingyenes, tehát ezt fogjuk használni.

Miután létrehoztuk az adatbázist, létre kell hoznunk egy fiókot, hogy hitelesíteni tudjuk magunkat. Kattintson az adatbázis nevére, majd a felhasználókra,és add hozzá az adatbázis felhasználót . Írja le a választott felhasználónevet és jelszót, mivel később szükségünk lesz rájuk.

Az adatbázis oldalának tetején látnia kell egy MongoDB URI-t. Ez az adatbázisunk webcíme. Az adatbázis URI-je olyan, mint egy weboldal URL-je. Megállapodás szerint a MongoDB URI a következő:

mongodb://:@
    
     :/
    

Az enyém például:

mongodb://admin:[email protected]:11885/medium

A szerver beállítása

A Node-ot fogjuk használni a hátulunkban. Hogy ne kelljen beállítania, ide kattintva klónozhatja a projektemet a Glitch-en

Vessen egy pillantást az server.jsáltalam megadott kezdő fájlra:

Az importálással kezdjük express- ez a könyvtár, amelyet a szerverünkre érkező kérések kezelésére fogunk használni.

use(require(cors))Engedélyeznünk kell a domainek közötti kéréseket. Ezek egy tartományban tárolt webhelyről érkező kérések egy másik tartomány szerveréhez.

app.use(require('body-parser').json()) automatikusan elemzi a kérést a JSON számára számunkra.

Ezután átadjuk a getmetódusnak a kezelni kívánt útvonalat és az azt kezelõ visszahívást. Ez azt jelenti, hogy amikor valaki megnyitja /weboldalunk oldalát , a kérést az a visszahívás kezeli. Az alap domain implicit, tehát ha a domain //shiny-koala.glitch.com,az útvonal /about//shiny-koala.glitch.com/about lesz .

Pontosabban, amikor azt mondom, hogy „nyisd meg az oldalt”, akkor azt értem, hogy a GETmódszer segítségével kérést küld a szerverünkhöz. A Http módszerek csak olyan típusú kérelmek, amelyeket a szervernek adhat. Csak a következőket fogjuk használni:

  • GETEz a módszer erőforrások lekérésére szolgál egy szerverről. Például, amikor megnyitja a Facebookot, betölti a szükséges HTML-t, CSS-t és JavaScript-et.
  • POSTEzt a módszert erőforrások létrehozására használják egy kiszolgálón. Például, ha valamit közzétesz a Facebookon, az abban a bejegyzésben írt információkat POSTkérésként elküldi a Facebook szervereinek .
  • PUTEz a módszer a szerver erőforrásainak frissítésére szolgál. Például, ha szerkeszt egy bejegyzést, a szerkesztéseket PUTkérésként elküldjük a Facebook szerverére .

A app.postés app.putpontosan úgy működnek, mint app.geta POST és a PUT módszer, a GET helyett pedig meglehetősen ésszerűen.

útvonalválasztás

A szerver fejlesztése közben néhány tesztet el kell végeznie. A HTTP kérések futtatásához használhatja a praktikus REST teszt tesztet vagy az Insomnia alkalmazást.

Hogy ellenőrizze az URL a Glitch app kattintson a mutatják gombot.

Eddig csak az útvonalat használtuk /. De különböző információkat szeretnénk tárolni a különböző felhasználókról, ezért minden felhasználóhoz más és más útvonalra van szükségünk.

Például: /ZaninAndreaés/JohnGreen

Most van egy problémánk: nem tudjuk minden egyes útvonalat kódolni, mivel ez nem túl skálázható megközelítés. Amire szükségünk van, az útvonal paraméterei. Csak egy útvonalat fogunk kódolni:/:user

A kettőspont azt mondja az Express-nek, hogy haladjon meg minden útvonalat, kezdve /csak alfanumerikus karakterekkel.

Néhány példa:

  • /ZaninAndrea elkapják
  • /Johnny45 elkapják
  • /alex/scoreakkor nem fogott

Ezután lekérhetjük usera változó értékétrequest.params.user

Szerverünk most válaszol minden lekérdezésre, amely visszahangolja a felhasználónevet.

Adatok hozzáadása az adatbázishoz

Tudjuk, hogy ki a felhasználó, és most szeretnénk tudni információkat tárolni róla.

Az adatbázis lekérdezéséhez a mongodbkönyvtárat fogjuk használni . A kétféle módon telepítheti:

npm install mongodb --save

vagy ha a Glitch-et használja, lépjen a package.jsonfájlhoz, és kattintson a Csomag hozzáadása gombra .

Töltsük be a könyvtárat, és tároljuk a MongoDB URI-t egy változóban:

Az URI nagyon érzékeny információ - mindez szükséges az adatbázis eléréséhez. A legjobb, ha olyan .envfájlba helyezi, amely másoknak nem lesz látható.

A Glitch automatikusan betölti a változókat a .envfájlból a process.envváltozóba.

Az adatbázishoz való kapcsolódás aszinkron művelet, ezért a szerver összes beállítását egy ilyen visszahívásba kell foglalnunk:

Az adatbázisok gyűjteményekbe vannak rendezve, és a gyűjtemények dokumentumokat (alapvetően JSON fájlokat) tartalmaznak. Csatlakozzunk tehát a usergyűjteményhez (akkor jön létre, amikor először hozzáférünk hozzá).

Először az POSTútvonalat fogjuk kezelni . Ezt fogjuk használni, amikor először adunk adatokat egy felhasználóról. Ezután az PUTútvonalat frissítjük.

A collection.insertOnemódszer új dokumentumot ad hozzá a gyűjteményhez. Esetünkben minden felhasználónak meg lesz a saját dokumentuma.

{ ...request.body, user : request.params.user } felhasználja a spread operátort a kérelem törzsén és az URL-en keresztül megadott felhasználó egyesítésén.

Az eredmény az a dokumentum, amelyet a gyűjtemény tárol.

A második érv egy visszahívás, és egyszerűen értesíti a felhasználót a művelet eredményéről.

Adatok lekérése az adatbázisból

Most, hogy van néhány adat a szerveren, el akarjuk tudni olvasni. GETEhhez a módszert használjuk .

Ezúttal az első argumentum egy szűrő, amely azt mondja az adatbázisnak, hogy csak a megfelelő felhasználói tulajdonsággal rendelkező dokumentumokat küldje el nekünk.

A dokumentumok egy tömbben kerülnek vissza a felhasználóhoz, mert elméletileg egynél több dokumentum lehet az adott felhasználói tulajdonsággal. Rajtunk áll annak biztosítása, hogy ez ne történjen meg.

Adatok frissítése az adatbázisban

Végül, de nem utolsósorban az a PUTmódszer, amelyet egy már meglévő felhasználó frissítésére használunk.

Az első argumentum egy olyan szűrő, mint amit a GETmódszerben használtunk .

A második érv egy frissítési dokumentum - ezekről itt olvashat bővebben. Esetünkben azt mondjuk az adatbázisnak, hogy egyesítse a felhasználó által továbbított adatokat a már meglévő adatokkal.

Legyen óvatos, mert a beágyazott paramétereket kicserélik és nem egyesítik.

Búcsú

Ez korántsem teljes körű útmutató az adatbázisokról és a háttér-programozásról, de ez elegendő az induláshoz és a személyes projektek működtetéséhez.

Valószínűleg egy későbbi cikkben írok a hitelesítésről. Addig ne használja ezt bizalmas adatok tárolására.

Itt bütykölhet a teljes projekttel, a saját adatbázisára keményre lesz szüksége, ha még nem hozott létre, akkor térjen vissza az adatbázis beállítása szakaszhoz .

Ha tetszett ez a cikk, kérjük, adjon néhány tapsot, hogy minél többen lássák. Köszönöm!