A la meva   , vaig posar el terreny per construir-hi; ara és el moment de començar "de veritat". publicació anterior  Vaig escoltar molt de   A més, un amic que va passar de desenvolupador a gestor em va dir coses bones sobre Vue, cosa que va despertar encara més el meu interès. Vaig decidir fer-hi una ullada: serà el primer framework de JavaScript "lleuger" que estudiaré, des del punt de vista d'un principiant, que sóc. Vue.js.  Distribució de l'obra  Vaig explicar WebJars i Thymeleaf a l'última publicació. Aquí teniu la configuració, servidor i client.  Del costat del servidor  Així és com integro tots dos al POM:   <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId>  </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId>  </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId>  <version>0.52</version> </dependency> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>vue</artifactId>  <version>3.4.34</version> </dependency> </dependencies>  Spring Boot mateix; Vaig decidir l'enfocament regular i no reactiu  Integració de Spring Boot Thymeleaf  Localitzador de WebJars, per evitar especificar la versió de Vue al costat del client  Mira, per fi!  Estic utilitzant els DSL Kotlin Router i Bean al costat de Spring Boot:   fun vue(todos: List<Todo>) = router { //1 GET("/vue") { ok().render("vue", mapOf("title" to "Vue.js", "todos" to todos)) //2-3 } }  Passeu una llista estàtica d'objectes  Todo  Vegeu a continuació  Passeu el model a Thymeleaf  Si estàs acostumat a desenvolupar API, estàs familiaritzat amb la funció   ; retorna directament la càrrega útil, probablement en format JSON. El   passa el flux a la tecnologia de visualització, en aquest cas, Thymeleaf. Admet dos paràmetres: body() render()  Nom de la vista. Per defecte, el camí és   i el prefix és   ; en aquest cas, Thymeleaf espera una vista a  /templates .html /templates/vue.html  Un model de mapa de parells clau-valor  Del costat del client  Aquí teniu el codi a la part HTML:   <script th:src="@{/webjars/axios/dist/axios.js}" src="https://cdn.jsdelivr.net/npm/axios@1.7/dist/axios.min.js"></script>  <script th:src="@{/webjars/vue/dist/vue.global.js}" src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>  <script th:src="@{/vue.js}" src="../static/vue.js"></script>  <script th:inline="javascript"> /*<![CDATA[*/ window.vueData = {  title: /*[[${ title }]]*/ 'A Title', todos: /*[[${ todos }]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] }; /*]]>*/ </script>    ajuda a fer sol·licituds HTTP Axios  Vue en si  El nostre codi del costat del client  Estableix les dades  Tal com es va explicar a l'article de la setmana passada, un dels avantatges de Thymeleaf és que permet la representació de fitxers estàtics i la representació del costat del servidor. Perquè la màgia funcioni, especifico una ruta del costat del client,   ,   , i una ruta del costat del servidor,   ,   .  és a dir src és a dir th:src  El codi Vue  Ara, endinsem-nos en el codi Vue.  Volem implementar diverses característiques:  Després de carregar la pàgina, la pàgina hauria de mostrar tots els elements  Todo  Quan feu clic a una casella de selecció   completat, hauria d'establir/desactivar l'atribut  Todo completed  Quan feu clic al botó   , s'elimina tot   que heu completat Neteja Todo  En fer clic al botó   , hauria d'afegir una   a la llista de   amb els valors següents: Afegeix Todo Todo    : identificador calculat del servidor com a màxim de tots els altres identificadors més 1 id    : valor del camp   per  label Etiqueta label    : s'estableix com  completed false  Els nostres primers passos a Vue  El primer pas és arrencar el marc. Ja hem configurat la referència del nostre fitxer   personalitzat més amunt. vue.js   document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }  Executeu el bloc quan el DOM s'hagi acabat de carregar  El següent pas és deixar que Vue gestione part de la pàgina. Pel que fa a l'HTML, hem de decidir quina part de nivell superior gestiona Vue. Podem triar un   arbitrari i canviar-lo més tard si cal. <div>   <div id="app"> </div>  Al costat de JavaScript, creem una   , passant el selector CSS de l'HTML anterior   . aplicació <div>   Vue.createApp({}).mount('#app');  En aquest punt, iniciem Vue quan es carregui la pàgina, però no passa res visible.  El següent pas és crear una   Vue. Una plantilla Vue és una   HTML normal gestionada per Vue. Podeu definir Vue en Javascript, però prefereixo fer-ho a la pàgina HTML. plantilla <template>  Comencem amb una plantilla arrel que pugui mostrar el títol.   <template id="todos-app">  <h1>{{ title }}</h1>  </template>  Establiu l'identificador per enquadernar fàcilment  Utilitzeu la propietat   ; queda per configurar title  Pel costat de JavaScript, hem de crear el codi de gestió.   const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }  Declara la propietat   , la que s'utilitza a la plantilla HTML title  Finalment, hem de passar aquest objecte quan creem l'aplicació:   Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');  Configura el component  Vue espera la funció  render()    per a   crea un node virtual a partir de l'objecte i les seves propietats h() l'hiperscript  Inicieu la propietat   amb el valor generat al costat del servidor title  En aquest punt, Vue mostra el títol.  Interaccions bàsiques  En aquest punt, podem implementar l'acció quan l'usuari fa clic a una casella de selecció: cal actualitzar-la a l'estat del servidor.  Primer, he afegit una nova plantilla Vue imbricada per a la taula que mostra   . Per no allargar el post, evitaré descriure-lo amb detall. Si esteu interessats, feu una ullada al   . Todo codi font  Aquí teniu el codi de la plantilla de línia inicial, respectivament JavaScript i HTML:   const TodoLine = { props: ['todo'], template: document.getElementById('todo-line').innerHTML }   <template id="todo-line"> <tr> <td>{{ todo.id }}</td>  <td>{{ todo.label }}</td>  <td> <label> <input type="checkbox" :checked="todo.completed" /> </label> </td> </tr> </template>  Mostra l'identificador  Todo  Mostra l'etiqueta  Todo  Marqueu la casella si el seu atribut   és  completed true  Vue permet la gestió d'esdeveniments mitjançant la sintaxi   . @   <input type="checkbox" :checked="todo.completed" @click="check" />  Vue crida a la funció   de la plantilla quan l'usuari fa clic a la línia. Definim aquesta funció en un paràmetre   : check() setup()   const TodoLine = { props: ['todo'], template: document.getElementById('todo-line').innerHTML, setup(props) { //1 const check = function (event) { //2 const { todo } = props axios.patch( //3 `/api/todo/${todo.id}`, //4 { checked: event.target.checked } //5 ) } return { check } //6 } }  Accepteu la matriu   , perquè més tard hi puguem accedir props  Vue passa l'   que va activar la trucada event  Axios és una llibreria de JavaScript que simplifica les trucades HTTP  El costat del servidor   proporcionar una API; està fora de l'abast d'aquesta publicació, però no dubteu a comprovar el codi font. ha de  Càrrega útil JSON  Tornem totes les funcions definides per fer-les accessibles des d'HTML  Model del costat del client  A l'apartat anterior vaig cometre dos errors:  No vaig gestionar cap model local  No vaig utilitzar el mètode de trucada de la resposta HTTP  Ho farem implementant la següent característica, que és la neteja de les tasques completades.  Ara sabem com gestionar els esdeveniments mitjançant Vue:   <button class="btn btn-warning" @click="cleanup">Cleanup</button>  A l'objecte   , afegim una funció del mateix nom: TodosApp   const TodosApp = { props: ['title', 'todos'], components: { TodoLine }, template: document.getElementById('todos-app').innerHTML, setup() { const cleanup = function() { //1 axios.delete('/api/todo:cleanup').then(response => { //1 state.value.todos = response.data //2-3 }) } return { cleanup } //1 } }  Com més amunt  Axios ofereix una conversió JSON automatitzada de la trucada HTTP    és on emmagatzemem el  state model  En la semàntica de Vue, el model Vue és un embolcall al voltant de dades que volem que siguin   . Reactiu significa unió bidireccional entre la vista i el model. Podem fer reactiu un valor existent passant-lo al mètode   : reactius ref()  A l'API de composició, la manera recomanada de declarar l'estat reactiu és utilitzar la funció   . ref()    pren l'argument i el retorna embolicat dins d'un objecte ref amb una propietat .value. ref()  Per accedir a les referències a la plantilla d'un component, declareu-les i retorneu-les des de la funció   d'un component. setup()  --  Declaració d'estat reactiu  Fem-ho:   const state = ref({ title: window.vueData.title, //1-2 todos: window.vueData.todos, //1 }) createApp({ components: { TodosApp }, setup() { return { ...state.value } //3-4 }, render() { return h(TodosApp, { todos: state.value.todos, //5 title: state.value.title, //5 }) } }).mount('#app');  Obteniu el conjunt de dades a la pàgina HTML, mitjançant Thymeleaf, tal com s'ha explicat anteriorment  Canviem la manera com posem el   . No és necessari ja que no hi ha cap vinculació bidireccional: no actualitzem el títol del costat del client, però prefereixo mantenir la gestió coherent en tots els valors. title  Torna els referents, segons les expectatives de Vue  Mira, mare, estic fent servir l'operador de propagació de JavaScript  Configureu els atributs de l'objecte des de l'  state  En aquest punt, tenim un model   del costat del client. reactiu  Al costat HTML, utilitzem els atributs de Vue rellevants:   <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr>  </tbody>  Recorreu la llista d'objectes  Todo  L'atribut   és crucial per fer front a la manera com el navegador analitza HTML. Consulteu   per obtenir més detalls is la documentació de Vue  He descrit la plantilla corresponent més amunt.  Actualització del model  Ara podem implementar una nova característica: afegir una nova   des del client. En fer clic al botó   , llegim el valor del camp   , enviem les dades a l'API i actualitzem el model amb la resposta. Todo Afegeix Etiqueta  Aquí teniu el codi actualitzat:   const TodosApp = { props: ['title', 'todos'], components: { TodoLine }, template: document.getElementById('todos-app').innerHTML, setup() { const label = ref('') //1 const create = function() { //2 axios.post('/api/todo', { label: label.value }).then(response => { state.value.todos.push(response.data) //3 }).then(() => { label.value = '' //4 }) } const cleanup = function() { axios.delete('/api/todo:cleanup').then(response => { state.value.todos = response.data //5 }) } return { label, create, cleanup } } }  Creeu un embolcall reactiu al voltant del títol l'abast del qual es limita a la funció  La funció   pròpiament dita create()  Afegiu el nou objecte JSON retornat per la crida de l'API a la llista de  Todo  Restableix el valor del camp  Substituïu tota la llista en suprimir; el mecanisme és el mateix  Al costat HTML, afegim un botó i enllacem a la funció   . De la mateixa manera, afegim el camp   i l'enllaçem al model. create() Etiqueta   <form> <div class="form-group row"> <label for="new-todo-label" class="col-auto col-form-label">New task</label> <div class="col-10"> <input type="text" id="new-todo-label" placeholder="Label" class="form-control" v-model="label" /> </div> <div class="col-auto"> <button type="button" class="btn btn-success" @click="create">Add</button> </div> </div> </form>  Vue enllaça la funció   al botó HTML. Ho truca de manera asíncrona i actualitza la llista de   reactiva amb el nou element que retorna la trucada. Fem el mateix amb el botó   , per eliminar els objectes   marcats. create() Todo Neteja Todo  Tingueu en compte que no he implementat intencionadament cap codi de gestió d'errors per evitar que el codi sigui més complex del necessari. M'aturaré aquí, ja que hem obtingut prou coneixements per a una primera experiència.  Conclusió  En aquesta publicació, vaig fer els meus primers passos per augmentar una aplicació SSR amb Vue. Va ser bastant senzill. El problema més gran que em vaig trobar va ser que Vue substituís la plantilla de línia: no vaig llegir gaire la documentació i vaig perdre l'atribut   . is  Tanmateix, vaig haver d'escriure unes quantes línies de JavaScript, tot i que vaig utilitzar Axios per ajudar-me amb les trucades HTTP i no vaig gestionar els errors.  A la propera publicació, implementaré les mateixes funcions amb Alpine.js.  El codi font complet d'aquesta publicació es pot trobar a GitHub:   https://github.com/ajavageek/compare-frontends?embeble=true   Anar més enllà:   Vue.js

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Aquest àudio és produït a l'idioma original de la història!

Massa Llarg; Per llegir

Make resilience your competitive advantage

Augment del client amb Vue.js

About Author

COMENTARIS

Etiquetes penjant

AQUEST ARTICLE VA SER PRESENTAT A

Related Stories

Startups of The Year: Meet the Healthcare Industry

The Fall of OM by Mantra DAO: Accident or Pattern?

The Jewel Robbery at the Grand Metropolitan

Startups of The Year: Meet the Engineering Industry

Startups of The Year: Meet the Healthcare Industry

The Fall of OM by Mantra DAO: Accident or Pattern?

The Jewel Robbery at the Grand Metropolitan

Startups of The Year: Meet the Engineering Industry

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps