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

in diesem leitfaden werden sie eine to do liste anwendung mit blitz js erstellen und sie mit einem verwalteten backend auf back4app verbinden dieses schrittweise tutorial soll ihnen helfen, grundlegende crud operationen zu implementieren und eine dynamische benutzeroberfläche mit blitz js zu erstellen der aufbau einer full stack anwendung kann komplex sein, wenn sie sowohl frontend als auch backend systeme verwalten müssen durch die nutzung von back4app können sie das backend management durch einen skalierbaren baas , vereinfachen, sodass sie sich auf den aufbau einer ansprechenden blitz js oberfläche konzentrieren können back4app bietet eine suite von backend diensten, einschließlich einer sofort einsatzbereiten nosql datenbank, authentifizierung, cloud funktionen und api endpunkten diese funktionen ermöglichen es ihnen, ihre anwendung schnell zu entwickeln und bereitzustellen, ohne die last der serverwartung wichtige erkenntnisse am ende dieses tutorials werden sie in der lage sein ein modernes blitz js projekt mit branchenüblichen tools einzurichten ein back4app backend mit ihrer blitz js anwendung unter verwendung des parse sdk zu integrieren crud operationen zu implementieren, um ihre to do liste zu verwalten ihre blitz js app mit der web bereitstellung von back4app zu containerisieren und bereitzustellen voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie folgendes haben node js und npm auf ihrem computer installiert überprüfen sie die installation mit node v und npm v in ihrem terminal grundkenntnisse in blitz js , einschließlich routing, abfragen und mutationen vertrautheit mit react ist von vorteil, da blitz js darauf aufbaut ein back4app konto zur konfiguration und verwaltung ihrer backend dienste melden sie sich bei back4app https //www back4app com/ an, falls sie dies noch nicht getan haben mit diesen voraussetzungen sind sie bereit, ihr blitz js projekt zu initialisieren und es mit einem robusten backend zu integrieren projektsetup beginnen sie mit der einrichtung ihrer blitz js anwendung blitz js bietet ein optimiertes entwicklererlebnis, indem es die leistung von next js mit einem full stack framework kombiniert führen sie den folgenden befehl aus, um ein neues blitz js projekt zu erstellen ersetzen sie todo app durch ihren gewählten projektnamen npx blitz new todo app navigieren sie zu ihrem projektverzeichnis cd todo app führen sie ihren entwicklungsserver aus, um zu überprüfen, ob alles korrekt eingerichtet ist npm run dev besuchen sie die im terminal angezeigte url, um zu bestätigen, dass ihre blitz js app läuft einrichten des todo backends auf back4app back4app bietet ein verwaltetes parse backend, das die datenverwaltung für ihre anwendung vereinfacht in diesem abschnitt erstellen sie ein datenmodell, um aufgaben für ihre to do liste zu speichern erstellen ihrer backend anwendung melden sie sich bei ihrem back4app dashboard https //www back4app com/ an und klicken sie auf "erstellen sie eine neue app " geben sie einen namen für ihre anwendung an (z b todoblitzapp ) und wählen sie nodejs/parse als backend typ gehen sie zum "datenbank" > "browser" bereich, klicken sie auf "eine klasse erstellen" und wählen sie "benutzerdefiniert " nennen sie die klasse aufgabe und setzen sie die klassenberechtigungen so, dass öffentliches lesen und schreiben erlaubt ist (sie können diese einstellungen später anpassen) fügen sie die folgenden felder zur aufgabe klasse hinzu titel (string) – der titel der aufgabe beschreibung (string) – einzelheiten zur aufgabe abgeschlossen (boolean) – ob die aufgabe abgeschlossen ist fälligkeitsdatum (datum) – der fälligkeitstermin für die aufgabe klicken sie auf "speichern" um das schema zu erstellen integration von back4app mit blitz js um ihre blitz js app mit back4app zu verbinden, installieren sie das parse javascript sdk npm install parse als nächstes konfigurieren sie das parse sdk in ihrem blitz js projekt erstellen sie eine neue konfigurationsdatei (zum beispiel, src/parseclient js ) und initialisieren sie parse wie unten gezeigt ersetzen sie die platzhalter mit ihren back4app anmeldeinformationen aus app einstellungen > sicherheit & schlüssel // src/parseclient js 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; export default parse; sie können diese konfiguration jetzt in ihren blitz js abfragen und mutationen importieren, um mit ihrem backend zu interagieren frontend mit blitz js erstellen nachdem das backend eingerichtet ist, ist es zeit, die to do listen oberfläche in blitz js zu erstellen sie werden die integrierten abfragen und mutationen von blitz js verwenden, um crud operationen durchzuführen strukturierung ihrer seiten und api aufrufe in blitz js leben die seiten im src/pages verzeichnis öffne src/pages/index tsx und füge den folgenden code hinzu, um die seite einzurichten, aufgaben von back4app abzufragen und mutationen zum hinzufügen, umschalten und löschen von aufgaben zu definieren // src/pages/index tsx import layout from "src/core/layouts/layout" import { blitzpage } from "@blitzjs/next" import { usequery } from "@tanstack/react query" import parse from " /parseclient" import { usestate } from "react" const fetchtasks = async () => { const task = parse object extend("task") const query = new parse query(task) const results = await query find() return results map((task) => ({ id task id, task tojson() })) } const addtask = async (title string, description string) => { 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() } const toggletask = async (id string, currentstatus boolean) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) task set("completed", !currentstatus) await task save() } const deletetask = async (id string) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) await task destroy() } const home blitzpage = () => { const { data tasks, refetch, isloading } = usequery(\["tasks"], fetchtasks) const \[title, settitle] = usestate("") const \[description, setdescription] = usestate("") if (isloading) return \<div>loading \</div> return ( \<layout title="home"> \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={async (e) => { e preventdefault() await addtask(title, description) settitle("") setdescription("") await refetch() }} classname="form" \> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={async () => { await toggletask(task id, task completed) await refetch() }} \> {task completed ? "undo" "complete"} \</button> \<button onclick={async () => { await deletetask(task id) await refetch() }} \> delete \</button> \</div> )) )} \</div> \</div> \</layout> ) } export default home diese seite nutzt die abfrage hooks von tanstack, um aufgaben abzurufen und benutzeraktionen zu verarbeiten, was eine nahtlose integration mit ihrem back4app backend gewährleistet um sicherzustellen, dass die usequery funktioniert, müssen sie ihre gesamte anwendung in einen queryclientprovider einwickeln dies tun sie in der src/pages/ app tsx datei ersetzen sie den code in der src/pages/ app tsx datei durch den folgenden codeblock // src/pages/ app tsx import { errorfallbackprops, errorcomponent, errorboundary, appprops } from "@blitzjs/next" import react from "react" import { withblitz } from "src/blitz client" import { queryclient, queryclientprovider } from "@tanstack/react query" const queryclient = new queryclient() function rooterrorfallback({ error } errorfallbackprops) { return ( \<errorcomponent statuscode={(error as any)? statuscode || 400} title={error message || error name} /> ) } function myapp({ component, pageprops } appprops) { const getlayout = component getlayout || ((page) => page) return ( \<queryclientprovider client={queryclient}> \<errorboundary fallbackcomponent={rooterrorfallback}> {getlayout(\<component { pageprops} />)} \</errorboundary> \</queryclientprovider> ) } export default withblitz(myapp) globale stile hinzufügen um das grundlegende styling ihrer app zu definieren, fügen sie den codeblock zur css datei unter src/styles/globals css / src/styles/globals css / 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; 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; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items 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 ihre globalen stile, indem sie die folgende zeile in src/pages/ app tsx (oder ihre benutzerdefinierte app komponenten datei) hinzufügen / src/pages/ app tsx / import " /styles/globals css"; ihre blitz js app zeigt jetzt eine voll funktionsfähige to do liste, die mit back4app integriert ist containerisierung und bereitstellung ihrer blitz js app auf back4app die web bereitstellung von back4app bietet eine containerisierte umgebung, die den bereitstellungsprozess vereinfacht sie werden ihre blitz js app in einen docker container verpacken und nahtlos bereitstellen vorbereitung ihrer blitz js app für die produktion zuerst bauen sie ihre blitz js anwendung für die produktion blitz build erstellen einer dockerfile erstellen sie eine dockerfile im stammverzeichnis ihres projekts mit folgendem inhalt from node 18 arg database url arg port=3000 env database url ${database url} workdir /usr/src/app copy package json / run npm install run npm install g blitz copy run blitz build expose 3000 cmd \["blitz", "start", " p", "3000"] diese dockerfile baut ihr blitz js projekt und bereitet ein produktions image mit einer leichten node js laufzeit vor nachdem sie ihre dockerfile erstellt haben, erstellen sie eine dockerignore datei und kopieren sie ihre gitignore datei bauen und testen ihres docker containers bauen sie das docker image lokal docker build t todo blitz frontend führen sie den container aus, um ihn zu testen docker run p 3000 3000 todo blitz frontend besuchen sie http //localhost 3000 in ihrem browser, um zu überprüfen, ob ihre blitz js app korrekt ausgeführt wird bereitstellung ihrer app über back4app web deployment 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 melden sie sich dann bei back4app web deployment https //www back4app com/containers an und folgen sie diesen schritten klicken sie auf "neue app erstellen" und geben sie die projektdetails ein wählen sie github repository und autorisieren sie back4app wählen sie ihr todo blitz repository aus wählen sie dockerfile bereitstellung und überprüfen sie die build einstellungen klicken sie auf "bereitstellen" um den bereitstellungsprozess zu starten sobald die bereitstellung abgeschlossen ist, verwenden sie das back4app dashboard, um protokolle zu überwachen, builds zu verwalten und bei bedarf benutzerdefinierte domains einzurichten testen und debuggen ihrer anwendung stellen sie nach der bereitstellung sicher, dass ihre app wie erwartet funktioniert, indem sie überprüfung der api konnektivität verwenden sie die entwicklertools ihres browsers, um zu überprüfen, ob api anfragen zum hinzufügen, umschalten und löschen von aufgaben erfolgreich sind überprüfung der datenpersistenz fügen sie aufgaben über die benutzeroberfläche hinzu und aktualisieren sie die seite, um zu bestätigen, dass sie in der back4app datenbank gespeichert sind testen von crud operationen überprüfen sie, ob aufgaben umgeschaltet und gelöscht werden können, und überprüfen sie die konsolenprotokolle auf fehler umgang mit randfällen versuchen sie, ungültige eingaben zu übermitteln, um die robustheit ihrer validierungen zu testen best practices und optimierungstipps berücksichtigen sie die folgenden empfehlungen für eine sichere und effiziente anwendung optimieren sie api anfragen verwenden sie batch verarbeitung und beschränken sie die abgefragten felder, um die netzwerkbelastung zu reduzieren sichere umgebungsvariablen speichern sie sensible anmeldeinformationen (anwendungs id und javascript schlüssel) in einer sicheren env datei zugriffskontrolle implementieren verwenden sie dynamische acls, um sicherzustellen, dass nur autorisierte benutzer daten ändern können nutzen sie cloud code lagern sie komplexe logik in den back4app cloud code aus, um leistung und sicherheit zu verbessern fazit sie haben nun eine vollständige to do listen anwendung mit blitz js erstellt, die mit einem back4app backend integriert ist dieses tutorial hat sie durch die projektinitialisierung, die backend integration und die containerisierte bereitstellung geführt wenn sie vorankommen, ziehen sie in betracht, ihre app mit funktionen wie fortgeschrittener benutzerverwaltung, echtzeit updates und integrationen von drittanbietern zu erweitern für weitere einblicke erkunden sie die back4app dokumentation https //www back4app com/docs und blitz js ressourcen