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

in diesem tutorial erstellen sie eine to do listen anwendung mit svelte und verbinden sie mit einem verwalteten backend service, der von back4app unterstützt wird dieser leitfaden ist für sie gedacht, wenn sie die grundlegenden crud (create, read, update, delete) operationen meistern und eine intuitive benutzeroberfläche mit svelte erstellen möchten am ende wird ihre anwendung nahtlos mit einem backend interagieren, das die datenspeicherung, authentifizierung und mehr verwaltet die entwicklung einer full stack anwendung kann aufgrund der backend konfiguration und der datenbankverwaltung komplex sein um ihre arbeit zu vereinfachen, verwenden wir back4app—einen robusten backend as a service —damit sie sich auf den aufbau eines dynamischen svelte frontends konzentrieren können back4app bietet eine vollständig verwaltete nosql datenbank, authentifizierung, cloud code für benutzerdefinierte logik und sdks für eine reibungslose integration dies ermöglicht es ihnen, skalierbare anwendungen bereitzustellen, ohne die serverinfrastruktur verwalten zu müssen wichtige erkenntnisse wenn sie dieses tutorial befolgen, werden sie ein modernes svelte projekt mit vite initialisieren nahtlos einen backend service integrieren, um die daten ihrer app zu verwalten wesentliche crud operationen für eine dynamische to do liste implementieren ihre voll funktionsfähige anwendung mit containerisierten 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 dies mit node v und npm v grundkenntnisse in svelte , einschließlich komponenten, reaktiven variablen und ereignisbehandlung ein back4app konto zur verwaltung ihrer backend dienste melden sie sich bei back4app https //www back4app com/ an, wenn sie noch keins haben mit diesen voraussetzungen sind sie bereit, ihr projekt zu starten projektsetup beginnen sie mit der einrichtung ihrer lokalen entwicklungsumgebung und der initialisierung eines neuen svelte projekts mit vite stellen sie sicher, dass sie node js (lts version) installiert haben wenn nicht, laden sie es von nodejs org https //nodejs org/ herunter erstellen sie ihr svelte projekt, indem sie folgendes ausführen npm create vite\@latest todo app template svelte wechseln sie in ihr projektverzeichnis cd todo app installieren sie die erforderlichen abhängigkeiten npm install starten sie den entwicklungsserver, um die einrichtung zu überprüfen npm run dev öffnen sie die bereitgestellte url in ihrem browser, um ihre svelte app in aktion zu sehen mit dem bereitgestellten frontend fahren sie fort, um ihr backend auf back4app zu erstellen erstellen des todo backends back4app bietet einen vollständig verwalteten backend service, der von parse , unterstützt wird es umfasst eine nosql datenbank, authentifizierung, cloud code und automatisch generierte apis befolgen sie diese schritte, um ihr backend einzurichten 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 navigieren 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 title (string) – der titel der aufgabe description (string) – einzelheiten zur aufgabe completed (boolean) – status der aufgabenerledigung duedate (datum) – der fälligkeitstermin für die aufgabe klicken sie auf "speichern" um das schema zu erstellen integration von back4app mit svelte um ihre svelte app mit back4app zu verbinden, verwenden sie das parse javascript sdk installieren sie das parse sdk npm install parse konfigurieren sie das sdk, indem sie die src/main js datei bearbeiten importieren sie das sdk und initialisieren sie es mit ihrer anwendungs id und javascript schlüssel aus dem back4app dashboard (finden sie diese unter app einstellungen > sicherheit & schlüssel ) import app from ' /app svelte'; 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; const app = new app({ target document getelementbyid('app') }); export default app; mit ihrem verbundenen backend können sie jetzt die to do listenoberfläche erstellen und crud operationen implementieren entwicklung des frontends ihre svelte anwendung besteht aus komponenten, mit denen sie aufgaben hinzufügen, anzeigen, aktualisieren und löschen können sie werden die reaktivität von svelte für dynamische updates nutzen strukturierung ihrer komponenten erstellen sie einen components ordner innerhalb von src um ihre svelte komponenten zu organisieren mkdir src/components sie werden die folgenden komponenten erstellen taskform svelte – zum hinzufügen neuer aufgaben tasklist svelte – um die liste der aufgaben anzuzeigen taskitem svelte – um einzelne aufgaben darzustellen taskform svelte diese komponente rendert ein formular, das die details der aufgabe erfasst und sie an back4app übermittelt \<script> import { createeventdispatcher } from 'svelte'; import parse from 'parse/dist/parse min js'; let title = ''; let description = ''; const dispatch = createeventdispatcher(); async function handlesubmit(event) { event preventdefault(); try { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('description', description); task set('completed', false); await task save(); dispatch('refresh'); title = ''; description = ''; } catch (error) { console error('error adding task ', error); } } \</script> \<form on\ submit|preventdefault={handlesubmit}> \<input type="text" placeholder="task title" bind\ value={title} required /> \<input type="text" placeholder="description" bind\ value={description} required /> \<button type="submit">add task\</button> \</form> taskitem svelte diese komponente stellt eine einzelne aufgabe dar, die es ihnen ermöglicht, ihren abschlussstatus umzuschalten oder sie zu löschen \<script> import parse from 'parse/dist/parse min js'; export let task; export let refresh; async function togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(task id); tasktoupdate set('completed', !task completed); await tasktoupdate save(); refresh(); } catch (error) { console error('error updating task ', error); } } async function deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(task id); await tasktodelete destroy(); refresh(); } catch (error) { console error('error deleting task ', error); } } \</script> \<div class="task item {task completed ? 'completed' ''}"> \<div> \<h3>{task title}\</h3> \<p>{task description}\</p> \</div> \<div> \<button on\ click={togglecomplete}> {task completed ? 'undo' 'complete'} \</button> \<button on\ click={deletetask}>delete\</button> \</div> \</div> tasklist svelte diese komponente zeigt alle aufgaben an, indem sie über sie iteriert und jede mit taskitem rendert \<script> import taskitem from ' /taskitem svelte'; export let tasks = \[]; export let refresh; \</script> {#if tasks length === 0} \<p>no tasks available\</p> {\ else} {#each tasks as task (task id)} \<taskitem {task} {refresh} /> {/each} {/if} app svelte verwalten sie den anwendungszustand in ihrer hauptkomponente und integrieren sie ihre aufgabenkomponenten \<script> import { onmount } from 'svelte'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform svelte'; import tasklist from ' /components/tasklist svelte'; let tasks = \[]; async function fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } onmount(fetchtasks); \</script> \<div class="container"> \<h1>to do list\</h1> \<taskform on\ refresh={fetchtasks} /> \<tasklist {tasks} refresh={fetchtasks} /> \</div> styling der anwendung erstellen sie eine src/global css datei, 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 dieses stylesheet in ihre src/main js import ' /global css'; bereitstellung des frontends auf back4app web deployment back4app web deployment bietet eine containerisierte umgebung, um ihre svelte anwendung zu hosten vite für die produktion konfigurieren passen sie vite config js bei bedarf an, um den basis pfad korrekt für eine containerisierte umgebung festzulegen import { defineconfig } from 'vite'; import { svelte } from '@sveltejs/vite plugin svelte'; export default defineconfig({ plugins \[svelte()], base ' /', }); generieren sie den produktionsbuild npm run build erstellen einer dockerfile erstellen sie eine dockerfile im stammverzeichnis mit folgendem inhalt \# stage 1 build the svelte 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 öffnen sie http //localhost 8080 in ihrem browser, um zu überprüfen, ob ihre svelte app korrekt bereitgestellt wird bereitstellung auf back4app initialisieren sie ein git repository, fügen sie ihre projektdateien 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 melde dich bei back4app web bereitstellung https //www back4app com/containers an klicke auf "neue app erstellen" , gib deinen projektnamen ein und wähle dein github repository aus autorisieren sie back4app und wählen sie dockerfile bereitstellung aus bestätige die build einstellungen und klicke auf "bereitstellen" , um den ersten build zu starten überwachung deiner bereitstellung nach der bereitstellung verwende das back4app dashboard, um protokolle zur fehlersuche anzuzeigen die leistung von containern und die ressourcennutzung zu überwachen neubauten bei neuen commits auszulösen benutzerdefinierte domains zu konfigurieren, falls erforderlich greife auf deine live anwendung zu unter https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ testen und debuggen bestätigen sie nach der bereitstellung, dass ihr svelte frontend ordnungsgemäß mit dem back4app backend kommuniziert api überprüfung verwenden sie die entwicklertools ihres browsers (f12 → netzwerk), um api aufrufe zu überprüfen aufgabenoperationen fügen sie aufgaben über die benutzeroberfläche hinzu, schließen sie sie ab und löschen sie sie, und überprüfen sie die aktualisierungen im back4app datenbankbrowser fehlerbehandlung überprüfen sie die konsolenprotokolle auf fehler und testen sie grenzfälle wie das einreichen leerer aufgaben leistungstest simulieren sie langsame netzwerkbedingungen mit browser tools, um die reaktionsfähigkeit zu bewerten best practices für die verwendung von back4app mit svelte um ihre anwendung zu optimieren effiziente anfragen verwenden sie batch operationen, wenn sie mehrere aufgaben bearbeiten const tasks = \[task1, task2, task3]; parse object saveall(tasks); optimierte abfragen nur die notwendigen felder abrufen query select('title', 'completed'); umgebungsvariablen sensible schlüssel in einer env datei speichern 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())); backend entlastung nutzen sie cloud code für komplexe geschäftslogik, um die api exposition zu reduzieren fazit sie haben nun eine vollständige to do listen anwendung erstellt, indem sie ein svelte frontend entwickelt, es mit dem backend von back4app integriert und es mit containerisierten workflows bereitgestellt haben dieses tutorial hat sie durch jeden schritt geführt – von der lokalen entwicklung bis zur cloud bereitstellung – und dabei eine reibungslose interaktion zwischen ihrer svelte benutzeroberfläche und den backend diensten sichergestellt blicken sie in die zukunft und überlegen sie, ihre app mit echtzeit updates, verbesserter authentifizierung und integrationen von drittanbietern zu erweitern für weiteres lernen besuchen sie die back4app dokumentation https //www back4app com/docs und erkunden sie die community ressourcen