Construisez une application React avec une fin de Laravel Restful: Partie 1, API Laravel 9

Laravel et React sont deux technologies de développement Web populaires utilisées pour créer des applications Web modernes. Laravel est en évidence un cadre PHP côté serveur, tandis que React est une bibliothèque JavaScript côté client. Ce didacticiel sert d'introduction à Laravel et à React, en les combinant pour créer une application Web moderne.

Dans une application Web moderne, le serveur a un travail limité de gérer le back-end via une API (interface de programmation d'application). Le client envoie des demandes à ces points de terminaison et le serveur renvoie une réponse. Cependant, le serveur ne se préoccupe pas de la façon dont le client rend la vue, ce qui correspond parfaitement à la conformité du principe des préoccupations de séparation des préoccupations. Cette architecture permet aux développeurs de créer des applications robustes pour le Web et également pour différents appareils.

Dans ce didacticiel, nous utiliserons la dernière version de Laravel, version 9, pour créer une API reversée. Le frontal comprendra des composants écrits en réact. Nous créerons une application de liste de produits ingénieuse. La première partie du tutoriel se concentrera davantage sur les concepts Laravel et le back-end. Commençons.

Introduction

Laravel est un framework PHP développé pour le Web moderne. Il a une syntaxe expressive qui favorise la convention sur le paradigme de configuration. Laravel a toutes les fonctionnalités dont vous avez besoin pour commencer avec un projet dès la sortie de la boîte. Mais personnellement, j'aime Laravel car il transforme le développement avec PHP en une expérience et un flux de travail entièrement différents.

D'un autre côté, React est une bibliothèque JavaScript populaire développée par Facebook pour créer des applications à une seule page. React vous aide à décomposer votre vue en composants où chaque composant décrit une partie de l'interface utilisateur de l'application. L'approche basée sur les composants a le bénéfice supplémentaire de la réutilisabilité et de la modularité des composants.

Pourquoi Laravel et React?

Si vous développez pour le Web, vous pourriez être enclin à utiliser une seule base de code pour le serveur et le client. Cependant, toutes les entreprises ne donnent pas au développeur la liberté d'utiliser une technologie de son choix et pour de bonnes raisons. L'utilisation d'une pile JavaScript pour un projet entier est la norme actuelle, mais rien ne vous empêche de choisir deux technologies différentes pour le côté serveur et le côté client.

Alors, comment Laravel et réagir-ils s'adaptent-ils? Assez bien, en fait. Bien que Laravel ait documenté la prise en charge de Vue.js, qui est un autre framework JavaScript, nous utiliserons React pour le front-end car il est plus populaire.

Prérequis

Avant de démarrer, je vais supposer que vous avez une compréhension de base de l'architecture relante et du fonctionnement de l'API. De plus, si vous avez une expérience préalable dans React ou Laravel, vous pourrez tirer le meilleur parti de ce tutoriel.

Cependant, si vous êtes nouveau dans les deux frameworks, ne vous inquiétez pas. Le tutoriel est écrit du point de vue d'un débutant, et vous devriez pouvoir vous rattraper sans trop de problème. Vous pouvez trouver le code source du tutoriel sur GitHub.

Installation et configuration de votre projet Laravel

Avant de démarrer avec Laravel, assurez-vous d'avoir installé PHP et Composer sur votre machine locale. En effet, Laravel est basé sur PHP et utilise le compositeur pour gérer toutes les dépendances. Lors de l'installation du compositeur sur votre machine, assurez-vous de choisir l'option pour l'ajouter à la variable d'environnement de chemin afin que le compositeur soit accessible à l'échelle mondiale. 

Une fois le compositeur installé, vous devriez pouvoir générer un projet de Laravel frais comme suit:

composer create-project laravel/laravel example-app<br>

Si tout se passe bien, vous devriez être en mesure de servir votre application sur un serveur de développement chez ProductsController Nous avons généré est trouvé dans App / HTTP / Controllers / ProductsController. routes / api.php

avec la nouvelle importation et les routes.

<?php<br><br>namespace App\Http\Controllers;<br><br>use Illuminate\Http\Request;<br>use App\Product;<br><br>class ProductsController extends Controller<br>{<br><br>    public function index()<br>	{<br>	    return Product::all();<br>	}<br><br>	public function show(Product $product)<br>	{<br>	    return $product;<br>	}<br><br>	public function store(Request $request)<br>	{<br>	    $product = Product::create($request->all());<br><br>	    return response()->json($product, 201);<br>	}<br><br>	public function update(Request $request, Product $product)<br>	{<br>	    $product->update($request->all());<br><br>	    return response()->json($product, 200);<br>	}<br><br>	public function delete(Product $product)<br>	{<br>	    $product->delete();<br><br>	    return response()->json(null, 204);<br>	}<br><br>}<br>

Si vous n'avez pas remarqué, j'ai injecté une instance de produit dans les méthodes de contrôleur. Ceci est un exemple de la liaison implicite de Laravel. Laravel essaie de faire correspondre le nom de l'instance du modèle Product $ Product avec le nom du segment URI {Product} <pre class="brush:php;toolbar:false">// Include this at the file top:&lt;br&gt;use App\Http\Controllers\ProductsController;&lt;br&gt;&lt;br&gt;/**&lt;br&gt;**Basic Routes for a RESTful service:&lt;br&gt;**Route::get($uri, $callback);&lt;br&gt;**Route::post($uri, $callback);&lt;br&gt;**Route::put($uri, $callback);&lt;br&gt;**Route::delete($uri, $callback);&lt;br&gt;**&lt;br&gt;*/&lt;br&gt;&lt;br&gt;&lt;br&gt;Route::get('products', 'ProductsController@index');&lt;br&gt;&lt;br&gt;Route::get('products/{product}', 'ProductsController@show');&lt;br&gt;&lt;br&gt;Route::post('products','ProductsController@store');&lt;br&gt;&lt;br&gt;Route::put('products/{product}','ProductsController@update');&lt;br&gt;&lt;br&gt;Route::delete('products/{product}', 'ProductsController@delete');&lt;br&gt;&lt;br&gt;&lt;br&gt;</pre>. Si une correspondance est trouvée, une instance du modèle de produit est injectée dans les actions du contrôleur. Si la base de données n'a pas de produit, il renvoie une erreur 404. Le résultat final est le même qu'auparavant mais avec moins de code. <p> <code>Product $product Ouvrez Postman ou VS Code et les points de terminaison du produit doivent fonctionner. Assurez-vous d'avoir le Accepter: Application / JSON <code>{product} L'en-tête activé.

Validation et manipulation des exceptions Accept : application/json

Si vous vous dirigez vers une ressource non existante, c'est ce que vous verrez.

L'intervention NotfoundHTPException

est la façon dont Laravel affiche l'erreur 404. Si vous souhaitez que le serveur renvoie une réponse JSON à la place, vous devrez modifier le comportement par défaut de manutention de l'exception. Laravel a une classe de gestionnaire dédiée à la gestion des exceptions située sur app / exceptions / handler.php

. La classe a principalement deux méthodes: report () <code>NotFoundHTTPException et render () <strong>. La méthode <code> rapport est utile pour signaler et enregistrer les événements d'exception, tandis que la méthode de rendu est utilisée pour renvoyer une réponse lorsqu'une exception est rencontrée. Mettez à jour la méthode de rendu pour retourner une réponse JSON: report()

composer create-project laravel/laravel example-app<br>

Laravel nous permet également de valider les demandes HTTP entrantes à l'aide d'un ensemble de règles de validation et de renvoyer automatiquement une réponse JSON si la validation a échoué. La logique de la validation sera placée à l'intérieur du contrôleur. L'objet IlluminateHttpRequest fournit une méthode valide que nous pouvons utiliser pour définir les règles de validation. Ajoutons quelques vérifications de validation à la méthode du magasin dans app / http / contrôlers / productsController.php .

<?php<br><br>namespace App\Http\Controllers;<br><br>use Illuminate\Http\Request;<br>use App\Product;<br><br>class ProductsController extends Controller<br>{<br><br>    public function index()<br>	{<br>	    return Product::all();<br>	}<br><br>	public function show(Product $product)<br>	{<br>	    return $product;<br>	}<br><br>	public function store(Request $request)<br>	{<br>	    $product = Product::create($request->all());<br><br>	    return response()->json($product, 201);<br>	}<br><br>	public function update(Request $request, Product $product)<br>	{<br>	    $product->update($request->all());<br><br>	    return response()->json($product, 200);<br>	}<br><br>	public function delete(Product $product)<br>	{<br>	    $product->delete();<br><br>	    return response()->json(null, 204);<br>	}<br><br>}<br>

Résumé

Nous avons maintenant une API de travail pour une application de liste de produits. Cependant, l'API manque de fonctionnalités de base telles que l'authentification et la restriction de l'accès aux utilisateurs non autorisés. Laravel a une prise en charge prête à l'authentification, et la construction d'une API est relativement facile. Je vous encourage à mettre en œuvre l'API d'authentification en tant qu'exercice.

Maintenant que nous avons fini avec le back-end, nous allons déplacer notre concentration vers les concepts frontaux. Découvrez le deuxième article de cette série ici:

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!