Laravel 11 e Vue.js: progettazione pagina Vue, Datatable con Laravel API
Laravel 11 e Vue.js è una combinazione ottimale per scrivere codice pulito ed efficiente.
In questo tutorial vediamo insieme come creare una pagine con Vue.js in laravel 11 utilizzando laravel API.
Per provare Vue.js creeremo un endpoint API per ottenere i post e li visualizzeremo in una tabella.
Tempo di lettura stimato: 4 minuti
Per leggere e comprendere al pieno questo articolo si consiglia la lettura dell'articolo Laravel 11 e Vue.js: installazione, configurazione ed esempi, e implementazione del codice che puoi trovare su repository GitHUB.
Database
Innanzitutto, dobbiamo creare un modello, una migrazione, un controller e un percorso API. Come anticipato nell'articolo Laravel 11 e Vue.js: installazione, configurazione ed esempi andiamo a gestire l'entità di dato Post.
Con questo comando Artisan andiamo a creare il modello Post e il file di migration:
php artisan make:model Post -m
Modifichiamo il file di Migration database/migrations/xxxx_create_posts_table.php come segue:
public function up(): void
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->longText('content');
$table->timestamps();
});
}
Modifichiamo il file Model app/Models/Post.php come segue:
class Post extends Model
{
protected $fillable = ;
}
Creiamo il controller PostController, e in particolare specifichiamo il Folder Api
php artisan make:controller Api/PostController
Nel controller per ora restituiremo solo una raccolta di tutti i post.
app/Http/Controllers/Api/PostController.php :
class PostController extends Controller
{
public function index()
{
return Post::all();
}
}
Andiamo ora a definire le Routes. Poiché tutti i percorsi saranno per API, li aggiungeremo al file routes/api.php. In questo modo Laravel aggiungerà automaticamente un prefisso api/ alle rotte. Prima di ciò, dobbiamo eseguire il comando Artisan install:api per preparare l'applicazione Laravel per l'API.
php artisan install:api
Il comando Artisan appena eseguito, andrà a modificare il file app.php presente sotto la directory bootstrap. Verifica il file bootstrap/app.php:
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
api: __DIR__.'/../routes/api.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware) {
$middleware->statefulApi();
})
->withExceptions(function (Exceptions $exceptions) {
//
})->create();
Adesso possiamo aggiungere la rotta posts nel file routes/api.php, per fare il nostro esempio:
use AppHttpControllersApiPostController;
Route::get('posts', );
Chiamata API da Vue
Ora possiamo aggiungere il codice JS al componente Vue PostsIndex che abbiamo creato nell'articolo Laravel 11 e Vue.js: installazione, configurazione ed esempi. Tutto il codice JS deve essere inserito nel tag
Successivamente, creeremo un metodo fetchPosts che effettuerà una richiesta di acquisizione e /api/posts recupererà tutti i post.
Quando la richiesta ha esito positivo, il metodo .then verrà eseguito. Aggiungerà tutti i post dalla risposta API alla variabile dati posts.
Se qualcosa va storto, utilizziamo .catch per avere eventuali errori. Per ora ci limiteremo all'uso del file console.log.
Quando i componenti vengono montati (in altre parole, inizializzati), dobbiamo chiamare fetchPosts(). La chiamata verrà fatta nel mounted. Usiamo la sintassi di this.fetchPosts(), infatti proviene dallo stesso componente.
Il file resources/js/components/Posts/Index.vue diventa:
// ...
Tre osservazioni:
- Le variabili si inizializzano in data()
- Aggiungiamo funzioni custom in methods:
- Se è necessario richiamare immediatamente tali funzioni, è necessario richiamarle nel mounted()
Ora visita l'Home Page e apri l'Inspect del browser. Nella scheda Network vedrai che la richiesta API è stata effettuata /api/posts, e mostra tutti i post nella parte Risposta.
GET Api Laravel VueVisualizzazione dei dati API nella tabella
Ora dobbiamo mostrare tutti questi post nella tabella. Per questo utilizzeremo la direttiva Vue v-for nell'elemento riga tr della tabella.
Sostituiamo i dati statici presenti in tabella, con v-for="post in posts":
resources/js/components/Posts/Index.vue :
ID
Title
Content
Created at
{{ post.id }}
{{ post.title }}
{{ post.content }}
{{ post.created_at }}
Praticamente post in posts significa che prende la variabile posts dalla parte del componente , ed esegue un ciclo, assegnando ogni elemento alla variabile post. Equivale al foreach ($posts as $post) del PHP.
Ora, dopo un refresh della pagina sul browser, dovresti vedere la tabella con tutti i post recuperati dall'API.
Tabelle da API Vue LaravelLetture Correlate
- Come utilizzare Laravel con Vue.js 3
- Vue e Laravel: creare una Single Page Appliction
- Tecnologie energetiche green: nuovo bando dell'Innovation Fund per progetti su piccola scala
- Frequenza di rimbalzo: come misurare, valutare e verificare per aumentare le conversioni
- Come installare ChatGPT in locale sul tuo computer
Ercole Palmeri
Ercole Palmeri
#laravel #php #SoftwareEngineering #Tutorial
https://bloginnovazione.it/laravel-vue-api/48461/
Commenti
Posta un commento