Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

übersicht dieser leitfaden führt sie durch die erstellung einer crud anwendung (erstellen, lesen, aktualisieren und löschen) mit mithril js im laufe dieses tutorials lernen sie, wie sie ein back4app projekt mit dem titel basic crud app mithriljs einrichten, um als leistungsstarker backend für ihre webanwendung zu dienen wir werden ein effizientes datenschema entwerfen, es über das admin panel von back4app verwalten und ihr mithril js frontend mit rest api aufrufen integrieren was sie lernen werden wie man ein crud system einrichtet, das daten zuverlässig mit einem robusten backend verarbeitet strategien zum aufbau eines skalierbaren datenbankdesigns und dessen verknüpfung mit einer mithril js anwendung nutzung der intuitiven drag and drop admin oberfläche von back4app zur durchführung von crud aktionen bereitstellungsmethoden, einschließlich docker containerisierung, um ihre anwendung schnell live zu schalten anforderungen bevor sie beginnen, bestätigen sie bitte, dass sie ein back4app konto und ein aktives projekt für unterstützung, siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine mithril js entwicklungsumgebung sie können mithril über npm oder ein cdn einbinden stellen sie sicher, dass sie node js (v14+) installiert haben fundamentale kenntnisse in javascript, mithril js und restful apis für zusätzliche hinweise, schauen sie sich die mithril js dokumentation https //mithril js org/ schritt 1 – initialisierung ihres projekts einrichten eines neuen back4app projekts melden sie sich bei ihrem back4app konto an klicken sie auf die neue app schaltfläche in ihrem dashboard geben sie den projektnamen an basic crud app mithriljs und folgen sie den geführten schritten neues projekt erstellen sobald es eingerichtet ist, wird ihr projekt auf ihrem dashboard aufgeführt und dient als backend hub für ihre anwendung schritt 2 – erstellung ihres datenbankschemas konstruktion des datenmodells für diese crud app werden sie ein paar wichtige sammlungen entwerfen im folgenden finden sie eine übersicht zur erstellung von sammlungen mit ihren jeweiligen feldern, um crud operationen effektiv zu handhaben 1 artikelsammlung diese sammlung enthält die details zu jedem artikel feld typ zweck id objekt id automatisch generierte eindeutige kennung titel zeichenfolge name oder titel des elements beschreibung zeichenfolge kurze zusammenfassung über den artikel erstellt am datum zeitstempel der erstellung aktualisiert am datum zeitstempel für das letzte update 2 benutzersammlung diese sammlung verwaltet benutzerprofile und authentifizierungsdetails feld typ zweck id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge der eindeutige name des benutzers e mail zeichenfolge die eindeutige e mail adresse des benutzers passwort hash zeichenfolge gehashtes passwort für sichere authentifizierung erstellt am datum zeitstempel, wann der benutzer registriert wurde aktualisiert am datum zeitstempel für alle änderungen sie können diese sammlungen und felder manuell über das back4app dashboard hinzufügen, indem sie neue klassen erstellen und jede spalte entsprechend definieren neue klasse erstellen um felder hinzuzufügen, wählen sie einfach den entsprechenden datentyp aus, geben sie einen namen an, setzen sie standardwerte und markieren sie, ob es erforderlich ist spalte erstellen nutzung des ki agenten von back4app zur schemaautomatisierung der integrierte ki agent auf back4app vereinfacht die erstellung von schemata, indem er ihre sammlungen basierend auf einem bereitgestellten prompt automatisch generiert so nutzen sie den ki agenten greifen sie über ihr projekt dashboard auf den ki agenten zu beschreiben sie ihr gewünschtes schema, indem sie die sammlungen und felder detailliert angeben überprüfen sie das generierte schema und wenden sie die änderungen an beispiel prompt 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) dieses tool hilft sicherzustellen, dass ihr datenbankdesign sowohl konsistent als auch optimal für die verarbeitung von crud operationen ist schritt 3 – aktivierung der admin oberfläche & crud funktionalitäten übersicht über die admin oberfläche die back4app admin oberfläche ist eine no code lösung, die ihnen hilft, ihre backend daten mühelos zu verwalten ihr drag and drop design macht crud operationen zum kinderspiel so aktivieren sie die admin oberfläche gehen sie zum mehr abschnitt in ihrem back4app dashboard klicken sie auf admin app und wählen sie dann admin app aktivieren richten sie ihre administratoranmeldeinformationen ein, um ihren ersten admin benutzer zu erstellen dieser prozess konfiguriert auch rollen (wie b4aadminuser ) und systemkollektionen admin app aktivieren nach der aktivierung melden sie sich bei der admin oberfläche an, um ihre sammlungen zu verwalten admin app dashboard crud operationen über die admin oberfläche durchführen neue datensätze hinzufügen verwenden sie die option „datensatz hinzufügen“ in jeder sammlung (zum beispiel, artikel), um einträge zu erstellen datensätze anzeigen/bearbeiten klicken sie auf einen datensatz, um details zu überprüfen oder seine felder zu bearbeiten datensätze entfernen nutzen sie die löschfunktion, um veraltete einträge zu entfernen diese intuitive oberfläche verbessert die benutzererfahrung, indem sie routinemäßige crud aktionen vereinfacht schritt 4 – mithril js mit back4app verknüpfen mit ihrem backend, das über die admin oberfläche verwaltet wird, ist es an der zeit, ihr mithril js frontend über rest api aufrufe mit back4app zu verbinden rest api aufrufe mit mithril js verwenden wir werden uns auf rest api aufrufe verlassen, um mit ihrem back4app backend zu interagieren beispiel abrufen und anzeigen von artikeln erstellen sie eine mithril komponente, die artikel aus der artikelsammlung abruft // src/components/itemslist js const itemslist = { items \[], loaditems async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; diese komponente verwendet die lebenszyklusmethode von mithril oninit um daten zu laden, wenn die komponente initialisiert wird beispiel hinzufügen eines neuen elements sie können ein formular integrieren, um eine post anfrage zum hinzufügen neuer elemente zu senden // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await 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({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; sie können ähnlich update und löschoperationen mit den entsprechenden http methoden (put/patch für updates und delete für löschungen) implementieren schritt 5 – verbesserung der backend sicherheit implementierung von zugriffskontrollen sichern sie ihre daten, indem sie zugriffskontrolllisten (acls) auf jedes objekt anwenden zum beispiel, um ein element zu erstellen, das nur der eigentümer ändern kann async function createsecureitem(itemdata, ownerid) { try { const response = await 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({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } einstellen von klassenebene berechtigungen (clps) passen sie in ihrem back4app dashboard die clps für jede sammlung an, um standardmäßige sicherheitsrichtlinien festzulegen dies stellt sicher, dass nur autorisierte benutzer zugriff auf sensible informationen haben schritt 6 – benutzer authentifizierung einrichten benutzerkonten konfigurieren back4app verwendet die parse benutzerklasse zur verwaltung der authentifizierung mit mithril js können sie die registrierung und anmeldung über rest api aufrufe verwalten unten finden sie ein beispiel für die benutzeranmeldung // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await 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({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; sie können eine ähnliche methode für das einloggen und die verwaltung von sitzungen anwenden schritt 7 – bereitstellung ihres mithril js frontends die webbereitstellungsfunktion von back4app ermöglicht es ihnen, ihre mithril js anwendung nahtlos zu hosten, indem sie ihr github repository verknüpfen 7 1 erstellen der produktionsversion öffnen sie ihr projektverzeichnis in einem terminal führen sie den build befehl aus npm run build dies wird einen build ordner erstellen, der optimierte statische dateien enthält 7 2 organisieren und committen ihres codes ihr repository sollte eine struktur ähnlich der folgenden haben basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md beispiel src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); committen und pushen zu github git initialisieren (falls noch nicht geschehen) git init fügen sie ihre dateien hinzu git add die änderungen committen git commit m "initial commit of mithril js frontend" erstellen sie ein repository auf github (z b basic crud app mithriljs frontend ) und pushen sie ihren code git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 verknüpfung von github mit der webbereitstellung melden sie sich bei ihrem back4app dashboard an, navigieren sie zu ihrem projekt ( basic crud app mithriljs ), und wählen sie webbereitstellung verbinden sie ihr github konto, indem sie den anweisungen auf dem bildschirm folgen wählen sie ihr repository und ihren branch (z b main ), der ihren mithril js quellcode enthält 7 4 einrichten der bereitstellungskonfigurationen konfigurieren sie build befehl geben sie npm run build an, wenn der build ordner nicht vorhanden ist ausgabeverzeichnis setzen sie dies auf build um auf ihre statischen assets zu verweisen umgebungsvariablen fügen sie alle erforderlichen api schlüssel oder einstellungen hinzu 7 5 dockerisierung ihrer anwendung (optional) wenn sie containerisierung bevorzugen, fügen sie ein dockerfile # use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 bereitstellung ihrer anwendung drücken sie die bereitstellen taste in ihrem back4app webbereitstellungsbereich überwachen sie den build prozess, während back4app ihre anwendung abruft, erstellt und bereitstellt sobald der vorgang abgeschlossen ist, erhalten sie eine url für ihre live mithril js app 7 7 überprüfung der bereitstellung öffnen sie die bereitgestellte url in ihrem browser bestätigen sie, dass ihre anwendung geladen wird, die navigation funktioniert und die assets ordnungsgemäß bereitgestellt werden verwenden sie die entwicklertools des browsers zur fehlersuche, falls erforderlich schritt 8 – abschluss und zukünftige richtungen gut gemacht! sie haben erfolgreich eine grundlegende crud app mit mithril js integriert mit back4app erstellt sie haben ein projekt namens basic crud app mithriljs , definiert ihr datenbankschema für artikel und benutzer und verwaltet ihr backend über die admin oberfläche darüber hinaus haben sie ihr mithril js frontend mit rest api aufrufen verbunden und sicherheitsmaßnahmen ergriffen, um ihre daten zu schützen was kommt als nächstes? frontend verbessern fügen sie funktionen wie detailansichten, suchmöglichkeiten oder live updates hinzu backend funktionen erweitern erkunden sie cloud funktionen, zusätzliche api integrationen oder rollenbasierte berechtigungen mehr lernen vertiefen sie sich in die back4app dokumentation https //www back4app com/docs und mithril js anleitungen für fortgeschrittene verbesserungen viel spaß beim programmieren und viel erfolg mit ihrem projekt!