Հաճախորդի ավելացում Vue.js-ի միջոցով

Իմ նախորդ գրառման մեջ ես հիմք դրեցի կառուցելու համար. հիմա ժամանակն է սկսել «իրականում»:

Ես շատ եմ լսել: Բացի այդ, մի ընկեր, ով ծրագրավորողից վերածվեց մենեջերի, ինձ լավ բաներ ասաց Vue-ի մասին, որն էլ ավելի գրգռեց իմ հետաքրքրությունը: Ես որոշեցի նայել դրան. դա կլինի առաջին «թեթև» JavaScript շրջանակը, որը ես կուսումնասիրեմ՝ նորեկի տեսանկյունից, որը ես եմ:

Աշխատանքի ձևավորում

Ես բացատրեցի WebJars-ը և Thymeleaf-ը վերջին գրառման մեջ: Ահա կարգավորումը, սերվերի և հաճախորդի կողմից:

Սերվերի կողմից

Ահա թե ինչպես եմ ես ինտեգրում երկուսն էլ POM-ում.

 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <!--1--> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <!--2--> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <!--3--> <version>0.52</version> </dependency> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>vue</artifactId> <!--4--> <version>3.4.34</version> </dependency> </dependencies>

1. Գարուն Boot ինքնին; Ես որոշեցի կանոնավոր, ոչ ռեակտիվ մոտեցումը
2. Spring Boot Thymeleaf ինտեգրում
3. WebJars որոնիչ՝ հաճախորդի կողմից Vue տարբերակը նշելուց խուսափելու համար
4. 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 } }

1. Անցնել Todo օբյեկտների ստատիկ ցուցակը
2. Տես ստորև
3. Մոդելը փոխանցեք Thymeleaf-ին

Եթե դուք սովոր եք API-ների մշակմանը, ապա ծանոթ եք body() ֆունկցիային; այն ուղղակիորեն վերադարձնում է ծանրաբեռնվածությունը, հավանաբար JSON ձևաչափով: render() փոխանցում է հոսքը դեպի դիտման տեխնոլոգիա, այս դեպքում՝ Thymeleaf: Այն ընդունում է երկու պարամետր.

1. Տեսարանի անվանումը. Լռելյայնորեն ուղին /templates է, իսկ նախածանցը՝ .html ; այս դեպքում Thymeleaf-ն ակնկալում է դիտում /templates/vue.html կայքում
2. Բանալի-արժեք զույգերի մոդելային քարտեզ

Հաճախորդի կողմից

Ահա կոդը HTML կողմում.

 <script th:src="@{/webjars/axios/dist/axios.js}" src="//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script> <!--1--> <script th:src="@{/webjars/vue/dist/vue.global.js}" src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> <!--2--> <script th:src="@{/vue.js}" src="../static/vue.js"></script> <!--3--> <script th:inline="javascript"> /*<![CDATA[*/ window.vueData = { <!--4--> title: /*[[${ title }]]*/ 'A Title', todos: /*[[${ todos }]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] }; /*]]>*/ </script>

1. օգնում է HTTP հարցումներ կատարել
2. Vue-ն ինքը
3. Մեր հաճախորդի կողմի կոդը
4. Սահմանեք տվյալները

Ինչպես բացատրվեց անցյալ շաբաթվա հոդվածում, Thymeleaf-ի առավելություններից մեկն այն է, որ այն թույլ է տալիս ինչպես ստատիկ ֆայլերի մատուցում, այնպես էլ սերվերի կողմից: Որպեսզի կախարդանքն աշխատի, ես նշում եմ հաճախորդի կողմի ուղին, այսինքն ՝ src , և սերվերի կողմից, այսինքն ՝ th:src :

Vue կոդը

Հիմա եկեք սուզվենք Vue կոդը: Մենք ցանկանում ենք իրականացնել մի քանի առանձնահատկություններ.

1. Էջի բեռնումից հետո էջը պետք է ցուցադրի բոլոր Todo տարրերը
2. Todo ավարտված վանդակի վրա սեղմելիս այն պետք է սահմանի/չսահմանի completed հատկանիշը
3. Մաքրում կոճակի վրա սեղմելիս այն ջնջում է բոլոր ավարտված Todo
4. Ավելացնել կոճակը սեղմելիս այն պետք է Todo Todo ցանկին ավելացնի հետևյալ արժեքներով.
   • id . սերվերի կողմից հաշվարկված ID-ն որպես բոլոր մյուս ID-ների առավելագույն գումարած 1
   • label . Label դաշտի արժեքը label համար
   • completed . սահմանվել է false

