Wie man ein Vue-Frontend erstellt und es mit einem Backend verbindet?

in diesem tutorial erstellen sie eine to do liste anwendung mit vue und verbinden sie mit einem verwalteten backend service dieser leitfaden ist perfekt für sie, wenn sie die grundlegenden crud (create, read, update, delete) operationen meistern und eine intuitive benutzeroberfläche erstellen möchten am ende wird ihre app vollständig mit einem von back4app unterstützten backend interagieren die entwicklung einer full stack anwendung kann komplexe backend setups, datenbankverwaltung und benutzerauthentifizierung umfassen um ihnen zu ermöglichen, sich auf die erstellung eines herausragenden vue frontends zu konzentrieren, verwenden wir back4app, um das backend mühelos zu verwalten back4app bietet eine sofort einsatzbereite datenbank, authentifizierung, cloud code für benutzerdefinierte serverlogik und sdks zur integration in ihre app dies ermöglicht es ihnen, skalierbare anwendungen ohne den aufwand der serverwartung bereitzustellen wichtige erkenntnisse indem sie dieses tutorial befolgen, werden sie ein modernes vue projekt mit branchenüblichen tools einrichten einen backend service nahtlos integrieren, um die daten ihrer anwendung zu verwalten wesentliche crud operationen für eine dynamische to do liste implementieren ihre voll funktionsfähige anwendung über containerisierte workflows auf back4app bereitstellen voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie node js und npm auf ihrem computer installiert haben überprüfen sie die installationen mit node v und npm v grundkenntnisse in vue , einschließlich komponenten, reaktiven daten und ereignisbehandlung vertrautheit mit der composition api von vue 3 ist von vorteil ein back4app konto zur verwaltung ihrer backend dienste registrieren sie sich bei back4app https //www back4app com/ , falls sie dies noch nicht getan haben mit diesen voraussetzungen sind sie bereit, ihr projekt einzurichten projektsetup beginnen sie damit, ihre lokale entwicklungsumgebung vorzubereiten und ihr vue projekt mit vite für eine schnelle und moderne build erfahrung zu initialisieren überprüfen sie, ob sie node js (lts version) installiert haben wenn nicht, laden sie es von nodejs org https //nodejs org/ herunter erstellen sie ihr vue projekt, indem sie folgendes ausführen npm create vite\@latest todo app 3 wechseln sie in ihr projektverzeichnis cd todo app 4 abhängigkeiten installieren npm install 5 starten sie den entwicklungsserver, um sicherzustellen, dass alles funktioniert npm run dev öffnen sie die bereitgestellte url in ihrem browser mit ihrem vue frontend bereit, besteht der nächste schritt darin, ihr backend auf back4app einzurichten erstellen des todo backends back4app bietet einen vollständig verwalteten backend service, der von parse , unterstützt wird, einschließlich einer nosql datenbank, benutzerauthentifizierung, cloud code und automatischer api generierung befolgen sie diese schritte, um ein backend zu erstellen melden sie sich bei ihrem back4app dashboard https //www back4app com/ an und klicken sie auf "erstellen sie eine neue app " benennen sie ihre app (zum beispiel, todoapp ) und wählen sie nodejs/parse als backend typ gehen sie zu "datenbank" > "browser" , klicken sie auf "eine klasse erstellen" , und wählen sie "benutzerdefiniert" benennen sie die klasse task und setzen sie die berechtigungen so, dass öffentliches lesen und schreiben erlaubt ist (sie können diese später verfeinern) fügen sie in der task klasse die folgenden felder hinzu titel (string) – der titel der aufgabe beschreibung (string) – einzelheiten zur aufgabe abgeschlossen (boolean) – status des abschlusses der aufgabe fälligkeitsdatum (datum) – wann die aufgabe fällig ist klicken sie auf "speichern" um das schema zu erstellen integration von back4app mit vue sie verwenden das parse javascript sdk um zwischen ihrem vue frontend und dem back4app backend zu kommunizieren installieren sie das parse sdk npm install parse konfigurieren sie das sdk, indem sie src/main js bearbeiten importieren sie das sdk und initialisieren sie es mit ihrer anwendungs id und javascript schlüssel aus dem back4app dashboard (zu finden unter app einstellungen > sicherheit & schlüssel ) import { createapp } from 'vue'; import app from ' /app vue'; import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; createapp(app) mount('#app'); mit ihrem verbundenen backend können sie jetzt die to do listenoberfläche erstellen und crud operationen integrieren entwicklung des frontends ihre vue anwendung besteht aus komponenten zum hinzufügen, anzeigen, aktualisieren und entfernen von aufgaben sie werden die reaktivität von vue nutzen, um den zustand zu verwalten und reibungslose aktualisierungen sicherzustellen strukturierung ihrer komponenten erstellen sie einen components ordner innerhalb von src um ihre vue komponenten zu beherbergen mkdir src/components touch src/components/taskform vue src/components/tasklist vue src/components/taskitem vue taskform vue diese komponente verwaltet das hinzufügen neuer aufgaben sie verwendet ein kontrolliertes formular, um benutzereingaben zu erfassen \<template> \<form @submit prevent="handlesubmit"> \<input type="text" placeholder="task title" v model="title" required /> \<input type="text" placeholder="description" v model="description" required /> \<button type="submit">add task\</button> \</form> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskform', props \['fetchtasks'], data() { return { title '', description '' }; }, methods { async handlesubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this fetchtasks(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> tasklist vue diese komponente zeigt die liste der aufgaben an und integriert aufgabenaktionen \<template> \<div> \<p v if="!tasks length">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', components { taskitem }, props \['tasks', 'fetchtasks'] }; \</script> taskitem vue diese komponente stellt eine einzelne aufgabe dar und enthält aktionen, um sie als abgeschlossen zu markieren oder zu löschen \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="handlecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="handledelete">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task', 'fetchtasks'], methods { async handlecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this fetchtasks(); } catch (error) { console error('error updating task ', error); } }, async handledelete() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this fetchtasks(); } catch (error) { console error('error deleting task ', error); } } } }; \</script> verwalten des zustands in app vue in ihrer hauptkomponente verwalten sie die liste der aufgaben mithilfe von vues reaktiven daten und lebenszyklus hooks \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform \ fetchtasks="fetchtasks" /> \<tasklist \ tasks="tasks" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import { ref, onmounted } from 'vue'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; export default { name 'app', components { taskform, tasklist }, setup() { const tasks = ref(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } }; onmounted(fetchtasks); return { tasks, fetchtasks }; } }; \</script> styling der anwendung erstellen sie eine styles css datei in src um grundlegendes styling hinzuzufügen container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } importieren sie das stylesheet in main js import ' /styles css'; bereitstellung des frontends auf back4app web deployment back4app web deployment ermöglicht es ihnen, ihre vue anwendung für die produktion mit docker zu containerisieren vite für die produktion konfigurieren passen sie vite config js an, um den basis pfad korrekt für eine containerisierte umgebung festzulegen import { defineconfig } from 'vite'; import vue from '@vitejs/plugin vue'; export default defineconfig({ plugins \[vue()], base ' /', }); generieren sie den produktionsbuild npm run build erstellen einer dockerfile erstellen sie ein dockerfile im stammverzeichnis # stage 1 build the vue app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] testen des docker containers lokal bauen sie ihr docker image docker build t todo frontend führen sie den container aus docker run p 8080 80 todo frontend besuchen sie http //localhost 8080 um zu überprüfen, ob ihre vue app korrekt bereitgestellt wird bereitstellung auf back4app initialisieren sie ein git repository, fügen sie ihre dateien hinzu und committen sie git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main melden sie sich bei back4app web deployment https //www back4app com/containers an klicken sie auf "neue app erstellen" , geben sie einen projektnamen ein und wählen sie github repository autorisieren sie back4app, auf ihr repository zuzugreifen, und wählen sie dockerfile bereitstellung bestätigen sie die build einstellungen und klicken sie auf "bereitstellen" um den ersten build auszulösen überwachung ihrer bereitstellung nach der bereitstellung verwenden sie das back4app dashboard, um protokolle zur fehlersuche anzeigen ressourcennutzung und containerneustarts überwachen bei neuen commits erneut bereitstellen mit der "trigger build" option benutzerdefinierte domains konfigurieren, falls erforderlich greifen sie auf die live anwendung zu unter https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ testen und debuggen stellen sie nach der bereitstellung sicher, dass ihr vue frontend korrekt mit dem back4app backend kommuniziert api aufrufe überprüfen öffnen sie die entwicklertools ihres browsers (f12 → netzwerk), um api anfragen zu inspizieren aufgaben hinzufügen und abrufen verwenden sie die app oberfläche, um aufgaben hinzuzufügen und den back4app datenbankbrowser zu überprüfen crud operationen testen sie das abschließen und löschen von aufgaben und bestätigen sie die änderungen im backend randfälle validieren sie die formulareingaben und simulieren sie langsame netzwerkbedingungen (mit chrome devtools), um die leistung zu bewerten fehlerbehebung bei häufigen problemen cors fehler aktualisieren sie erlaubte header und domains in back4app (dashboard > app einstellungen > sicherheit & schlüssel), um ihre frontend url einzuschließen authentifizierungsfehler (401) bestätigen sie, dass ihre anwendungs id und ihr javascript schlüssel korrekt sind backend bereitstellungsprobleme überprüfen sie die containerprotokolle im back4app dashboard und starten sie den container bei bedarf neu best practices für die verwendung von back4app mit vue um ihre anwendung zu optimieren effiziente datenanforderungen verwenden sie batch anfragen für mehrere operationen const tasks = \[task1, task2, task3]; parse object saveall(tasks); abfragen optimieren fordern sie nur die notwendigen felder an query select('title', 'completed'); umgebungsvariablen speichern sie sensible schlüssel in einer env datei vite parse app id=your app id vite parse js key=your js key sicherheit verwenden sie acls, um den zugriff einzuschränken task setacl(new parse acl(parse user current())); cloud code lagern sie komplexe logik in backend funktionen aus, um die api exposition zu reduzieren fazit sie haben erfolgreich eine vollständige to do listen anwendung erstellt, indem sie ein vue frontend eingerichtet, es mit dem backend von back4app integriert und es über containerisierte workflows bereitgestellt haben dieses tutorial demonstrierte einen optimierten weg von der lokalen entwicklung zur cloud bereitstellung und gewährleistete eine reibungslose interaktion zwischen ihrer vue benutzeroberfläche und den backend diensten blicken sie in die zukunft und denken sie an verbesserungen wie fortgeschrittenes benutzermanagement, echtzeit updates und die integration von drittanbieterdiensten für weitere informationen besuchen sie die back4app dokumentation https //www back4app com/docs und erkunden sie die ressourcen der community