Aplicația de față va crea un Address Book simplu, va oferi funcționalitățile CRUD prin folosirea frameworkului Nuxt / Vue, iar pentru afișare va utiliza Vuetify. Principalele avantaje sunt reprezentate de codul relativ simplu, definirea și refolosirea componentelor, realizarea unui storage intern al aplicației. Serviciul va rula ca o aplicație SPA în browserul utilizatorului urmând ca în ediția următoare a revistei să publicăm și o integrare cu un server Node.js și MongoDB.
Conține următoarele elemente principale:
pages/Index.vue - pagina aplicației. Afișează lista de contacte.
components/Contact.vue - componenta de afișare a unui contact din listă, inclusiv a butonului de update.
components/ContactForm.vue - componenta va afișa o fereastră de dialog ce permite adăugarea/modificarea/ștergerea unui contact. Este inclusă în Index.vue și Contact.vue.
store/contact.js - componenta Vuex este responsabilă de partea de stocare și manipulare a modelului de date.
Pornim la drum prin crearea unui nou proiect în Nuxt și răspundem la întrebările wizardului
npx create-nuxt-app AddressBook
Lansăm proiectul nou creat: npm run dev și deschidem http://localhost:3000/
Tema default este dark, vă propun să avem o pagină mai luminoasă și să realizăm buildul doar pentru client. Pentru acestea vom modifica nuxt.config.js astfel:
....
mode: 'spa',
…
theme: {
dark: false,
…Pentru cei care venim din zona de backend, utilizarea unui framework care face să arate bine toate componentele de UI este un mare plus. Vuetify realizează acest lucru și este direct integrat în Nuxt. Vă invit să vă uitați peste componentele puse la dispoziție.
Vom folosi componenta v-list pentru a afișa lista de contacte. Pornim de la un exemplu existent și înlocuim conținutul fișierului pages/Index.vue cu următorul:
<template>
<div>
<v-card max-width=”500”
class=”mx-auto”>
<v-toolbar color=”indigo”
dark>
<v-app-bar-nav-icon>
</v-app-bar-nav-icon>
<v-toolbar-title>Inbox
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify
</v-icon>
</v-btn>
<v-btn icon>
<v-icon>
mdi-dots-vertical
</v-icon>
</v-btn>
</v-toolbar>
<v-list>
<v-list-item
v-for=”item in items”
:key=”item.name”>
<v-list-item-content>
<v-list-item-title
v-text=”item.name”>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{name: ‚Jason Oner’},
{name: ‚Travis Howard’},
{name: ‚Ali Connors’},
{name: ‚Cindy Baker’},
],
}
}
}
</script>Câteva observații în legătură cu codul de mai sus. Sunt afișate toate elementele definite în array-ul items folosind '
Observăm în pagina noastră elementele de demo generate în cadrul proiectului de care nu avem nevoie. Vom modifica layoutul aplicației definită în layouts/default.vue astfel încât să rămână:
<template>
<v-app dark>
<v-container>
<nuxt />
</v-container>
</v-app>
</template>
Creăm o nouă componentă în folderul components pe care o numim Contact.vue. Vom înlocui afișarea numelui fiecărui contact:
<v-list-item-title v-text="item.name">
</v-list-item-title>cu noua componentă în Index.vue
<Contact
:firstname=item.firstname
:lastname=item.lastname>
</Contact>Observați folosirea acum a firstname și lastname pentru un mai bun control. Pentru aceasta a trebuit să redefinim json-ul inițial
items: [
{firstname: 'Jason', lastname:'Oner'},
...
],Revenim la componenta Contact.vue și codul sursă al acesteia:
<template>
<div onclick=””>
<v-row>
<v-col align=”center”>
{{lastname}} {{firstname}}
</v-col>
<v-col align=”right”>
<v-dialog v-model=”dialog”
persistent max-width=”600px”>
<template v-slot:activator=”{on, attrs}”>
<v-btn
elevation=”0”
v-bind=”attrs”
v-on=”on”>
<v-icon large color=”blue darken-2”>
mdi-message-text
</v-icon>
</v-btn>
</template>
<v-card>
<v-form v-model=”valid”>
<v-card-title>Contact edit
</v-card-title>
<v-card-text>
<v-row>
<v-col>
<v-text-field
v-model=”firstname”
label=”First Name” required>
</v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field v-model=”lastname”
label=”Last Name” required>
</v-text-field>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-btn @click.stop=”dialog=false”>
Cancel
</v-btn>
<v-spacer></v-spacer>
<v-btn elevation=”0”
style=”background-color: white; text-
align: center” @click=”update()”
:disabled=”!valid”>Update
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</v-col>
</v-row>
</div>
</template>
<script>
export default {
name: „Contact”,
props:[‚firstname’,’lastname’],
data:()=>({
dialog: false,
}),
methods:{
update(){
this.dialog=false;
}
}
}
</script>
<style scoped>
</style>A se remarca modul în care definim în props[] și folosim pentru afișare proprietățile componentei first/lastname. În cazul în care se modifică, valorile acestea vor fi reflectate în lista noastră. Din păcate, modificarea directă a proprietăților afișate nu este cea mai bună practică. Soluția este realizarea unui store intern unde vom modifica datele.
Vom folosi componenta Vuex, valorificând următoarele concepte legate de persistența datelor:
State - este locul unde sunt definite proprietățile, datele aplicației. Accesul la acestea nu se realizează direct, doar prin următorul nivel;
Mutations - schimbarea stării datelor se realizează aici, putem defini operații CRUD.
Concret, mai jos este codul sursă al fișierului store/contact.js. Se poate observa separarea logicii între cele trei nivele și nivelul getters de export al valorii datelor. Contactele sunt definite ca json și sunt stocate în tabloul list. O observație: operația de update a elementelor din list a fost implementată ca un delete + add, deoarece o simplă modificare în interiorul elementelor nu propagă modificările spre componentele vue. Nivelul actions exportă operațiile CUD și tot aici am mutat metoda de pre-populare a datelor.
export const state =()=>({
list:[]
})
export const mutations={
add(state,contact){
if (contact.id==null) {
contact[„id”] = state.list.length + 1;
}
state.list.push(contact);
},
delete(state, contact){
let index=state.list.findIndex((value, index)
=> (value.id===contact.id));
if (index>=0){
state.list.splice(index,1);
}
},
update(state,contact){
this.commit(„contacts/delete”,contact);
this.commit(„contacts/add”,contact);
}
}
export const getters={
contact:(state)=>(id)=>(state.list.filter((value)=>(value.id===id)).slice(0))
,contacts:(state) =>(state.list.slice(0)
.sort((a, b) =>
((‚’+a.firstname).localeCompare(b.firstname)))),
}
export const actions={
init({commit}){
commit(„add”,{firstname: ‚Jason’, lastname:’Oner’})
commit(„add”,{firstname: ‚Travis’,lastname:’Howard’})
commit(„add”,{firstname: ‚Ali’,lastname:’Connors’})
commit(„add”,{firstname: ‚Cindy’, lastname:’Baker’})
},
update({commit},contact){
commit(„update”,contact);
},
delete({commit}, contact){
commit(„delete”,contact);
},
add({commit},contact){
commit(„add”,contact);
}
}Revenim la pages/Index.vue unde aplicația integrează citirea datelor din contacts.js:
export default {
components: {ContactForm, Contact},
fetch(){
this.$store.dispatch(‚contacts/init’);
},
computed:{
...mapGetters({
contacts:’contacts/contacts’
}),
},
}Sunt folosite două componente: ContactForm pentru adăugarea unui nou contact și Contact pentru afișarea unei înregistrări. De asemenea, în metoda fetch() lansăm acțiunea de inițializare prin metoda dispatch(). Prin ...mapGetter() avem acces la citirea listei de contacte. A se remarca cele trei puncte din față: spread operator
În ceea ce privește template-ul html, am inclus componenta noastră ContactForm.
<v-toolbar color=”indigo” dark>
<v-toolbar-title>Address Book</v-toolbar-title>
<v-spacer></v-spacer>
<ContactForm></ContactForm>
</v-toolbar>Afișarea listei de contacte se realizează prin parcurgerea listei contacts și afișarea fiecărui rând prin componenta Contact.
<v-list-item
v-for=”item in contacts” :key=”item.name”>
<v-list-item-content>
<Contact :id=item.id
:firstname=item.firstname
:lastname=item.lastname>
</Contact>
</v-list-item-content>
</v-list-item>ContactForm ne permite adăugarea de noi elemente. Așa cum se vede în codul de mai jos, componenta acceptă trei parametri: id, firstname și lastname. Prezența id-ului indică faptul că avem o operație de update, iar în caz contrar vom avea o operație de definire a unui contact. Datele folosite sunt:
dialog - controlează afișarea ferestrei modale;
export default {
name: „ContactForm”,
props: [‚id’, ‚firstname’, ‚lastname’],
data: () => ({
dialog: false,
contact_local:{
firstname:’’,
lastname:’’
}
}),
computed: {
contact_copy()
{
this.contact_local.firstname= this.firstname;
this.contact_local.lastname = this.lastname;
return this.contact_local;
},
},Folosim metoda $store.dispatch() pentru a apela acțiunea de update din store.
update() {
this.$store.dispatch(‚contacts/update’, {
id: this.id,
firstname: this.contact_local.firstname,
lastname: this.contact_local.lastname
});
this.closeForm();
},Procedăm similar și pentru cazul de ștergere:
deleteContact() {
this.$store.dispatch(‚contacts/delete’, {
id: this.id
});
this.closeForm();
},În codul html afișăm semnul de editare sau un plus în funcție de prezența id-ului contactului.
<v-dialog v-model=”dialog” persistent max-width=”600px”>
<template v-slot:activator=”{on, attrs}”>
<v-btn
style=”!important;background-color: transparent”
elevation=”0”
v-bind=”attrs”
v-on=”on”>
<div v-if=”id!=null”>
<v-icon large color=”blue darken-2”>
mdi-message-text</v-icon>
</div>
<div v-else>
<v-icon large>mdi-plus</v-icon>
</div>
</v-btn>
</template>
<v-card>
<v-form>
<v-card-title>Contact info</v-card-title>
<v-card-text>
<v-row>
<v-col>
<v-text-field
v-model=”contact_copy.firstname”
label=”First Name” required>
</v-text-field>
</v-col>
</v-row>
….
Codul sursă poate fi descărcat de pe GitHub și rulat în felul următor:
git clone https://github.com/ovidiumatan/addrbk.git
npm install
npm run devAceasta a fost o scurtă introducere în Nuxt și Vuetify. Sper că v-am făcut curioși. Vă sugerez să descărcați codul sursă pentru o mai bună înțelegere. Timpul de învățare este relativ scurt, iar un programator de backend poate să se înțeleagă mult mai ușor cu tot ce înseamnă UI.
de Ovidiu Mățan
de Diana Țelman
de Oana Urs , Nora Vințeler
