Erstellen Sie eine React App mit einem Laravel RESTful Back End: Teil 1, Laravel 5.5 API

() translation by (you can also view the original English article)

Laravel und React sind zwei beliebte Web-Entwicklungstechnologien, die für den Aufbau moderner Web-Anwendungen verwendet werden. Laravel ist prominent ein serverseitiges PHP-Framework, während React eine clientseitige JavaScript-Bibliothek ist. Dieses Tutorial dient als Einführung in Laravel und React und kombiniert sie zu einer modernen Webanwendung.

Dieses Lernprogramm dient als Einführung in Laravel und React und kombiniert diese in einer modernen Webanwendung. Der Server hat eine begrenzte Aufgabe, das Back-End über einige API (Application Programming Interface) -Endpunkte zu verwalten. Der Client sendet Anforderungen an diese Endpunkte, und der Server gibt eine Antwort zurück. Erstellen Sie eine moderne Webanwendung.... Der Server kümmert sich jedoch nicht darum, wie der Client die Ansicht rendert, was im Einklang mit dem Grundsatz der Trennung von Interessen steht. Diese Architektur ermöglicht es Entwicklern, robuste Anwendungen für das Web und für verschiedene Geräte zu erstellen.

In diesem Lernprogramm verwenden wir die neueste Version von Laravel, Version 5.5, um eine REST-konforme Back-End-API zu erstellen. Das Frontend wird aus Komponenten bestehen, die in React geschrieben sind. Wir werden eine findige Produktlistenanwendung erstellen. Der erste Teil des Tutorials wird sich mehr auf die Laravel-Konzepte und das Backend konzentrieren. Lass uns anfangen.

Einführung

Laravel ist ein PHP-Framework, das für das moderne Web entwickelt wurde. Es hat eine ausdrucksstarke Syntax, die das Konvention-über-Konfiguration-Paradigma bevorzugt. Laravel verfügt über alle Funktionen, die Sie benötigen, um mit einem Projekt sofort loslegen zu können. Aber persönlich mag ich Laravel, weil es die Entwicklung mit PHP in eine völlig andere Erfahrung und einen anderen Workflow verwandelt.

Auf der anderen Seite ist React eine beliebte JavaScript-Bibliothek, die von Facebook für den Aufbau von Single-Page-Anwendungen entwickelt wurde. Mit React können Sie Ihre Ansicht in Komponenten zerlegen, in denen jede Komponente einen Teil der Benutzeroberfläche der Anwendung beschreibt. Der komponentenbasierte Ansatz hat den zusätzlichen Vorteil der Wiederverwendbarkeit und Modularität von Komponenten.

Warum Laravel und Reagieren?

Wenn Sie für das Web entwickeln, möchten Sie möglicherweise eine einzige Codebasis für den Server und den Client verwenden. Jedoch gibt nicht jedes Unternehmen dem Entwickler die Freiheit, eine Technologie seiner Wahl zu verwenden, und das aus guten Gründen. Die Verwendung eines JavaScript-Stacks für ein gesamtes Projekt ist die aktuelle Norm, aber nichts hindert Sie daran, zwei verschiedene Technologien für die Server- und die Client-Seite auszuwählen.

Wie passen Laravel und React zusammen? Ziemlich gut, in der Tat. Obwohl Laravel dies für Vue.js unterstützt hat, was ein weiteres JavaScript-Framework ist, werden wir React für das Front-End verwenden, da es beliebter ist.

Voraussetzungen

Bevor ich anfange, gehe ich davon aus, dass Sie ein grundlegendes Verständnis der RESTful-Architektur und der Funktionsweise von API-Endpunkten haben. Wenn Sie bereits Erfahrung mit React oder Laravel haben, können Sie dieses Tutorial optimal nutzen.

Wenn Sie mit beiden Frameworks jedoch noch nicht vertraut sind, machen Sie sich keine Sorgen. Das Tutorial ist aus der Perspektive eines Anfängers geschrieben, und Sie sollten in der Lage sein, ohne viel Mühe aufzuholen. Sie können den Quellcode für das Tutorial über GitHub finden.

