Share
Laravel og React er to populære webutviklingsteknologier som brukes til å bygge moderne webapplikasjoner. Laravel er fremtredende et PHP-rammeverk på server-side, mens React er et JavaScript-bibliotek på klientsiden. Denne opplæringen tjener som en introduksjon til både Laravel og React, kombinere dem for å skape et moderne webprogram.
I et moderne webapplikasjon har serveren en begrenset jobb med å administrere bakenden gjennom noen API-programmer (Application Programming Interface) endepunkter. Klienten sender forespørsler til disse endepunktene, og serveren returnerer et svar. Serveren er imidlertid ikke opptatt av hvordan klienten gjør visningen, som faller helt i tråd med separasjonsproblemet. Denne arkitekturen gjør at utviklere kan bygge robuste applikasjoner på nettet og også for ulike enheter.
I denne opplæringen bruker vi den nyeste versjonen av Laravel, versjon 5.5, for å lage en RESTful back-end API. Forsiden vil bestå av komponenter skrevet i React. Vi skal bygge en ressursfull produktoppføringsprogram. Den første delen av opplæringen vil fokusere mer på Laravel konseptene og bakenden. La oss komme i gang.
Laravel er et PHP-rammeverk utviklet for moderne web. Den har en uttrykksdyktig syntaks som favoriserer konvensjonen over konfigurasjonsparadigma. Laravel har alle de funksjonene du trenger for å komme i gang med et prosjekt rett ut av boksen. Men personlig, jeg liker Laravel fordi det gjør utviklingen med PHP til en helt annen opplevelse og arbeidsflyt.
På den annen side er React et populært JavaScript-bibliotek utviklet av Facebook for å bygge enkeltsidige applikasjoner. React hjelper deg med å bryte ned visningen din i komponenter hvor hver komponent beskriver en del av programmets brukergrensesnitt. Den komponentbaserte tilnærmingen har den ekstra fordelen av komponentgenbrukbarhet og modularitet.
Hvis du utvikler deg på nettet, kan du være tilbøyelig til å bruke en enkelt kodebase for både serveren og klienten. Men ikke alle selskaper gir utvikleren friheten til å bruke en teknologi av eget valg, og av noen gode grunner. Bruke en JavaScript-stabel for et helt prosjekt er den nåværende normen, men det er ingenting som hindrer deg i å velge to forskjellige teknologier for server side og klientsiden.
Så hvor bra passer Laravel og React sammen? Ganske bra, faktisk. Selv om Laravel har dokumentert støttet for Vue.js, som er et annet JavaScript-rammeverk, bruker vi React for front-end fordi det er mer populært..
Før jeg kommer i gang, kommer jeg til å anta at du har en grunnleggende forståelse av den RESTful arkitekturen og hvordan API-endepunktene fungerer. Også, hvis du har tidligere erfaring i enten React eller Laravel, vil du kunne få mest mulig ut av denne opplæringen.
Men hvis du er ny på begge rammene, bekymre deg ikke. Opplæringen er skrevet fra nybegynnerperspektiv, og du bør kunne hente uten mye trøbbel. Du finner kildekoden for opplæringen over på GitHub.
Laravel bruker Komponist til å håndtere alle avhengighetene. Så, før du begynner med Laravel, last ned og installer Komponist på maskinen din. Det kan hende du må også konfigurere sti miljøvariabelen slik at komposisjonen er tilgjengelig globalt.
Kjør følgende kommando for å laste ned laravel installer.
komponist globalt krever "laravel / installer"
Hvis du har riktig konfigurert $ PATH variabel og lagt til ~ / .Composer / leverandør / bin i din vei bør du kunne generere et nytt Laravel-prosjekt som følger:
laravel nytt PROJECT-NAME
Alternativt kan du bruke Komponist til å opprette et nytt prosjekt uten laravel installer.
komponistskap-prosjekt - prefer-dist laravel / laravel blog
Hvis alt går bra, bør du kunne betjene din søknad på en utviklingsserver på http: // localhost: 8000.
php artisan tjene
Merk: Artisan er et kommandolinjeverktøy som du ikke kan leve uten mens du jobber med Laravel. Artisan aksepterer en stor liste med kommandoer som lar deg generere kode for din søknad. Løpe php håndverklisten til se alle tilgjengelige håndverkskommandoene.
Din søknad vil ha en .env filen i rotkatalogen. Alle miljøspesifikke konfigurasjonsinformasjon er erklært her. Opprett en database for søknaden din hvis du ikke allerede har, og legg til databasedetaljer i .env fil.
DB_CONNECTION = mysql DB_HOST = 127.0.0.1 DB_PORT = 3306 DB_DATABASE = sampledb DB_USERNAME = rot DB_PASSWORD =
Laravel er et rammeverk som følger modell-View-Controller (MVC) arkitektur. I stor grad hjelper MVC deg til å skille databasespørsmålene (modellen) fra logikken om hvordan forespørgene skal behandles (kontrolløren) og hvordan utformingen skal gjengis (visningen). Bildet nedenfor viser arbeidet med en typisk Laravel-applikasjon.
Laravel er arkitektur. Kontrolleren returnerer svaret og derfor er visningslaget ikke nødvendig.Siden vi bygger en API ved hjelp av Laravel, begrenser vi diskusjonen til modellen og kontrolleren. Vi skal se gjennom alternativene våre for å lage visningen i den andre delen av denne opplæringen.
Når serveren mottar en HTTP-forespørsel, forsøker Laravel å matche den med en rute registrert i noen av rutefilene. Alle rutefilene er plassert i rutekartoteket. ruter / web.php vertene ruten for webgrensesnittet, mens ruter / api.php Verter ruten for APIen. Ruter registrert i api.php vil bli prefixed med / api (som i localhost: 3000 / api). Hvis du trenger å endre denne oppførselen, bør du gå til RouteServiceProvider klasse i /app/Providers/RouteServiceProvider.php og gjør endringer der.
Siden vi bygger et produktoppføringsprogram, er det sluttpunktene for API og HTTP-handlingene knyttet til disse sluttpunktene.
Accentsconagua
/Produkter/: Hent alle produktene./Produkt ID: Hent produktet som samsvarer med id./Produkter: Lag et nytt produkt og sett det inn i databasen./ Produkter / id : Oppdater et eksisterende produkt som samsvarer med id./ Produkter / id: Slett produktet med det gitte id.La oss få terminologien riktig. GET, POST, PUT og DELETE er HTTP-verbene (mer populært kjent som HTTP-metoder) som i hovedsak kreves for å bygge en RESTful tjeneste. /Produkter er URI knyttet til produktressursen. HTTP-metodene ber serveren om å utføre ønsket handling på en gitt ressurs.
GET, POST, PUT og DELETE er de vanlige REST-handlingeneRuteren tillater deg å erklære ruter for en ressurs sammen med HTTP-metodene som målretter mot denne ressursen. Her er en eksempelruterfil som returnerer noen hardkodede data.
/ ** ** Grunnleggende ruter for en RESTful tjeneste: ** ** Rute :: få ($ uri, $ tilbakeringing); ** Rute :: post ($ uri, $ tilbakeringing); ** Rute :: sette ($ uri, $ tilbakeringing); ** Rute :: slette ($ uri, $ tilbakeringing); ** ** / Rute :: få ('produkter', funksjon () returrespons (['Produkt 1', 'Produkt 2', 'Produkt 3'], 200);); Rute :: få ('produkter / produkt', funksjon ($ productId) returrespons () -> json (['productId' => "$ productId"], 200);); Rute :: post ('produkter', funksjon () returrespons () -> json (['message' => 'Lag suksess'], 201);); Rute :: put ('products / product', funksjon () returrespons () -> json (['message' => 'Oppdater suksess'], 200);); Rute :: slette ('produkter / produkt', funksjon () returrespons () -> json (null, 204););Hvis du vil verifisere at rutene fungerer som forventet, bør du bruke et verktøy som POSTMAN eller curl.
Produktressursen trenger en modell som kan samhandle med databasen. Modellen er laget som sitter på toppen av databasen, gjemmer seg alt databasespesifikt sjargong. Laravel bruker Eloquent ORM til å modellere databasen.
Eloquent ORM følger med Laravel gir en vakker, enkel ActiveRecord-implementering for å jobbe med databasen. Hver database tabell har en tilsvarende "modell" som brukes til å samhandle med den tabellen. Modeller lar deg spørre etter data i tabellene dine, samt legge inn nye poster i tabellen.
- Laravel Docs
Hva med databaseskjermdefinisjonen? Laravel's migrasjon tar seg av det. Artisan har en migrasjonskommando som lar deg definere skjemaet ditt og gradvis oppdatere det på et senere tidspunkt. La oss lage en modell og en migrasjon for Produktenheten.
$ php artisan make: modell Produkt -m
Merk: Det er mange Artisan-kommandoer der ute, og det er lett å gå seg vill. Så alle håndverkskommandoer inneholder en hjelpeskjerm som viser tilleggsinformasjon, for eksempel valgene og argumentene som er tilgjengelige. For å komme til hjelpesiden, bør navnet på kommandoen foregå med hjelp. Kjør følgende hjelpekommando for å se hva -m alternativet står for: $ php artisan hjelper til med å gjøre: modell.
Her genereres overføringsfilen.
trinn ( 'id'); $ Tabell-> tidsstempler (); ); offentlig funksjon ned () Schema :: dropIfExists ('products'); De opp Metoden kalles mens man overfører nye tabeller og kolonner til databasen, mens ned Metoden er påkalt mens du ruller tilbake en migrering. Vi har opprettet et skjema for et bord med tre rader: id, created_at, og updated_at. De $ Tabell-> tidsstempler () Metoden er ansvarlig for å opprettholde created_at og updated_at kolonner. La oss legge til et par flere linjer til skjemadefinisjonen.
/ * La oss legge til kolonner for tittel, beskrivelse, pris, tilgjengelighet * / offentlig funksjon opp () Schema :: lage ('produkter', funksjon (Blueprint $ tabell) $ tabell-> trinn ('id'); -> tidsstempler (); $ tabell-> streng ('tittel'); $ tabell-> tekst ('beskrivelse'); $ tabell-> heltall ('pris'); $ table-> boolean ('tilgjengelighet'); ); Vi har oppdatert skjemaet med fire nye kolonner. Laravels skemabygger støtter en rekke kolonnetyper som string, tekst, heltall, boolean, etc.
For å utføre de ventende overføringene må du kjøre følgende kommando:
php artisan migrere
Etter konvensjonen antar Laravel at Produkt modellen er knyttet til Produkter bord. Men hvis du trenger å knytte modellen til et egendefinert tabellnavn, kan du bruke $ table eiendom for å erklære navnet på tabellen. Modellen vil da bli knyttet til et bord som heter custom_products.
beskyttet $ table = 'custom_products';
Men vi vil holde ting enkelt og gå med konvensjonen. Produktmodellen som genereres, er lokalisert inne i app / katalogen. Selv om modellklassen kan virke tom, leveres den med ulike spørringsbygger metoder som du kan bruke til å spørre databasen. For eksempel kan du bruke Produkt :: alle () å hente alle produktene eller Produkt :: finne (1) for å hente et bestemt produkt med ID 1.
Laravel-modellene har en innebygd beskyttelsesmekanisme mot sikkerhetsproblemet. De utfyllbare Egenskapen brukes til å deklarere attributtnavnene som kan tildeles masse sikkert.
/ * Legg til den fyllbare egenskapen i produktmodellen * / beskyttet $ fillable = ['tittel', 'beskrivelse', 'pris', 'tilgjengelighet'];
Koden over hvitelisten tittel, beskrivelse, pris og tilgjengelighet attributter og behandler dem som masse som kan tildeles. Vi kan nå bruke Produkt :: skape Metode for å sette inn nye rader i produkttabellen.
Laravel lar deg fylle ut utviklings- og produksjonsdatabasen med dummy-data som du kan bruke til å teste dine API-sluttpunkter. Du kan opprette en frøsklasse ved å utføre følgende Artisan-kommando.
$ php artisan make: seeder ProductsTableSeeder
De genererte seederfilene blir plassert i database / frø katalog.
For å generere dummy data, kan du bruke noe som str_random (10) som returnerer en tilfeldig streng. Men hvis du trenger data som er nær nok til de faktiske dataene, bør du bruke noe som faker-biblioteket. Faker er et tredjepartsbibliotek som leveres med Laravel-rammeverket for å generere falske data.
bruk App \ Product; class ProductsTableSeeder utvider seeder public function run () $ faker = \ Faker \ Factory :: create (); // Lag 50 produktrekorder for ($ i = 0; $ i < 50; $i++) Product::create([ 'title' => $ faker-> tittel, 'beskrivelse' => $ faker-> avsnitt, 'pris' => $ faker-> randomNumber (2), 'tilgjengelighet' => $ faker-> boolean (50)]);
Utfør db: frø håndverkskommando for å fylle databasen.
$ php artisan db: frø - klasse = ProductsTableSeeder
La oss gå tilbake til ruter / api.php og fyll ut de manglende stykkene.
/ ** ** Grunnleggende ruter for en RESTful tjeneste: ** Rute :: få ($ uri, $ tilbakeringing); ** Rute :: post ($ uri, $ tilbakeringing); ** Rute :: sette ($ uri, $ tilbakeringing); ** Rute :: slette ($ uri, $ tilbakeringing); ** * / Rute :: få ('produkter', funksjon () returrespons (Produkt :: alle (), 200);); Rute :: få ('produkter / produkt', funksjon ($ productId) returrespons (Produkt :: finn ($ productId), 200);); Rute :: post ('produkter', funksjon (Request $ request) $ resp = Produkt :: opprett ($ request-> all ()); return $ resp;); Rute :: put ('products / product', funksjon (Request $ request, $ productId) $ product = Product :: findOrFail ($ productId); $ produkt-> oppdatering ($ request-> all ()); returner $ produkt;); Rute :: slette ('produkter / produkt', funksjon ($ productId) Produkt :: finn ($ productId) -> delete (); return 204;);Rutefilen er for øyeblikket vert for logikken for ruting og håndtering av forespørsler. Vi kan flytte forespørselhåndteringslogikken til en Controller-klasse slik at vår kode er bedre organisert og mer lesbar. La oss generere en kontrollerklasse først.
$ php artisan make: controller ProductsController
Controller-klassen består av ulike metoder (indeks, show, lagre, oppdatere og slette) som samsvarer med ulike HTTP-handlinger. Jeg har flyttet forespørselhåndteringslogikken fra ruten til kontrolleren.
alle()); returrespons () -> json ($ produkt, 201); offentlig funksjon oppdatering (forespørsel $ forespørsel, produkt $ produkt) $ produkt-> oppdatering ($ request-> all ()); returrespons () -> json ($ produkt, 200); offentlig funksjon slette (produkt $ produkt) $ produkt-> slette (); returrespons () -> json (null, 204);
/ ** ** Grunnleggende ruter for en RESTful tjeneste: ** Rute :: få ($ uri, $ tilbakeringing); ** Rute :: post ($ uri, $ tilbakeringing); ** Rute :: sette ($ uri, $ tilbakeringing); ** Rute :: slette ($ uri, $ tilbakeringing); ** * / Rute :: få ('produkter', 'ProductsController @ index'); Rute :: få ('produkter / produkt', 'ProductsController @ show'); Rute :: innlegget ( 'produkter', 'ProductsController @ store'); Route :: sette ( 'produkter / produkt', 'ProductsController @ oppdatering'); Rute :: slette ('produkter / produkt', 'ProductsController @ delete'); Hvis du ikke har lagt merke til, har jeg injisert en forekomst av Produkt i kontrolleringsmetodene. Dette er et eksempel på Laravels implisitte binding. Laravel prøver å matche modelleksemplarnavnet Produkt $ produkt med URI-segmentnavnet produkt. Hvis en kamp er funnet, injiseres en forekomst av produktmodellen i kontrollerhandlingene. Hvis databasen ikke har et produkt, returneres det en 404 feil. Sluttresultatet er det samme som før, men med mindre kode.
Åpne POSTMAN og sluttpunktene for produktet skal fungere. Pass på at du har Godta: søknad / json header aktivert.
Hvis du går over til en ikke-eksisterende ressurs, så ser du dette.
De NotFoundHTTPException er hvordan Laravel viser 404-feilen. Hvis du vil at serveren skal returnere et JSON-svar i stedet, må du endre standardhåndteringshåndteringen. Laravel har en Handler-klasse dedikert til unntakshåndtering plassert på app / Unntak / Handler.php. Klassen har i hovedsak to metoder: rapportere() og render (). De rapportere Metoden er nyttig for rapportering og logging av unntakshendelser, mens gjengivelsesmetoden brukes til å returnere et svar når et unntak oppstår. Oppdater gjengemetoden for å returnere et JSON-svar:
Offentlig funksjon gjengivelse ($ request, Unntak $ unntak) if ($ unntak instanceof \ Illuminate \ Database \ Eloquent \ ModelNotFoundException) return response () -> json (['message' => 'Ressurs ikke funnet'], 404) ; returnerer foreldre :: gjengivelse ($ forespørsel, $ unntak);
Laravel tillater oss også å validere innkommende HTTP-forespørsler ved hjelp av et sett med valideringsregler og automatisk returnere et JSON-svar hvis validering mislyktes. Logikken for validering vil bli plassert inne i kontrolleren. De Belyse \ Http \ Request objektet gir en valideringsmetode som vi kan bruke til å definere valideringsreglene. La oss legge til noen godkjenningskontroller i forretningsmetoden.
offentlig forespørsel (forespørsel $ forespørsel) $ this-> validate ($ request, ['title' => 'required' unikt: produkter | max: 255 ',' description '=>' required ',' price '=> 'heltall', 'tilgjengelighet' => 'booleansk',]); $ product = Product :: create ($ request-> all ()); returrespons () -> json ($ produkt, 201);
Vi har nå en fungerende API for et produktoppføringsprogram. API-en mangler imidlertid grunnleggende funksjoner som autentisering og begrensning av tilgang til uautoriserte brukere. Laravel har utelukkende støtte for autentisering, og det er relativt enkelt å bygge en API for det. Jeg oppfordrer deg til å implementere godkjennings API som en øvelse.
For de av dere som enten bare er i gang med Laravel eller ønsker å utvide din kunnskap, nettsted eller søknad med utvidelser, har vi en rekke ting du kan studere på Envato Market.
Nå som vi er ferdige med bakenden, vil vi flytte fokuset til front-end konseptene. Hold deg innstilt for den andre delen av serien. Del dine tanker i kommentarene.
