Во мојот   , поставив основа за да се изградам; сега е време да се започне „вистински“. претходен пост  Слушнав многу   Дополнително, еден пријател кој премина од програмер во менаџер ми кажа добри работи за Vue, што дополнително го разбуди мојот интерес. Решив да го погледнам: тоа ќе биде првата „лесна“ JavaScript рамка што ќе ја проучувам - од гледна точка на почетник, каков што сум јас. Vue.js.  Поставување на работата  Ги објаснив WebJars и Thymeleaf во последниот пост. Еве го поставувањето, серверот и клиентот.  Од страна на серверот  Еве како ги интегрирам и двете во ПОМ:   <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 Thymeleaf  Локатор WebJars, за да се избегне специфицирање на верзијата Vue на страната на клиентот  Vue, конечно!  Ги користам Kotlin Router и Bean DSL на страната на Spring Boot:   fun vue(todos: List<Todo>) = router { //1 GET("/vue") { ok().render("vue", mapOf("title" to "Vue.js", "todos" to todos)) //2-3 } }  Пренесете статична листа на   објекти Todo  Видете подолу  Пренесете го моделот на Thymeleaf  Ако сте навикнати да развивате API, запознаени сте со функцијата   ; директно го враќа товарот, веројатно во JSON формат.   го пренесува протокот на технологијата за преглед, во овој случај, Thymeleaf. Прифаќа два параметри: body() render()  Името на погледот. Стандардно, патеката е   , а префиксот е   ; во овој случај, Thymeleaf очекува преглед на  /templates .html /templates/vue.html  Модел на мапа на парови клуч-вредност  Од страната на клиентот  Еве го кодот од страната на 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>    помага да се прават барања за HTTP Axios  Самиот Vue  Нашиот код од клиентската страна  Поставете ги податоците  Како што беше објаснето во минатонеделната статија, една од придобивките на Thymeleaf е тоа што овозможува и статичко прикажување на датотеки и прикажување од страна на серверот. За да може магијата да функционира, јас одредувам патека од клиентот,     и патека од страна на серверот,     .  т.е. src т.е. th:src  Кодот Vue  Сега, ајде да се нурнеме во кодот Vue.  Сакаме да имплементираме неколку карактеристики:  По вчитувањето на страницата, страницата треба да ги прикаже сите ставки  Todo  При кликнување на полето за избор   завршено, треба да го постави/непостави   атрибут Todo completed  Кога ќе кликнете на копчето   , се брише сите завршени  Cleanup Todo  Кога ќе кликнете на копчето   , треба да додадете   на листата на   со следните вредности: Додај Todo Todo    : пресметан ID од страна на серверот како максимум од сите други ID плус 1 id    : вредност на полето   за  label Label label    : поставено на  completed false  Нашите први чекори во Vue  Првиот чекор е да се подигне рамката. Веќе ја поставивме референцата за нашата приспособена датотека   погоре. vue.js   document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }  Извршете го блокот кога DOM ќе заврши со вчитување  Следниот чекор е да му дозволите на Vue да управува со дел од страницата. На страната на HTML, ние мора да одлучиме со кој дел од највисоко ниво управува Vue. Можеме да избереме произволно   и да го промениме подоцна ако е потребно. <div>   <div id="app"> </div>  На страната JavaScript, создаваме   , поминувајќи го CSS избирачот на претходниот HTML   . апликација <div>   Vue.createApp({}).mount('#app');  Во овој момент, го стартуваме Vue кога страницата се вчитува, но ништо видливо не се случува.  Следниот чекор е да креирате   Vue. Шаблон Vue е обичен HTML   управуван од Vue. Можете да го дефинирате Vue во Javascript, но јас претпочитам да го направам тоа на страницата HTML. шаблон <template>  Да почнеме со root шаблон што може да го прикаже насловот.   <template id="todos-app">  <h1>{{ title }}</h1>  </template>  Поставете го ID за лесно врзување  Користете го имотот   ; останува да се постави title  На страната JavaScript, мора да го креираме управувачкиот код.   const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }  Декларирајте го својството   , она што се користи во шаблонот HTML title  Конечно, мора да го предадеме овој објект кога ја креираме апликацијата:   Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');  Конфигурирајте ја компонентата  Vue ја очекува функцијата  render()    за   создава виртуелен јазол од објектот и неговите својства h() хиперскрипт  Иницијализирајте го имотот   со генерирана вредност од страна на серверот title  Во овој момент, Vue го прикажува насловот.  Основни интеракции  Во овој момент, можеме да го спроведеме дејството кога корисникот ќе кликне на полето за избор: тоа треба да се ажурира во состојба на серверот.  Прво, додадов нов вгнезден Vue шаблон за табелата што го прикажува   . За да не го издолжам постот, ќе избегнам детално да го опишам. Ако сте заинтересирани, погледнете го   . Todo изворниот код  Еве го кодот на шаблонот за почетната линија, соодветно JavaScript и 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>  Прикажи   id Todo  Прикажете ја етикетата  Todo  Проверете го полето дали неговиот   атрибут е  completed true  Vue овозможува управување со настани преку синтаксата   . @   <input type="checkbox" :checked="todo.completed" @click="check" />  Vue ја повикува функцијата   на шаблонот кога корисникот ќе кликне на линијата. Ја дефинираме оваа функција во параметарот   : 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 } }  Прифатете ја низата со   , за да можеме подоцна да пристапиме до неа props  Vue го поминува   што го активирал повикот event  Axios е JavaScript lib што ги поедноставува HTTP повиците  Од страната на серверот   да се обезбеди API; тоа е надвор од опсегот на овој пост, но слободно проверете го изворниот код. мора  JSON носивост  Ги враќаме сите дефинирани функции за да ги направиме достапни од HTML  Модел од страна на клиентот  Во претходниот дел, направив две грешки:  Не управував со ниту еден локален модел  Не го користев методот на повик на одговорот на HTTP  Тоа ќе го направиме со имплементирање на следната функција, а тоа е чистење на завршените задачи.  Сега знаеме како да се справиме со настаните преку Vue:   <button class="btn btn-warning" @click="cleanup">Cleanup</button>  На објектот   , додаваме функција со исто име: 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 } }  Како погоре  Axios нуди автоматска JSON конверзија на повикот HTTP    е местото каде што го складираме  state моделот  Во семантиката на Vue, моделот Vue е обвивка околу податоците што сакаме да бидат   . Реактивно значи двонасочно поврзување помеѓу погледот и моделот. Можеме да направиме реактивна постоечка вредност со тоа што ќе ја предадеме на методот   : реактивни ref()  Во Composition API, препорачаниот начин за декларирање на реактивна состојба е користење на функцијата   . ref()    го зема аргументот и го враќа завиткан во објект ref со својство .value. ref()  За да пристапите до refs во шаблонот на компонентата, декларирајте ги и вратете ги од функцијата   на компонентата. setup()  --  Прогласување на реактивна состојба  Ајде да го направиме тоа:   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');  Добијте го множеството податоци во HTML страницата, преку Thymeleaf, како што е објаснето погоре  Го менуваме начинот на кој го поставуваме   . Не е неопходно бидејќи нема двонасочно врзување - не го ажурираме насловот од клиентската страна, но претпочитам да го одржувам управувањето кохерентно за сите вредности title  Вратете ги судиите, според очекувањата на Vue  Види, мајко, јас го користам операторот за ширење JavaScript  Конфигурирајте го објектот припишан од  state  Во овој момент, имаме   модел од страна на клиентот. реактивен  На страната на HTML, ги користиме соодветните атрибути на Vue:   <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr>  </tbody>  Превртете ја листата на   објекти Todo  Атрибутот   е клучен за да се справиме со начинот на кој прелистувачот го анализира HTML. Видете   за повеќе детали is ја документацијата на Vue  Го опишав соодветниот образец погоре.  Ажурирање на моделот  Сега можеме да имплементираме нова функција: да додадеме нова   од клиентот. При кликнување на копчето   , ја читаме вредноста на полето   , ги испраќаме податоците до API и го освежуваме моделот со одговорот. Todo Додај Label  Еве го ажурираниот код:   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 } } }  Направете реактивна обвивка околу насловот чиј опсег е ограничен на функцијата  Функцијата   правилна create()  Додадете го новиот JSON објект вратен од повикот на API на списокот  Todo  Ресетирајте ја вредноста на полето  Заменете ја целата листа при бришење; механизмот е ист  На страната HTML, додаваме копче и се врзуваме за функцијата   . Исто така, го додаваме полето   и го врзуваме за моделот. 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 ја врзува функцијата   со копчето HTML. Ја нарекува асинхроно и ја освежува реактивната листа   со новата ставка вратена од повикот. Истото го правиме и за копчето   , за да ги отстраниме означените   објекти. create() Todo Cleanup Todo  Забележете дека намерно не имплементирав код за справување со грешки за да избегнам да го направам кодот покомплексен отколку што е потребно. Ќе застанам овде бидејќи добивме доволно сознанија за прво искуство.  Заклучок  Во овој пост, ги направив моите први чекори во зголемувањето на апликацијата SSR со Vue. Беше прилично директно. Најголемиот проблем на кој наидов беше Vue да го замени шаблонот за линија: не ја прочитав опширно документацијата и го пропуштив атрибутот   . is  Сепак, морав да напишам неколку линии JavaScript, иако користев Axios за да ми помогне со HTTP повиците и не управував со грешките.  Во следниот пост, ќе ги имплементирам истите карактеристики со Alpine.js.  Целосниот изворен код за оваа објава може да се најде на GitHub:   https://github.com/ajavageek/compare-frontends?embedable=true   Оди понатаму:   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

Ова аудио е произведено на оригиналниот јазик на приказната!

Премногу долго; Да чита

Make resilience your competitive advantage

Зголемување на клиентот со Vue.js

About Author

КОМЕНТАРИ

ВИСЕТЕ ТАГОВИ

ОВОЈ СТАТИЈА БЕШЕ ПРЕТСТАВЕН ВО

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps