Share
Laravel und React sind zwei beliebte Webentwicklungstechnologien, die zum Erstellen moderner Webanwendungen verwendet werden. Laravel ist ein prominentes serverseitiges PHP-Framework, während React eine clientseitige JavaScript-Bibliothek ist. Dieses Tutorial dient als Einführung in Laravel und React und kombiniert diese zu einer modernen Webanwendung.
In einer modernen Webanwendung hat der Server die Aufgabe, das Back-End über einige API-Endpunkte (Application Programming Interface) zu verwalten. Der Client sendet Anforderungen an diese Endpunkte und der Server gibt eine Antwort zurück. Der Server ist jedoch nicht darüber besorgt, wie der Client die Ansicht darstellt, was perfekt mit dem Prinzip der Trennung von Belangen übereinstimmt. Dank dieser Architektur können Entwickler robuste Anwendungen für das Web und auch für verschiedene Geräte erstellen.
In diesem Lernprogramm verwenden wir die neueste Version von Laravel, Version 5.5, um eine RESTful-Back-End-API zu erstellen. Das Frontend besteht aus Komponenten, die in React geschrieben sind. Wir werden eine einfallsreiche Produktliste erstellen. Der erste Teil des Tutorials konzentriert sich mehr auf die Laravel-Konzepte und das Backend. Lass uns anfangen.
Laravel ist ein PHP-Framework, das für das moderne Web entwickelt wurde. Es hat eine ausdrucksstarke Syntax, die die Konvention gegenüber dem Konfigurationsparadigma bevorzugt. Laravel bietet alle Funktionen, die Sie benötigen, um sofort mit einem Projekt beginnen zu können. Ich persönlich mag Laravel jedoch, weil dadurch die Entwicklung mit PHP zu einem völlig anderen Erlebnis und Workflow wird.
Auf der anderen Seite ist React eine beliebte JavaScript-Bibliothek, die von Facebook zum Erstellen von einseitigen Anwendungen entwickelt wurde. React hilft Ihnen dabei, Ihre Ansicht in Komponenten zu unterteilen, in denen jede Komponente einen Teil der Benutzeroberfläche der Anwendung beschreibt. Der komponentenbasierte Ansatz bietet den zusätzlichen Vorteil der Wiederverwendbarkeit und Modularität von Komponenten.
Wenn Sie für das Web entwickeln, neigen Sie möglicherweise dazu, eine einzige Codebase für Server und Client zu verwenden. Allerdings gibt nicht jedes Unternehmen dem Entwickler die Freiheit, eine Technologie seiner Wahl zu verwenden, und zwar aus guten Gründen. Die Verwendung eines JavaScript-Stacks für ein gesamtes Projekt ist die derzeitige Norm, aber es gibt nichts, was Sie daran hindert, zwei unterschiedliche Technologien für die Serverseite und die Clientseite auszuwählen.
Wie gut passen Laravel und React zusammen? Eigentlich ziemlich gut. Obwohl Laravel die Unterstützung für Vue.js, ein weiteres JavaScript-Framework, dokumentiert hat, werden wir React für das Frontend verwenden, da es populärer ist.
Bevor Sie beginnen, gehe ich davon aus, dass Sie grundlegende Kenntnisse der RESTful-Architektur und der Funktionsweise von API-Endpunkten besitzen. Wenn Sie bereits Erfahrungen mit React oder Laravel gesammelt haben, können Sie dieses Tutorial optimal nutzen.
Wenn Sie jedoch beide Frameworks noch nicht kennen, machen Sie sich keine Sorgen. Das Tutorial ist aus der Perspektive eines Anfängers geschrieben, und Sie sollten ohne Schwierigkeiten aufholen können. Den Quellcode für das Tutorial finden Sie unter GitHub.
Laravel verwendet Composer, um alle Abhängigkeiten zu verwalten. Laden Sie Composer herunter und installieren Sie ihn auf Ihrem Computer, bevor Sie mit Laravel beginnen. Sie müssen möglicherweise auch die Pfadumgebungsvariable konfigurieren, damit auf Composer global zugegriffen werden kann.
Führen Sie den folgenden Befehl aus, um das Laravel-Installationsprogramm herunterzuladen.
Komponist global erfordert "Laravel / Installer"
Wenn Sie das richtig konfiguriert haben $ PATH Variable und hinzugefügt ~ / .composer / vendor / bin In Ihrem Pfad sollten Sie in der Lage sein, ein neues Laravel-Projekt wie folgt zu generieren:
Laravel neuer PROJEKTNAME
Alternativ können Sie Composer verwenden, um ein neues Projekt ohne das Laravel-Installationsprogramm zu erstellen.
composer create-project - bevorzugter distel laravel / laravel blog
Wenn alles gut geht, sollten Sie Ihre Anwendung auf einem Entwicklungsserver unter bereitstellen können http: // localhost: 8000.
Php Handwerker dienen
Hinweis: Artisan ist ein Befehlszeilenprogramm, mit dem Sie bei der Arbeit mit Laravel nicht leben können. Artisan akzeptiert eine große Liste von Befehlen, mit denen Sie Code für Ihre Anwendung generieren können. Lauf php Handwerkerliste zu Alle verfügbaren handwerklichen Befehle anzeigen.
Ihre Bewerbung wird eine .env Datei im Stammverzeichnis. Hier werden alle umgebungsspezifischen Konfigurationsinformationen deklariert. Erstellen Sie eine Datenbank für Ihre Anwendung, falls Sie dies noch nicht getan haben, und fügen Sie die Datenbankdetails der hinzu .env Datei.
DB_CONNECTION = mysql DB_HOST = 127.0.0.1 DB_PORT = 3306 DB_DATABASE = sampledb DB_USERNAME = root DB_PASSWORD =
Laravel ist ein Framework, das der Model-View-Controller-Architektur (MVC) folgt. Im Großen und Ganzen hilft Ihnen MVC dabei, die Datenbankabfragen (das Modell) von der betreffenden Logik zu trennen, wie die Anforderungen verarbeitet werden sollen (der Controller) und wie das Layout dargestellt wird (die Ansicht). Das Bild unten zeigt die Funktionsweise einer typischen Laravel-Anwendung.
Laravels Architektur. Der Controller gibt die Antwort zurück und daher ist die Ansichtsebene nicht erforderlich.Da wir eine API mit Laravel erstellen, beschränken wir uns auf das Modell und den Controller. Im zweiten Teil dieses Tutorials werden wir unsere Optionen zum Erstellen der Ansicht überprüfen.
Wenn der Server eine HTTP-Anforderung empfängt, versucht Laravel, diese mit einer in einer der Routendateien registrierten Route abzugleichen. Alle Routendateien befinden sich im Routenverzeichnis. routen / web.php hostet die Route für das Webinterface, während routen / api.php hostet die Route für die API. Die Routen sind in registriert api.php wird mit vorangestellt / api (wie in localhost: 3000 / api). Wenn Sie dieses Verhalten ändern müssen, sollten Sie zur RouteServiceProvider Klasse in /app/Providers/RouteServiceProvider.php und dort Änderungen vornehmen.
Da wir eine Produktlisten-Anwendung erstellen, sind hier die Endpunkte für die API und die HTTP-Aktionen, die diesen Endpunkten zugeordnet sind.
Accentsconagua
/Produkte/: Alle Produkte abrufen./Produkt ID: Rufen Sie das Produkt ab, das dem entspricht Ich würde./Produkte: Erstellen Sie ein neues Produkt und fügen Sie es in die Datenbank ein./ products / id : Aktualisieren Sie ein vorhandenes Produkt, das dem entspricht Ich würde./ products / id: Löschen Sie das Produkt mit dem gegebenen Ich würde.Lassen Sie uns die Terminologie richtig machen. GET, POST, PUT und DELETE sind die HTTP-Verben (allgemein als HTTP-Methoden bezeichnet), die im Wesentlichen für die Erstellung eines RESTful-Diensts erforderlich sind. /Produkte ist der mit der Produktressource verknüpfte URI. Die HTTP-Methoden fordern den Server auf, die gewünschte Aktion für eine bestimmte Ressource auszuführen.
GET, POST, PUT und DELETE sind die am häufigsten verwendeten REST-AktionenMit dem Router können Sie Routen für eine Ressource sowie die HTTP-Methoden für diese Ressource angeben. Hier ist eine Beispielroutendatei, die hartcodierte Daten zurückgibt.
/ ** ** Grundrouten für einen RESTful-Dienst: ** ** Route :: get ($ uri, $ callback); ** Route :: post ($ uri, $ callback); ** Route :: put ($ uri, $ callback); ** Route :: delete ($ uri, $ callback); ** ** / Route :: get ('products', function () Antwort zurückgeben (['Product 1', 'Product 2', 'Product 3'], 200);); Route :: get ('products / product', Funktion ($ productId) Rückmeldung () -> json (['productId' => "$ productId"], 200);); Route :: post ('products', function () return response () -> json (['message' => 'Create success'], 201);); Route :: put ('products / product', function () return response () -> json (['message' => 'Update success'], 200);); Route :: delete ('products / product'), function () return response () -> json (null, 204););Wenn Sie sicherstellen möchten, dass die Routen wie erwartet funktionieren, sollten Sie ein Tool wie POSTMAN oder curl verwenden.
Die Produktressource benötigt ein Modell, das mit der Datenbank interagieren kann. Das Modell ist die Ebene, die sich auf der Datenbank befindet und den gesamten datenbankspezifischen Jargon verbirgt. Laravel verwendet Eloquent ORM zur Modellierung der Datenbank.
Das in Laravel enthaltene Eloquent ORM bietet eine schöne, einfache ActiveRecord-Implementierung für die Arbeit mit Ihrer Datenbank. Jede Datenbanktabelle hat ein entsprechendes "Modell", das zur Interaktion mit dieser Tabelle verwendet wird. Mit Modellen können Sie Daten in Ihren Tabellen abfragen und neue Datensätze in die Tabelle einfügen.
- Laravel Docs
Was ist mit der Definition des Datenbankschemas? Dafür sorgt die Migration von Laravel. Artisan verfügt über einen Migrationsbefehl, mit dem Sie Ihr Schema definieren und zu einem späteren Zeitpunkt inkrementell aktualisieren können. Erstellen wir ein Modell und eine Migration für die Product-Entität.
$ php Handwerker machen: Modell Produkt -m
Hinweis: Es gibt viele handwerkliche Befehle und es ist leicht, sich zu verirren. Daher enthält jeder Handwerksbefehl einen Hilfsbildschirm, auf dem zusätzliche Informationen wie die verfügbaren Optionen und Argumente angezeigt werden. Um zur Hilfeseite zu gelangen, muss der Name des Befehls mit vorangestellt werden Hilfe. Führen Sie den folgenden Hilfebefehl aus, um zu sehen, was -m Option steht für: $ php Handwerker-Hilfe make: model.
Hier ist die Migrationsdatei generiert.
Inkremente ('id'); $ table-> timestamps (); ); public function down () Schema :: dropIfExists ('products'); Das oben Die Methode wird während der Migration neuer Tabellen und Spalten in die Datenbank aufgerufen, während die Nieder Methode wird beim Zurücksetzen einer Migration aufgerufen. Wir haben ein Schema für eine Tabelle mit drei Zeilen erstellt: Ich würde, hergestellt in, und aktualisiert am. Das $ table-> timestamps () Methode ist für die Aufrechterhaltung der hergestellt in und aktualisiert am Säulen. Fügen wir der Schemadefinition ein paar weitere Zeilen hinzu.
/ * Fügen Sie Spalten für Titel, Beschreibung, Preis, Verfügbarkeit hinzu. * / Public function up () Schema :: create ('products', function (Blueprint $ table) $ table-> increments ('id'); $ table -> Zeitstempel (); $ table-> string ('title'); $ table-> text ('description'); $ table-> integer ('price'); $ table-> boolean ('Verfügbarkeit'); ); Wir haben das Schema mit vier neuen Spalten aktualisiert. Der Schema-Generator von Laravel unterstützt eine Vielzahl von Spaltentypen wie Schnur, Text, ganze Zahl, boolean, usw.
Um die ausstehenden Migrationen auszuführen, müssen Sie den folgenden Befehl ausführen:
PHP Handwerker migrieren
Konventionell geht Laravel davon aus, dass die Produkt Modell ist mit der Produkte Tabelle. Wenn Sie das Modell jedoch mit einem benutzerdefinierten Tabellennamen verknüpfen müssen, können Sie das verwenden $ table Eigenschaft, um den Namen der Tabelle anzugeben. Das Modell wird dann einer benannten Tabelle zugeordnet custom_products.
protected $ table = 'custom_products';
Aber wir werden die Dinge einfach halten und zur Konvention gehen. Das erzeugte Produktmodell befindet sich im app / Verzeichnis. Die Modellklasse scheint zwar leer zu sein, sie verfügt jedoch über verschiedene Query Builder-Methoden, mit denen Sie die Datenbank abfragen können. Zum Beispiel können Sie verwenden Produkt :: all () alle Produkte abrufen oder Produkt :: find (1) ein bestimmtes Produkt mit der ID 1 abrufen.
Laravel-Modelle verfügen über einen integrierten Schutzmechanismus gegen die Sicherheitsanfälligkeit durch Massenzuweisungen. Das befüllbar Diese Eigenschaft wird verwendet, um die Attributnamen zu deklarieren, die sicher mit Massen zugewiesen werden können.
/ * Hinzufügen der ausfüllbaren Eigenschaft zum Produktmodell * / protected $ fillable = ['Titel', 'Beschreibung', 'Preis', 'Verfügbarkeit'];
Der Code oben listet die Titel, Beschreibung, Preis und Verfügbarkeit Attribute und behandelt sie als Masse zuordenbar. Wir können jetzt die verwenden Produkt :: erstellen Methode, um neue Zeilen in die Produkttabelle einzufügen.
Mit Laravel können Sie Ihre Entwicklungs- und Produktionsdatenbank mit Dummy-Daten füllen, die Sie dann zum Testen Ihrer API-Endpunkte verwenden können. Sie können eine Seed-Klasse erstellen, indem Sie den folgenden Artisan-Befehl ausführen.
$ php Handwerker machen: Sämaschine ProdukteTableSeeder
Die generierten Seeder-Dateien werden im Ordner gespeichert Datenbank / Samen Verzeichnis.
Um die Dummy-Daten zu generieren, könnten Sie so etwas verwenden str_random (10) das gibt eine zufällige Zeichenfolge zurück. Wenn Sie jedoch Daten benötigen, die nahe genug an den tatsächlichen Daten liegen, sollten Sie so etwas wie die Faker-Bibliothek verwenden. Faker ist eine Bibliothek eines Drittanbieters, die mit dem Laravel-Framework zur Erzeugung gefälschter Daten geliefert wird.
Verwenden Sie App \ Product; Die Klasse ProductsTableSeeder erweitert den Seeder public function run () $ faker = \ Faker \ Factory :: create (); // Erzeuge 50 Produktdatensätze für ($ i = 0; $ i < 50; $i++) Product::create([ 'title' => $ faker-> title, 'description' => $ faker-> Absatz, 'price' => $ faker-> randomNumber (2), 'Availability' => $ faker-> boolean (50)]);
Ausführen der db: Samen handwerklicher Befehl zum Auffüllen der Datenbank.
$ php Handwerker-Datenbank: seed --class = ProductsTableSeeder
Kommen wir zurück zu routen / api.php und füllen Sie die fehlenden Teile aus.
/ ** ** Grundrouten für einen RESTful-Dienst: ** Route :: get ($ uri, $ callback); ** Route :: post ($ uri, $ callback); ** Route :: put ($ uri, $ callback); ** Route :: delete ($ uri, $ callback); ** * / Route :: get ('products', function () Rückmeldung (Product :: all (), 200);); Route :: get ('products / product', Funktion ($ productId) Rückmeldung (Product :: find ($ productId), 200);); Route :: post ('products', function (Request $ request) $ resp = Product :: create ($ request-> all ()); return $ resp;); Route :: put ('products / product', Funktion (Request $ request, $ productId) $ product = Produkt :: findOrFail ($ productId); $ product-> update ($ request-> all ()); $ Produkt zurückgeben;); Route :: delete ('products / product'), Funktion ($ productId) Product :: find ($ productId) -> delete (); return 204;);Die Routendatei enthält derzeit die Logik zum Weiterleiten und Verarbeiten von Anforderungen. Wir können die Anforderungsbehandlungslogik in eine Controller-Klasse verschieben, damit unser Code besser organisiert und lesbarer ist. Lassen Sie uns zuerst eine Controller-Klasse generieren.
$ php Handwerker machen: Controller ProductsController
Die Controller-Klasse umfasst verschiedene Methoden (Indexieren, Anzeigen, Speichern, Aktualisieren und Löschen), die verschiedenen HTTP-Aktionen entsprechen. Ich habe die Anforderungsbehandlungslogik von der Route zur Steuerung verschoben.
alles()); Rückantwort () -> Json ($ product, 201); public function update (Anfrage $ request, Produkt $ product) $ product-> update ($ request-> all ()); Rückantwort () -> Json ($ product, 200); öffentliche Funktion delete (Product $ product) $ product-> delete (); Antwort zurücksenden () -> json (null, 204);
/ ** ** Grundrouten für einen RESTful-Dienst: ** Route :: get ($ uri, $ callback); ** Route :: post ($ uri, $ callback); ** Route :: put ($ uri, $ callback); ** Route :: delete ($ uri, $ callback); ** * / Route :: get ('products', 'ProductsController @ index'); Route :: get ('products / product', 'ProductsController @ show'); Route :: post ('products', 'ProductsController @ store'); Route :: put ('products / product', 'ProductsController @ update'); Route :: delete ('products / product', 'ProductsController @ delete'); Wenn Sie es nicht bemerkt haben, habe ich eine Instanz von Product in die Controller-Methoden eingefügt. Dies ist ein Beispiel für die implizite Bindung von Laravel. Laravel versucht, mit dem Namen der Modellinstanz übereinzustimmen Produkt $ Produkt mit dem URI-Segmentnamen Produkt. Wenn eine Übereinstimmung gefunden wird, wird eine Instanz des Produktmodells in die Controller-Aktionen eingefügt. Wenn die Datenbank über kein Produkt verfügt, wird ein Fehler 404 zurückgegeben. Das Endergebnis ist dasselbe wie zuvor, jedoch mit weniger Code.
Öffnen Sie POSTMAN und die Endpunkte für das Produkt sollten funktionieren. Stellen Sie sicher, dass Sie die haben Akzeptieren Sie: application / json Header aktiviert.
Wenn Sie zu einer nicht vorhandenen Ressource wechseln, werden Sie Folgendes sehen.
Das NotFoundHTTPException zeigt Laravel den 404-Fehler an. Wenn Sie möchten, dass der Server stattdessen eine JSON-Antwort zurückgibt, müssen Sie das Standardverhalten der Ausnahmebehandlung ändern. Laravel verfügt über eine Handler-Klasse für Ausnahmebehandlung unter app / Ausnahmen / Handler.php. Die Klasse hat hauptsächlich zwei Methoden: Bericht() und machen(). Das Bericht Eine Methode ist für das Melden und Protokollieren von Ausnahmeereignissen hilfreich, während die Rendermethode verwendet wird, um eine Antwort zurückzugeben, wenn eine Ausnahme auftritt. Aktualisieren Sie die Render-Methode, um eine JSON-Antwort zurückzugeben:
public function render ($ request, Exception $ exception) if ($ Ausnahmeinstanzvon \ Illuminate \ Database \ Eloquent \ ModelNotFoundException) return response () -> json (['message' => 'Ressource nicht gefunden'], 404) ; return parent :: render ($ request, $ exception);
Laravel ermöglicht es uns auch, die eingehenden HTTP-Anforderungen mithilfe einer Reihe von Überprüfungsregeln zu überprüfen und bei einer fehlgeschlagenen Überprüfung automatisch eine JSON-Antwort zurückzugeben. Die Logik für die Validierung wird im Controller abgelegt. Das Illuminate \ Http \ Request object bietet eine validate-Methode, mit der wir die Validierungsregeln definieren können. Fügen wir der Speichermethode einige Validierungsprüfungen hinzu.
Öffentlicher Funktionsspeicher (Request $ request) $ this-> validate ($ request, ['title' => 'required | unique: products | max: 255', 'description' => 'required', 'price' => 'Ganzzahl', 'Verfügbarkeit' => 'Boolean',]); $ product = Product :: create ($ request-> all ()); Rückantwort () -> Json ($ product, 201);
Wir haben jetzt eine funktionierende API für eine Produktlistungsanwendung. Der API fehlen jedoch grundlegende Funktionen wie die Authentifizierung und die Beschränkung des Zugriffs auf nicht autorisierte Benutzer. Laravel unterstützt die Authentifizierung sofort und der Aufbau einer API ist relativ einfach. Ich empfehle Ihnen, die Authentifizierungs-API als Übung zu implementieren.
Für diejenigen unter Ihnen, die entweder gerade mit Laravel beginnen oder Ihr Wissen, Ihre Site oder Anwendung mit Erweiterungen erweitern möchten, haben wir eine Reihe von Dingen, die Sie auf dem Envato-Markt studieren können.
Jetzt, da wir mit dem Back-End fertig sind, werden wir uns auf die Front-End-Konzepte konzentrieren. Bleiben Sie dran für den zweiten Teil der Serie. Teilen Sie Ihre Gedanken in den Kommentaren mit.
