Share
Laravel e React sono due popolari tecnologie di sviluppo web utilizzate per la creazione di moderne applicazioni web. Laravel è prominentemente un framework PHP lato server, mentre React è una libreria JavaScript lato client. Questo tutorial serve come introduzione a Laravel e React, combinandoli per creare un'applicazione web moderna.
In una moderna applicazione Web, il server ha un lavoro limitato di gestione del back-end attraverso alcuni endpoint API (Application Programming Interface). Il client invia richieste a questi endpoint e il server restituisce una risposta. Tuttavia, il server non è interessato a come il client esegue il rendering della vista, che è perfettamente in linea con il principio Separation of Concerns. Questa architettura consente agli sviluppatori di creare applicazioni robuste per il web e anche per diversi dispositivi.
In questo tutorial, utilizzeremo l'ultima versione di Laravel, versione 5.5, per creare un'API back-end RESTful. Il front-end comprenderà componenti scritti in React. Stiamo costruendo un'applicazione di elenco di prodotti pieni di risorse. La prima parte del tutorial si concentrerà maggiormente sui concetti di Laravel e sul back-end. Iniziamo.
Laravel è un framework PHP sviluppato per il web moderno. Ha una sintassi espressiva che favorisce la convenzione sul paradigma di configurazione. Laravel ha tutte le funzionalità necessarie per iniziare subito un progetto. Ma personalmente, mi piace Laravel perché trasforma lo sviluppo con PHP in un'esperienza e un flusso di lavoro completamente diversi.
D'altra parte, React è una libreria JavaScript popolare sviluppata da Facebook per la creazione di applicazioni a pagina singola. React ti aiuta a scomporre la tua vista in componenti in cui ogni componente descrive una parte dell'interfaccia utente dell'applicazione. L'approccio basato sui componenti ha l'ulteriore vantaggio della riusabilità e della modularità dei componenti.
Se stai sviluppando per il Web, potresti essere propenso a utilizzare un singolo codebase sia per il server che per il client. Tuttavia, non tutte le società danno allo sviluppatore la libertà di utilizzare una tecnologia a loro scelta e per alcune buone ragioni. L'uso di uno stack JavaScript per un intero progetto è la norma corrente, ma non c'è nulla che ti impedisca di scegliere due tecnologie diverse per il lato server e il lato client.
Quindi, come si combinano Laravel e React? Abbastanza bene, infatti. Sebbene Laravel abbia documentato il supporto per Vue.js, che è un altro framework JavaScript, utilizzeremo React per il front-end perché è più popolare.
Prima di iniziare, assumerò che tu abbia una conoscenza di base dell'architettura RESTful e di come funzionano gli endpoint dell'API. Inoltre, se hai una precedente esperienza in React o Laravel, potrai trarre il massimo da questo tutorial.
Tuttavia, se sei nuovo in entrambi i quadri, non preoccuparti. Il tutorial è scritto dal punto di vista di un principiante e dovresti essere in grado di recuperare senza troppi problemi. Puoi trovare il codice sorgente per il tutorial su GitHub.
Laravel usa Composer per gestire tutte le dipendenze. Quindi, prima di iniziare con Laravel, scarica e installa Composer sul tuo computer. Potrebbe anche essere necessario configurare la variabile di ambiente del percorso in modo che Compositore sia accessibile a livello globale.
Eseguire il seguente comando per scaricare il programma di installazione di laravel.
il compositore globale richiede "laravel / installer"
Se hai configurato correttamente il $ PATH variabile e aggiunto ~ / .Composer / vendor / bin nel tuo percorso, dovresti essere in grado di generare un nuovo progetto Laravel come segue:
laravel new PROJECT-NAME
In alternativa, puoi usare Composer per creare un nuovo progetto senza il programma di installazione di laravel.
compositore creare-progetto --prefer-dist laravel / laravel blog
Se tutto va bene, dovresti essere in grado di servire la tua applicazione su un server di sviluppo all'indirizzo http: // localhost: 8000.
servire php artigianale
Nota: Artisan è uno strumento da riga di comando che non puoi vivere senza lavorare con Laravel. Artisan accetta una vasta lista di comandi che ti permettono di generare codice per la tua applicazione. Correre php lista artigianale a visualizza tutti i comandi artistici disponibili.
La tua applicazione avrà a .ENV file all'interno della directory root. Tutte le informazioni di configurazione specifiche dell'ambiente sono dichiarate qui. Crea un database per la tua applicazione se non lo hai già fatto e aggiungi i dettagli del database nel .ENV file.
DB_CONNECTION = mysql DB_HOST = 127.0.0.1 DB_PORT = 3306 DB_DATABASE = sampledb DB_USERNAME = root DB_PASSWORD =
Laravel è un framework che segue l'architettura Model-View-Controller (MVC). In generale, MVC ti aiuta a separare le query del database (il modello) dalla logica in questione su come devono essere elaborate le richieste (il controller) e come deve essere reso il layout (la vista). L'immagine sotto mostra il funzionamento di una tipica applicazione Laravel.
L'architettura di Laravel. Il controller restituisce la risposta e quindi il livello di vista non è richiesto.Poiché stiamo costruendo un'API utilizzando Laravel, limiteremo la nostra discussione al Modello e al Controller. Esamineremo le nostre opzioni per la creazione della vista nella seconda parte di questo tutorial.
Quando il server riceve una richiesta HTTP, Laravel tenta di associarlo con una rotta registrata all'interno di uno qualsiasi dei file di percorso. Tutti i file di percorso si trovano all'interno della directory dei percorsi. percorsi / web.php ospita la rotta per l'interfaccia web, mentre percorsi / api.php ospita il percorso per l'API. Le rotte registrate in api.php sarà preceduto da / api (come in localhost: 3000 / api). Se hai bisogno di cambiare questo comportamento, dovresti andare al RouteServiceProvider classe in /app/Providers/RouteServiceProvider.php e apportare modifiche lì.
Dal momento che stiamo costruendo un'applicazione per l'elencazione dei prodotti, ecco gli endpoint per l'API e le azioni HTTP associate a questi endpoint.
Accentsconagua
/prodotti/: Recupera tutti i prodotti./Codice prodotto: Recupera il prodotto che corrisponde a id./prodotti: Crea un nuovo prodotto e inseriscilo nel database./ Prodotti / id : Aggiorna un prodotto esistente che corrisponde a id./ Prodotti / id: Elimina il prodotto con il dato id.Prendiamo la terminologia giusta. GET, POST, PUT e DELETE sono i verbi HTTP (più comunemente noti come metodi HTTP) essenzialmente richiesti per la creazione di un servizio RESTful. /prodotti è l'URI associato alla risorsa prodotti. I metodi HTTP richiedono al server di eseguire l'azione desiderata su una determinata risorsa.
GET, POST, PUT e DELETE sono le azioni REST comunemente usateIl router consente di dichiarare percorsi per una risorsa insieme ai metodi HTTP che indirizzano tale risorsa. Ecco un esempio di file route che restituisce alcuni dati codificati.
/ ** ** Rotte di base per un servizio RESTful: ** ** Route :: get ($ uri, $ callback); ** Percorso :: post ($ uri, $ callback); ** Route :: put ($ uri, $ callback); ** Route :: delete ($ uri, $ callback); ** ** / Route :: get ('products', function () return response (['Prodotto 1', 'Prodotto 2', 'Prodotto 3'], 200);); Route :: get ('prodotti / prodotto', funzione ($ 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' => 'Aggiorna successo'], 200);); Route :: delete ('products / product', function () return response () -> json (null, 204););Se si desidera verificare che i percorsi funzionino come previsto, è necessario utilizzare uno strumento come POSTMAN o curl.
La risorsa prodotti richiede un modello che possa interagire con il database. Model è il livello che si trova in cima al database, nascondendo tutto il gergo specifico del database. Laravel utilizza Eloquent ORM per la modellazione del database.
L'ORM Eloquent incluso in Laravel fornisce un'implementazione ActiveRecord bellissima e semplice per lavorare con il tuo database. Ogni tabella di database ha un corrispondente "Modello" che viene utilizzato per interagire con quella tabella. I modelli consentono di eseguire query sui dati nelle tabelle e di inserire nuovi record nella tabella.
- Laravel Docs
E la definizione dello schema del database? La migrazione di Laravel si occupa di questo. Artisan ha un comando di migrazione che consente di definire lo schema e aggiornarlo in modo incrementale in una fase successiva. Creiamo un modello e una migrazione per l'entità prodotto.
$ php artisan make: modello Prodotto -m
Nota: ci sono molti comandi Artisan là fuori, ed è facile perdersi. Quindi ogni comando artigiano include uno schermo di supporto che visualizza informazioni aggiuntive come opzioni e argomenti disponibili. Per arrivare alla pagina di aiuto, il nome del comando deve essere preceduto da Aiuto. Esegui il seguente comando di aiuto per vedere cosa -m opzione sta per: $ php artisan help make: model.
Ecco il file di migrazione generato.
incrementi ( 'id'); $ Tavola-> timestamp (); ); public function down () Schema :: dropIfExists ('prodotti'); Il su il metodo viene chiamato durante la migrazione di nuove tabelle e colonne nel database, mentre il giù il metodo viene richiamato durante il rollback di una migrazione. Abbiamo creato uno schema per una tabella con tre righe: id, created_at, e updated_at. Il $ Tavola-> timestamp () il metodo è responsabile per il mantenimento del created_at e updated_at colonne. Aggiungiamo un altro paio di linee alla definizione dello schema.
/ * Aggiungiamo colonne per titolo, descrizione, prezzo, disponibilità * / funzione pubblica su () Schema :: crea ('prodotti', funzione (tabella $ Blueprint) $ table-> incrementi ('id'); $ table -> timestamp (); $ table-> string ('title'); $ table-> text ('description'); $ table-> intero ('price'); $ table-> boolean ('availability'); ); Abbiamo aggiornato lo schema con quattro nuove colonne. Il costruttore di schemi di Laravel supporta una varietà di tipi di colonne come stringa, testo, numero intero, booleano, eccetera.
Per eseguire le migrazioni in sospeso, è necessario eseguire il seguente comando:
php artisan migrate
Per convenzione, Laravel presume che il Prodotto il modello è associato al prodotti tavolo. Tuttavia, se è necessario associare il modello con un nome di tabella personalizzato, è possibile utilizzare $ tavolo proprietà per dichiarare il nome della tabella. Il modello verrà quindi associato a una tabella denominata custom_products.
protected $ table = 'custom_products';
Ma manterremo le cose semplici e seguiremo la convenzione. Il modello prodotto generato si trova all'interno di app / directory. Sebbene la classe del modello possa sembrare vuota, viene fornita con vari metodi di generazione query che è possibile utilizzare per eseguire query sul database. Ad esempio, puoi usare Prodotto :: tutti () per recuperare tutti i prodotti o Prodotto :: trovare (1) per recuperare un determinato prodotto con ID 1.
I modelli Laravel hanno un meccanismo di protezione integrato contro la vulnerabilità di assegnazione di massa. Il riempibile la proprietà viene utilizzata per dichiarare i nomi degli attributi che possono essere assegnati in modo sicuro.
/ * Aggiungi la proprietà compilabile nel Modello prodotto * / protetto $ fillable = ['titolo', 'descrizione', 'prezzo', 'disponibilità'];
Il codice sopra autorizza il titolo, descrizione, prezzo e disponibilità attributi e li tratta come assegnabili in massa. Ora possiamo usare il Prodotto :: creare metodo per inserire nuove righe nella tabella prodotti.
Laravel ti consente di popolare il tuo database di sviluppo e produzione con dati fittizi che puoi utilizzare per testare i tuoi endpoint API. È possibile creare una classe seme eseguendo il seguente comando Artisan.
$ php artigiano: seeder ProdottiTableSeeder
I file della seminatrice generati verranno posizionati nel database / semi elenco.
Per generare i dati fittizi, potresti usare qualcosa di simile str_random (10) che restituisce una stringa casuale. Ma se hai bisogno di dati abbastanza vicini ai dati reali, dovresti usare qualcosa come la libreria di faker. Faker è una libreria di terze parti che viene spedita con il framework Laravel per generare dati falsi.
utilizzare l'app \ prodotto; class ProductsTableSeeder estende Seeder public function run () $ faker = \ Faker \ Factory :: create (); // Crea 50 record di prodotto per ($ i = 0; $ i < 50; $i++) Product::create([ 'title' => $ faker-> title, 'description' => $ faker-> paragraph, 'price' => $ faker-> randomNumber (2), 'availability' => $ faker-> boolean (50)]);
Esegui il db: seed comando artigiano per popolare il database.
$ php artisan db: seed --class = ProductsTableSeeder
Torniamo a percorsi / api.php e riempire i pezzi mancanti.
/ ** ** Rotte di base per un servizio RESTful: ** Route :: get ($ uri, $ callback); ** Percorso :: 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 ('prodotti', funzione (Richiesta $ richiesta) $ risp = Prodotto :: crea ($ richiesta-> tutto ()); restituisci $ risp;); Route :: put ('products / product', function (Richiesta $ request, $ productId) $ product = Product :: findOrFail ($ productId); $ product-> update ($ request-> all ()); return $ product;); Route :: delete ('products / product', function ($ productId) Product :: find ($ productId) -> delete (); return 204;);Il file di percorso attualmente ospita la logica per le richieste di routing e gestione. Possiamo spostare la logica di gestione delle richieste in una classe Controller in modo che il nostro codice sia meglio organizzato e più leggibile. Iniziamo a generare una classe controller.
$ php artisan make: controller ProductsController
La classe Controller comprende vari metodi (index, show, store, update ed delete) che corrispondono a diverse azioni HTTP. Ho spostato la logica di gestione delle richieste dalla route al controller.
tutti()); return response () -> json ($ product, 201); aggiornamento della funzione pubblica (richiesta $ richiesta, prodotto $ prodotto) $ prodotto-> aggiornamento ($ richiesta-> tutto ()); return response () -> json ($ product, 200); funzione pubblica delete (Prodotto $ prodotto) $ product-> delete (); return response () -> json (null, 204);
/ ** ** Rotte di base per un servizio RESTful: ** Route :: get ($ uri, $ callback); ** Percorso :: post ($ uri, $ callback); ** Route :: put ($ uri, $ callback); ** Route :: delete ($ uri, $ callback); ** * / Route :: get ('products', 'ProductsController @ index'); Route :: get ('prodotti / prodotto', 'ProductsController @ show'); Percorso :: postale ( 'prodotti', 'ProductsController @ store'); Percorso :: messo ( 'prodotti / prodotto', 'ProductsController @ update'); Route :: delete ('products / product', 'ProductsController @ delete'); Se non l'hai notato, ho iniettato un'istanza di Product nei metodi del controller. Questo è un esempio del legame implicito di Laravel. Laravel prova ad abbinare il nome dell'istanza del modello Prodotto $ prodotto con il nome del segmento URI Prodotto. Se viene trovata una corrispondenza, viene immessa un'istanza del modello Prodotto nelle azioni del controllore. Se il database non ha un prodotto, restituisce un errore 404. Il risultato finale è lo stesso di prima ma con meno codice.
Aprire POSTMAN e gli endpoint del prodotto dovrebbero funzionare. Assicurati di avere il Accetta: application / json intestazione abilitata.
Se vai verso una risorsa inesistente, questo è ciò che vedrai.
Il NotFoundHTTPException è come Laravel visualizza l'errore 404. Se si desidera che il server restituisca una risposta JSON, sarà necessario modificare il comportamento di gestione delle eccezioni predefinito. Laravel ha una classe di Handler dedicata alla gestione delle eccezioni situata a app / Eccezioni / Handler.php. La classe ha principalmente due metodi: rapporto() e render (). Il rapporto il metodo è utile per la segnalazione e la registrazione degli eventi di eccezione, mentre il metodo di rendering viene utilizzato per restituire una risposta quando si verifica un'eccezione. Aggiorna il metodo di rendering per restituire una risposta JSON:
rendering public function ($ request, Exception $ exception) if ($ exception instanceof \ Illuminate \ Database \ Eloquent \ ModelNotFoundException) return response () -> json (['message' => 'Resource not found'], 404) ; return parent :: render ($ request, $ exception);
Laravel ci consente inoltre di convalidare le richieste HTTP in arrivo utilizzando una serie di regole di convalida e restituire automaticamente una risposta JSON se la convalida non è riuscita. La logica per la convalida verrà posizionata all'interno del controller. Il Illuminare \ Http \ Richiesta oggetto fornisce un metodo di validazione che possiamo usare per definire le regole di validazione. Aggiungiamo alcuni controlli di convalida al metodo store.
archivio di funzioni pubbliche (Richiesta $ richiesta) $ this-> validate ($ request, ['title' => 'required | unique: products | max: 255', 'description' => 'required', 'price' => 'intero', 'disponibilità' => 'booleano',]); $ product = Product :: create ($ request-> all ()); return response () -> json ($ product, 201);
Ora disponiamo di un'API funzionante per un'applicazione di elenco dei prodotti. Tuttavia, l'API non dispone di funzionalità di base come l'autenticazione e la limitazione dell'accesso agli utenti non autorizzati. Laravel dispone di un supporto immediato per l'autenticazione e la creazione di un'API è relativamente semplice. Vi incoraggio ad implementare l'API di autenticazione come esercizio.
Per quelli di voi che stanno appena iniziando con Laravel o stanno cercando di espandere le vostre conoscenze, il vostro sito o la vostra applicazione con le estensioni, abbiamo una varietà di cose che potete studiare su Envato Market.
Ora che abbiamo finito il back-end, sposteremo la nostra attenzione sui concetti di front-end. Restate sintonizzati per la seconda parte della serie. Condividi i tuoi pensieri nei commenti.
