Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Laravel
Code

Crea un'applicazione React con un Larvael RESTful Back End: Parte 1, Laravel 5.5 API

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel Back End: Part 2, React

Italian (Italiano) translation by Loris Pizii (you can also view the original English article)

Laravel e React sono due tecnologie di sviluppo web più diffuse utilizzate per la creazione di applicazioni web moderne. Laravel è notevolmente un framework PHP sul lato server, mentre React è una libreria JavaScript del client. Questo tutorial serve da introduzione sia a Laravel che a React, combinandoli per creare un'applicazione web moderna.

In un'applicazione web moderna, il server ha un lavoro limitato di gestire la parte posteriore attraverso alcuni endpoint API (Application Programming Interface). Il client invia richieste a questi endpoint e il server restituisce una risposta. Tuttavia, il server non è preoccupato per come il client renda la vista, che rientra perfettamente in linea con il principio della separazione dei problemi. Questa architettura consente agli sviluppatori di costruire applicazioni robuste per il web e anche per diversi dispositivi.

In questo tutorial, usiamo l'ultima versione di Laravel, versione 5.5, per creare un'API back-end RESTful. La parte anteriore comprende componenti scritti in React. Saremo costruire un'applicazione di prodotto inventiva. La prima parte del tutorial si concentrerà più sui concetti Laravel e sul retro. Iniziamo.

Introduzione

Laravel è un framework PHP sviluppato per il web moderno. Ha una sintassi espressiva che favorisce la convenzione sul paradigma della configurazione. Laravel ha tutte le funzionalità necessarie per iniziare con un progetto appena fuori dalla scatola. 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 popolare libreria JavaScript sviluppata da Facebook per la creazione di applicazioni di una pagina. React ti aiuta a distruggere la vista in componenti in cui ogni componente descrive una parte dell'interfaccia utente dell'applicazione. L'approccio basato sui componenti ha il vantaggio aggiuntivo della riutilizzabilità e della modularità dei componenti.

Perché Laravel e React?

Se stai sviluppando per il web, potrebbe essere interessato ad utilizzare un singolo codice base sia per il server che per il client. Tuttavia, non ogni azienda dà allo sviluppatore la libertà di utilizzare una tecnologia a loro scelta e per alcune buone ragioni. L'utilizzo di uno stack JavaScript per un intero progetto è la norma corrente, ma non vi impedisce di scegliere due diverse tecnologie per il lato server e per il lato client.

Quanto bene Laravel e React si adattano? Abbastanza bene, infatti. Anche se Laravel ha documentato il supporto per Vue.js, che è un altro framework JavaScript, utilizzeremo React per il front-end perché è più popolare.

Prerequisiti

Prima di iniziare, presumo che tu abbia una conoscenza fondamentale dell'architettura RESTful e come funzionano gli endpoint API. Inoltre, se hai esperienza precedente in React o Laravel, sarai in grado di sfruttare al meglio questo tutorial.

Tuttavia, se sei nuovo per entrambi i quadri, non preoccuparti. Il tutorial è scritto da una prospettiva del principiante, e si dovrebbe essere in grado di raggiungere senza problemi. È possibile trovare il codice sorgente per il tutorial su GitHub.

Installazione e configurazione del progetto Laravel

Laravel utilizza Composer per gestire tutte le dipendenze. Quindi, prima di iniziare con Laravel, scarica e installa Composer sulla macchina. Potrebbe anche essere necessario configurare la variabile di ambiente di percorso in modo che Composer sia accessibile a livello globale.

Eseguire il seguente comando per scaricare l'installatore laravel.

Se hai configurato correttamente la variabile $PATH e ha aggiunto ~/.composer/vendor/bin nel tuo percorso, dovresti essere in grado di generare un nuovo progetto Laravel come segue:

In alternativa, è possibile utilizzare Composer per creare un nuovo progetto senza l'installatore laravel.

Se tutto va bene, dovresti essere in grado di servire l'applicazione su un server di sviluppo all'indirizzo http:// localhost:8000.

Nota: Artisan è uno strumento di riga di comando che non si può vivere senza lavorare con Laravel. Artisan accetta un ampio elenco di comandi che consentono di generare codice per l'applicazione. Esegui l'elenco artigianale php per visualizzare tutti i comandi artigianali disponibili.

Configurazione dell'ambiente

L'applicazione avrà un file. ENV all'interno della directory radice. Tutte le informazioni di configurazione specifica dell'ambiente viene dichiarate qui. Creare un database per l'applicazione se non l'hai già e aggiungere i dettagli del database nel file. env.

Informazioni sui modelli, sui percorsi e sui controller

Laravel è un framework che segue l'architettura Model-View-Controller (MVC). In linea di massima, MVC ti aiuta a separare le query del database (il modello) dalla logica in questione con le modalità di elaborazione delle richieste (il controller) e come rendere il layout (la visualizzazione). L'immagine sottostante dimostra il funzionamento di una tipica applicazione Laravel.