Մեր առաջին քայլերը դեպի Vue

Առաջին քայլը շրջանակը բեռնաթափելն է: Մենք արդեն ստեղծել ենք վերևում մեր հատուկ vue.js ֆայլի հղումը:

 document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }

1. Գործարկեք բլոկը, երբ DOM-ն ավարտի բեռնումը

Հաջորդ քայլը Vue-ին թույլ տալն է կառավարել էջի մի մասը: HTML-ի կողմից մենք պետք է որոշենք, թե վերին մակարդակի որ մասը կառավարում է Vue-ը: Մենք կարող ենք ընտրել կամայական <div> և անհրաժեշտության դեպքում փոխել այն ավելի ուշ:

 <div id="app"> </div>

JavaScript-ի կողմից մենք ստեղծում ենք հավելված ՝ անցնելով նախորդ <div> HTML-ի CSS ընտրիչը:

 Vue.createApp({}).mount('#app');

Այս պահին մենք գործարկում ենք Vue-ն, երբ էջը բեռնվում է, բայց տեսանելի ոչինչ տեղի չի ունենում:

Հաջորդ քայլը Vue կաղապարի ստեղծումն է: Vue ձևանմուշը սովորական HTML <template> կաղապար> է, որը կառավարվում է Vue-ի կողմից: Դուք կարող եք սահմանել Vue-ը Javascript-ով, բայց ես նախընտրում եմ դա անել HTML էջում:

Սկսենք արմատային կաղապարից, որը կարող է ցուցադրել վերնագիրը:

 <template id="todos-app"> <!--1--> <h1>{{ title }}</h1> <!--2--> </template>

1. Սահմանեք ID-ն հեշտ կապելու համար
2. Օգտագործեք title հատկությունը; մնում է կարգավորել

JavaScript-ի կողմից մենք պետք է ստեղծենք կառավարման կոդը:

 const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }

1. Հայտարարեք title հատկությունը, որն օգտագործվում է HTML ձևանմուշում

Ի վերջո, մենք պետք է փոխանցենք այս օբյեկտը, երբ ստեղծենք հավելվածը.

 Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');

1. Կարգավորեք բաղադրիչը
2. Vue-ն ակնկալում է render() ֆունկցիան
3. h() հիպերսկրիպտի համար ստեղծում է վիրտուալ հանգույց օբյեկտից և նրա հատկություններից
4. Նախաձեռնեք 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> <!--1--> <td>{{ todo.label }}</td> <!--2--> <td> <label> <input type="checkbox" :checked="todo.completed" /> </label> </td> </tr> </template>

1. Ցուցադրել Todo ID-ն
2. Ցուցադրել Todo պիտակը
3. Ստուգեք վանդակը, եթե 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 } }

1. Ընդունեք props զանգվածը, որպեսզի հետագայում կարողանանք մուտք գործել այն
2. Vue-ն փոխանցում է այն event , որն առաջացրել է զանգը
3. Axios-ը JavaScript lib-ն է, որը հեշտացնում է HTTP զանգերը
4. Սերվերի կողմը պետք է տրամադրի API; դա այս գրառման շրջանակներից դուրս է, բայց ազատ զգալ ստուգել աղբյուրի կոդը:
5. JSON ծանրաբեռնվածություն
6. Մենք վերադարձնում ենք բոլոր սահմանված գործառույթները, որպեսզի դրանք հասանելի լինեն 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 } }

1. Ինչպես վերևում
2. Axios-ն առաջարկում է HTTP զանգի ավտոմատացված JSON փոխարկում
3. state այն է, որտեղ մենք պահում ենք մոդելը

Vue-ի իմաստաբանության մեջ Vue մոդելը տվյալների շուրջ փաթաթված է, որը մենք ցանկանում ենք ռեակտիվ լինել: Ռեակտիվ նշանակում է երկկողմանի կապ՝ տեսարանի և մոդելի միջև: Մենք կարող ենք ռեակտիվ դարձնել գոյություն ունեցող արժեքը՝ այն փոխանցելով ref() մեթոդին՝

