# Augmentarea Clientului cu Vue.js
În postarea mea anterioară, am pus bazele pentru a construi mai departe. Acum este momentul să începem “pe bune”. Am auzit multe despre Vue.js. În plus, un prieten care a trecut de la dezvoltator la manager mi-a spus lucruri bune despre Vue, lucru care mi-a stârnit și mai mult interesul. Am decis să arunc o privire asupra acestuia. Va fi primul framework JavaScript “ușor” pe care îl studiez – din perspectiva unui începător, așa cum sunt.
## Implementarea Lucrului
Am explicat WebJars și Thymeleaf în ultima postare. Iată configurația, atât pe server, cât și pe client.
### Partea de Server
Aici este cum integrez ambele în POM:
“`xml
“`
În ceea ce privește Spring Boot în sine, am ales abordarea obișnuită, non-reactivă. Integrarea Spring Boot Thymeleaf este făcută pentru a evita specificarea versiunii Vue pe partea de client.
### Partea de Client
Iată codul de pe partea de HTML:
“`html
“`
Axios ajută la efectuarea cererilor HTTP, Vue însuși, și codul nostru de pe partea de client.
## Codul Vue
Acum, să ne aventurăm în codul Vue. Dorim să implementăm mai multe funcționalități:
1. După încărcarea paginii, pagina ar trebui să afișeze toate elementele Todo
2. Când se face clic pe căsuța cu bifă pentru un Todo, ar trebui să seteze/elimine atributul completat
3. Când se face clic pe butonul de Cleanup, ar trebui să șteargă toate Todo completate
4. Când se face clic pe butonul de Adăugare, ar trebui să adauge un Todo la lista de Todo-uri cu următoarele valori:
– id: ID-ul calculat la nivel de server ca maxim din toate celelalte ID-uri plus 1
– label: valoarea câmpului Label pentru etichetă
– completat: setat la fals
## Primele Noastre Pași în Vue
Primul pas este să lansăm framework-ul. Am setat deja referința pentru fișierul nostru vue.js personal mai sus.
“`javascript
document.addEventListener(‘DOMContentLoaded’, () => {
// Blocul următor de cod JavaScript va fi în interiorul acestui bloc
})
“`
Rulăm blocul când DOM-ul a terminat de încărcat. Pasul următor este să permitem lui Vue să gestioneze o parte a paginii. Pe partea de HTML, trebuie să decidem ce parte de nivel superior gestionează Vue. Putem alege un <div> arbitrar și să îl schimbăm mai târziu, dacă este necesar.
“`html
“`
Pe partea de JavaScript, creăm o aplicație, trecând selectorul CSS al div-ului HTML anterior.
“`javascript
Vue.createApp({}).mount(‘#app’);
“`
La acest punct, lansăm Vue când pagina se încarcă, dar nu se întâmplă nimic vizibil. Pasul următor este să creăm un șablon Vue. Un șablon Vue este un HTML regulat gestionat de Vue. Puteți defini Vue în JavaScript, dar prefer să o fac pe pagina HTML. Să începem cu un șablon părinte care poate afișa titlul.
“`html
{{ title }}
“`
La acest punct, Vue afișează titlul.
## Interacțiuni de Bază
La acest punct, putem implementa acțiunea atunci când utilizatorul face clic pe o căsuță cu bifă: trebuie actualizată starea server-side. Mai întâi, am adăugat un nou șablon Vue imbricat pentru tabelul care afișează Todo. Pentru a evita lungirea postării, evit să îl descriu în detaliu. Dacă sunteți interesat, aruncați o privire la codul sursă. Iată linia de început a codului șablon, respectiv JavaScript și HTML:
“`javascript
const TodoLine = {
props: [‘todo’],
template: document.getElementById(‘todo-line’).innerHTML
}
“`
“`html
“`
Vue permite gestionarea evenimentelor prin intermediul sintaxei @.
“`html
“`
Vue apelează funcția check() a șablonului atunci când utilizatorul face clic pe linie. Definim această funcție într-un parametru setup():
“`javascript
const TodoLine = {
props: [‘todo’],
template: document.getElementById(‘todo-line’).innerHTML,
setup(props) {
const check = function(event) {
const { todo } = props
axios.patch(
`/api/todo/${todo.id}`,
{ checked: event.target.checked }
)
}
return { check }
}
}
“`
Acceptăm array-ul props, pentru a putea accesa ulterior valoarea. Vue trimit evenimentul care a declanșat apelul. Axios este o librarie JavaScript care simplifică apelurile HTTP. Serverul trebuie să furnizeze un API; este în afara domeniului acestei postări, dar vă invit să verificați codul sursă. Returnăm toate funcțiile definite pentru a le face accesibile din HTML.
## Modelul Pe Partea de Client
În secțiunea anterioară, am făcut două greșeli: nu am gestionat niciun model local și nu am folosit metoda apelării răspunsului HTTP. Vom face asta implementând următoarea funcționalitate, și anume curățarea activităților completate. Acum știm cum să gestionăm evenimentele prin intermediul lui Vue:
“`html
“`
Pe obiectul TodosApp, adăugăm o funcție cu același nume:
“`javascript
const TodosApp = {
props: [‘title’, ‘todos’],
components: { TodoLine },
template: document.getElementById(‘todos-app’).innerHTML,
setup() {
const cleanup = function() {
axios.delete(‘/api/todo:cleanup’).then(response => {
state.value.todos = response.data
})
}
return { cleanup }
}
}
“`
Axios oferă conversia automată a JSON-ului apelurilor HTTP, iar state este locul unde stocăm modelul. În terminologia Vue, modelul Vue este un înveliș reactiv în jurul datelor pe care dorim să fie reactive. Reactive înseamnă legare în ambele direcții între vizualizare și model. Putem face o valoare existentă să fie reactivă trecând-o la metoda ref():
“`javascript
const state = ref({
title: window.vueData.title,
todos: window.vueData.todos
})
“`
Creăm aplicația:
“`javascript
createApp({
components: { TodosApp },
setup() {
return { …state.value }
},
render() {
return h(TodosApp, {
todos: state.value.todos,
title: state.value.title,
})
}
}).mount(‘#app’);
“`
La acest punct, avem un model reactiv pe partea de client. Pe partea de HTML, folosim atributele Vue relevante:
“`html
“`
Iterăm prin lista de obiecte Todo. Atributul is este crucial pentru a face față modului în care browser-ul analizează HTML-ul. Consultați documentația Vue pentru mai multe detalii. Am descris șablonul corespunzător mai sus.
## Actualizarea Modelului
Acum putem implementa o nouă funcționalitate: adăugarea unui nou Todo din partea de client. Atunci când faceți clic pe butonul Adăugare, citim valoarea câmpului Etichetă, trimitem datele la API și reîmprospătăm modelul cu răspunsul. Iată codul actualizat:
“`javascript
const TodosApp = {
props: [‘title’, ‘todos’],
components: { TodoLine },
template: document.getElementById(‘todos-app’).innerHTML,
setup() {
const label = ref(”)
const create = function() {
axios.post(‘/api/todo’, { label: label.value }).then(response => {
state.value.todos.push(response.data)
}).then(() => {
label.value = ”
})
}
const cleanup = function() {
axios.delete(‘/api/todo:cleanup’).then(response => {
state.value.todos = response.data
})
}
return { label, create, cleanup }
}
}
“`
Creăm un înveliș reactiv în jurul titlului, a cărui scop este limitat la funcția. Funcțiunea create(). Concatenăm noul obiect JSON returnat de apelul API la lista de Todo. Resetăm valoarea câmpului. Înlocuim întreaga listă la ștergere; mecanismul este același. Pe partea de HTML, adăugăm un buton și îl legăm de funcția create(). La fel, adăugăm câmpul Etichetă și îl legăm de model.
“`html
“`
Vue leagă funcția create() de butonul HTML. O apelează asincron și reîmprospătează lista reactivă de Todo-uri cu noul element returnat de apel. Facem același lucru pentru butonul Cleanup, pentru a elimina obiectele Todo bifate. Menționez că intenționat nu am implementat nicio cod de gestionare a erorilor pentru a evita complexitatea inutilă a codului. Mă voi opri aici deoarece am obținut suficiente informații pentru o primă experiență.
**Concluzie**
În această postare, am făcut primii pași în augmentarea unei aplicații SSR cu Vue. A fost destul de simplu. Cel mai mare obstacol întâmpinat a fost ca Vue să înlocuiască șablonul liniei: nu am citit extensiv documentația și am pierdut atributul is. Cu toate acestea, am scris destule linii de JavaScript, deși am folosit Axios pentru a mă ajuta cu apelurile HTTP și am neglijat gestionarea erorilor. În următoarea postare, voi implementa aceleași funcționalități cu Alpine.js. Codul sursă complet pentru această postare poate fi găsit pe GitHub.
*Du-te mai departe cu Vue.js*