Wie man eine CRUD-Anwendung mit Blazor baut?

übersicht dieser leitfaden wird sie durch den aufbau einer vollständigen crud (erstellen, lesen, aktualisieren, löschen) anwendung mit blazor führen in diesem tutorial konfigurieren sie ein back4app projekt, entwerfen ihr datenbankschema und integrieren ihr blazor frontend mit back4app über rest apis dieser prozess hilft ihnen, ein robustes backend zu etablieren, während sichergestellt wird, dass ihre webanwendung daten effizient verwalten kann zunächst richten sie ein back4app projekt mit dem titel basic crud app blazor , das als rückgrat ihres datenmanagementsystems dient als nächstes erstellen sie ein skalierbares datenbankdesign, indem sie detaillierte sammlungen und felder entweder manuell oder mit hilfe des back4app ai agenten festlegen danach nutzen sie die leistungsfähigkeit der back4app admin app—eine benutzerfreundliche drag and drop oberfläche—um ihre sammlungen mühelos zu verwalten schließlich verbinden sie ihr blazor frontend mit back4app über rest apis und sichern ihr backend mit angemessener zugriffskontrolle am ende dieses tutorials werden sie eine produktionsbereite webanwendung haben, die grundlegende crud operationen sowie benutzerauthentifizierung und sichere datenaktualisierungen unterstützt wichtige lernpunkte erstellen sie crud anwendungen, die datenoperationen nahtlos mit einem zuverlässigen backend verarbeiten erhalten sie einblicke in die erstellung eines skalierbaren backends und dessen integration mit einem blazor frontend nutzen sie die drag and drop funktionen der back4app admin app, um das datenmanagement zu vereinfachen erlernen sie bereitstellungstechniken, einschließlich docker containerisierung, um ihre anwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto und ein neues projekt eingerichtet haben besuchen sie erste schritte mit back4app https //www back4app com/docs/get started/new parse app wenn sie hilfe benötigen eine blazor entwicklungsumgebung verwenden sie visual studio oder visual studio code mit dem neuesten net sdk (version 6 oder höher) grundkenntnisse in c#, blazor und restful apis schauen sie sich die blazor dokumentation https //docs microsoft com/en us/aspnet/core/blazor an, falls erforderlich schritt 1 – erste projektkonfiguration ein neues back4app projekt einrichten melden sie sich bei ihrem back4app konto an wählen sie die schaltfläche „neue app“ von ihrem dashboard geben sie den projekttitel ein basic crud app blazor und folgen sie den anweisungen auf dem bildschirm, um den erstellungsprozess abzuschließen neues projekt erstellen nach der einrichtung wird ihr neues projekt auf ihrem dashboard angezeigt und bietet eine solide grundlage für die konfiguration ihres backends schritt 2 – entwurf ihres datenbankschemas erstellung ihres datenmodells für diese grundlegende crud anwendung müssen sie mehrere sammlungen erstellen nachfolgend finden sie beispiele für die sammlungen sowie die erforderlichen felder und datentypen, um ihre datenbank effizient einzurichten 1\ artikel sammlung feld datentyp zweck id objekt id automatisch generierte eindeutige kennung titel zeichenfolge der name oder titel des elements beschreibung zeichenfolge eine kurze zusammenfassung des artikels erstellt am datum der zeitstempel, als der artikel erstellt wurde aktualisiert am datum der zeitstempel, wann das element zuletzt geändert wurde 2\ benutzersammlung feld datentyp zweck id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge e mail adresse des benutzers passwort hash zeichenfolge verschlüsseltes passwort für sicheren login erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum zeitstempel der letzten kontaktualisierung sie können diese sammlungen manuell im back4app dashboard erstellen, indem sie eine neue klasse für jede sammlung einrichten und die erforderlichen spalten hinzufügen neue klasse erstellen sie können spalten definieren, indem sie einen datentyp auswählen, das feld benennen, standardwerte festlegen und bestimmen, ob das feld obligatorisch ist spalte erstellen einsatz des back4app ai agenten zur schemaerstellung der back4app ai agent vereinfacht die schemaerstellung direkt von ihrem dashboard aus durch die eingabe eines prompts, der ihre sammlungen und felder beschreibt, generiert der ai agent automatisch das erforderliche datenbankschema so nutzen sie den ai agenten zugriff auf den ai agenten melden sie sich bei ihrem back4app dashboard an und suchen sie den ai agenten in den einstellungen oder im hauptmenü definieren sie ihr datenmodell fügen sie einen beschreibenden prompt ein, der die sammlungen und deren felder auflistet überprüfen und bestätigen überprüfen sie das vorgeschlagene schema und wenden sie es auf ihr projekt an beispiel prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) die verwendung dieses ai agenten spart nicht nur zeit, sondern sorgt auch für eine konsistente und effiziente schemaeinrichtung schritt 3 – aktivierung der admin app & verwaltung von crud operationen einführung in die admin app die back4app admin app bietet eine no code , drag and drop oberfläche zur verwaltung ihrer backend daten dieses intuitive tool ermöglicht es ihnen, crud operationen mit leichtigkeit durchzuführen aktivierung der admin app navigieren sie zu dem „mehr“ menü auf ihrem back4app dashboard klicken sie auf „admin app“ und wählen sie dann „admin app aktivieren “ richten sie ihre admin anmeldeinformationen ein, indem sie einen ersten admin benutzer erstellen, der auch standardrollen und systemkollektionen festlegt admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre sammlungen und daten zu verwalten admin app dashboard durchführen von crud operationen mit der admin app innerhalb der admin app können sie datensätze erstellen klicken sie auf die schaltfläche „datensatz hinzufügen“ innerhalb einer sammlung (zum beispiel, artikel), um neue einträge hinzuzufügen datensätze lesen/aktualisieren klicken sie auf einen datensatz, um dessen details zu überprüfen oder seine felder zu ändern datensätze löschen entfernen sie einträge, die nicht mehr erforderlich sind diese einfache drag and drop oberfläche verbessert das datenmanagement erheblich schritt 4 – blazor mit back4app verbinden jetzt, da ihr backend konfiguriert ist, ist es an der zeit, ihr blazor frontend mit back4app zu integrieren verwendung von rest apis in blazor da das parse sdk nicht für blazor anwendbar ist, nutzen sie rest apis, um crud operationen durchzuführen in ihrer blazor anwendung verwenden sie den httpclient, um mit den rest endpunkten von back4app zu interagieren beispiel abrufen von elementen über rest erstellen sie einen dienst in ihrem blazor projekt, um elemente abzurufen zum beispiel // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } integrieren sie solche api aufrufe in ihre blazor komponenten, um crud operationen zu verwalten schritt 5 – sicherung ihres backends implementierung von zugriffskontrolllisten (acls) schützen sie ihre daten, indem sie acls auf ihren objekten festlegen zum beispiel, um ein privates element zu erstellen public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } konfigurieren von klassenebene berechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um sicherzustellen, dass nur autorisierte benutzer auf sensible daten zugreifen oder diese ändern können schritt 6 – verwaltung der benutzerauthentifizierung einrichten von benutzerkonten in blazor back4app nutzt die benutzerklasse von parse zur handhabung der authentifizierung in ihrer blazor app verwalten sie die benutzerregistrierung und anmeldung über rest aufrufe zum beispiel // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } ähnliche methoden können für die anmeldung und sitzungsverwaltung implementiert werden zusätzliche funktionen wie soziale anmeldungen, e mail verifizierung und passwortwiederherstellung können über das back4app dashboard eingerichtet werden schritt 7 – bereitstellung ihres blazor frontends die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihre blazor anwendung nahtlos zu hosten, indem sie ihren code aus einem github repository bereitstellen 7 1 erstellen ihres produktions builds öffnen sie ihr projektverzeichnis in einem terminal führen sie den veröffentlichungsbefehl aus dotnet publish c release dieser befehl generiert einen veröffentlichten ordner mit optimierten statischen dateien für ihre blazor app überprüfen sie den build bestätigen sie, dass der ausgabeverzeichnis die notwendigen dateien enthält (z b index html , javascript, css usw ) 7 2 organisieren und hochladen ihres codes ihr git repository sollte den vollständigen quellcode ihrer blazor anwendung umfassen eine beispielordnerstruktur könnte so aussehen basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md beispieldatei program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); commit und push zu github initialisiere git in deinem projektordner (falls noch nicht geschehen) git init füge deine dateien hinzu git add committe deine änderungen git commit m "initialer commit des blazor frontend quellcodes" erstelle ein github repository nenne es basic crud app blazor frontend push dein repository git remote add origin https //github com/your username/basic crud app blazor frontend git git push u origin main 7 3 integration deines repositories mit der webbereitstellung zugriff auf die webbereitstellungsoption öffnen sie ihr projekt in ihrem back4app dashboard ( basic crud app blazor ) und navigieren sie zum webbereitstellung bereich verbinden sie ihr github konto befolgen sie die anweisungen, um ihr github konto zu verknüpfen, damit back4app auf ihr repository zugreifen kann wählen sie das repository und den branch aus wählen sie das repository (z b basic crud app blazor frontend ) und den branch (z b main ), der ihren blazor code enthält 7 4 bereitstellungskonfiguration geben sie zusätzliche details an, wie build befehl wenn der veröffentlichte ordner nicht vorab generiert wurde, geben sie einen befehl wie dotnet publish c release ausgabeverzeichnis legen sie den ausgabepfad fest (zum beispiel, bin/release/net6 0/wwwroot ) umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen (wie api schlüssel) in der konfiguration hinzu 7 5 containerisierung ihrer blazor anwendung mit docker wenn sie docker für die bereitstellung bevorzugen, fügen sie eine dockerfile in ihr repository ein hier ist ein beispiel \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] wählen sie dann in ihren webbereitstellungseinstellungen die docker option aus, um ihre containerisierte anwendung bereitzustellen 7 6 starten ihrer anwendung initiieren sie die bereitstellung klicken sie auf die bereitstellen schaltfläche im back4app dashboard überwachen sie den build back4app wird ihren code von github abrufen, den build befehl bei bedarf ausführen und ihre app in einem container bereitstellen holen sie sich ihre url sobald der bereitstellungsprozess abgeschlossen ist, stellt back4app eine url für ihre gehostete blazor anwendung zur verfügung 7 7 bestätigen der bereitstellung öffnen sie die bereitgestellte url besuchen sie die url in einem browser, um ihre bereitgestellte app anzuzeigen testen sie die anwendung überprüfen sie, ob alle seiten korrekt geladen werden und ob crud operationen wie erwartet funktionieren fehlerbehebung bei bedarf verwenden sie die entwicklertools des browsers und überprüfen sie die bereitstellungsprotokolle auf back4app, um probleme zu diagnostizieren schritt 8 – zusammenfassung und weitere erkundung herzlichen glückwunsch! sie haben erfolgreich eine grundlegende crud anwendung mit blazor und back4app erstellt sie haben ein projekt mit dem titel basic crud app blazor , sammlungen für artikel und benutzer entworfen und die back4app admin app für eine nahtlose datenverwaltung genutzt darüber hinaus haben sie ihr blazor frontend mit back4app über rest apis integriert und robuste sicherheitsmaßnahmen angewendet zukünftige schritte erweitern sie ihr frontend verbessern sie ihre blazor app mit detaillierteren ansichten, suchfunktionen oder live benachrichtigungen fügen sie erweiterte funktionen hinzu erwägen sie die integration von cloud funktionen, drittanbieter integrationen oder rollenbasierten berechtigungen konsultieren sie zusätzliche ressourcen überprüfen sie die back4app dokumentation https //www back4app com/docs und andere fortgeschrittene tutorials, um ihre anwendung weiter zu optimieren und zu erweitern indem sie dieser anleitung folgen, haben sie nun die grundlage, um ein skalierbares und sicheres crud backend für ihre blazor anwendung mit back4app zu erstellen viel spaß beim programmieren!