Wie man eine grundlegende CRUD-App mit Knockout.js erstellt: Eine Schritt-für-Schritt-Anleitung

übersicht in diesem leitfaden lernen sie, wie sie eine voll funktionsfähige crud (erstellen, lesen, aktualisieren, löschen) anwendung mit knockout js erstellen dieses tutorial zeigt, wie man grundlegende operationen innerhalb einer webanwendung implementiert, während man back4app als backend service nutzt wir beginnen mit der einrichtung eines back4app projekts mit dem titel basic crud app knockout , um ein zuverlässiges datenmanagementsystem für ihre anwendung zu etablieren danach entwerfen sie ein flexibles datenbankschema, indem sie sammlungen und felder definieren – entweder manuell oder mit unterstützung des back4app ai agenten –, um sicherzustellen, dass ihre app alle crud operationen effektiv durchführen kann als nächstes verwenden sie die back4app admin app, ein benutzerfreundliches drag and drop tool, um ihre sammlungen mühelos zu verwalten diese schnittstelle vereinfacht den prozess der ausführung von crud operationen schließlich integrieren sie ihr knockout js frontend mit back4app unter verwendung von rest api aufrufen diese integration wird auch sichere backend praktiken mit angemessenen zugriffskontrollen abdecken am ende dieses tutorials haben sie eine produktionsbereite webanwendung erstellt, die grundlegende crud funktionalität unterstützt, benutzerautorisierung umfasst und über eine robuste datenverwaltung verfügt wichtige erkenntnisse verstehen, wie man crud anwendungen entwickelt, die daten effizient mit back4app verwalten praktische erfahrung im entwerfen eines skalierbaren backends und dessen verknüpfung mit einem knockout js frontend sammeln lernen, ein no code admin tool (back4app admin app) für die ausführung von erstellungs , lese , aktualisierungs und löschoperationen zu verwenden bereitstellungsstrategien entdecken, einschließlich docker containerisierung, um ihre webanwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto und ein aktives projekt verweisen sie auf erste schritte mit back4app https //www back4app com/docs/get started/new parse app wenn sie anleitung benötigen eine entwicklungsumgebung für knockout js eingerichtet bibliotheken über cdn einfügen oder über npm installieren, wenn sie eine modulare einrichtung bevorzugen grundkenntnisse in javascript, knockout js und rest apis konsultieren sie die knockout js dokumentation https //knockoutjs com/documentation/introduction html für eine einführung schritt 1 – projektinitialisierung einrichten ihres back4app projekts greifen sie auf ihr back4app konto zu wählen sie die option „neue app“ von ihrem dashboard geben sie den projektnamen ein basic crud app knockout und schließen sie den einrichtungsprozess ab neues projekt erstellen sobald das projekt erstellt ist, wird es auf ihrem dashboard sichtbar sein und die grundlage für ihre backend konfiguration bilden schritt 2 – erstellen ihres datenbankschemas gestaltung der datenstruktur für diese crud app erstellen sie mehrere sammlungen unten finden sie beispiel sammlungen mit vorgeschlagenen feldern und datentypen, um ihr datenbankdesign zu leiten dieses schema unterstützt die grundlegenden crud operationen 1 artikel sammlung feld datentyp einzelheiten id objekt id automatisch generierter eindeutiger schlüssel titel zeichenfolge der titel des artikels beschreibung zeichenfolge eine kurze zusammenfassung des artikels erstellt am datum zeitstempel, wann das element erstellt wird aktualisiert am datum zeitstempel des letzten updates 2 benutzersammlung feld datentyp einzelheiten id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge eindeutiger identifikator für jeden benutzer e mail zeichenfolge die eindeutige e mail adresse des benutzers passwort hash zeichenfolge sichere hash des passworts des benutzers erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum zeitstempel für die letzte kontowartung sie können diese sammlungen manuell im back4app dashboard erstellen, indem sie für jede sammlung eine neue klasse hinzufügen und die felder definieren neue klasse erstellen definieren sie ihre felder, indem sie einen datentyp auswählen, das feld benennen, standardwerte festlegen und erforderliche felder markieren spalte erstellen verwendung des back4app ai agenten zur schema automatisierung der back4app ai agent vereinfacht die schema generierung direkt von ihrem dashboard aus er kann automatisch sammlungen und felder basierend auf ihrer beschreibung erstellen schritte zur verwendung des ai agenten starten sie den ai agenten zugriff über ihr back4app dashboard oder die projekteinstellungen beschreiben sie ihr datenmodell fügen sie eine beschreibende eingabe ein, die ihre erforderlichen sammlungen und felder auflistet überprüfen und anwenden der agent wird ein schema vorschlagen überprüfen und bestätigen sie die vorschläge, um sie in ihr projekt zu integrieren beispielaufforderung create the following 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 prozess spart zeit und sorgt für ein konsistentes, optimiertes schema für ihre anwendung schritt 3 – aktivierung der admin app und verwaltung von crud operationen übersicht über die admin oberfläche die back4app admin app bietet eine no code lösung zur verwaltung ihrer backend daten ihre intuitive drag and drop oberfläche ermöglicht mühelose crud operationen so aktivieren sie die 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 ihre admin anmeldeinformationen ein indem sie den ersten admin benutzer erstellen, der auch rollen wie b4aadminuser und wesentliche systemkollektionen konfiguriert admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um mit der datenverwaltung zu beginnen admin app dashboard verwendung der admin oberfläche für crud innerhalb der admin app können sie datensätze hinzufügen klicken sie auf die schaltfläche „datensatz hinzufügen“ in einer sammlung (zum beispiel, artikel), um neue einträge zu erstellen datensätze anzeigen/ändern wählen sie einen datensatz aus, um dessen details zu überprüfen oder felder zu aktualisieren datensätze entfernen löschen sie alle einträge, die nicht mehr benötigt werden diese optimierte oberfläche verbessert die benutzerfreundlichkeit und beschleunigt die verwaltung ihrer daten schritt 4 – verbindung von knockout js mit back4app mit ihrem backend bereit, ist es zeit, ihr knockout js frontend mit rest api aufrufen zu integrieren verwendung der rest api für crud operationen da das parse sdk normalerweise nicht mit knockout js verwendet wird, führen sie api aufrufe direkt durch im folgenden finden sie beispiele, wie sie crud aufgaben bearbeiten können beispiel zum abrufen von elementen // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); knockout js viewmodel beispiel im folgenden finden sie ein beispiel viewmodel zur verwaltung ihrer elemente function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); dieses viewmodel integriert api aufrufe zum erstellen und löschen von elementen, während es den zustand mit knockout js observable verwaltet schritt 5 – sicherung ihres backends zugriffskontrolllisten (acls) schützen sie ihre daten, indem sie acls jedem objekt zuweisen zum beispiel, um ein element nur für seinen ersteller zugänglich zu machen function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } klassenebene berechtigungen (clps) im back4app dashboard clps für jede sammlung festlegen, um sicherzustellen, dass nur authentifizierte oder autorisierte benutzer auf sensible informationen zugreifen können schritt 6 – implementierung der benutzerauthentifizierung benutzerkonten konfigurieren back4app verwendet eine benutzerklasse zur verwaltung der authentifizierung in ihrer knockout js app die benutzerregistrierung und anmeldung mit rest api aufrufen behandeln beispiel benutzerregistrierung function registeruser(username, password, email) { var user = { username username, password password, email email }; fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } ein ähnlicher ansatz kann für die benutzeranmeldung und sitzungsverwaltung verfolgt werden zusätzliche funktionen wie e mail verifizierung und passwortzurücksetzungen können über back4app konfiguriert werden schritt 7 – bereitstellung ihres knockout js frontends mit webbereitstellung die webbereitstellungsfunktion von back4app ermöglicht es ihnen, ihr knockout js frontend mühelos zu hosten, indem sie ihr github repository verknüpfen befolgen sie diese schritte 7 1 erstellen sie ihre produktionsdateien öffnen sie ihr projektverzeichnis in einem terminal führen sie ihren build prozess aus wenn sie ein build tool wie webpack verwenden, führen sie den entsprechenden befehl aus (z b npm run build ) um ihre assets zu kompilieren bestätigen sie den build stellen sie sicher, dass ihr build ordner eine index html und alle erforderlichen statischen assets enthält 7 2 organisieren und committen sie ihren code zu github ihr repository sollte alle quellcodedateien für ihr knockout js frontend enthalten eine beispielstruktur könnte so aussehen basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md beispieldatei src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); code committen und zu github pushen git initialisieren (falls noch nicht geschehen) git init dateien bereitstellen git add änderungen committen git commit m "initial commit for knockout js frontend" erstellen sie ein github repository (z b basic crud app knockout frontend ) code pushen git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 verknüpfung ihres github repositorys mit der webbereitstellung zugriff auf die webbereitstellungsfunktion wählen sie in ihrem back4app dashboard ihr projekt (basic crud app knockout) aus und klicken sie auf webbereitstellung mit github verbinden befolgen sie die anweisungen, um ihr github konto zu integrieren wählen sie ihr repository und ihren branch wählen sie ihr repository (z b basic crud app knockout frontend ) und den branch (z b main ) aus, der ihren code enthält 7 4 bereitstellungseinstellungen build befehl wenn ihr repository keinen vorgefertigten ordner enthält, geben sie den build befehl an (z b npm run build ) ausgabeverzeichnis setzen sie dies auf den ordner, der ihre statischen dateien enthält (z b build oder public ) umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen hinzu, wie z b api schlüssel 7 5 containerisierung ihrer anwendung mit docker (optional) wenn sie docker verwenden möchten, fügen sie eine dockerfile in ihr repository ein # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 bereitstellung ihrer anwendung klicken sie auf die schaltfläche bereitstellen nachdem sie die einstellungen konfiguriert haben, starten sie die bereitstellung überwachen sie den prozess back4app wird ihren code abrufen, ihn (falls erforderlich) erstellen und ihre containerisierte app bereitstellen greifen sie auf ihre app zu sobald dies abgeschlossen ist, stellt back4app eine url zur verfügung, um auf ihre knockout js app zuzugreifen 7 7 testen der bereitstellung öffnen sie die bereitgestellte url überprüfen sie, ob ihre app ordnungsgemäß geladen wird tests durchführen stellen sie sicher, dass alle routen und assets (css, js, bilder) funktionieren debuggen sie bei bedarf verwenden sie die entwicklertools, um fehler zu überprüfen, und beziehen sie sich auf die bereitstellungsprotokolle von back4app schritt 8 – fazit und zukünftige richtungen gut gemacht! sie haben erfolgreich eine grundlegende crud anwendung mit knockout js und back4app erstellt sie haben ein projekt mit dem namen basic crud app knockout , detaillierte sammlungen für artikel und benutzer erstellt und ihre daten über die admin app verwaltet zusätzlich haben sie ihr knockout js frontend mit ihrem backend über rest api aufrufe integriert und sichere zugriffskontrollen implementiert nächste schritte erweitern sie ihr frontend verbessern sie ihre app mit funktionen wie detaillierten artikelansichten, suchfunktionen oder live updates fügen sie erweiterte backend logik hinzu erforschen sie die verwendung von cloud funktionen oder die integration von drittanbieterdiensten gehen sie tiefer konsultieren sie die back4app dokumentation https //www back4app com/docs für weitere optimierungen und erweiterte integrationen indem sie dieses tutorial befolgt haben, haben sie nun das wissen, um eine robuste und skalierbare crud app mit knockout js unter verwendung von back4app zu erstellen viel spaß beim programmieren!