Wie erstellt man eine CRUD-App mit Vue.js?

einführung in diesem leitfaden erfahren sie, wie sie eine voll funktionsfähige crud anwendung (erstellen, lesen, aktualisieren, löschen) mit vue js erstellen wir nutzen die leistungsfähigkeit von back4app, um ihr backend mühelos zu verwalten dieses tutorial führt sie durch die einrichtung eines back4app projekts, das erstellen eines dynamischen datenmodells und die implementierung von crud operationen mit vue js zunächst richten sie ein back4app projekt mit dem namen basic crud app vue , ein, das eine robuste nicht relationale datenbank für ihre app bereitstellt sie entwerfen ihr datenmodell, indem sie sammlungen und felder manuell konfigurieren oder den intelligenten ki agenten von back4app verwenden als nächstes verwalten sie ihre daten mit der back4app admin app – einer benutzerfreundlichen drag and drop oberfläche – die es ihnen ermöglicht, datensätze mühelos zu erstellen, zu lesen, zu aktualisieren und zu löschen schließlich integrieren sie ihr vue js frontend mit back4app über rest api aufrufe (unter verwendung von axios), um sichere und effiziente crud operationen auszuführen am ende dieses tutorials haben sie eine produktionsbereite vue js anwendung, die grundlegende crud funktionen sowie sichere benutzerauthentifizierung und datenverwaltung bietet wichtige erkenntnisse lernen sie, eine auf vue js basierende crud app mit einem skalierbaren backend zu erstellen verstehen sie, wie man ein flexibles backend strukturiert und es mit ihrem vue js projekt verbindet entdecken sie, wie sie die intuitive admin app von back4app für nahtlose crud operationen nutzen erforschen sie bereitstellungstechniken, einschließlich docker containerisierung, für ihre vue js anwendung voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem neuen projekt eingerichtet brauchen sie hilfe? siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine vue js entwicklungsumgebung verwenden sie die vue cli oder ihre bevorzugte ide wie vscode grundkenntnisse in vue js, modernem javascript und rest apis frischen sie die vue js dokumentation https //vuejs org/guide/introduction html bei bedarf auf schritt 1 – projektsetup 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 vue und folgen sie den anweisungen, um das setup abzuschließen neues projekt erstellen nach der erstellung des projekts wird es in ihrem dashboard angezeigt und bildet die grundlage für ihr backend schritt 2 – entwurf des datenmodells strukturierung ihrer daten für diese crud anwendung definieren sie mehrere sammlungen innerhalb ihres back4app projekts die folgenden beispiele veranschaulichen die kernsammlungen und deren felder, die für die crud funktionalität erforderlich sind 1\ artikel sammlung diese sammlung speichert details zu jedem artikel feld datentyp beschreibung id objekt id automatisch generierte eindeutige id titel zeichenfolge der name des artikels beschreibung zeichenfolge eine kurze zusammenfassung des artikels erstelltam datum zeitstempel der erstellung des elements aktualisiertam datum zeitstempel des letzten updates 2\ benutzersammlung diese sammlung verwaltet benutzeranmeldeinformationen und authentifizierungsdaten feld datentyp beschreibung id objekt id automatisch generierte eindeutige id benutzername zeichenfolge einzigartiger benutzername für den benutzer e mail zeichenfolge eindeutige e mail adresse passworthash zeichenfolge verschlüsseltes passwort für die anmeldung erstelltam datum zeitstempel der kontoerstellung aktualisiertam datum letzte aktualisierung des kontos zeitstempel sie können diese sammlungen und felder manuell im back4app dashboard hinzufügen neue klasse erstellen sie können felder hinzufügen, indem sie den datentyp auswählen, den feldnamen angeben, einen standardwert festlegen und es bei bedarf als erforderlich markieren spalte erstellen nutzung des back4app ai agenten zur schemaeinrichtung der integrierte back4app ai agent kann ihr datenschema automatisch basierend auf ihrer beschreibung generieren dieses tool beschleunigt die einrichtung und stellt sicher, dass ihr modell die crud anforderungen erfüllt so verwenden sie den ai agenten öffnen sie den ai agenten melden sie sich bei ihrem back4app dashboard an und navigieren sie zu dem ai agenten in ihren projekteinstellungen beschreiben sie ihr datenmodell geben sie eine detaillierte eingabeaufforderung ein, die die sammlungen und felder beschreibt, die sie benötigen überprüfen und bestätigen sobald der ai agent ein vorgeschlagenes schema generiert, überprüfen sie es und bestätigen sie, um die konfiguration zu implementieren beispielaufforderung create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) dieser ki gesteuerte ansatz spart zeit und sorgt für ein optimiertes und konsistentes datenmodell schritt 3 – aktivierung der admin app & verwaltung von crud operationen überblick über die admin app die back4app admin app bietet eine no code oberfläche für das backend management mit ihren drag and drop funktionen können sie mühelos crud operationen wie erstellen, lesen, aktualisieren und löschen von datensätzen durchführen 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 die admin anmeldeinformationen ein indem sie ihr erstes admin konto erstellen dieser prozess 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 zu verwalten admin app dashboard verwaltung von crud operationen über die admin app innerhalb der admin app können sie neue datensätze erstellen klicken sie auf „datensatz hinzufügen“ in einer beliebigen sammlung (z b artikel), um neue daten einzufügen datensätze bearbeiten oder anzeigen wählen sie einen datensatz aus, um dessen details anzuzeigen oder seine felder zu ändern datensätze löschen entfernen sie datensätze, die nicht mehr benötigt werden diese schnittstelle vereinfacht die datenverarbeitung und verbessert das gesamte benutzererlebnis schritt 4 – verbinden sie ihre vue js anwendung mit back4app sobald ihr backend bereit ist, ist es zeit, ihre vue js app mit back4app zu verknüpfen verwendung von rest api aufrufen mit axios wir werden rest api aufrufe über axios verwenden, um crud operationen durchzuführen installieren sie axios führen sie den folgenden befehl in ihrem projektverzeichnis aus npm install axios richten sie axios ein erstellen sie eine axios instanz in einer datei (z b api js ) // api js import axios from 'axios'; const apiclient = axios create({ baseurl 'https //parseapi back4app com', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' } }); export default apiclient; implementieren sie crud methoden in vue komponenten hier ist ein beispiel, wie man elemente abruft und erstellt // itemsservice js import apiclient from ' /api'; export default { fetchitems() { return apiclient get('/classes/items') then(response => response data results) catch(error => console error('fehler beim abrufen der elemente ', error)); }, additem(title, description) { return apiclient post('/classes/items', { title, description }) then(response => response data) catch(error => console error('fehler beim hinzufügen des elements ', error)); }, updateitem(objectid, title, description) { return apiclient put(`/classes/items/${objectid}`, { title, description }) then(response => response data) catch(error => console error('fehler beim aktualisieren des elements ', error)); }, deleteitem(objectid) { return apiclient delete(`/classes/items/${objectid}`) then(response => response data) catch(error => console error('fehler beim löschen des elements ', error)); } }; integrieren sie diese api methoden in ihre vue komponenten, um die daten ihrer app zu verwalten schritt 5 – sicherung ihres backends konfigurieren von zugriffskontrolllisten (acls) schützen sie ihre daten, indem sie acls für ihre datensätze einrichten zum beispiel, um ein element zu erstellen, das nur sein eigentümer anzeigen oder ändern kann import apiclient from ' /api'; export function createprivateitem(title, description, userid) { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; return apiclient post('/classes/items', { title, description, acl acl }) then(response => response data) catch(error => console error('error creating private item ', error)); } klassenebene berechtigungen (clps) festlegen verwenden sie ihr back4app dashboard, um clps zu konfigurieren, sodass nur authentifizierte benutzer auf bestimmte sammlungen zugreifen können dies stellt sicher, dass ihr backend standardmäßig sicher bleibt schritt 6 – implementierung der benutzerauthentifizierung einrichten der benutzerregistrierung und anmeldung back4app nutzt eine integrierte benutzersammlung zur authentifizierung in ihrer vue js app können sie die benutzeranmeldung und registrierung mithilfe von rest api aufrufen verwalten so geht's // authservice js import apiclient from ' /api'; export default { register(username, password, email) { return apiclient post('/users', { username, password, email }) then(response => response data) catch(error => console error('registration error ', error)); }, login(username, password) { return apiclient get('/login', { params { username, password } }) then(response => response data) catch(error => console error('login error ', error)); } }; klassenebene berechtigungen (clps) festlegen dieses setup ermöglicht es ihnen auch, das sitzungsmanagement, passwortzurücksetzungen und zusätzliche authentifizierungsfunktionen zu verwalten schritt 7 – bereitstellung ihrer vue js anwendung back4app vereinfacht den bereitstellungsprozess sie können ihre vue js anwendung mit verschiedenen methoden bereitstellen, einschließlich docker containerisierung 7 1 erstellen ihrer vue js anwendung kompilieren und bündeln verwenden sie die vue cli, um ihre app zu kompilieren npm run build überprüfen sie den build bestätigen sie, dass der ausgabeordner (normalerweise dist/ ) alle notwendigen dateien enthält 7 2 übersicht über die projektstruktur eine gängige vue js projektstruktur könnte folgendermaßen aussehen basic crud app vue/ \| public/ \| src/ \| | components/ \| | | itemlist vue \| | | itemform vue \| | services/ \| | | api js \| | | itemsservice js \| | | authservice js \| | app vue \| | main js \| package json \| readme md 7 3 dockerisierung ihrer vue js app wenn sie eine containerisierte bereitstellung bevorzugen, fügen sie eine dockerfile an der wurzel ihres projekts hinzu \# use a node image for building the app from node 16 as build \# set the working directory workdir /app \# install dependencies and build the app copy package json / run npm install copy run npm run build \# use an nginx image to serve the app from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 bereitstellung mit back4app web deployment verbinden sie ihr github repository stellen sie sicher, dass ihr vue js projekt auf github gehostet wird bereitstellung konfigurieren wählen sie im back4app dashboard die web bereitstellung option, verlinken sie ihr repository (z b basic crud app vue ), und wählen sie den gewünschten branch aus build befehle festlegen geben sie ihren build befehl an (z b npm run build ) und geben sie den ausgabeordner an (z b dist ) bereitstellen klicken sie auf bereitstellen und beobachten sie die protokolle, bis ihre app live geht schritt 8 – abschließende gedanken und nächste schritte herzlichen glückwunsch! sie haben eine auf vue js basierende crud anwendung erstellt, die mit back4app integriert ist sie haben ein projekt namens basic crud app vue , eingerichtet, sammlungen für artikel und benutzer erstellt und die back4app admin app für die datenverwaltung verwendet zusätzlich haben sie ihr vue js frontend über rest api aufrufe verbunden und sicherheitsmaßnahmen eingerichtet nächste schritte erweitern sie ihre anwendung integrieren sie funktionen wie erweiterte filterung, detaillierte artikelansichten oder live updates verbessern sie die backend funktionalität erforschen sie cloud funktionen, integrieren sie externe apis oder implementieren sie rollenbasierte zugriffskontrollen weiter lernen verweisen sie auf die back4app dokumentation https //www back4app com/docs und zusätzliche ressourcen, um ihre app weiter zu verfeinern viel spaß beim programmieren und beim erstellen ihrer vue js crud anwendung!