Felhasználói információkat küldhet az API-végpontoknak a Vue.js segítségével.
Egy adott időpontban végre kell hajtania valamilyen Létrehozás, Olvasás, Frissítés és Törlés műveletet egy alkalmazáson belül. Az információ küldése a kiszolgálónak vagy egy adott API-végpontnak egy alapvető készség, amelyet előtér-fejlesztőként ismerni kell.
A felhasználótól származó információk kezelése az egyik fontos készség, amelyet tudnia kell, különösen, ha frontend fejlesztőként dolgozik, és a Vue.js-t nagyon elképesztő a frontenden dolgozók számára.
Ebben az oktatóanyagban megvizsgáljuk, hogyan valósíthatjuk meg az API használatát a felhasználói adatok háttérrendszerbe küldésére. Két különböző módot fogunk megvizsgálni a lekérés és az Axios esetében is, amikor felhasználói adatokat küldünk a háttérkiszolgáló API-nak.
Ebben az oktatóanyagban azt feltételezzük, hogy úgy konfigurálta a támogatott rendszert, hogy lehetővé tegye a kérések elküldését a különböző ellenőrzésekkel. A különböző API-végpontokat használjuk majd arra vonatkozóan, hogy a háttérrendszer mire lett beállítva. Tegyük fel, hogy ennek az oktatóanyagnak a kedvéért a regisztrációs folyamathoz a fenti API-végpontot fogjuk kihasználni, tegyük fel, hogy: http://localhost:3000/api/user/register.
Felhasználói adatok küldése lekérési API-val.
Az oktatóanyag ezen részében rögzítjük a felhasználói információkat, és elküldjük a fent látott végpontra.
Ebben a részben a lekérési módszert fogjuk használni a felhasználó által megadott információk elküldésére.
Hozzon létre egy fájlt, és nevezze el registration.vue névvel
Ha megnézi a sablon komponensünket és az űrlapadatokat, látni fogja, hogy csatoltunk néhány direktívát.
@submit.prevent= “registerUser” ez a mellékelt utasítás biztosítja, hogy a registerUser metódus minden alkalommal lefusson, amikor a küldés gombra kattintunk. Hasonlóképpen, a .prevent irányelv biztosítja, hogy az oldal ne töltsön be, amikor az űrlap elküldése gombra kattintanak.
Azt is meg kell jegyezni, hogy az adatokhoz csatoltuk a megfelelő v-modell direktívákat. Ez biztosítja, hogy az űrlap elküldésekor megkapjuk az állapotadatok frissített változatát. Ezt az állapotreaktivitást refs-ekkel és reactive-val is biztosíthatjuk a Vue.js 3-ban csomagolt compose-API-vel.
A registerUser módszer az, ahol az alkalmazás összes funkciója, valamint a frontend és a háttéralkalmazás közötti kommunikáció zajlik.
A registerUser metódus egyszerűen egy olyan funkció, amely összegyűjti a felhasználói információkat, és a POST metóduson keresztül elküldi az alább szakosodott API-végpontnak.
A lekérési módszerrel először meg kell adnunk azt az URL-végpontot, ahová az információ elküldésre kerül, majd további módszereket biztosítunk, például a felhasználói információk küldésének módját, például esetünkben a POST-t.
Ezután elküldtük a fejlécünket az alkalmazásnak/JSON-nak. Ezt követően megadjuk a törzset, amely tartalmazza majd a felhasználói információkat, amelyeket hitelesítés céljából elküldünk a szervernek. Esetünkben a törzsadatokat JSON formátumban küldjük el. Ne felejtse el szinkronizálni az állapotadatokat, hogy biztosan rendelkezzen állapotaink frissített verziójával.
Felhasználói adatok küldése AXIOS-szal.
Ha Axiost használunk, először telepítenünk kell az alkalmazásfejlesztésünkbe. Az Axios telepítéséhez használhatja az alábbi parancsot a kedvenc csomagkezelőjétől függően.
NPM
npm install axios
FONAL
yarn add axios
Ezután importálnia kell a megfelelő alkalmazás-összetevőkbe, ahol meg szeretné valósítani. Ellenőrizze az alábbi kódrészletet:
Az Axiosnál beállítja az összes alapértelmezett fejlécet úgy, hogy csak az implementálni kívánt metódust kell láncolni, mint a mi esetünkben a POST.
Ezután megadjuk az erőforrásunk törzsét, amely ebben az esetben elküldi a nevünket, e-mail címünket és jelszavunkat. És így küldhetünk felhasználói információkat a háttérben konfigurált szerver API végponthoz.
Végső gondolatok
Köszönöm, hogy végigolvasta ezt a cikket, remélem hasznosnak találta. Kérjük, ne habozzon megosztani másokkal.
További olvasnivalók:
További tartalom: «plainenglish.io
