Wie man ein Solid.js-Frontend erstellt und es mit einem Backend verbindet

in diesem leitfaden werden sie eine to do listen anwendung mit solid js erstellen und sie mit einem robusten backend verbinden, das von back4app unterstützt wird dieses tutorial ist als idealer ausgangspunkt konzipiert, da es grundlegende crud (erstellen, lesen, aktualisieren, löschen) operationen abdeckt und sie durch das design einer klaren und funktionalen benutzeroberfläche führt am ende werden sie eine voll funktionsfähige app haben, die demonstriert, wie man einen verwalteten backend service integriert, während man solid js für ein responsives frontend nutzt die entwicklung einer full stack anwendung kann herausfordernd sein, aufgrund der komplexität beim einrichten eines backends, der verwaltung einer datenbank, der handhabung von authentifizierung und der bereitstellung von infrastruktur um diesen prozess zu vereinfachen, verwenden wir back4app, das eine skalierbare backend as a service (baas) lösung , sodass sie sich darauf konzentrieren können, ihr frontend zu gestalten, während es hosting, datenbanken und apis verwaltet back4app bietet umfassende backend dienste, einschließlich einer sofort einsatzbereiten datenbank, authentifizierung, cloud code für serverseitige logik und sdks für eine reibungslose integration es unterstützt auch containerisierte bereitstellungen, was es zu einer flexiblen wahl für das hosting von full stack anwendungen macht mit diesen tools können sie anwendungen schnell entwickeln und bereitstellen, ohne sich um die serverwartung kümmern zu müssen wichtige erkenntnisse durch das befolgen dieses tutorials werden sie lernen ein modernes solid js projekt mit vite zu initialisieren einen backend service nahtlos zu integrieren, um die daten ihrer anwendung zu verwalten wesentliche crud operationen für eine dynamische und interaktive benutzeroberfläche zu implementieren eine voll funktionsfähige to do liste anwendung mit containerisierten workflows auf back4app bereitzustellen voraussetzungen stellen sie sicher, dass sie diese tools und fähigkeiten haben, bevor sie beginnen node js und npm installieren sie node js (lts empfohlen) von nodejs org https //nodejs org/ und überprüfen sie dies, indem sie node v und npm v in ihrem terminal ausführen grundkenntnisse in solid js vertrautheit mit komponenten, reaktiven signalen (unter verwendung von createsignal ), und jsx syntax ist erforderlich wenn sie neu bei solid js sind, sollten sie zunächst die grundlagen überprüfen ein back4app konto melden sie sich bei back4app https //www back4app com/ an, um ihre backend dienste einzurichten und zu verwalten mit diesen voraussetzungen sind sie bereit, ihr projekt einzurichten und mit dem bau zu beginnen projektsetup beginnen sie mit der einrichtung ihrer lokalen entwicklungsumgebung und der initialisierung ihres solid js projekts mit vite für eine schnelle entwicklungserfahrung überprüfen sie, ob node js (lts version) auf ihrem computer installiert ist falls erforderlich, laden sie es von nodejs org https //nodejs org/ bestätigen sie die installation node v npm v initialisieren sie ihr solid js projekt mit vite führen sie den folgenden befehl in ihrem terminal aus (ersetzen sie todo app durch den gewünschten projektnamen) npm create vite\@latest todo app template solid wechseln sie in ihr projektverzeichnis cd todo app installieren sie alle erforderlichen abhängigkeiten npm install starten sie den entwicklungsserver, um ihre einrichtung zu bestätigen npm run dev ihre solid js anwendung sollte jetzt lokal ausgeführt werden öffnen sie die angezeigte url in ihrem browser, um dies zu überprüfen als nächstes richten sie ihr backend auf back4app ein, um die datenspeicherung und api interaktionen zu verwalten erstellen des todo backends back4app bietet einen vollständig verwalteten backend service, der von parse , unterstützt wird und eine nosql datenbank, authentifizierung, cloud code und automatisch generierte apis direkt out of the box bereitstellt dieser abschnitt führt sie durch die erstellung eines task datenmodells, um ihre aufgabenliste zu speichern und es mit ihrem solid js frontend zu verknüpfen einrichten ihrer backend anwendung melden sie sich an bei ihrem back4app dashboard https //www back4app com/ und klicken sie auf "erstellen sie eine neue app " benennen sie ihre anwendung (z b todosolidapp ) und wählen sie nodejs/parse als backend typ sobald die app erstellt ist, 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 klassenberechtigungen so, dass öffentliches lesen und schreiben erlaubt ist (sie können diese einstellungen später verschärfen) 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, der angibt, ob die aufgabe abgeschlossen ist fälligkeitsdatum (datum) – frist für die aufgabe klicken sie auf "speichern" um ihr schema abzuschließen integration von back4app mit solid js integrieren sie back4app in ihr solid js projekt mit dem parse javascript sdk um mit ihrem backend zu kommunizieren installieren sie das sdk über npm npm install parse konfigurieren sie das sdk, indem sie es mit ihrer anwendungs id und javascript schlüssel holen sie sich diese von ihrem back4app dashboard unter app einstellungen > sicherheit & schlüssel in ihrer src/index jsx (oder einer entsprechenden einstiegsdatei) importieren und konfigurieren sie parse wie folgt import { render } from "solid js/web"; import ' /index css' import app from " /app"; 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; render(() => \<app />, document getelementbyid("root")); mit dem konfigurierten backend sind sie bereit, die benutzeroberfläche der to do liste in solid js zu erstellen und crud operationen zu implementieren entwicklung des frontends mit solid js jetzt, da ihr backend verbunden ist, erstellen sie die benutzeroberfläche für ihre to do listenanwendung mit solid js sie werden komponenten erstellen, um aufgaben hinzuzufügen, anzuzeigen, zu aktualisieren und zu löschen, während sie den zustand mit reaktiven signalen verwalten organisieren ihrer komponenten ihre anwendung wird aus diesen schlüsselkomponenten bestehen taskform jsx – verwaltet das hinzufügen neuer aufgaben tasklist jsx – zeigt alle aufgaben an und bietet steuerungen zum abschließen oder entfernen taskitem jsx – stellt eine einzelne aufgabe dar mit aktionen zum markieren als abgeschlossen oder löschen erstellen sie einen components ordner innerhalb von src und fügen sie diese dateien hinzu mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx zustandsverwaltung mit solid js nutzen sie solid js’s createsignal und createeffect für die zustandsverwaltung und nebeneffekte beginnen sie mit der einrichtung des zustands in app jsx import { createsignal, onmount } from "solid js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = createsignal(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; onmount(fetchtasks); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks()} fetchtasks={fetchtasks} /> \</div> ); } export default app; erstellen der aufgabenformular komponente in taskform jsx , erstellen sie ein kontrolliertes formular zum hinzufügen von aufgaben verwenden sie createsignal zur verwaltung der eingabewerte und senden sie die daten an back4app import { createsignal } from "solid js"; import parse from "parse/dist/parse min js"; function taskform(props) { const \[title, settitle] = createsignal(""); const \[description, setdescription] = createsignal(""); const handlesubmit = async (e) => { e 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(); props fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title()} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description()} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; anzeigen der aufgabenliste in tasklist jsx , rendern sie die liste der aufgaben mit der taskitem komponente für jeden eintrag import taskitem from " /taskitem"; function tasklist(props) { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={props fetchtasks} /> )) )} \</div> ); } export default tasklist; erstellen der task item komponente in taskitem jsx , richten sie aktionen ein, um eine aufgabe als abgeschlossen zu markieren oder sie zu löschen import parse from "parse/dist/parse min js"; function taskitem(props) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick={handlecomplete}> {props task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; styling ihrer anwendung fügen sie die folgenden stile in die index css datei im src ordner ein / center the content and add spacing / 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; } container p { font size 1rem; } 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 die css datei in ihre src/index jsx import " /index css"; die benutzeroberfläche abschließen ihre solid js to do liste anwendung verfügt jetzt über ein dynamisches frontend, das mit back4app und benutzerdefiniertem styling integriert ist die app ermöglicht es ihnen, aufgaben hinzuzufügen, anzuzeigen, zu aktualisieren und zu löschen, während die effiziente kommunikation zwischen frontend und backend aufrechterhalten wird als nächstes werden sie ihre solid js app mit der web deployment plattform von back4app bereitstellen bereitstellung des frontends auf der web deployment plattform von back4app die web deployment plattform von back4app bietet eine vollständig verwaltete, containerisierte umgebung zur bereitstellung ihrer anwendungen mit docker basierten bereitstellungen können sie ihr solid js frontend verpacken und mühelos bereitstellen vite für die produktion konfigurieren solid js anwendungen, die mit vite erstellt wurden, laufen standardmäßig im entwicklungsmodus für die produktion erstellen sie eine statische version und bedienen sie sie mit einem leichten webserver wie nginx aktualisieren sie ihre vite config js um den richtigen basis pfad festzulegen import { defineconfig } from 'vite'; import solidplugin from 'vite plugin solid'; export default defineconfig({ plugins \[solidplugin()], base ' /', // ensures correct asset paths in containerized environments }); generieren sie produktionsbereite dateien npm run build erstellen eines dockerfiles für ihre app erstellen sie ein dockerfile im projektstamm, um zu definieren, wie ihre app containerisiert wird \# use an official lightweight node js image to build the app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# use nginx to serve the static files from nginx\ alpine \# copy custom nginx config for spa routing copy nginx conf /etc/nginx/conf d/default conf \# copy built app from build stage copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] nachdem sie ihr dockerfile erstellt haben, konfigurieren sie nginx, um anfragen ordnungsgemäß an die root index html datei ihrer solid js anwendung weiterzuleiten, wenn sie versuchen, direkt auf routen zuzugreifen erstellen sie dazu eine nginx conf datei im stammverzeichnis ihres projekts und fügen sie den folgenden codeblock ein server { listen 80; server name localhost; root /usr/share/nginx/html; index index html; \# gzip settings for better performance gzip on; gzip vary on; gzip min length 10240; gzip proxied expired no cache no store private auth; gzip types text/plain text/css text/xml text/javascript application/x javascript application/xml application/javascript; gzip disable "msie \[1 6]\\ "; \# handle static file requests location \\ (?\ jpg|jpeg|gif|png|ico|svg|woff2|woff|eot|ttf|css|js)$ { expires 30d; add header cache control "public, max age=2592000"; try files $uri =404; } \# redirect all requests to index html for spa routing location / { try files $uri $uri/ /index html; } \# error pages error page 404 /index html; error page 500 502 503 504 /50x html; location = /50x html { root /usr/share/nginx/html; } } testen des containers lokal vor der bereitstellung, bauen und testen sie ihren docker container docker build t todo solid frontend führen sie den container aus docker run p 8080 80 todo solid frontend besuchen sie http //localhost 8080 in ihrem browser, um zu bestätigen, dass ihre app korrekt bereitgestellt wird pushen zu github und bereitstellung über back4app pushen sie ihr projekt zu github 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 dann, deployen sie mit back4app web deployment melden sie sich bei back4app web deployment https //www back4app com/containers an klicken sie auf "neue app erstellen" , geben sie einen namen ein und wählen sie github repository aus autorisieren sie back4app, auf ihr repository zuzugreifen, und wählen sie das todo solid repository aus wählen sie dockerfile deployment und bestätigen sie die build einstellungen klicken sie auf "deploy" um den build prozess zu starten überwachung und verwaltung von deployments nach dem deployment verwenden sie das back4app dashboard, um protokolle zur fehlersuche anzuzeigen die leistung und ressourcennutzung des containers zu überwachen neudeplyments mit neuen commits auszulösen benutzerdefinierte domains zu konfigurieren, falls gewünscht testen und debuggen ihrer anwendung nach der bereitstellung testen sie ihre solid js app gründlich api konnektivität überprüfen öffnen sie die entwicklertools des browsers (f12 → netzwerk), um api aufrufe während der aufgabenoperationen zu überprüfen aufgaben hinzufügen und abrufen verwenden sie die benutzeroberfläche, um aufgaben hinzuzufügen, aktualisieren sie dann und bestätigen sie die datenpersistenz im back4app datenbankbrowser crud operationen testen sie das markieren von aufgaben als abgeschlossen und das löschen, um sicherzustellen, dass die aktualisierungen im backend reflektiert werden randfälle behandeln validieren sie die formulareingaben und simulieren sie langsamere netzwerkbedingungen mit den entwicklertools des browsers wenn probleme auftreten, konsultieren sie die back4app protokolle oder überprüfen sie ihre api konfiguration best practices für die nutzung von back4app diensten verbessern sie die leistung und sicherheit ihrer anwendung durch optimierung von api aufrufen verwenden sie batch anfragen für mehrere operationen und wählen sie nur die erforderlichen felder in abfragen aus sichern von umgebungsvariablen speichern sie sensible anmeldeinformationen in umgebungsvariablen mit vite erstellen sie eine env datei vite parse app id=your app id vite parse js key=your js key implementierung der automatischen skalierung aktivieren sie die automatische skalierung in der back4app webbereitstellung für szenarien mit hohem datenverkehr sicherheit verbessern verwenden sie klassenberechtigungen (clps), um datenänderungen einzuschränken und richten sie bei bedarf acls ein cloud code nutzen lagern sie komplexe logik in den cloud code aus, um die leistung zu verbessern und die api exposition zu reduzieren fazit sie haben nun eine vollständige to do listen anwendung mit solid js für das frontend und den robusten backend diensten von back4app erstellt dieses tutorial behandelte den weg von der initialisierung eines solid js projekts und der integration des parse sdk bis zur bereitstellung ihrer app über containerisierte workflows auf back4app während sie fortschreiten, sollten sie in betracht ziehen, funktionen wie erweiterte benutzerauthentifizierung, echtzeit updates und integrationen von drittanbietern hinzuzufügen, um ihre anwendung weiter zu verbessern für weitere details und unterstützung erkunden sie die back4app dokumentation https //www back4app com/docs