Quickstarters
CRUD Samples
How to Create a CRUD Application with Koa.js?
37 min
einführung in diesem leitfaden lernen sie, wie sie eine crud anwendung (erstellen, lesen, aktualisieren, löschen) mit koa js entwickeln dieses tutorial führt sie durch die wesentlichen schritte zur verwaltung von daten und zum aufbau einer funktionalen api, indem sie ihr koa js backend mit back4app integrieren sie beginnen mit der einrichtung eines back4app projekts namens basic crud app koajs , das als leistungsstarkes backend für ihre anwendung dient anschließend entwerfen sie ein flexibles datenbankschema, indem sie sammlungen erstellen und felder definieren – entweder manuell oder mit hilfe des back4app ai agenten diese einrichtung stellt sicher, dass ihre daten für reibungslose crud operationen organisiert sind als nächstes nutzen sie die back4app admin app, ein no code drag and drop tool, das datenverwaltungsaufgaben wie das erstellen, lesen, aktualisieren und löschen von datensätzen vereinfacht schließlich konfigurieren sie ihren koa js server, um über rest apis mit back4app zu interagieren, während sie robuste zugriffskontrollen implementieren, um ihr backend abzusichern am ende dieses tutorials haben sie eine produktionsbereite serverseitige anwendung erstellt, die nicht nur grundlegende crud operationen unterstützt, sondern auch die benutzerauthentifizierung und eine sichere datenverarbeitung umfasst wichtige erkenntnisse erfahren sie, wie sie crud anwendungen mit koa js erstellen und dabei eine zuverlässige cloud backend nutzen gewinnen sie einblicke in das design eines skalierbaren backends und dessen integration mit einer restful api lernen sie, die intuitive back4app admin app zu nutzen, um crud operationen zu vereinfachen erforschen sie bereitstellungsstrategien, einschließlich containerisierung mit docker, um ihre koa js anwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie folgendes haben ein back4app konto mit einem aktiven projekt schauen sie sich erste schritte mit back4app https //www back4app com/docs/get started/new parse app für anleitungen an eine funktionierende node js entwicklungsumgebung installieren sie node js (v14 oder höher) und richten sie ihr koa js projekt ein grundkenntnisse in javascript, koa js und rest apis überprüfen sie die koa js dokumentation https //koajs com/ falls erforderlich schritt 1 – einrichten ihres back4app projekts erstellen eines neuen back4app projekts melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ in ihrem dashboard benennen sie ihr projekt basic crud app koajs und folgen sie den anweisungen, um die einrichtung abzuschließen neues projekt erstellen sobald ihr projekt eingerichtet ist, wird es in ihrem dashboard sichtbar sein und das erforderliche backend framework für ihre anwendung bereitstellen schritt 2 – entwerfen des datenbankschemas gestaltung ihres datenmodells für diese crud anwendung müssen sie mehrere sammlungen einrichten nachfolgend finden sie beispiel sammlungen mit vorgeschlagenen feldern und typen, um ihnen bei der effektiven konfiguration ihres datenbankschemas zu helfen 1\ artikel sammlung diese sammlung enthält details zu jedem artikel feld typ beschreibung id objekt id automatisch generierte eindeutige kennung titel zeichenfolge der titel des artikels beschreibung zeichenfolge eine kurze beschreibung des artikels erstellt am datum zeitstempel, wann der artikel erstellt wurde aktualisiert am datum zeitstempel für das letzte update 2\ benutzersammlung diese sammlung verwaltet benutzerdaten und authentifizierungsanmeldeinformationen feld typ beschreibung id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge ein einzigartiger benutzername für den benutzer e mail zeichenfolge eindeutige e mail adresse des benutzers passwort hash zeichenfolge sicher gehashte passwort erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum zeitstempel der letzten kontenaktualisierung sie können diese sammlungen über das back4app dashboard erstellen, indem sie für jede eine neue klasse hinzufügen und die entsprechenden spalten definieren neue klasse erstellen sie können felder definieren, indem sie den entsprechenden typ auswählen, standardwerte festlegen und angeben, ob das feld obligatorisch ist spalte erstellen nutzung des back4app ki agenten zur schemaeinrichtung der back4app ki agent, der in ihrem dashboard verfügbar ist, kann automatisch ihr datenbankschema aus einem detaillierten prompt generieren, der ihre sammlungen und felder beschreibt diese funktion beschleunigt die projekteinrichtung und sorgt für ein konsistentes schema für crud operationen so verwenden sie den ki agenten öffnen sie den ki agenten von ihrem back4app dashboard oder innerhalb der projekteinstellungen geben sie einen beschreibenden prompt an, der die sammlungen und felder umreißt, die sie benötigen überprüfen sie das generierte schema und wenden sie die konfiguration auf ihr projekt an beispiel prompt create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) dieser ansatz spart zeit und hilft sicherzustellen, dass ihr schema sowohl konsistent als auch optimiert ist schritt 3 – aktivierung der admin app & crud funktionalität überblick über die admin app die back4app admin app ist eine benutzerfreundliche schnittstelle, die es ihnen ermöglicht, ihre backend daten mühelos über drag and drop steuerelemente zu verwalten dieses no code tool vereinfacht vorgänge wie das erstellen, lesen, aktualisieren und löschen von datensätzen aktivierung der admin app gehen sie zum menü „mehr“ in ihrem back4app dashboard wählen sie „admin app“ und klicken sie auf „admin app aktivieren “ richten sie ihr erstes administratorkonto ein; dieser prozess legt systemrollen wie b4aadminuser fest und bereitet systemkollektionen vor admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre sammlungen und datensätze zu verwalten admin app dashboard innerhalb der admin app können sie neue datensätze hinzufügen verwenden sie die schaltfläche „datensatz hinzufügen“ in einer beliebigen sammlung (z b artikel), um neue einträge zu erstellen datensätze anzeigen und bearbeiten wählen sie einen datensatz aus, um seine details zu überprüfen oder seine felder zu ändern datensätze entfernen löschen sie einträge, die nicht mehr benötigt werden schritt 4 – verbindung ihres koa js backends mit back4app jetzt, da ihr backend konfiguriert und verwaltet ist, ist es an der zeit, ihren koa js server einzurichten, um mit back4app zu interagieren verwendung von rest apis mit koa js dieses tutorial zeigt, wie sie rest api aufrufe von ihrem koa js server verwenden, um crud operationen an ihren back4app sammlungen durchzuführen einrichten eines grundlegenden koa js servers installieren sie koa js und die erforderlichen middleware npm install koa koa router koa bodyparser node fetch erstellen sie die serverdatei (z b server js ) // server js const koa = require('koa'); const router = require('koa router'); const bodyparser = require('koa bodyparser'); const fetch = require('node fetch'); const app = new koa(); const router = new router(); const application id = 'your application id'; const rest api key = 'your rest api key'; const base url = 'https //parseapi back4app com'; // fetch all items router get('/items', async (ctx) => { try { const response = await fetch(`${base url}/classes/items`, { headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); const data = await response json(); ctx body = data results; } catch (error) { ctx status = 500; ctx body = { error 'failed to fetch items' }; } }); // create a new item router post('/items', async (ctx) => { const { title, description } = ctx request body; try { const response = await fetch(`${base url}/classes/items`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ title, description }) }); const newitem = await response json(); ctx body = newitem; } catch (error) { ctx status = 500; ctx body = { error 'error creating item' }; } }); // update an item router put('/items/\ id', async (ctx) => { const { id } = ctx params; const { title, description } = ctx request body; try { const response = await fetch(`${base url}/classes/items/${id}`, { method 'put', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ title, description }) }); const updateditem = await response json(); ctx body = updateditem; } catch (error) { ctx status = 500; ctx body = { error 'error updating item' }; } }); // delete an item router delete('/items/\ id', async (ctx) => { const { id } = ctx params; try { await fetch(`${base url}/classes/items/${id}`, { method 'delete', headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); ctx body = { message 'item deleted successfully' }; } catch (error) { ctx status = 500; ctx body = { error 'error deleting item' }; } }); app use(bodyparser()); app use(router routes()) use(router allowedmethods()); const port = process env port || 3000; app listen(port, () => { console log(`server is running on port ${port}`); }); dieses setup gibt ihnen einen koa js server, der über rest aufrufe mit back4app kommuniziert und alle crud operationen verarbeitet schritt 5 – sicherung ihres backends implementierung von zugriffskontrollen schützen sie ihre daten, indem sie zugriffskontrolllisten (acls) auf objektebene anwenden wenn sie beispielsweise ein privates element erstellen, setzen sie acls, um den zugriff einzuschränken async function createsecureitem(itemdata, ownersessiontoken) { try { const response = await fetch(`${base url}/classes/items`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json', 'x parse session token' ownersessiontoken }, body json stringify({ title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, "owner" { "read" true, "write" true } } }) }); const result = await response json(); console log('secure item created ', result); } catch (error) { console error('error creating secure item ', error); } } klassenebene berechtigungen (clps) festlegen konfigurieren sie in ihrem back4app dashboard die clps für jede sammlung, um standardregeln festzulegen, die sicherstellen, dass nur autorisierte benutzer auf sensible daten zugreifen können schritt 6 – benutzerauthentifizierung benutzerkonten konfigurieren back4app nutzt eine benutzerklasse zur handhabung der authentifizierung verwenden sie in ihrem koa js server die back4app rest api zur verwaltung der benutzerregistrierung und anmeldung beispiel benutzerregistrierungsendpunkt router post('/signup', async (ctx) => { const { username, password, email } = ctx request body; try { const response = await fetch(`${base url}/users`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ username, password, email }) }); const userdata = await response json(); ctx body = userdata; } catch (error) { ctx status = 500; ctx body = { error 'error signing up' }; } }); sie können ähnliche endpunkte für die anmeldung und sitzungsverwaltung nach bedarf erstellen schritt 7 – bereitstellung ihrer koa js anwendung die web deployment funktion von back4app ermöglicht es ihnen, ihren koa js server zu hosten, indem sie ihn mit ihrem github repository verknüpfen 7 1 – erstellen und organisieren ihres projekts stellen sie sicher, dass ihr projekt richtig strukturiert ist ein beispiel layout könnte sein basic crud app koajs/ ├── node modules/ ├── server js ├── package json └── readme md übertragen sie alle ihre quellcodes in ein git repository beispiel git befehle git init git add git commit m "initial commit of koa js backend" git remote add origin https //github com/your username/basic crud app koajs git git push u origin main 7 2 – integrieren sie sich mit back4app web deployment melden sie sich bei ihrem back4app dashboard an, öffnen sie ihr projekt basic crud app koajs , und navigieren sie zum web deployment bereich verbinden sie ihr github konto, falls sie dies noch nicht getan haben wählen sie ihr repository und den relevanten branch (z b main ) 7 3 – konfigurieren sie ihre deployment einstellungen build befehl wenn ihr projekt gebaut werden muss (zum beispiel, um modernes javascript zu transpilen), geben sie einen build befehl wie npm run build an ausgabeverzeichnis geben sie den ordner an, der ihre produktionsbereiten dateien enthält, falls zutreffend umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen (wie api schlüssel) in die deployment konfiguration ein 7 4 – optional dockerisieren sie ihren koa js server wenn sie ihre anwendung als container bereitstellen möchten, fügen sie eine dockerfile in ihr repository ein \# use the official node js image as a base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the desired port expose 3000 \# run the application cmd \["node", "server js"] 7 5 – starten sie ihre anwendung klicken sie auf die deploy schaltfläche auf back4app überwachen sie die bereitstellungsprotokolle, um sicherzustellen, dass ihre app erfolgreich erstellt und bereitgestellt wird sobald die bereitstellung abgeschlossen ist, stellt back4app eine url zur verfügung, unter der ihr koa js server erreichbar ist 7 6 – validieren sie ihre bereitstellung besuchen sie die bereitgestellte url, um zu überprüfen, ob ihre anwendung läuft testen sie jeden endpunkt (crud operationen, benutzerauthentifizierung), um die ordnungsgemäße funktionalität zu bestätigen wenn probleme auftreten, überprüfen sie ihre protokolle und bereitstellungseinstellungen zur fehlersuche schritt 8 – fazit und zukünftige verbesserungen großartige arbeit! sie haben jetzt eine voll funktionsfähige crud anwendung mit koa js, integriert mit back4app, erstellt ihr projekt basic crud app koajs bietet sorgfältig gestaltete sammlungen für artikel und benutzer, eine benutzerfreundliche admin app zur datenverwaltung und ein sicheres backend nächste schritte erweitern sie ihre api verbessern sie ihren koa js server mit zusätzlichen routen, middleware oder sogar echtzeitfunktionen verbessern sie die authentifizierung erwägen sie die implementierung einer tokenbasierten authentifizierung, sozialer logins oder einer mehrfaktorenverifizierung weitere dokumentation erkunden schauen sie sich die back4app dokumentation https //www back4app com/docs und koa js anleitungen https //koajs com/ für fortgeschrittene themen und optimierungen an indem sie dieses tutorial befolgen, verfügen sie nun über die fähigkeiten, ein skalierbares, sicheres und effizientes crud backend mit koa js und back4app zu erstellen viel spaß