Wie man eine CRUD-Anwendung mit Backbone.js baut?

einführung in diesem leitfaden lernen sie, wie sie eine funktionale crud (erstellen, lesen, aktualisieren, löschen) anwendung mit backbone js erstellen diese anleitung hilft ihnen, die kernoperationen einer webanwendung zu verstehen, indem sie ihnen zeigt, wie sie ein crud system konstruieren, das daten effektiv manipuliert und verwaltet sie beginnen mit der einrichtung eines back4app projekts mit dem titel basic crud app backbone als zuverlässiges backend für ihre anwendung danach entwerfen sie ein flexibles datenbankschema, indem sie spezifische sammlungen und felder definieren – entweder manuell oder mit unterstützung des back4app ai agenten dieser prozess stellt sicher, dass ihre datenstruktur für nahtlose crud interaktionen optimiert ist als nächstes verwenden sie die intuitive back4app admin app, die eine drag and drop oberfläche bietet, um ihre datensammlungen einfach zu verwalten dieses tool vereinfacht crud operationen und macht das backend datenmanagement unkompliziert schließlich verbinden sie ihr backbone js frontend mit back4app über die rest api und die anleitung basiert auf standardmäßigen api aufrufen, um mit ihrem backend zu interagieren sie lernen auch, wie sie ihre daten mit robusten zugriffskontrollen sichern am ende dieses tutorials haben sie eine produktionsbereite webanwendung erstellt, die crud funktionalitäten unterstützt und benutzerautorisierung sowie erweiterte datenverwaltungsfunktionen umfasst wichtige erkenntnisse meistern sie die kunst, crud anwendungen zu erstellen, die daten effektiv mit einem zuverlässigen backend service verwalten entdecken sie strategien zur erstellung eines skalierbaren datenbankdesigns und zur integration mit einem backbone js frontend lernen sie, die drag and drop funktionen der back4app admin app zu nutzen, um aufgaben zum erstellen, lesen, aktualisieren und löschen zu vereinfachen machen sie sich mit bereitstellungsmethoden vertraut, einschließlich docker containerisierung, um ihre anwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto und ein aktives projekt siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app wenn sie anleitung benötigen ein backbone js entwicklungssetup sie können backbone js über einen paketmanager wie npm oder durch direkte verlinkung von einem cdn einfügen ein grundlegendes verständnis von javascript, backbone js und restful apis schauen sie sich die backbone js dokumentation https //backbonejs org/#getting started für eine auffrischung an, falls nötig schritt 1 – projektinitialisierung erstellen sie ihr back4app projekt 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 backbone und folgen sie den anweisungen, um es einzurichten neues projekt erstellen sobald ihr projekt erstellt ist, wird es in ihrem dashboard sichtbar sein, bereit, als ihr backend für die anwendung konfiguriert zu werden schritt 2 – erstellen des datenbankschemas definieren ihres datenmodells für diese crud anwendung werden sie mehrere sammlungen einrichten im folgenden finden sie beispiel sammlungen mit den feldern und typen, die sie benötigen, um ihr schema zu erstellen, damit ihre app alle crud operationen durchführen kann 1\ artikel sammlung diese sammlung enthält details zu jedem artikel feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung titel zeichenfolge name oder titel des elements beschreibung zeichenfolge eine kurze übersicht über den artikel erstellt am datum zeitstempel, der angibt, wann der artikel hinzugefügt wurde aktualisiert am datum zeitstempel für das letzte update 2\ benutzersammlung diese sammlung speichert benutzerdetails und authentifizierungsinformationen feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge die eindeutige e mail adresse des benutzers passwort hash zeichenfolge sicher gehashte passwort erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum letzte änderungszeitstempel der benutzerdaten sie können diese sammlungen manuell über das back4app dashboard erstellen, indem sie für jede sammlung eine neue klasse hinzufügen und die entsprechenden felder konfigurieren neue klasse erstellen wählen sie einfach einen datentyp aus, legen sie den feldnamen fest, geben sie einen standardwert an, falls erforderlich, und markieren sie das feld als erforderlich spalte erstellen nutzung des back4app ai agenten zur schemaerstellung der back4app ai agent ist ein nützliches tool in ihrem dashboard, das bei der automatisierung der erstellung von datenbankschemas hilft durch die eingabe eines beschreibenden prompts für ihre gewünschten sammlungen und felder kann der ai agent schnell die erforderliche datenbankstruktur generieren, was ihnen zeit spart und konsistenz gewährleistet so verwenden sie den ai agenten zugriff auf den ai agenten melden sie sich in ihrem back4app dashboard an und suchen sie den ai agenten in der navigation oder den projekteinstellungen detailieren sie ihr datenmodell geben sie einen prompt ein, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und implementieren bewerten sie das vorgeschlagene schema und wenden sie die änderungen auf ihr projekt an beispiel prompt create the following collections for 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) die nutzung des ai agenten stellt sicher, dass ihr schema ordnungsgemäß strukturiert ist, um den anforderungen ihrer anwendung gerecht zu werden schritt 3 – aktivierung der admin app & verwaltung von crud operationen einführung in die admin app die back4app admin app ist eine no code oberfläche, mit der sie ihre backend daten effizient verwalten können ihr intuitives drag and drop design macht die ausführung von crud operationen wie das hinzufügen, anzeigen, ändern und löschen von datensätzen unglaublich einfach aktivierung der admin app öffnen sie das „mehr“ menü von ihrem back4app dashboard wählen sie „admin app“ und wählen sie dann „admin app aktivieren “ richten sie ihre administratoranmeldeinformationen ein indem sie das anfängliche administratorkonto erstellen dieser schritt legt auch rollen fest (wie b4aadminuser ) und systemkollektionen admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre daten nahtlos zu verwalten admin app dashboard verwalten von crud operationen mit der admin app innerhalb der admin app können sie neue einträge hinzufügen verwenden sie die option „eintrag hinzufügen“ in jeder sammlung (zum beispiel, artikel), um neue einträge zu erstellen datensätze anzeigen/ändern klicken sie auf einen datensatz, um dessen details zu überprüfen oder zu ändern datensätze entfernen nutzen sie die löschfunktion, um unerwünschte daten zu entfernen diese schnittstelle verbessert die benutzererfahrung, indem sie alle datenverwaltungsaufgaben optimiert schritt 4 – verbindung von backbone js mit back4app jetzt, da ihr backend konfiguriert ist, ist es an der zeit, ihr backbone js frontend mit back4app zu integrieren verwendung von backbone js mit rest api aufrufen da das parse sdk nicht für backbone js ausgelegt ist, verwenden sie die integrierten modelle, sammlungen und ansichten von backbone in verbindung mit rest api aufrufen, um mit back4app zu interagieren einrichten ihrer backbone modelle und sammlungen beginnen sie damit, ein modell für ihre elemente und eine entsprechende sammlung zu definieren zum beispiel // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; erstellen einer backbone ansicht für crud interaktionen erstellen sie eine ansicht, um die liste der elemente anzuzeigen und benutzeraktionen wie hinzufügen, bearbeiten und löschen zu verarbeiten // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; diese ansicht ruft elemente von back4app über die rest api ab und ermöglicht es ihnen, datensätze hinzuzufügen, zu bearbeiten und zu löschen schritt 5 – sicherung ihres backends implementierung von zugriffskontrolllisten (acls) schützen sie ihre daten, indem sie acls auf ihren objekten festlegen zum beispiel, um den zugriff auf ein element ausschließlich auf seinen ersteller zu beschränken function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } konfiguration von klassenebene berechtigungen (clps) richten sie in ihrem back4app dashboard clps für jede sammlung ein, um sicherzustellen, dass nur autorisierte benutzer auf sensible daten zugreifen oder diese ändern können schritt 6 – benutzerauthentifizierung benutzerkonten in backbone js einrichten back4app nutzt ein benutzermanagementsystem, das der benutzerklasse von parse für die authentifizierung ähnelt in ihrer backbone js anwendung können sie die benutzerregistrierung und den login mithilfe von ajax aufrufen an die back4app rest api verwalten zum beispiel, um einen neuen benutzer zu registrieren function signupuser(username, password, email) { $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } eine ähnliche methode kann für das einloggen von benutzern und das verwalten von sitzungen angewendet werden schritt 7 – bereitstellung ihres backbone js frontends die webbereitstellungsfunktion von back4app ermöglicht es ihnen, ihre backbone js anwendung nahtlos zu hosten, indem sie ihr github repository verknüpfen 7 1 erstellen eines produktions builds öffnen sie ihr projektverzeichnis in einem terminal führen sie ihren build prozess aus wenn sie einen task runner oder bundler (wie webpack oder gulp) verwenden, führen sie den befehl aus (zum beispiel, npm run build ) um optimierte statische assets zu generieren bestätigen sie den build stellen sie sicher, dass ihr build ausgabeverzeichnis die haupt html datei und alle notwendigen asset ordner enthält 7 2 organisieren und pushen ihres quellcodes ihr github repository sollte alle quelldateien für ihre backbone js app enthalten eine typische struktur könnte so aussehen basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md beispielkonfigurationsdatei src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); auf github pushen git initialisieren (falls nicht geschehen) git init dateien stagen git add änderungen committen git commit m "erster commit des backbone js frontend codes" erstelle ein github repository (zum beispiel, basic crud app backbone ) push dein repository git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 integration ihres repositories mit der web bereitstellung von back4app zugriff auf den abschnitt web bereitstellung gehen sie in ihrem back4app dashboard zu ihrem projekt und klicken sie auf die web bereitstellung option verknüpfen sie ihr github konto befolgen sie die anweisungen, um back4app den zugriff auf ihr repository zu erlauben wählen sie ihr repository und ihren branch aus wählen sie ihr basic crud app backbone repository und den hauptbranch 7 4 bereitstellungskonfiguration zusätzliche einstellungen bereitstellen build befehl wenn keine vorgefertigten assets vorhanden sind, geben sie den befehl an (z b npm run build ) zum erstellen ihrer app ausgabeverzeichnis bestimmen sie den ordner (zum beispiel, public oder dist ) der ihre statischen dateien enthält umgebungsvariablen fügen sie alle erforderlichen api schlüssel oder konfigurationen hinzu 7 5 dockerisierung ihres backbone js projekts wenn sie docker für die bereitstellung wählen, fügen sie eine dockerfile ähnlich wie folgt hinzu \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] konfigurieren sie back4app, um die docker bereitstellung zu verwenden, wenn gewünscht 7 6 starten ihrer anwendung klicken sie auf die schaltfläche bereitstellen sobald ihre konfiguration festgelegt ist, klicken sie auf bereitstellen überwachen sie den build back4app wird ihren code abrufen, den build prozess ausführen und ihre containerisierte app bereitstellen holen sie sich ihre live url nach der bereitstellung wird eine url bereitgestellt, unter der ihre backbone js app gehostet wird 7 7 überprüfen ihrer bereitstellung besuchen sie die bereitgestellte url öffnen sie die url in ihrem browser, um zu bestätigen, dass ihre app korrekt geladen wird funktionalität testen stellen sie sicher, dass navigation, datenabruf und crud operationen wie erwartet funktionieren fehlerbehebung verwenden sie die browser tools und die back4app protokolle, um probleme zu beheben schritt 8 – fazit und zukünftige richtungen großartige arbeit! sie haben erfolgreich eine crud anwendung mit backbone js und back4app erstellt sie haben ein projekt mit dem namen basic crud app backbone , detaillierte sammlungen für artikel und benutzer definiert und ihr backend mit der admin app verwaltet zusätzlich haben sie ihr backbone js frontend über rest api aufrufe integriert und wesentliche sicherheitsmaßnahmen angewendet nächste schritte frontend verbessern erweitern sie ihre backbone js app mit detaillierteren ansichten, suchfunktionen und echtzeit updates neue funktionen hinzufügen erwägen sie die integration fortschrittlicherer backend logik, von drittanbietern bereitgestellter apis oder verfeinerter zugriffskontrollen weiteres lernen besuchen sie die back4app dokumentation https //www back4app com/docs für weitere einblicke in leistungsverbesserungen und benutzerdefinierte integrationen indem sie dieses tutorial befolgt haben, verfügen sie nun über das fachwissen, um ein robustes, skalierbares crud backend für ihre backbone js anwendung mit back4app zu erstellen viel spaß beim programmieren und erkunden neuer funktionen!