Overview of Laravels architecture for building RESTful API endpoints
L'architettura di Laravel. Il controller restituisce la risposta e quindi il livello di visualizzazione non è necessario.

Dal momento che stiamo costruendo un'API con Laravel, limiteremo la nostra discussione al Modello e al Controllore. Rivedremo le nostre opzioni per creare la vista nella seconda parte di questo tutorial.

Il router

Quando il server riceve una richiesta HTTP, Laravel tenta di corrispondere a una route registrata all'interno di uno dei file di percorso. Tutti i file di percorso si trovano all'interno della directory percorsi. routes/web.php ospita il percorso per l'interfaccia web, mentre le route/api.php ospitano il percorso per l'API. Le rotte registrate in api.php saranno prefisso con /api (come in localhost: 3000 / api). Se è necessario modificare questo comportamento, si dovrebbe andare alla classe RouteServiceProvider in /app/Providers/RouteServiceProvider.php e apportare le modifiche.

Dal momento che stiamo costruendo un'applicazione di elenchi di prodotti, qui sono gli endpoint per le API e le azioni HTTP associate a tali endpoint.

  • GET /products/ : Recupera tutti i prodotti.
  • GET /product/{id}: recupera il prodotto che corrisponde all'ID.
  • POST /products: Crea un nuovo prodotto e inserisca nel database.
  • PUT /products /{id}: Aggiorna un prodotto esistente che corrisponde all'ID.
  • DELETE /products / {id}: Elimina il prodotto con l'ID indicato.

Facciamo la terminologia giusta. GET, POST, PUT e DELETE sono i verbi HTTP (più conosciuti come metodi HTTP) essenzialmente necessari per costruire un servizio RESTful. /products è l'URI associato alla risorsa dei prodotti. I metodi HTTP richiedono al server di eseguire l'azione desiderata su una determinata risorsa.

HTTP actions acting on the Product resource
GET, POST, PUT e DELETE sono le azioni comunemente utilizzate REST

Il router consente di dichiarare percorsi di una risorsa insieme ai metodi HTTP che mirano a questa risorsa. Ecco un file di percorsi di esempio che restituisce alcuni dati codificati.

routes/api.php

Se si desidera verificare che le rotte funzionino come previsto, è necessario utilizzare uno strumento come POSTMAN o arricciare.

Il modello di prodotto

La risorsa dei prodotti necessita di un modello che possa interagire con il database. Il modello è il livello che si trova in cima al database, nascondendo tutto il gergo specifico del database. Laravel usa ORM Eloquent per la modellazione del database.

L'ORM di Eloquent incluso con Laravel fornisce una bella e semplice implementazione di ActiveRecord per lavorare con il tuo database. Ogni tabella del database ha un corrispondente "Modello" utilizzato per interagire con tale tabella. I modelli consentono di interrogare i dati nelle tabelle e di inserire nuovi record nella tabella.
- Laravel Documenti

Che dire della definizione dello schema del database? La migrazione di Laravel si prende cura di questo. Artisan ha un comando di migrazione che consente di definire lo schema e aggiornarlo gradualmente in una fase successiva. Creiamo un modello e una migrazione per l'entità del prodotto.

Nota: ci sono molti comandi artigiani là fuori ed è facile perdersi. Quindi ogni comando artigianale include una schermata di helper che visualizza ulteriori informazioni, ad esempio le opzioni e gli argomenti disponibili. Per arrivare alla pagina di aiuto, è necessario precedere il nome del comando con l'aiuto. Esegui il seguente comando di aiuto per vedere quale rappresenta l'opzione -m: $ php artisan help make: model.

Ecco il file di migrazione generato.

database/migrations/timestamp_create_products_table.php

Il metodo di up viene chiamato durante la migrazione di nuove tabelle e colonne nel database, mentre il metodo down viene richiamato durante il rollback di una migrazione. Abbiamo creato uno schema per una tabella con tre righe: id, created_at, and updated_at. Il metodo $table-> timestamps () è responsabile del mantenimento delle colonne created_at e updated_at. Facciamo un paio di righe alla definizione dello schema.

Abbiamo aggiornato lo schema con quattro nuove colonne. Il costruttore di schema di Laravel supporta vari tipi di colonne come stringa, testo, intero, booleano, ecc.

Per eseguire le migrazioni in sospeso, è necessario eseguire il seguente comando:

Con convenzione, Laravel assume che il modello di prodotto sia associato alla tabella dei prodotti. Tuttavia, se è necessario associare il modello a un nome di tabella personalizzato, è possibile utilizzare la proprietà table table per dichiarare il nome della tabella. Il modello verrà quindi associato a una tabella denominata custom_products.

