Իմ   մեջ ես հիմք դրեցի կառուցելու համար. հիմա ժամանակն է սկսել «իրականում»: նախորդ գրառման  Ես շատ   եմ լսել: Բացի այդ, մի ընկեր, ով ծրագրավորողից վերածվեց մենեջերի, ինձ լավ բաներ ասաց Vue-ի մասին, որն էլ ավելի գրգռեց իմ հետաքրքրությունը: Ես որոշեցի նայել դրան. դա կլինի առաջին «թեթև» JavaScript շրջանակը, որը ես կուսումնասիրեմ՝ նորեկի տեսանկյունից, որը ես եմ: Vue.js  Աշխատանքի ձևավորում  Ես բացատրեցի WebJars-ը և Thymeleaf-ը վերջին գրառման մեջ: Ահա կարգավորումը, սերվերի և հաճախորդի կողմից:  Սերվերի կողմից  Ահա թե ինչպես եմ ես ինտեգրում երկուսն էլ 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>  Գարուն Boot ինքնին; Ես որոշեցի կանոնավոր, ոչ ռեակտիվ մոտեցումը  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    կոճակի վրա սեղմելիս այն ջնջում է բոլոր ավարտված  Մաքրում 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-ի կողմից մենք ստեղծում ենք   ՝ անցնելով նախորդ   HTML-ի CSS ընտրիչը: հավելված <div>   Vue.createApp({}).mount('#app');  Այս պահին մենք գործարկում ենք Vue-ն, երբ էջը բեռնվում է, բայց տեսանելի ոչինչ տեղի չի ունենում:  Հաջորդ քայլը Vue   ստեղծումն է: Vue ձևանմուշը սովորական HTML   կաղապար> է, որը կառավարվում է Vue-ի կողմից: Դուք կարող եք սահմանել Vue-ը Javascript-ով, բայց ես նախընտրում եմ դա անել HTML էջում: կաղապարի <template>  Սկսենք արմատային կաղապարից, որը կարող է ցուցադրել վերնագիրը:   <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-ն առաջարկում է HTTP զանգի ավտոմատացված JSON փոխարկում    այն է, որտեղ մենք պահում ենք  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 Մաքրում Todo  Նկատի ունեցեք, որ ես միտումնավոր չեմ կիրառել սխալների հետ կապված որևէ կոդ, որպեսզի խուսափեմ կոդը ավելի բարդ դարձնելուց, քան անհրաժեշտ է: Ես կդադարեմ այստեղ, քանի որ մենք բավականաչափ պատկերացումներ ձեռք բերեցինք առաջին փորձի համար:  Եզրակացություն  Այս գրառման մեջ ես իմ առաջին քայլերն արեցի Vue-ի միջոցով SSR հավելվածն ավելացնելու համար: Դա բավականին պարզ էր: Ամենամեծ խնդիրը, որին ես հանդիպեցի, դա այն   , որ 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

How HyperCycle Is Building the Internet for AI: A Deep Dive with Toufi Saliba

HyveDA Secures $50 Million in Pre-Deposits After Symbiotic Mainnet Launch

HyperCycle Announces Strategic Split into Two Distinct Operations

Hypernative Bolsters Bitcoin L2 Security as Stacks Ecosystem Gets Real-Time Protection

How HyperCycle Is Building the Internet for AI: A Deep Dive with Toufi Saliba

HyveDA Secures $50 Million in Pre-Deposits After Symbiotic Mainnet Launch

HyperCycle Announces Strategic Split into Two Distinct Operations

Hypernative Bolsters Bitcoin L2 Security as Stacks Ecosystem Gets Real-Time Protection

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps