In questa seconda parte del nostro articolo su come creare una single page application con October e Vue andremo a vedere i componenti Vue necessari per utilizzare le API viste nella prima parte dell'articolo.
Entriamo quindi nella cartella del nostro progetto Vue che nel nostro caso è la directory 'vue-task' ed editiamo il file index.html come di seguito dove non facciamo altro che includere Bootstrap per dare velocemente un minimo di decoro alla nostra lista andando ad aggiungere una navbar seguida dal div con id 'app' che sarà la root della nostra applicazione Vue.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>Vue tasks</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Cose da fare</a>
</nav>
<div id="app"></div>
</body>
</html>
Il componente App è l'entry point della nostra applicazione all'interno del quale definiamo un template dove viene richiamato un componente nominato TaskList passandogli i dati che a sua volta li passerà uno ad uno al componente Task che ne definisce la rappresentazione a video come vedremo più avanti.
Apriamo il file App.vue presente nella cartella src del nostro progetto e sostiutiamo la sezione del template con la seguente:
<template>
<div id="app" class="container">
<div class="row">
<TaskList v-bind:tasks="tasks"></TaskList>
</div>
</div>
</template>
Tra i tag template troviamo il codice html che sostituirà il div con id="app" del file index.html visto prima. Il tag TaskList si riferisce al componente TaskList, lì è dove sarà iniettato e renderizzato. Per poterlo utilizzare dobbiamo dichiararlo nella proprietà components
<script>
import TaskList from './components/TaskList'
import axios from 'axios';
export default {
name: 'App',
components: {
TaskList
},
data: function(){
return {
tasks: []
}
},
mounted: function(){
var _self = this
axios.get('http://dominio.com/tasks/').then(function(response){
_self.tasks = response.data
})
}
}
</script>
Ricordo che un componenete Vue è un semplice file di testo con estensione .vue contentente tre sezioni; una html per il template che lo rappresenta a video, una per la logica javascript e l'ultima per lo stile personalizzato.
Nella sezione javascript andiamo a importare il nostro componente TaskList che andremo poi a creare e la libreria axios che abbiamo installato precedentemente come descritto nel primo articolo di questa serie che ci serve per le chiamate Ajax al nostro endpoint.
La sezione style possiamo svuotarla e lasciarla vuota dato che in questo caso non ci serve.
Il file completo sarà:
<template>
<div id="app" class="container">
<div class="row">
<TaskList v-bind:tasks="tasks"></TaskList>
</div>
</div>
</template>
<script>
import TaskList from './components/TaskList'
import axios from 'axios';
export default {
name: 'App',
components: {
TaskList
},
data: function(){
return {
tasks: []
}
},
mounted: function(){
var _self = this
axios.get('http://dominio.com/tasks/').then(function(response){
_self.tasks = response.data
})
}
}
</script>
<style>
</style>
Probabilmente troverete in console un errore di Site Cross Origin che impedisce alla chiamata ajax di andare a buon fine, questo perchè i due domini del back e del front sono diversi, per aggirare il problema aggungiamo al nostro file .htaccess presente nella root del sito le righe seguenti:
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>Assicurandoci di avere il modulo headers di apache abilitato. Per abilitarlo digitare alla console
sudo a2enmod headers
senza dimenticare di riavviare apache in modo da applicare la modifca con
sudo service apache2 restart
Questo metodo è indicato solo per contesti come questo in quanto permette a chiunque di eseguire chiamate ajax al nostro back, normalmente front e back sono sullo stesso dominio e il problema non si pone, in caso contrario sarà necessario configurare una politica di CORS in modo adeguato alla propria casistica
In data rendiamo disponibile un array di nome tasks che andremo ad alimentare tramite la chiamata alla nostra API che ci ritorna l'elenco dei nostri tasks.
La funzione dichiarata in mounted viene richiamata quando i componenti sono disponibili, un po' come se fosse l'equivalente del ready di Jquery.
Come si nota abbiamo dovuto assegnare this ad una variabile (_self) per poter aggiornare l'array tasks con il response della chiamata ajax perchè this all'interno della promise si riferirebbe allo scope interno e non a quello esterno dove è disponibile il nostro array da aggiornare.
L'array tasks viene attribuito alla proprietà tasks del componenete TaskList tramite il comando
v-bind:tasks="tasks"
abbreviabile in :tasks="tasks"
Ricapitolando index.html carica App.vue che definisce il contenitore principale dell'applicazione richiamando il componente TaskList passandogli un array di oggetti (tasks) reso disponibile tramite data e popolandolo al caricamento della pagina chiamando l'API di October che ritorna l'elenco dei tasks inseriti precedentemente da backend.
A questo punto il gioco è fatto e il nostro frontend in Vue recupera e mostra correttamente i dati ricevuti dal backend di October e ci troveremo davanti una schermata del genere
Nella prossima parte vedremo come migliorare la nostra applicazione aggiungendo un po' di iterazione con l'utente.
Lunga vita e prosperità