Share
Laravel en React zijn twee populaire webontwikkeltechnologieën die worden gebruikt voor het bouwen van moderne webapplicaties. Laravel is prominent een PHP-raamwerk aan de serverzijde, terwijl React een JavaScript-bibliotheek aan de clientzijde is. Deze tutorial dient als een inleiding op zowel Laravel als React en combineert ze om een moderne webtoepassing te creëren.
In een moderne webtoepassing heeft de server een beperkte taak om de back-end te beheren via enkele API-eindpunten (Application Programming Interface). De client verzendt verzoeken naar deze eindpunten en de server retourneert een antwoord. De server maakt zich echter geen zorgen over hoe de klant de weergave weergeeft, wat perfect in overeenstemming is met het principe van de scheiding van punten van zorg. Met deze architectuur kunnen ontwikkelaars krachtige toepassingen voor het web en ook voor verschillende apparaten bouwen.
In deze zelfstudie gebruiken we de nieuwste versie van Laravel, versie 5.5, om een RESTful backend-API te maken. De voorkant bestaat uit componenten die zijn geschreven in React. We zullen een vindingrijke productlijstapplicatie bouwen. Het eerste deel van de tutorial zal meer gericht zijn op de Laravel-concepten en de back-end. Laten we beginnen.
Laravel is een PHP-framework ontwikkeld voor het moderne web. Het heeft een expressieve syntaxis die de voorkeur geeft aan het conventie over het configuratieparadigma. Laravel heeft alle functies die u nodig hebt om direct met een project aan de slag te gaan. Maar persoonlijk hou ik van Laravel omdat het ontwikkeling met PHP verandert in een geheel andere ervaring en workflow.
Aan de andere kant is React een populaire JavaScript-bibliotheek die is ontwikkeld door Facebook voor het bouwen van applicaties met een enkele pagina. Met React kunt u uw weergave onderverdelen in componenten waarbij elk onderdeel een deel van de gebruikersinterface beschrijft. De op componenten gebaseerde aanpak heeft het extra voordeel van herbruikbaarheid van componenten en modulariteit.
Als u zich voor het web ontwikkelt, bent u mogelijk geneigd om een codebase te gebruiken voor zowel de server als de client. Niet elk bedrijf geeft de ontwikkelaar echter de vrijheid om een technologie van zijn keuze te gebruiken en om een aantal goede redenen. Het gebruik van een JavaScript-stack voor een volledig project is de huidige norm, maar er is niets dat u ervan weerhoudt om twee verschillende technologieën te kiezen voor de serverkant en de clientzijde..
Dus hoe goed passen Laravel en React bij elkaar? Best wel, eigenlijk. Hoewel Laravel gedocumenteerd is voor Vue.js, een ander JavaScript-framework, gebruiken we React voor de front-end omdat het populairder is.
Voordat ik aan de slag ga, ga ik ervan uit dat u een basiskennis hebt van de RESTful-architectuur en hoe API-eindpunten werken. Als je ervaring hebt met React of Laravel, kun je ook het beste uit deze zelfstudie halen.
Als u echter niet vertrouwd bent met beide frameworks, maakt u zich geen zorgen. De tutorial is geschreven vanuit het perspectief van een beginner en je zou zonder veel moeite achterstand kunnen oplopen. Je kunt de broncode voor de tutorial vinden op GitHub.
Laravel gebruikt Composer om alle afhankelijkheden te beheren. Dus download voordat u aan de slag gaat met Laravel Composer op uw computer. Mogelijk moet u ook de padomgevingsvariabele configureren, zodat Composer wereldwijd toegankelijk is.
Voer de volgende opdracht uit om het laravel-installatieprogramma te downloaden.
wereldwijde componist vereist "laravel / installer"
Als u de juiste hebt geconfigureerd $ PATH variabel en toegevoegd ~ / .Composer / verkoper / bin op uw pad zou u als volgt een nieuw Laravel-project moeten kunnen genereren:
laravel nieuwe PROJECT-NAAM
U kunt ook Composer gebruiken om een nieuw project te maken zonder het laravel-installatieprogramma.
componist create-project - prefereer-dist laravel / laravel blog
Als alles goed gaat, zou je je applicatie op een ontwikkelserver moeten kunnen bedienen http: // localhost: 8000.
php artisan serveren
Opmerking: Artisan is een opdrachtregelprogramma dat u niet kunt gebruiken zonder dat u met Laravel werkt. Artisan accepteert een grote lijst met opdrachten waarmee u code voor uw toepassing kunt genereren. Rennen php ambachtelijke lijst naar bekijk alle beschikbare artisan-opdrachten.
Uw applicatie heeft een .env bestand in de hoofdmap. Alle omgevingsspecifieke configuratie-informatie wordt hier gedeclareerd. Maak een database voor uw toepassing als u dat nog niet hebt gedaan en voeg de databasedetails toe aan de .env het dossier.
DB_CONNECTION = mysql DB_HOST = 127.0.0.1 DB_PORT = 3306 DB_DATABASE = sampledb DB_USERNAME = root DB_PASSWORD =
Laravel is een raamwerk dat de MVC-architectuur (Model-View-Controller) volgt. In grote lijnen helpt MVC u om de databasequery's (het model) te scheiden van de logica die betrekking heeft op hoe de verzoeken moeten worden verwerkt (de controller) en hoe de lay-out moet worden weergegeven (de weergave). De onderstaande afbeelding toont de werking van een typische Laravel-toepassing.
Laravel's architectuur. De controller retourneert de reactie en daarom is de weergavelaag niet vereist.Omdat we een API bouwen met Laravel, beperken we onze discussie tot het model en de controller. We zullen onze opties bekijken voor het maken van de weergave in het tweede deel van deze zelfstudie.
Wanneer de server een HTTP-verzoek ontvangt, probeert Laravel het aan te passen aan een route die is geregistreerd in een van de routebestanden. Alle routebestanden bevinden zich in de map routes. routes / web.php host de route voor de webinterface, terwijl routes / api.php host de route voor de API. De routes geregistreerd in api.php wordt voorafgegaan door / api (zoals in localhost: 3000 / api). Als je dit gedrag moet veranderen, ga dan naar de RouteServiceProvider klasse in /app/Providers/RouteServiceProvider.php en daar veranderingen aanbrengen.
Aangezien we een productvermelding-app bouwen, zijn hier de eindpunten voor de API en de HTTP-acties die aan die eindpunten zijn gekoppeld.
Accentsconagua
/ Products /: Haal alle producten op./Product-ID: Haal het product op dat overeenkomt met het ID kaart./ producten: Maak een nieuw product en plaats het in de database./ Products / id : Een bestaand product bijwerken dat overeenkomt met het ID kaart./ Products / id: Verwijder het product met het gegeven ID kaart.Laten we de terminologie goed bekijken. GET, POST, PUT en DELETE zijn de HTTP-werkwoorden (beter bekend als HTTP-methoden) die essentieel zijn voor het bouwen van een REST-service. / producten is de URI gekoppeld aan de productresource. De HTTP-methoden vragen de server om de gewenste actie uit te voeren voor een bepaalde resource.
GET, POST, PUT en DELETE zijn de veelgebruikte REST-actiesMet de router kunt u routes voor een resource declareren, samen met de HTTP-methoden die op die resource zijn gericht. Hier is een voorbeeld van een routesbestand dat enkele hardgecodeerde gegevens retourneert.
/ ** ** Basisroutes voor een RESTful-service: ** ** Route :: get ($ uri, $ callback); ** Route :: post ($ uri, $ callback); ** Route :: put ($ uri, $ callback); ** Route :: delete ($ uri, $ callback); ** ** / Route :: get ('producten', functie () retourantwoord (['Product 1', 'Product 2', 'Product 3'], 200);); Route :: get ('products / product', function ($ productId) return response () -> json (['productId' => "$ productId", 200);); Route :: post ('producten', functie () retourantwoord () -> json (['message' => 'Maak een succes'], 201);); Route :: put ('products / product', function () return response () -> json (['message' => 'Update succes'], 200);); Route :: delete ('products / product', function () return response () -> json (null, 204););Als u wilt controleren of de routes werken zoals verwacht, moet u een hulpmiddel gebruiken zoals POSTMAN of krullen.
De productbron heeft een model nodig dat interactie met de database kan hebben. Model is de laag bovenop de database en verbergt alle databasespecifieke jargon. Laravel gebruikt Eloyquent ORM voor het modelleren van de database.
De lovende ORM die met Laravel wordt meegeleverd, biedt een mooie, eenvoudige ActiveRecord-implementatie voor het werken met uw database. Elke databasetabel heeft een overeenkomstig "Model" dat wordt gebruikt om met die tabel te werken. Met modellen kunt u naar gegevens in uw tabellen zoeken en nieuwe records invoegen in de tabel.
- Laravel Docs
Hoe zit het met de definitie van het databaseschema? Laravel's migratie zorgt daar voor. Artisan heeft een migratieopdracht waarmee u uw schema kunt definiëren en dit stapsgewijs in een later stadium kunt bijwerken. Laten we een model en een migratie maken voor de entiteit Product.
$ php artisan make: model Product -m
Opmerking: er zijn veel Artisan-opdrachten beschikbaar en je kunt gemakkelijk verdwalen. Dus elke artisan-opdracht bevat een hulpscherm dat aanvullende informatie weergeeft, zoals de beschikbare opties en argumenten. Om naar de helppagina te gaan, moet de naam van de opdracht worden voorafgegaan door helpen. Voer het volgende help-commando uit om te zien wat de -m optie staat voor: $ php artisan help make: model.
Hier is het migratiebestand gegenereerd.
verhogingen ( 'id'); $ Tafel-> timestamps (); ); public function down () Schema :: dropIfExists ('producten'); De omhoog methode wordt aangeroepen tijdens het migreren van nieuwe tabellen en kolommen naar de database, terwijl de naar beneden methode wordt aangeroepen tijdens het terugdraaien van een migratie. We hebben een schema gemaakt voor een tabel met drie rijen: ID kaart, gemaakt bij, en updated_at. De $ Tafel-> timestamps () methode is verantwoordelijk voor het onderhoud van de gemaakt bij en updated_at kolommen. Laten we nog een paar regels toevoegen aan de schemadefinitie.
/ * Laten we kolommen toevoegen voor titel, beschrijving, prijs, beschikbaarheid * / openbare functie omhoog () Schema :: create ('producten', functie (tabel Blueprint $) $ table-> increments ('id'); $ table -> timestamps (); $ table-> string ('title'); $ table-> text ('description'); $ table-> integer ('price'); $ table-> boolean ('availability'); ); We hebben het schema bijgewerkt met vier nieuwe kolommen. Laravel's schemabuilder ondersteunt een verscheidenheid aan kolomtypen zoals draad, tekst, geheel getal, boolean, enz.
Om de uitstaande migraties uit te voeren, moet je de volgende opdracht uitvoeren:
php artisan migreren
Volgens afspraak gaat Laravel ervan uit dat het Artikel model is geassocieerd met de producten tafel. Als u het model echter moet koppelen aan een aangepaste tabelnaam, kunt u de $ table eigenschap om de naam van de tabel aan te geven. Het model zal dan worden geassocieerd met een tabel met de naam custom_products.
beschermde $ table = 'custom_products';
Maar we zullen de dingen eenvoudig houden en meegaan met de conventie. Het gegenereerde productmodel bevindt zich in de app / directory. Hoewel de modelklasse leeg lijkt, is deze uitgerust met verschillende methoden voor het maken van query's die u kunt gebruiken om de database te doorzoeken. U kunt bijvoorbeeld gebruiken Product :: alle () om alle producten op te halen of Product :: find (1) om een bepaald product op te halen met id 1.
Laravel-modellen beschikken over een ingebouwd beveiligingsmechanisme tegen kwetsbaarheid voor de massa-toewijzing. De invulbare eigenschap wordt gebruikt om de attribuutnamen die massaal veilig kunnen worden toegewezen, te declareren.
/ * Voeg de invulbare eigenschap toe aan het Productmodel * / protected $ fillable = ['title', 'description', 'price', 'availability'];
De code hierboven vermeldt de titel, Omschrijving, prijs en beschikbaarheid attributen en behandelt ze als massa toewijsbaar. We kunnen nu de Product :: creëren methode om nieuwe rijen in de productentabel in te voegen.
Met Laravel kunt u uw ontwikkelings- en productiedatabase vullen met dummygegevens die u vervolgens kunt gebruiken om uw API-eindpunten te testen. U kunt een seed-klasse maken door de volgende opdracht Artisan uit te voeren.
$ php artisan make: seeder ProductsTableSeeder
De gegenereerde seeder-bestanden worden in de databank / zaden directory.
Als u de dummygegevens wilt genereren, kunt u zoiets gebruiken str_random (10) die een willekeurige reeks retourneert. Maar als u gegevens nodig hebt die dicht genoeg bij de werkelijke gegevens liggen, moet u zoiets als de faker-bibliotheek gebruiken. Faker is een externe bibliotheek die wordt verstuurd met het Laravel-framework voor het genereren van nep-gegevens.
gebruik App \ Product; class ProductsTableSeeder breidt Seeder uit public function run () $ faker = \ Faker \ Factory :: create (); // Maak 50 productrecords voor ($ i = 0; $ i < 50; $i++) Product::create([ 'title' => $ faker-> title, 'description' => $ faker-> paragraph, 'price' => $ faker-> randomNumber (2), 'availability' => $ faker-> boolean (50)]);
Voer de db: zaad artisan commando om de database te vullen.
$ php artisan db: seed --class = ProductsTableSeeder
Laten we teruggaan naar routes / api.php en vul de ontbrekende stukken in.
/ ** ** Basisroutes voor een RESTY-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 ('producten', functie (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 (); retourneer 204;);Het routebestand bevat momenteel de logica voor routerings- en verwerkingsverzoeken. We kunnen de logica voor het verwerken van aanvragen verplaatsen naar een klasse Controller, zodat onze code beter is georganiseerd en leesbaarder is. Laten we eerst een controllerklasse genereren.
$ php artisan make: controller ProductsController
De klasse Controller bevat verschillende methoden (index, weergeven, opslaan, bijwerken en verwijderen) die overeenkomen met verschillende HTTP-acties. Ik heb de logica voor het verwerken van aanvragen verplaatst van de route naar de controller.
allemaal()); return response () -> json ($ product, 201); openbare functie-update (Request $ request, Product $ product) $ product-> update ($ request-> all ()); antwoord terugsturen () -> json ($ product, 200); openbare functie verwijderen (product $ product) $ product-> verwijderen (); return response () -> json (null, 204);
/ ** ** Basisroutes voor een RESTY-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 ( 'producten', 'ProductsController @ store'); Route :: zetten ( 'products / product', 'ProductsController @-update'); Route :: delete ('products / product', 'ProductsController @ delete'); Als je het nog niet hebt opgemerkt, heb ik een exemplaar van het product geïnjecteerd in de controlemechanismemethoden. Dit is een voorbeeld van de impliciete binding van Laravel. Laravel probeert de naam van het model exemplaar overeen te komen Product $ product met de URI-segmentnaam artikel. Als er een overeenkomst wordt gevonden, wordt een exemplaar van het productmodel geïnjecteerd in de acties van de controller. Als de database geen product heeft, wordt een 404-fout geretourneerd. Het eindresultaat is hetzelfde als voorheen maar met minder code.
Open POSTMAN en de eindpunten voor het product zouden moeten werken. Zorg ervoor dat u de Accepteren: toepassing / json header ingeschakeld.
Als u naar een niet-bestaande bron gaat, ziet u dit.
De NotFoundHTTPException is hoe Laravel de 404-fout weergeeft. Als u wilt dat de server een JSON-antwoord retourneert, moet u het standaardbewerkingsgedrag voor uitzonderingen wijzigen. Laravel heeft een Handler-klasse die zich toelegt op het omgaan met uitzonderingen op app / Uitzonderingen / Handler.php. De klasse heeft voornamelijk twee methoden: verslag doen van() en render (). De verslag doen van Deze methode is handig voor het melden en registreren van uitzonderingsgebeurtenissen, terwijl de rendermethode wordt gebruikt om een antwoord te retourneren wanneer een uitzondering wordt aangetroffen. Werk de rendermethode bij om een JSON-reactie te retourneren:
public function render ($ request, Exception $ exception) if ($ exception instanceof \ Illuminate \ Database \ Eloquent \ ModelNotFoundException) return response () -> json (['message' => 'Bron niet gevonden'], 404) ; return parent :: render ($ request, $ exception);
Met Laravel kunnen we ook de binnenkomende HTTP-verzoeken valideren met behulp van een reeks validatieregels en automatisch een JSON-antwoord retourneren als de validatie is mislukt. De logica voor de validatie wordt in de controller geplaatst. De Verlichten \ Http \ Request object biedt een gevalideerde methode die we kunnen gebruiken om de validatieregels te definiëren. Laten we een paar validatiecontroles toevoegen aan de winkelmethode.
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);
We hebben nu een werkende API voor een productlijsttoepassing. De API heeft echter geen basisfuncties zoals verificatie en beperking van de toegang tot ongeautoriseerde gebruikers. Laravel biedt out-of-the-box ondersteuning voor authenticatie en het bouwen van een API is relatief eenvoudig. Ik moedig u aan om de authenticatie-API als een oefening te implementeren.
Voor degenen onder u die net zijn begonnen met Laravel of die op zoek zijn om uw kennis, site of applicatie uit te breiden met uitbreidingen, hebben wij een aantal dingen die u kunt bestuderen op Envato Market.
Nu we klaar zijn met de back-end, zullen we onze focus verleggen naar de front-end concepten. Blijf op de hoogte voor het tweede deel van de serie. Deel uw mening in de commentaren.