Ma noi manterremo le cose semplici e andremo con la convenzione. Il modello di prodotto generato si trova all'interno della directory app/ directory. Sebbene la classe di modelli possa sembrare vuota, è dotata di diversi metodi di generazione di query che è possibile utilizzare per interrogare il database. Ad esempio, puoi utilizzare Product::all () per recuperare tutti i prodotti o Product::find (1) per recuperare un particolare prodotto con id 1.

I modelli Laravel hanno un meccanismo di protezione integrato contro la vulnerabilità di assegnazione di massa. La proprietà riempibile viene utilizzata per dichiarare i nomi degli attributi che possono essere assegnati in massa in modo sicuro.

app/Product.php

Il codice sopra elenchi i requisiti di titolo, descrizione, prezzo e disponibilità e li tratta come assegnabili in massa. Ora possiamo utilizzare il metodo Product::create per inserire nuove righe nella tabella dei prodotti.

Seminazione del database

Laravel ti consente di popolare il tuo database di sviluppo e produzione con dati fittizio che puoi utilizzare per testare i tuoi terminali API. È possibile creare una classe seme eseguendo il seguente comando Artisan.

I file di seeder generati verranno inseriti nella directory database/semi.

Per generare i dati fittizio, è possibile utilizzare qualcosa come 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 del fornaio. Faker è una libreria di terze parti che viene spedita con il framework Laravel per la generazione di dati falsi.

database/seeds/ProductsTableSeeder.php

Esegui il comando db:seed artisan per compilare il database.

Torniamo indietro verso le rotte/api.php e riempiamo i pezzi mancanti.

routes/api.php

Il controllore

Il file di percorso ospita attualmente la logica per l'instradamento e la gestione delle richieste. Possiamo spostare la logica di gestione delle richieste a una classe Controller in modo che il nostro codice sia meglio organizzato e leggibile. Prima di generare una classe controller.

La classe Controller comprende diversi metodi (indice, esposizione, archiviazione, aggiornamento e eliminazione) che corrispondono a diverse azioni HTTP. Ho spostato la logica di gestione delle richieste dall'itinerario al controller.

app/HTTP/Controllers/ProductsController.php

routes/api.php

Se non l'hai notato, ho iniettato un'istanza di prodotto nei metodi del controller. Questo è un esempio di impegno implicito di Laravel. Laravel cerca di abbinare il nome di prodotto modello $ product $ con il nome del segmento URI {product}. Se viene trovata una corrispondenza, un'istanza del modello di prodotto viene iniettata nelle azioni del controller. Se il database non dispone di un prodotto, restituisce un errore 404. Il risultato finale è lo stesso di prima ma con meno codice.

Aprire POSTMAN e gli endpoint per il prodotto devono funzionare. Assicurarsi di aver abilitato l'intestazione Accept:application/json.

Gestione delle convalide e delle eccezioni

Se si dirige verso una risorsa inesistente, questo è ciò che vedrai.

The error page displayed for the NotFoundHTTPException

La NotFoundHTTPException è come Laravel visualizza l'errore 404. Se si desidera che il server restituisca invece una risposta JSON, è necessario modificare il comportamento predefinito di gestione delle eccezioni. Laravel ha una classe Handler dedicata alla gestione delle eccezioni, situata all'app/Exceptions/Handler.php. La classe ha innanzitutto due metodi: report () e render (). Il metodo del report è utile per segnalare e registrare eventi di eccezione, mentre il metodo di rendering viene utilizzato per restituire una risposta quando si verifica un'eccezione. Aggiornare il metodo di rendering per restituire una risposta JSON:

app/Exceptions/Handler.php

Laravel ci consente inoltre di convalidare le richieste HTTP in ingresso utilizzando un insieme di regole di convalida e di restituire automaticamente una risposta JSON se la convalida non è riuscita. La logica della convalida verrà inserita all'interno del controller. L'oggetto Illuminate\Http\Request fornisce un metodo di convalida che possiamo utilizzare per definire le regole di convalida. Facciamo un paio di controlli di convalida al metodo del negozio.

app/HTTP/Controllers/ProductsController.php

Sommario

Ora disponiamo di un'API funzionante per un'applicazione di prodotto. Tuttavia, l'API manca di funzioni di base come l'autenticazione e la limitazione dell'accesso a utenti non autorizzati. Laravel ha un supporto fuori autenticazione per l'autenticazione e la costruzione di un'API è relativamente semplice. Vi incoraggio di implementare l'API di autenticazione come esercizio.

Per coloro di voi che stiamo solo iniziando con Laravel o cercando di ampliare le tue conoscenze, siti o applicazioni con estensioni, abbiamo una grande varietà di cose che puoi studiare su Envato Market.

Ora che siamo finiti con la parte posteriore, sposteremo il nostro focus sui concetti front-end. Rimanere sintonizzati per la seconda parte della serie. Condividi i tuoi pensieri nei commenti.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.