Installieren und Einrichten Ihres Laravel-Projekts

Laravel verwendet Composer, um alle Abhängigkeiten zu verwalten. Bevor Sie also mit Laravel beginnen, laden Sie Composer auf Ihrem Computer herunter und installieren Sie ihn. Sie müssen möglicherweise auch die Pfadumgebungsvariable konfigurieren, sodass Composer global verfügbar ist.

Führen Sie den folgenden Befehl aus, um das Laravel-Installationsprogramm herunterzuladen.

1	composer global require "laravel/installer"

Wenn Sie die Variable $PATH korrekt konfiguriert und ~/.de/poker/vendor/bin in Ihren Pfad eingefügt haben, sollten Sie in der Lage sein, ein neues Laravel-Projekt wie folgt zu generieren:

1	laravel new PROJECT-NAME

Alternativ können Sie Composer verwenden, um ein neues Projekt ohne das Laravel-Installationsprogramm zu erstellen.

1	composer create-project --prefer-dist laravel/laravel blog

Wenn alles gut geht, sollten Sie Ihre Anwendung auf einem Entwicklungsserver unter http://localhost:8000 bereitstellen können.

1	php artisan serve

Hinweis: Artisan ist ein Befehlszeilentool, mit dem Sie während 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. Führen Sie php artisan list aus, um alle verfügbaren Handwerkerbefehle anzuzeigen.

Konfigurieren der Umgebung

Ihre Anwendung wird eine .env-Datei im Stammverzeichnis enthalten. Alle umgebungsspezifischen Konfigurationsinformationen werden hier deklariert. Erstellen Sie eine Datenbank für Ihre Anwendung, falls noch nicht geschehen, und fügen Sie die Datenbankdetails in die .env-Datei ein.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sampledb
DB_USERNAME=root
DB_PASSWORD=

Modelle, Routen und Controller verstehen

Laravel ist ein Framework, das der Model-View-Controller (MVC) Architektur folgt. Grob gesagt, MVC hilft Ihnen, die Datenbankabfragen (das Modell) von der Logik zu trennen, die mit der Verarbeitung der Anforderungen (Controller) und der Darstellung des Layouts (View) zusammenhängt. Das folgende Bild zeigt die Funktionsweise einer typischen Laravel-Anwendung.

Overview of Laravels architecture for building RESTful API endpoints — Laravels Architektur. Der Controller gibt die Antwort zurück und daher wird die Ansichtsschicht nicht benötigt.

Da wir eine API mit Laravel erstellen, beschränken wir uns auf das Modell und den Controller. Wir werden unsere Optionen zum Erstellen der Ansicht im zweiten Teil dieses Tutorials überprüfen.

The Router

Wenn der Server eine HTTP-Anforderung empfängt, versucht Laravel, diese mit einer Route zu verknüpfen, die in einer der Routendateien registriert ist. Alle Routendateien befinden sich im Verzeichnis routes. routes/web.php hostet die Route für das Webinterface, während routes/api.php die Route für das API hostet. Die in api.php registrierten Routen haben das Präfix /api(wie in localhost: 3000 / api). Wenn Sie dieses Verhalten ändern müssen, sollten Sie die RouteServiceProvider-Klasse in /app/Providers/RouteServiceProvider.php aufrufen und dort Änderungen vornehmen.

Da wir eine Produktlistenanwendung erstellen, sind hier die Endpunkte für die API und die HTTP-Aktionen, die diesen Endpunkten zugeordnet sind.

GET /products/: Abrufen aller Produkte.
GET /product/{id}: Abrufen des Produkts, das der id entspricht.
POST /products: Erstellen Sie ein neues Produkt und fügen Sie es in die Datenbank ein.
PUT /products/{id}: Aktualisiert ein vorhandenes Produkt, das der id entspricht.
DELETE /products/{id}: Löschen Sie das Produkt mit der angegebenen id.