Composition API-ում ռեակտիվ վիճակ հայտարարելու առաջարկվող եղանակը ref() ֆունկցիայի օգտագործումն է:

ref() վերցնում է արգումենտը և վերադարձնում այն ref օբյեկտի մեջ փաթաթված .value հատկությամբ:

Բաղադրիչի ձևանմուշում 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');

1. Ստացեք տվյալների հավաքածուն HTML էջում Thymeleaf-ի միջոցով, ինչպես բացատրվեց վերևում
2. Մենք փոխում ենք title սահմանման ձևը: Դա անհրաժեշտ չէ, քանի որ չկա երկկողմանի կապ. մենք չենք թարմացնում վերնագիրը հաճախորդի կողմից, բայց ես նախընտրում եմ պահպանել կառավարումը բոլոր արժեքների միջև:
3. Վերադարձրեք մրցավարներին՝ ըստ Vue-ի ակնկալիքների
4. Նայիր, մայրիկ, ես օգտագործում եմ JavaScript տարածման օպերատորը
5. Կարգավորեք օբյեկտի վերագրումը state

Այս պահին մենք ունենք հաճախորդի կողմից ռեակտիվ մոդել:

HTML-ի կողմից մենք օգտագործում ենք համապատասխան Vue ատրիբուտները.

 <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr> <!--1-2--> </tbody>

1. Անցեք Todo օբյեկտների ցանկը
2. is հատկանիշը շատ կարևոր է զննարկիչի կողմից HTML-ը վերլուծելու համար: Լրացուցիչ մանրամասների համար տես

Ես վերը նկարագրեցի համապատասխան ձևանմուշը:

Մոդելի թարմացում

Այժմ մենք կարող ենք ներդնել նոր հնարավորություն՝ ավելացնել նոր Todo հաճախորդից: Ավելացնել կոճակը սեղմելիս մենք կարդում ենք Label դաշտի արժեքը, տվյալները ուղարկում ենք API և թարմացնում ենք մոդելը պատասխանով:

Ահա թարմացված կոդը.

 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 } } }

1. Ստեղծեք ռեակտիվ փաթաթան վերնագրի շուրջ, որի շրջանակը սահմանափակված է գործառույթով
2. create() ֆունկցիան ճիշտ է
3. Կցեք նոր JSON օբյեկտը, որը վերադարձվել է API-ի կանչով Todo ի ցանկին
4. Վերականգնել դաշտի արժեքը
5. Ջնջելիս փոխարինել ամբողջ ցանկը; մեխանիզմը նույնն է

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-ը կապում է create() ֆունկցիան HTML կոճակին։ Այն կանչում է այն ասինխրոն կերպով և թարմացնում է ռեակտիվ Todo ցուցակը զանգով վերադարձված նոր նյութով: Մենք նույնն ենք անում Մաքրում կոճակի համար՝ ստուգված Todo օբյեկտները հեռացնելու համար:

Նկատի ունեցեք, որ ես միտումնավոր չեմ կիրառել սխալների հետ կապված որևէ կոդ, որպեսզի խուսափեմ կոդը ավելի բարդ դարձնելուց, քան անհրաժեշտ է: Ես կդադարեմ այստեղ, քանի որ մենք բավականաչափ պատկերացումներ ձեռք բերեցինք առաջին փորձի համար:

Եզրակացություն

Այս գրառման մեջ ես իմ առաջին քայլերն արեցի Vue-ի միջոցով SSR հավելվածն ավելացնելու համար: Դա բավականին պարզ էր: Ամենամեծ խնդիրը, որին ես հանդիպեցի, դա այն is , որ Vue-ն փոխարիներ տողի ձևանմուշը.

Այնուամենայնիվ, ես ստիպված էի գրել JavaScript-ի բավականին տողեր, թեև ես օգտագործում էի Axios-ը HTTP զանգերի հարցում ինձ օգնելու համար և չէի կառավարում սխալները:

Հաջորդ գրառման մեջ ես նույն հնարավորությունները կներդնեմ Alpine.js-ի հետ:

Այս գրառման ամբողջական սկզբնական կոդը կարելի է գտնել GitHub-ում.

Անցեք հետագա.

---