Come creare una spa con October e Vue - Parte 1

Luca Benati

Creiamo una single page application in pochissimo tempo con October e Vue parte 1


Pubblicato da Luca Benati il 27 settembre 2019

Come promesso eccoci con un'articolo in più puntate dove vedremo come creare una SPA unendo le migliori qualità del nostro CMS preferito October e Vue il noto framework javascript sul podio insieme ad Angular e React.

Per rimanere in linea con la documentazione di Laravel, che ricordiamo essere il framework PHP utilizzato da October, riprodurremo la Todo list proposta nel tutorial della documentazione di Laravel presente in questa pagina.

Creare un Plugin del genere con October è questioni di pochi minuti con il comodissimo Builder liberamente disponibile tra i plugin gratuiti:

  • Creiao il nuovo plugin


  • Creaiamo la tabella che conterra i nostri dati, per ora avremo solo l'id, il nome del task e le date di creazione e modifica


  • Creiamo la form per l'inserimento e la modifica dei Task da backend


  • Creiamo la lista delle colonne visibili nella vista lista dove anche in questo caso avremo solo l'Id e il nome del Task


  • Creiamo la nuova voce di menu per il backend


  • Creiamo il Controller

E per finire all'interno del file routes.php nella root del nostro plugin creiamo le due route, una per farci ritornare tutti i tasks e l'altra per ritornarne uno solo basandoci sull'id


use Lbenati\Task\Models\Task;

Route::get('/task/{id}', function($id){

    return Task::findOrFail($id);
});

Route::get('/tasks', function(){

    return Task::all();
});

Ora se inseriremo un paio di tasks andando all'indirizzo


http://dominio.com/task/1

vedremo il nostro task con id 1 già disponibile in formato json senza bisogno di fare altro

In modo analogo andando all'indirizzo


http://dominio.com/tasks

vedremo l'elenco di tutti i tasks inseriti.

Bene, ora non ci resta che preparare October per integrare Vue, il framework javascript che utilizzeremo in frontend.

Come prima cosa se ancora non lo abbiamo installato procediamo con installare vue-cli che useremo per creare il nostro nuovo progetto Vue, apriamo quindi un terminale e installiamo Vue CLI digitando


sudo npm install -g @vue/cli

Poi ci servirà il comando init che con la nuova versione di Vue CLI (3.x) non è più presente nel core ma è disponibile attraverso un addon


sudo npm install -g @vue/cli-init

Ora spostiamoci nella cartella di root di installazione di October e creiamo il nuovo progetto Vue:


vue init webpack vue-task

E rispondiamo alle domande che ci vengono poste

Ora entriamo nella cartella del nuovo progetto Vue e lanciamo l'installazione


cd vue-task


npm install

Una volta che ha terminato lanciamo il comando


npm run dev

se tutto è andato per il verso giusto ci troveremo davanti a una schermata come questa

che ci indica che il nostro progetto è correttamente online all'indirizzo indicato ed aprendolo in una finestra del browser ne avremo conferma visualizzando la pagina di default di un nuovo progetto di Vue


Ora che abbiamo verificato che tutto funziona correttamente procediamo con installare una libreria per effettuare le chiamata Ajax alle API di October che forniranno i dati da visualizzare alla nostra applicazione, entriamo quindi nelal cartella vue-task che contiene il nostro progetto Vue e digitiamo


npm install --save-dev axios

Terminata l'intallazione siamo pronti per utilizzare la libreria all'interno del nostro progetto Vue.

Nel prossimo articolo vedremo come recuperare i dati dalle API di October tramite la libreria Axios e visualizzarli utilizzando Vue.


Lunga vita e prosperità

Ti interessa un argomento non trattato?