Lass uns die Terminologie richtig machen. GET, POST, PUT und DELETE sind die HTTP-Verben (im Volksmund als HTTP-Methoden bekannt), die im Wesentlichen für die Erstellung eines RESTful-Dienstes benötigt werden. /products ist der URI, der der Produktressource zugeordnet ist. Die HTTP-Methoden fordern den Server auf, die gewünschte Aktion für eine bestimmte Ressource auszuführen.

HTTP actions acting on the Product resource — GET, POST, PUT und DELETE sind die gebräuchlichsten REST-Aktionen

Mit dem Router können Sie Routen für eine Ressource zusammen mit den HTTP-Methoden deklarieren, die diese Ressource als Ziel haben. Hier ist eine Beispiel-Routes-Datei, die einige hartcodierte Daten zurückgibt.

routes/api.php

/**
** Basic Routes for a RESTful service:
**
** Route::get($uri, $callback);
** Route::post($uri, $callback);
** Route::put($uri, $callback);
** Route::delete($uri, $callback);
**
**/

Route::get('products', function () {
    return response(['Product 1', 'Product 2', 'Product 3'],200);
});

Route::get('products/{product}', function ($productId) {
    return response()->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 überprüfen möchten, ob die Routen wie erwartet funktionieren, sollten Sie ein Tool wie POSTMAN oder curl verwenden.

Das Produktmodell

Die Produktressource benötigt ein Modell, das mit der Datenbank interagieren kann. Model ist die Ebene, die über der Datenbank liegt und alle datenbankspezifischen Begriffe versteckt. Laravel verwendet Eloquent ORM für die 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? Laravels Migration kümmert sich darum. Artisan verfügt über einen Migrationsbefehl, mit dem Sie Ihr Schema definieren und zu einem späteren Zeitpunkt schrittweise aktualisieren können. Erstellen Sie ein Modell und eine Migration für die Product-Entität.

1	$ php artisan make:model Product -m

Hinweis: Es gibt viele Artisan-Befehle, und es ist leicht, sich zu verirren. Jeder Handwerkerbefehl enthält also einen Hilfsbildschirm, auf dem zusätzliche Informationen wie die verfügbaren Optionen und Argumente angezeigt werden. Um auf die Hilfeseite zu gelangen, sollte der Name des Befehls mit help vorangestellt werden. Führen Sie den folgenden Hilfebefehl aus, um zu sehen, wofür die Option -m steht: $php artisan help make:model.

Hier ist die Migrationsdatei generiert.

database/migrations/timestamp_create_products_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration
{
  
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
        });
    }

  
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Die up-Methode wird aufgerufen, während neue Tabellen und Spalten in die Datenbank migriert werden, während die down-Methode beim Zurücksetzen einer Migration aufgerufen wird. Wir haben ein Schema für eine Tabelle mit drei Zeilen erstellt: id, created_at und updated_at. Die Methode $table->timestamps()ist verantwortlich für die Pflege der Spalten created_at und updated_at. Fügen wir der Schemadefinition noch ein paar Zeilen hinzu.

   /* Let's add columns for title, description, price, availability */
   
   public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
            $table->string('title');
            $table->text('description');
            $table->integer('price');
            $table->boolean('availability');
        });
    }

Wir haben das Schema mit vier neuen Spalten aktualisiert. Laravels Schema Builder unterstützt eine Vielzahl von Spaltentypen wie string, text, integer, boolean usw.

Um die ausstehenden Migrationen auszuführen, müssen Sie den folgenden Befehl ausführen:

1	php artisan migrate

Per Konvention geht Laravel davon aus, dass das Product -Modell der Tabelle products zugeordnet ist. Wenn Sie das Modell jedoch einem benutzerdefinierten Tabellennamen zuordnen müssen, können Sie die Eigenschaft $table verwenden, um den Namen der Tabelle zu deklarieren. Das Modell wird dann einer Tabelle namens custom_products zugeordnet.

1	protected $table = 'custom_products';

Aber wir werden die Dinge einfach halten und mit der Konvention gehen. Das generierte Produktmodell befindet sich im Verzeichnis app/. Obwohl die Modellklasse möglicherweise leer erscheint, ist sie mit verschiedenen Query Builder-Methoden ausgestattet, mit denen Sie die Datenbank abfragen können. Sie können beispielsweise Product::all() verwenden, um alle Produkte abzurufen, oder Product::find(1), um ein bestimmtes Produkt mit der ID 1 abzurufen.

Laravel-Modelle verfügen über einen integrierten Schutzmechanismus gegen Massenzuverlässigkeit. Die fillable-Eigenschaft wird verwendet, um die Attributnamen zu deklarieren, die sicher einer Masse zugewiesen werden können.

app/Product.php

1	/* Add the fillable property into the Product Model */
2
3	protected $fillable = ['title', 'description', 'price', 'availability'];

Der obige Code führt die Attribute title, description, price und availability auf die Whitelist und behandelt sie als massenzuweisbar. Wir können jetzt die Product::create-Methode verwenden, um neue Zeilen in die products-Tabelle einzufügen.

Datenbank Seeding

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.

1	$ php artisan make:seeder ProductsTableSeeder

Die generierten Sämaschinen-Dateien werden im Verzeichnis database/ seeds abgelegt.

Um die Dummy-Daten zu generieren, könnten Sie etwas wie str_random(10) verwenden, das eine zufällige Zeichenfolge zurückgibt. Wenn Sie jedoch Daten benötigen, die den tatsächlichen Daten nahe genug sind, sollten Sie etwas wie die Faker-Bibliothek verwenden. Faker ist eine Drittanbieter-Bibliothek, die mit dem Laravel-Framework zur Generierung gefälschter Daten ausgeliefert wird.

database/seeds/ProductsTableSeeder.php

use App\Product;

class ProductsTableSeeder extends Seeder
{
    public function run()
    {

        $faker = \Faker\Factory::create();

        // Create 50 product records
        for ($i = 0; $i < 50; $i++) {
            Product::create([
                'title' => $faker->title,
                'description' => $faker->paragraph,
                'price' => $faker->randomNumber(2),
                'availability' => $faker->boolean(50)
            ]);
        }
    }
}

Führen Sie den Befehl db:seed artisan aus, um die Datenbank zu füllen.

1	$ php artisan db:seed --class=ProductsTableSeeder

Lass uns zurück zu routes / api.php gehen und die fehlenden Teile ausfüllen.

routes/api.php

/**
**Basic Routes for a RESTful service:
**Route::get($uri, $callback);
**Route::post($uri, $callback);
**Route::put($uri, $callback);
**Route::delete($uri, $callback);
**
*/
Route::get('products', function () {
    return response(Product::all(),200);
});

Route::get('products/{product}', function ($productId) {
    return response(Product::find($productId), 200);
});
 

Route::post('products', function(Request $request) {
   $resp = Product::create($request->all());
    return $resp;

});

Route::put('products/{product}', function(Request $request, $productId) {
    $product = Product::findOrFail($productId);
    $product->update($request->all());
    return $product;
});

Route::delete('products/{product}',function($productId) {
	Product::find($productId)->delete();

    return 204;

});

Der Controller

Die Routendatei enthält derzeit die Logik für das Routing und die Bearbeitung von Anfragen. Wir können die Anforderungsbehandlungslogik in eine Controller-Klasse verschieben, sodass unser Code besser organisiert und besser lesbar ist. Lassen Sie uns zuerst eine Controller-Klasse generieren.

1	$ php artisan make:controller ProductsController

Die Controller-Klasse besteht aus verschiedenen Methoden (index, show, store, update und delete), die verschiedenen HTTP-Aktionen entsprechen. Ich habe die Request-Handling-Logik von der Route zum Controller verschoben.

app/HTTP/Controllers/ProductsController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;

class ProductsController extends Controller
{

    public function index()
	{
	    return Product::all();
	}

	public function show(Product $product)
	{
	    return $product;
	}

	public function store(Request $request)
	{
	    $product = Product::create($request->all());

	    return response()->json($product, 201);
	}

	public function update(Request $request, Product $product)
	{
	    $product->update($request->all());

	    return response()->json($product, 200);
	}

	public function delete(Product $product)
	{
	    $product->delete();

	    return response()->json(null, 204);
	}

}

routes/api.php

/**
**Basic Routes for a RESTful service:
**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 nicht bemerkt haben, habe ich eine Instanz des Produkts in die Controller-Methoden injiziert. Dies ist ein Beispiel für die implizite Bindung von Laravel. Laravel versucht, den Modellinstanznamen Product$product mit dem URI-Segmentnamen {product} abzugleichen. Wenn eine Übereinstimmung gefunden wird, wird eine Instanz des Produktmodells in die Controller-Aktionen eingefügt. Wenn die Datenbank kein Produkt enthält, wird ein 404-Fehler zurückgegeben. Das Endergebnis ist das gleiche wie zuvor, aber mit weniger Code.

Öffnen Sie POSTMAN und die Endpunkte für das Produkt sollten funktionieren. Stellen Sie sicher, dass der Header "Accept:application/json" aktiviert ist.

Validierung und Ausnahmebehandlung

Wenn Sie zu einer nicht vorhandenen Ressource wechseln, werden Sie Folgendes sehen.

The error page displayed for the NotFoundHTTPException

Die NotFoundHTTPException ist, wie Laravel den 404-Fehler anzeigt. Wenn der Server stattdessen eine JSON-Antwort zurückgeben soll, müssen Sie das standardmäßige Verhalten bei der Ausnahmebehandlung ändern. Laravel verfügt über eine Handler-Klasse, die der Ausnahmebehandlung in der app/Exceptions/Handler.php gewidmet ist. Die Klasse hat hauptsächlich zwei Methoden: report() und render(). Die report-Methode eignet sich zum Melden und Protokollieren von Ausnahmeereignissen, während die Rendermethode zum Zurückgeben einer Antwort verwendet wird, wenn eine Ausnahme auftritt. Aktualisieren Sie die Rendermethode, um eine JSON-Antwort zurückzugeben:

app/Exceptions/Handler.php

public function render($request, Exception $exception)
  {
    
      if ($exception instanceof \Illuminate\Database\Eloquent\ModelNotFoundException) 
      {
       return response()->json([
            'message' => 'Resource not found'
        ], 404);
      }
      
      return parent::render($request, $exception);
  }

Laravel ermöglicht es uns auch, die eingehenden HTTP-Anforderungen mithilfe einer Reihe von Validierungsregeln zu validieren und automatisch eine JSON-Antwort zurückzugeben, wenn die Validierung fehlgeschlagen ist. Die Logik für die Validierung wird in der Steuerung platziert. Das Illuminate\Http\Request-Objekt stellt eine Validierungsmethode bereit, mit der wir die Validierungsregeln definieren können. Fügen wir der Speichermethode einige Validierungsprüfungen hinzu.

app/HTTP/Controllers/ProductsController.php

public function store(Request $request)
    {
		$this->validate($request, [
        'title' => 'required|unique:products|max:255',
        'description' => 'required',
        'price' => 'integer',
        'availability' => 'boolean',
    ]);
	    $product = Product::create($request->all());

	    return response()->json($product, 201);
	}

Zusammenfassung

Wir haben jetzt eine funktionierende API für eine Produktlistanwendung. Der API fehlen jedoch grundlegende Funktionen wie Authentifizierung und Einschränkung des Zugriffs auf nicht autorisierte Benutzer. Laravel unterstützt sofort die Authentifizierung und der Aufbau einer API ist relativ einfach. Ich ermutige Sie, die Authentifizierungs-API als Übung zu implementieren.

Für diejenigen unter Ihnen, die gerade mit Laravel anfangen oder Ihr Wissen, Ihre Website oder Ihre Anwendung mit Erweiterungen erweitern möchten, haben wir eine Vielzahl von Dingen, die Sie auf Envato Market studieren können.

Jetzt, wo wir mit dem Backend fertig sind, werden wir uns auf die Front-End-Konzepte konzentrieren. Bleib dran für den zweiten Teil der Serie. Teile deine Gedanken in den Kommentaren.