men qurilish uchun zamin yaratdim; endi "haqiqiy" boshlash vaqti. Oldingi postimda  Men juda ko'p   eshitdim. Bundan tashqari, ishlab chiquvchidan menejerga o'tgan do'stim menga Vue haqida yaxshi narsalarni aytib berdi, bu mening qiziqishimni yanada oshirdi. Men buni ko'rib chiqishga qaror qildim: bu men o'rganadigan birinchi "engil" JavaScript ramkasi bo'ladi - men yangi boshlovchi nuqtai nazaridan. Vue.js  Ishni tartibga solish  Men oxirgi postda WebJars va Thymeleafni tushuntirdim. Bu yerda sozlash, server va mijoz tomoni.  Server tomoni  Men ikkalasini ham POMga qanday qilib birlashtiraman:   <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 Bootning o'zi; Men muntazam, noreaktiv yondashuvga qaror qildim  Spring Boot Thymeleaf integratsiyasi  Mijoz tomonida Vue versiyasini ko'rsatmaslik uchun WebJars lokatori  Vue, nihoyat!  Men Spring Boot tomonida Kotlin Router va Bean DSL-dan foydalanmoqdaman:   fun vue(todos: List<Todo>) = router { //1 GET("/vue") { ok().render("vue", mapOf("title" to "Vue.js", "todos" to todos)) //2-3 } }    ob'ektlarining statik ro'yxatini o'tkazing Todo  Pastga qarang  Modelni Thymeleafga uzating  Agar siz API-larni ishlab chiqishga odatlangan bo'lsangiz, siz   funksiyasi bilan tanishsiz; u to'g'ridan-to'g'ri foydali yukni qaytaradi, ehtimol JSON formatida.   oqimni ko'rish texnologiyasiga o'tkazadi, bu holda Thymeleaf. U ikkita parametrni qabul qiladi: body() render()  Ko'rinishning nomi. Odatiy bo'lib, yo'l   va prefiks   ; bu holda, Thymeleaf   manzilida ko'rinishni kutadi /templates .html /templates/vue.html  Kalit-qiymat juftliklarining namunaviy xaritasi  Mijoz tomoni  Mana HTML tomonidagi kod:   <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 so'rovlarini bajarishga yordam beradi Axios  Vue o'zi  Bizning mijoz kodimiz  Ma'lumotlarni o'rnating  O'tgan haftadagi maqolada aytib o'tilganidek, Thymeleafning afzalliklaridan biri shundaki, u statik fayllarni va server tomonida ko'rsatish imkonini beradi. Sehrli ish qilish uchun men mijoz tomoni yo'lini,     va server tomonini,     belgilayman.  ya'ni src ya'ni th:src  Vue kodi  Keling, Vue kodiga o'taylik.  Biz bir nechta xususiyatlarni amalga oshirishni xohlaymiz:  Sahifani yuklagandan so'ng, sahifa barcha   elementlarini ko'rsatishi kerak Todo    tugallangan katakchani bosganingizda, u   atributni o'rnatishi/o'chirishi kerak Todo completed    tugmachasini bosganingizda, u barcha bajarilgan   o'chiradi Tozalash Todo    tugmachasini bosganingizda, u   ro'yxatiga quyidagi qiymatlar bilan   qo'shishi kerak: Qo'shish Todo Todo    : Server tomoni hisoblangan identifikatori boshqa barcha identifikatorlarning maksimali va 1 id    :   uchun   maydonining qiymati label label Label    :   o'rnatildi completed false  Vue-ga birinchi qadamlarimiz  Birinchi qadam - bu ramkani yuklash. Yuqoridagi maxsus   faylimiz uchun havolani allaqachon sozlaganmiz. vue.js   document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }  DOM yuklashni tugatgandan so'ng blokni ishga tushiring  Keyingi qadam Vue-ga sahifaning bir qismini boshqarishga ruxsat berishdir. HTML tomonida biz Vue qaysi yuqori darajadagi qismini boshqarishini hal qilishimiz kerak. Biz ixtiyoriy   tanlashimiz va kerak bo'lganda uni keyinroq o'zgartirishimiz mumkin. <div>   <div id="app"> </div>  JavaScript tomonida biz oldingi HTML   ning CSS selektoridan o'tib,   yaratamiz. <div> ilova   Vue.createApp({}).mount('#app');  Shu nuqtada, sahifa yuklanganda biz Vue-ni ishga tushiramiz, lekin ko'rinadigan hech narsa sodir bo'lmaydi.  Keyingi qadam Vue   yaratishdir. Vue shabloni bu Vue tomonidan boshqariladigan oddiy HTML   . Siz Vue-ni Javascript-da belgilashingiz mumkin, lekin men buni HTML sahifasida qilishni afzal ko'raman. shablonini <template>  Sarlavhani ko'rsatadigan ildiz shablonidan boshlaylik.   <template id="todos-app">  <h1>{{ title }}</h1>  </template>  Oson bog'lash uchun identifikatorni o'rnating    xususiyatidan foydalaning; uni o'rnatish kerak title  JavaScript tomonida biz boshqaruv kodini yaratishimiz kerak.   const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }  HTML shablonida ishlatiladigan   xususiyatini e'lon qiling title  Nihoyat, ilovani yaratishda biz ushbu ob'ektni o'tkazishimiz kerak:   Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');  Komponentni sozlang  Vue   funksiyasini kutadi render()      uchun ob'ekt va uning xususiyatlaridan virtual tugun yaratadi h() giperskript    xususiyatini server tomonida yaratilgan qiymat bilan ishga tushiring title  Ushbu nuqtada Vue sarlavhani ko'rsatadi.  Asosiy o'zaro ta'sirlar  Ushbu nuqtada, foydalanuvchi belgilash katakchasini bosganida amalni amalga oshirishimiz mumkin: u server tomonida yangilanishi kerak.  Birinchidan, men   ko'rsatadigan jadval uchun yangi Vue shablonini qo'shdim. Xabarni uzaytirmaslik uchun uni batafsil tavsiflashdan qochaman. Agar qiziqsangiz,   ko'rib chiqing. Todo manba kodini  Mana boshlang'ich satr shablonining kodi, mos ravishda JavaScript va 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>    identifikatorini ko'rsating Todo    yorlig'ini ko'rsating Todo  Agar   atribut   bo'lsa, katakchani belgilang completed true  Vue   sintaksisi orqali hodisalarni boshqarishga imkon beradi. @   <input type="checkbox" :checked="todo.completed" @click="check" />  Foydalanuvchi chiziqni bosganida, Vue shablonning   funksiyasini chaqiradi. Biz ushbu funktsiyani   parametrida aniqlaymiz: 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 } }  Biz keyinchalik unga kirishimiz uchun   qatorini qabul qiling props  Vue qo'ng'iroqni boshlagan   o'tadi event  Axios - bu HTTP qo'ng'iroqlarini soddalashtiradigan JavaScript lib  Server tomoni API taqdim etishi   ; bu post doirasidan tashqarida, lekin manba kodini tekshirib ko'ring. kerak  JSON foydali yuk  Biz barcha belgilangan funksiyalarni HTML dan foydalanish imkoniyatini yaratish uchun qaytaramiz  Mijoz tomoni modeli  Oldingi bo'limda men ikkita xatoga yo'l qo'ydim:  Men hech qanday mahalliy modelni boshqarmadim  Men HTTP javobining chaqiruv usulidan foydalanmadim  Biz buni keyingi xususiyatni, ya'ni tugallangan vazifalarni tozalash orqali amalga oshiramiz.  Endi biz Vue orqali voqealarni qanday boshqarishni bilamiz:   <button class="btn btn-warning" @click="cleanup">Cleanup</button>    ob'ektida biz bir xil nomdagi funktsiyani qo'shamiz: 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 } }  Yuqoridagi kabi  Axios HTTP chaqiruvining avtomatik JSON konvertatsiyasini taklif qiladi    - bu   saqlaydigan joy state modelni  Vue semantikasida Vue modeli biz   bo'lishni xohlaydigan ma'lumotlar atrofidagi o'rashdir. Reaktiv ko'rinish va model o'rtasidagi ikki tomonlama bog'lanishni anglatadi. Biz mavjud qiymatni   usuliga o'tkazish orqali reaktiv qilishimiz mumkin: reaktiv ref()  Composition API'da reaktiv holatni e'lon qilishning tavsiya etilgan usuli   funktsiyasidan foydalanishdir. ref()    argumentni oladi va uni .value xususiyatiga ega ref ob'ektiga o'ralgan holda qaytaradi. ref()  Komponent shablonidagi referatlarga kirish uchun ularni komponentning   funksiyasidan e'lon qiling va qaytaring. setup()  --  Reaktiv holatni e'lon qilish  Keling buni bajaramiz:   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');  Yuqorida aytib o'tilganidek, Thymeleaf orqali HTML sahifasida ma'lumotlar to'plamini oling    o'rnatish usulini o'zgartiramiz. Bu shart emas, chunki ikki tomonlama bog'lanish yo'q - biz mijoz tomoni sarlavhasini yangilamaymiz, lekin men barcha qiymatlar bo'ylab ishlashni izchil saqlashni afzal ko'raman title  Vue kutganidek, hakamlarni qaytaring  Qarang, oyim, men JavaScript tarqatish operatoridan foydalanmoqdaman  Ob'ektning   atributini sozlang state  Ayni paytda bizda   mijoz modeli mavjud. reaktiv  HTML tomonida biz tegishli Vue atributlaridan foydalanamiz:   <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr>  </tbody>    ob'ektlari ro'yxatini aylantiring Todo    atributi brauzer HTMLni tahlil qilish usulini engish uchun juda muhimdir. Qo'shimcha ma'lumot olish uchun   qarang is Vue hujjatlariga  Men yuqorida tegishli shablonni tasvirlab berdim.  Modelni yangilash  Endi biz yangi xususiyatni amalga oshirishimiz mumkin: mijozdan yangi   qo'shing.   tugmasini bosganimizda biz   maydoni qiymatini o'qiymiz, ma'lumotlarni API ga yuboramiz va javob bilan modelni yangilaymiz. Todo Qo'shish Label  Mana yangilangan kod:   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 } } }  Qo'llanishi funksiya bilan cheklangan sarlavha atrofida reaktiv o'ram yarating    funktsiyasi to'g'ri create()  API chaqiruvi tomonidan qaytarilgan yangi JSON ob'ektini   ro'yxatiga qo'shing Todo  Maydon qiymatini tiklang  O'chirishda butun ro'yxatni almashtiring; mexanizmi bir xil  HTML tomonida biz tugma qo'shamiz va   funksiyasiga bog'laymiz. Xuddi shunday, biz   maydonini qo'shamiz va uni modelga bog'laymiz. 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   funksiyasini HTML tugmasi bilan bog‘laydi. U uni asinxron tarzda chaqiradi va qo'ng'iroq orqali qaytarilgan yangi element bilan reaktiv   ro'yxatini yangilaydi. Belgilangan   obyektlarini olib tashlash uchun   tugmasi uchun ham xuddi shunday qilamiz. create() Todo Todo "Tozalash"  E'tibor bering, men kodni kerak bo'lgandan ko'ra murakkablashtirmaslik uchun hech qanday xatolik kodini ataylab amalga oshirmaganman. Birinchi tajriba uchun yetarli tushunchaga ega bo‘lganimiz uchun shu yerda to‘xtayman.  Xulosa  Ushbu postda men Vue bilan SSR ilovasini ko'paytirish bo'yicha birinchi qadamlarimni qo'ydim. Bu juda oddiy edi. Men duch kelgan eng katta muammo Vue-ning chiziq shablonini almashtirishi edi: men hujjatlarni ko'p o'qimaganman va   atributini o'tkazib yuborganman. is  Biroq, men JavaScript-ning bir nechta qatorlarini yozishim kerak edi, garchi men HTTP qo'ng'iroqlarida yordam berish uchun Axios-dan foydalanganman va xatolarni boshqara olmaganman.  Keyingi postda men Alpine.js bilan bir xil xususiyatlarni amalga oshiraman.  Ushbu postning toʻliq manba kodini GitHub’da topish mumkin:   https://github.com/ajavageek/compare-frontends?embedable=true   Oldinga boring:   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

Ushbu audio hikoyaning asl tilida yaratilgan!

Juda uzoq; O'qish

Make resilience your competitive advantage

Vue.js yordamida mijozni ko'paytirish

About Author

IZOHLAR

TEGI QILISH

USHBU MAQOLA TAQDIM ETILGAN

Related Stories

Meet UzairaAdvisory, Startups of The Year 2024 Nominee

Meet Uzi World Digital, Winner of Startups of the year 2024 in Kolkata, West Bengal, India

Meet UzairaAdvisory, Winner of Startups of The Year 2024 in Business

Meet UzairaAdvisory, Startups of The Year 2024 Nominee

Meet Uzi World Digital, Winner of Startups of the year 2024 in Kolkata, West Bengal, India

Meet UzairaAdvisory, Winner of Startups of The Year 2024 in Business

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps