U svom   , postavio sam teren za izgradnju; sada je vrijeme da počnete "zaista". prethodnom postu  Čuo sam dosta o   . Osim toga, prijatelj koji je prešao od programera do menadžera rekao mi je dobre stvari o Vue-u, što je dodatno pobudilo moje interesovanje. Odlučio sam da ga pogledam: to će biti prvi "laki" JavaScript framework koji ću proučiti - sa stanovišta početnika, što sam i jesam. Vue.js-u  Postavljanje posla  Objasnio sam WebJars i Thymeleaf u prošlom postu. Evo podešavanja, serverske i klijentske strane.  Server-side  Evo kako integrišem oba u 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 sama; Odlučio sam se za redovni, nereaktivni pristup  Spring Boot Thymeleaf integracija  WebJars lokator, kako biste izbjegli specificiranje Vue verzije na strani klijenta  Vue, konačno!  Koristim Kotlin Router i Bean DSL-ove na strani Spring Boot-a:   fun vue(todos: List<Todo>) = router { //1 GET("/vue") { ok().render("vue", mapOf("title" to "Vue.js", "todos" to todos)) //2-3 } }  Proslijedite statičku listu   objekata Todo  Vidi ispod  Proslijedite model Thymeleaf-u  Ako ste navikli da razvijate API-je, upoznati ste sa funkcijom   ; direktno vraća korisni teret, vjerovatno u JSON formatu.   prosljeđuje tok tehnologiji prikaza, u ovom slučaju Thymeleaf. Prihvata dva parametra: body() render()  Ime pogleda. Podrazumevano, putanja je   , a prefiks je   ; u ovom slučaju, Thymeleaf očekuje pregled na  /templates .html /templates/vue.html  Model mape parova ključ/vrijednost  Na strani klijenta  Evo koda na HTML strani:   <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>    pomaže u izradi HTTP zahtjeva Axios  Vue sam  Naš kod na strani klijenta  Podesite podatke  Kao što je objašnjeno u prošlosedmičnom članku, jedna od prednosti Thymeleaf-a je ta što omogućava i statičko prikazivanje datoteka i renderiranje na strani servera. Da bi magija funkcionirala, specificiram putanju na strani klijenta,   .   , i putanju na strani servera,   .   .  tj src tj th:src  Vue kod  Sada, zaronimo u Vue kod.  Želimo implementirati nekoliko funkcija:  Nakon učitavanja stranice, stranica bi trebala prikazati sve   stavke Todo  Kada kliknete na polje za potvrdu   , trebalo bi postaviti/poništiti   atribut Todo completed  Kada kliknete na dugme   , briše se svi završeni  Čišćenje Todo  Kada kliknete na dugme   , trebalo bi da dodate   na listu   sa sledećim vrednostima: Dodaj Todo Todo    : izračunati ID na strani servera kao maksimum svih ostalih ID-a plus 1 id    : vrijednost polja   za  label Label label    : postavljeno na  completed false  Naši prvi koraci u Vue  Prvi korak je pokretanje okvira. Već smo postavili referencu za našu prilagođenu datoteku   iznad. vue.js   document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }  Pokrenite blok kada DOM završi učitavanje  Sljedeći korak je da dozvolite Vueu da upravlja dijelom stranice. Što se tiče HTML-a, moramo odlučiti kojim dijelom najvišeg nivoa Vue upravlja. Možemo odabrati proizvoljan   i promijeniti ga kasnije ako je potrebno. <div>   <div id="app"> </div>  Na strani JavaScripta, kreiramo   , prosljeđujući CSS selektor prethodnog HTML-a   . aplikaciju <div>   Vue.createApp({}).mount('#app');  U ovom trenutku pokrećemo Vue kada se stranica učita, ali se ništa vidljivo ne dešava.  Sljedeći korak je kreiranje Vue   . Vue šablon je običan HTML   kojim upravlja Vue. Možete definisati Vue u Javascript-u, ali ja radije to radim na HTML stranici. predloška <template>  Počnimo s korijenskim predloškom koji može prikazati naslov.   <template id="todos-app">  <h1>{{ title }}</h1>  </template>  Postavite ID za jednostavno vezivanje  Koristite svojstvo   ; ostaje da se postavi title  Na strani JavaScripta, moramo kreirati upravljački kod.   const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }  Deklarirajte svojstvo   , ono koje se koristi u HTML šablonu title  Konačno, moramo proslijediti ovaj objekt kada kreiramo aplikaciju:   Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');  Konfigurišite komponentu  Vue očekuje funkciju  render()    za   kreira virtuelni čvor od objekta i njegovih svojstava h() hiperscript  Inicijalizirajte svojstvo   vrijednošću generiranom na strani servera title  U ovom trenutku, Vue prikazuje naslov.  Osnovne interakcije  U ovom trenutku možemo implementirati akciju kada korisnik klikne na potvrdni okvir: treba ga ažurirati u stanju na strani servera.  Prvo sam dodao novi ugniježđeni Vue predložak za tabelu koja prikazuje   . Da ne bih produžio post, izbegavaću da ga detaljno opisujem. Ako ste zainteresovani, pogledajte   . Todo izvorni kod  Evo koda početne linije predloška, odnosno 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>  Prikažite   id Todo  Prikažite oznaku  Todo  Označite polje ako je njegov   atribut  completed true  Vue dozvoljava rukovanje događajima putem   sintakse. @   <input type="checkbox" :checked="todo.completed" @click="check" />  Vue poziva funkciju   predloška kada korisnik klikne na liniju. Ovu funkciju definiramo u parametru   : 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 } }  Prihvatite niz   , kako bismo mu kasnije mogli pristupiti props  Vue prosljeđuje   koji je pokrenuo poziv event  Axios je JavaScript biblioteka koja pojednostavljuje HTTP pozive  Strana servera   obezbedi API; to je izvan okvira ovog posta, ali slobodno provjerite izvorni kod. mora da  JSON nosivost  Vraćamo sve definirane funkcije kako bismo im učinili dostupnim iz HTML-a  Model na strani klijenta  U prethodnom dijelu napravio sam dvije greške:  Nisam upravljao ni jednim lokalnim modelom  Nisam koristio metod poziva HTTP odgovora  To ćemo učiniti implementacijom sljedeće funkcije, a to je čišćenje dovršenih zadataka.  Sada znamo kako upravljati događajima putem Vuea:   <button class="btn btn-warning" @click="cleanup">Cleanup</button>  Na objekt   dodajemo funkciju istog imena: 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 } }  Kao gore  Axios nudi automatsku JSON konverziju HTTP poziva    je mjesto gdje pohranjujemo  state model  U semantici Vuea, Vue model je omot oko podataka za koje želimo da budu   . Reaktivno znači dvosmjerno povezivanje pogleda i modela. Postojeću vrijednost možemo učiniti reaktivnom tako što ćemo je proslijediti metodi   : reaktivni ref()  U Composition API-ju, preporučeni način za deklariranje reaktivnog stanja je korištenje funkcije   . ref()    uzima argument i vraća ga umotanog unutar ref objekta sa svojstvom .value. ref()  Da biste pristupili referencama u šablonu komponente, deklarirajte ih i vratite ih iz funkcije   komponente. setup()  --  Proglašavanje reaktivnog stanja  uradimo to:   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');  Nabavite skup podataka na HTML stranici, putem Thymeleaf-a, kako je gore objašnjeno  Mijenjamo način na koji postavljamo   . Nije potrebno jer nema dvosmjernog povezivanja - ne ažuriramo naslov na strani klijenta, ali radije održavam koherentno rukovanje za sve vrijednosti title  Vratite sudije, prema Vueovim očekivanjima  Vidi, mama, ja koristim JavaScript operator širenja  Konfigurirajte atribute objekta iz  state  U ovom trenutku imamo   model na strani klijenta. reaktivni  Na strani HTML-a koristimo relevantne Vue atribute:   <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr>  </tbody>  Pređite preko liste   objekata Todo  Atribut   je ključan da se nosi sa načinom na koji pretraživač analizira HTML. Pogledajte   za više detalja is Vue dokumentaciju  Gore sam opisao odgovarajući šablon.  Ažuriranje modela  Sada možemo implementirati novu funkciju: dodati novi   od klijenta. Kada kliknemo na dugme   , čitamo vrijednost polja   , šaljemo podatke API-ju i osvježavamo model odgovorom. Todo Dodaj Label  Evo ažuriranog koda:   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 } } }  Napravite reaktivni omot oko naslova čiji je opseg ograničen na funkciju  Ispravna funkcija  create()  Dodajte novi JSON objekat koji je vratio API poziv na listu  Todo  Resetirajte vrijednost polja  Zamijenite cijelu listu prilikom brisanja; mehanizam je isti  Na HTML strani, dodajemo dugme i vezujemo se za funkciju   . Isto tako, dodajemo polje   i povezujemo ga sa modelom. 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 vezuje funkciju   za HTML dugme. Poziva ga asinhrono i osvježava reaktivnu   listu novom stavkom koju je vratio poziv. Isto radimo za dugme   , da uklonimo označene   objekte. create() Todo Čišćenje Todo  Imajte na umu da nisam namjerno implementirao nikakav kod za rukovanje greškama kako bih izbjegao da kod bude složeniji nego što je potrebno. Ovdje ću se zaustaviti jer smo stekli dovoljno uvida za prvo iskustvo.  Zaključak  U ovom postu sam napravio prve korake u proširenju SSR aplikacije pomoću Vuea. Bilo je prilično jednostavno. Najveći problem na koji sam naišao bio je da Vue zamijeni predložak linije: nisam detaljno čitao dokumentaciju i propustio sam atribut   . is  Međutim, morao sam da napišem dosta redova JavaScript-a, iako sam koristio Axios da mi pomogne sa HTTP pozivima i nisam upravljao greškama.  U sljedećem postu implementirat ću iste karakteristike sa Alpine.js.  Kompletan izvorni kod za ovaj post možete pronaći na GitHubu:   https://github.com/ajavageek/compare-frontends?embedable=true   Idi dalje:   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

Ovaj audio je proizveden na originalnom jeziku priče!

Proširivanje klijenta pomoću Vue.js

About Author

KOMENTARI

HANG TAGS

OVAJ ČLANAK JE PREDSTAVLJEN U

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps