I mit   lagde jeg grunden til at bygge videre på; nu er det tid til at starte "for alvor". tidligere indlæg  Jeg har hørt meget om   Derudover fortalte en ven, der gik fra udvikler til manager, mig gode ting om Vue, hvilket yderligere vækkede min interesse. Jeg besluttede at tage et kig på det: det vil være den første "lette" JavaScript-ramme, jeg vil studere - fra en nybegynders synspunkt, som jeg er. Vue.js.  Udlægning af arbejdet  Jeg forklarede WebJars og Thymeleaf i det sidste indlæg. Her er opsætningen, server- og klientsiden.  Server-side  Sådan integrerer jeg begge i 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 selv; Jeg besluttede mig for den almindelige, ikke-reaktive tilgang  Spring Boot Thymeleaf integration  WebJars locator, for at undgå at angive Vue-versionen på klientsiden  Vue, endelig!  Jeg bruger Kotlin Router og Bean DSL'er på Spring Boot-siden:   fun vue(todos: List<Todo>) = router { //1 GET("/vue") { ok().render("vue", mapOf("title" to "Vue.js", "todos" to todos)) //2-3 } }  Send en statisk liste over   objekter Todo  Se nedenfor  Send modellen til Thymeleaf  Hvis du er vant til at udvikle API'er, er du bekendt med   -funktionen; det returnerer nyttelasten direkte, sandsynligvis i JSON-format.   sender flowet til visningsteknologien, i dette tilfælde Thymeleaf. Den accepterer to parametre: body() render()  Udsigtens navn. Som standard er stien   og præfikset er   ; i dette tilfælde forventer Thymeleaf en visning på  /templates .html /templates/vue.html  Et modelkort over nøgleværdi-par  Kundesiden  Her er koden på HTML-siden:   <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>    hjælper med at lave HTTP-anmodninger Axios  Vue selv  Vores kode på klientsiden  Indstil dataene  Som forklaret i sidste uges artikel, er en af Thymeleafs fordele, at den tillader både statisk filgengivelse og gengivelse på serversiden. For at få magien til at virke, specificerer jeg en sti på klientsiden,   ,   , og en sti på serversiden,     .  dvs. src dvs. th:src  Vue-koden  Lad os nu dykke ned i Vue-koden.  Vi ønsker at implementere flere funktioner:  Efter sideindlæsningen skal siden vise alle   elementer Todo  Når du klikker på afkrydsningsfeltet   gennemført, skal det aktivere/deaktivere den   attribut Todo completed  Når du klikker på knappen   , sletter den alle fuldførte  Oprydning Todo  Når du klikker på knappen   , skal den tilføje en   til listen over   med følgende værdier: Tilføj Todo Todo    : Server-side beregnet ID som det maksimale af alle andre ID'er plus 1 id    : værdien af feltet   for  label Label label    : indstillet til  completed false  Vores første skridt ind i Vue  Det første skridt er at bootstrap rammen. Vi har allerede oprettet referencen til vores tilpassede   -fil ovenfor. vue.js   document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }  Kør blokken, når DOM er færdig med at indlæse  Det næste trin er at lade Vue administrere en del af siden. På HTML-siden skal vi beslutte, hvilken del på øverste niveau Vue administrerer. Vi kan vælge en vilkårlig   og ændre den senere, hvis det er nødvendigt. <div>   <div id="app"> </div>  På JavaScript-siden opretter vi en   , der passerer CSS-vælgeren for den tidligere HTML   . app <div>   Vue.createApp({}).mount('#app');  På dette tidspunkt starter vi Vue, når siden indlæses, men der sker ikke noget synligt.  Det næste trin er at oprette en Vue   . En Vue-skabelon er en almindelig HTML   der administreres af Vue. Du kan definere Vue i Javascript, men jeg foretrækker at gøre det på HTML-siden. -skabelon <template>  Lad os starte med en rodskabelon, der kan vise titlen.   <template id="todos-app">  <h1>{{ title }}</h1>  </template>  Indstil ID for nem binding  Brug   egenskaben; det mangler at blive sat op title  På JavaScript-siden skal vi oprette administrationskoden.   const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }  Erklær   egenskaben, den der bruges i HTML-skabelonen title  Endelig skal vi videregive dette objekt, når vi opretter appen:   Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');  Konfigurer komponenten  Vue forventer   -funktionen render()    for   opretter en virtuel node ud af objektet og dets egenskaber h() hyperscript  Initialiser   med den værdigenererede serverside title  På dette tidspunkt viser Vue titlen.  Grundlæggende interaktioner  På dette tidspunkt kan vi implementere handlingen, når brugeren klikker på et afkrydsningsfelt: det skal opdateres på serversiden.  Først tilføjede jeg en ny indlejret Vue-skabelon til tabellen, der viser   . For at undgå at forlænge indlægget, vil jeg undgå at beskrive det i detaljer. Hvis du er interesseret, så tag et kig på   . Todo kildekoden  Her er startlinjeskabelonens kode, henholdsvis JavaScript og 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>  Vis   -id'et Todo  Vis   -etiketten Todo  Marker afkrydsningsfeltet, hvis dens   attribut er  completed true  Vue tillader hændelseshåndtering via   -syntaksen. @   <input type="checkbox" :checked="todo.completed" @click="check" />  Vue kalder skabelonens   funktion, når brugeren klikker på linjen. Vi definerer denne funktion i en   parameter: 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 } }  Accepter   -arrayet, så vi senere kan få adgang til det props  Vue sender den   , der udløste opkaldet event  Axios er et JavaScript-lib, der forenkler HTTP-kald  Serversiden   levere en API; det er uden for dette indlægs rammer, men du er velkommen til at tjekke kildekoden. skal  JSON nyttelast  Vi returnerer alle definerede funktioner for at gøre dem tilgængelige fra HTML  Model på klientsiden  I det forrige afsnit lavede jeg to fejl:  Jeg styrede ikke nogen lokal model  Jeg brugte ikke HTTP-svarets opkaldsmetode  Det vil vi gøre ved at implementere den næste funktion, som er oprydning af afsluttede opgaver.  Vi ved nu, hvordan vi håndterer begivenheder via Vue:   <button class="btn btn-warning" @click="cleanup">Cleanup</button>  På   objektet tilføjer vi en funktion af samme navn: 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 } }  Som ovenfor  Axios tilbyder automatisk JSON-konvertering af HTTP-kaldet    er hvor vi opbevarer  state modellen  I Vues semantik er Vue-modellen en indpakning omkring data, som vi ønsker skal være   . Reaktiv betyder tovejsbinding mellem udsigten og modellen. Vi kan gøre en eksisterende værdi reaktiv ved at overføre den til   metoden: reaktive ref()  I Composition API er den anbefalede måde at erklære reaktiv tilstand på at bruge   -funktionen. ref()    tager argumentet og returnerer det pakket ind i et ref-objekt med en .value-egenskab. ref()  For at få adgang til refs i en komponents skabelon skal du deklarere og returnere dem fra en komponents   -funktion. setup()  --  Erklærer reaktiv tilstand  Lad os gøre det:   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');  Hent datasættet på HTML-siden via Thymeleaf, som forklaret ovenfor  Vi ændrer måden, vi angiver   på. Det er ikke nødvendigt, da der ikke er nogen tovejsbinding - vi opdaterer ikke titlen på klientsiden, men jeg foretrækker at holde håndteringen sammenhængende på tværs af alle værdier title  Returner dommerne i henhold til Vues forventninger  Se, mor, jeg bruger JavaScript-spredningsoperatoren  Konfigurer objektets attributter fra  state  På dette tidspunkt har vi en   model på klientsiden. reaktiv  På HTML-siden bruger vi de relevante Vue-attributter:   <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr>  </tbody>  Sløjfe over listen over   objekter Todo    -attributten er afgørende for at klare den måde, browseren analyserer HTML på. Se   for flere detaljer is Vue-dokumentationen  Jeg har beskrevet den tilsvarende skabelon ovenfor.  Opdatering af modellen  Vi kan nu implementere en ny funktion: tilføje en ny   fra klienten. Når vi klikker på knappen   , læser vi   feltets værdi, sender dataene til API'et og opdaterer modellen med svaret. Todo Tilføj Label-  Her er den opdaterede kode:   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 } } }  Opret en reaktiv indpakning omkring titlen, hvis omfang er begrænset til funktionen  Den egentlige   funktion create()  Føj det nye JSON-objekt, der returneres af API-kaldet, til listen over  Todo  Nulstil feltets værdi  Erstat hele listen ved sletning; mekanismen er den samme  På HTML-siden tilføjer vi en knap og binder til   -funktionen. Ligeledes tilføjer vi feltet   og binder det til modellen. create() Label   <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 binder funktionen   til HTML-knappen. Det kalder det asynkront og opdaterer den reaktive   liste med det nye element, der returneres af opkaldet. Vi gør det samme for knappen   for at fjerne afkrydsede   objekter. create() Todo Oprydning Todo  Bemærk, at jeg ikke med vilje implementerede nogen fejlhåndteringskode for at undgå at gøre koden mere kompleks end nødvendigt. Jeg stopper her, da vi har fået nok indsigt til en første oplevelse.  Konklusion  I dette indlæg tog jeg mine første skridt i at udvide en SSR-app med Vue. Det var ret ligetil. Det største problem, jeg stødte på, var, at Vue skulle erstatte linjeskabelonen: Jeg læste ikke dokumentationen grundigt og savnede   -attributten. is  Jeg var dog nødt til at skrive en del linjer JavaScript, selvom jeg brugte Axios til at hjælpe mig med HTTP-kald og ikke klarede fejl.  I det næste indlæg vil jeg implementere de samme funktioner med Alpine.js.  Den komplette kildekode til dette indlæg kan findes på GitHub:   https://github.com/ajavageek/compare-frontends?embedable=true   Gå videre:   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

Denne lyd er produceret på historiens originalsprog!

For langt; At læse

Make resilience your competitive advantage

Forøgelse af klienten med Vue.js

About Author

KOMMENTARER

HÆNG TAGS

DENNE ARTIKEL BLEV PRÆsenterET I

Related Stories

Meet Timescale: HackerNoon Company of the Week

Meet KuCoin Community Chain: HackerNoon Company of the Week

Meet Bosch: HackerNoon Company of the Week

Meet IONOS: HackerNoon Company of the Week

Meet Timescale: HackerNoon Company of the Week

Meet KuCoin Community Chain: HackerNoon Company of the Week

Meet Bosch: HackerNoon Company of the Week

Meet IONOS: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps