üzerine inşa edeceğimiz temelleri atmıştım; şimdi "gerçekten" başlamanın zamanı. Önceki yazımda    hakkında çok şey duydum. Ayrıca, geliştiriciden yöneticiliğe geçen bir arkadaşım bana Vue hakkında güzel şeyler söyledi, bu da ilgimi daha da çekti. Bir göz atmaya karar verdim: Bu, bir acemi olarak, ki ben de öyleyim, inceleyeceğim ilk "hafif" JavaScript framework'ü olacak. Vue.js  Çalışmanın düzenlenmesi  WebJars ve Thymeleaf'ı son yazımda açıklamıştım. İşte kurulum, sunucu ve istemci tarafı.  Sunucu tarafı  İşte ikisini de POM'a nasıl entegre ettiğim:   <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'un kendisi; düzenli, tepkisiz yaklaşımı seçtim  Spring Boot Thymeleaf entegrasyonu  İstemci tarafında Vue sürümünü belirtmekten kaçınmak için WebJars konum belirleyicisi  Vue, sonunda!  Spring Boot tarafında Kotlin Router ve Bean DSL'leri kullanıyorum:   fun vue(todos: List<Todo>) = router { //1 GET("/vue") { ok().render("vue", mapOf("title" to "Vue.js", "todos" to todos)) //2-3 } }  Statik bir   nesneleri listesi geçirin Todo  Aşağıya bakın  Modeli Thymeleaf'e iletin  API geliştirmeye alışkınsanız,   fonksiyonuna aşinasınızdır; bu fonksiyon, yükü doğrudan, muhtemelen JSON formatında döndürür.   akışı görünüm teknolojisine, bu durumda Thymeleaf'e iletir. İki parametre kabul eder: body() render()  Görünümün adı. Varsayılan olarak, yol   ve önek   ; bu durumda, Thymeleaf   bir görünüm bekler /templates .html /templates/vue.html  Anahtar-değer çiftlerinin bir model haritası  İstemci tarafı  İşte HTML tarafındaki 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 isteklerinin yapılmasına yardımcı olur Axios  Vue'nin kendisi  İstemci tarafındaki kodumuz  Verileri ayarlayın  Geçtiğimiz haftaki makalede açıklandığı gibi, Thymeleaf'in avantajlarından biri hem statik dosya işleme hem de sunucu tarafı işleme izin vermesidir. Sihrin işe yaraması için, bir istemci tarafı yolu,     ve bir sunucu tarafı yolu,     belirtiyorum.  yani src yani th:src  Vue kodu  Şimdi Vue kodlarına dalalım.  Birkaç özelliği hayata geçirmek istiyoruz:  Sayfa yüklendikten sonra, sayfa tüm   öğelerini görüntülemelidir Todo  Bir   tamamlandı onay kutusuna tıklandığında,   niteliği ayarlanmalı/ayarlanmamalıdır Todo completed    düğmesine tıklandığında, tamamlanmış tüm   silinir Temizleme Todo    butonuna tıklandığında,   listesine aşağıdaki değerlere sahip bir   eklenmelidir: Ekle Todo Todo    : Sunucu tarafında hesaplanan, diğer tüm ID'lerin maksimum değeri artı 1 id    :   için   alanının değeri label label Etiket    :   olarak ayarlandı completed false  Vue'ye ilk adımlarımız  İlk adım framework'ü başlatmaktır. Yukarıda özel   dosyamız için referansı zaten ayarladık. vue.js   document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }  DOM yüklemeyi tamamladığında bloğu çalıştırın  Bir sonraki adım Vue'nun sayfanın bir kısmını yönetmesine izin vermektir. HTML tarafında, Vue'nun hangi üst düzey kısmı yöneteceğine karar vermeliyiz. İsteğe bağlı bir   seçebilir ve gerekirse daha sonra değiştirebiliriz. <div>   <div id="app"> </div>  JavaScript tarafında, önceki HTML   seçicisini CSS seçicisine geçirerek bir   oluşturuyoruz. <div> uygulama   Vue.createApp({}).mount('#app');  Bu noktada sayfa yüklendiğinde Vue'yu başlatıyoruz ancak görünürde hiçbir şey olmuyor.  Bir sonraki adım bir Vue   oluşturmaktır. Bir Vue şablonu, Vue tarafından yönetilen normal bir HTML   udur. Vue'yi Javascript'te tanımlayabilirsiniz, ancak bunu HTML sayfasında yapmayı tercih ediyorum. şablonu <template>  Başlığı görüntüleyebilecek bir kök şablonla başlayalım.   <template id="todos-app">  <h1>{{ title }}</h1>  </template>  Kolay bağlama için kimliği ayarlayın    özelliğini kullanın; kurulumu yapılması gerekiyor title  JavaScript tarafında ise yönetim kodunu oluşturmamız gerekiyor.   const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }  HTML şablonunda kullanılan   özelliğini bildirin title  Son olarak, uygulamayı oluştururken şu nesneyi iletmemiz gerekiyor:   Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');  Bileşeni yapılandırın  Vue,   fonksiyonunu bekliyor render()    için   nesneden ve onun özelliklerinden sanal bir düğüm oluşturur hipermetin h()    özelliğini sunucu tarafında oluşturulan değerle başlatın title  Bu noktada Vue başlığı görüntüler.  Temel etkileşimler  Bu noktada, kullanıcı bir onay kutusuna tıkladığında eylemi uygulayabiliriz: sunucu tarafındaki durumda güncellenmesi gerekir.  Öncelikle,   görüntüleyen tablo için yeni bir iç içe geçmiş Vue şablonu ekledim. Yazıyı uzatmamak için, ayrıntılı olarak açıklamaktan kaçınacağım. İlginizi çekerse,   bir göz atın. Todo kaynak koduna  Başlangıç satırı şablonunun kodu sırasıyla JavaScript ve HTML olarak şöyledir:   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>    kimliğini göster Todo    etiketini görüntüle Todo    niteliği   kutuyu işaretleyin completed true  Vue,   sözdizimi aracılığıyla olay işleme olanağı sağlar. @   <input type="checkbox" :checked="todo.completed" @click="check" />  Kullanıcı satıra tıkladığında Vue şablonun   fonksiyonunu çağırır. Bu fonksiyonu bir   parametresinde tanımlarız: 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 } }    dizisini kabul edin, böylece daha sonra erişebiliriz props  Vue, çağrıyı tetikleyen   geçirir event  Axios, HTTP çağrılarını basitleştiren bir JavaScript kütüphanesidir  Sunucu tarafının bir API sağlaması   ; bu yazının kapsamı dışındadır, ancak kaynak kodlarını kontrol etmekten çekinmeyin. gerekir  JSON yükü  Tanımlanmış tüm fonksiyonları HTML'den erişilebilir kılmak için geri döndürüyoruz  İstemci tarafı modeli  Önceki bölümde iki hata yaptım:  Hiçbir yerel modeli yönetemedim  HTTP yanıtının çağrı yöntemini kullanmadım  Bunu, tamamlanan görevlerin temizlenmesi olan bir sonraki özelliği uygulayarak yapacağız.  Artık Vue üzerinden olayların nasıl işleneceğini biliyoruz:   <button class="btn btn-warning" @click="cleanup">Cleanup</button>    nesnesine aynı isimli bir fonksiyon ekliyoruz: 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 } }  Yukarıdaki gibi  Axios, HTTP çağrısının otomatik JSON dönüşümünü sunar      depoladığımız yerdir state modeli  Vue'nun semantiğinde, Vue modeli   olmasını istediğimiz verilerin etrafında bir sarmalayıcıdır. Reaktif, görünüm ve model arasında iki yönlü bağlama anlamına gelir. Mevcut bir değeri   metoduna geçirerek reaktif hale getirebiliriz: reaktif ref()  Composition API'sinde reaktif durumu bildirmenin önerilen yolu   fonksiyonunu kullanmaktır. ref()    argümanı alır ve onu .value özelliğine sahip bir ref nesnesi içinde sarılı olarak döndürür. ref()  Bir bileşenin şablonundaki referanslara erişmek için, bunları bileşenin   fonksiyonundan bildirin ve döndürün. setup()  --  Reaktif Durumun Bildirilmesi  Hadi yapalım:   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');  Yukarıda açıklandığı gibi, Thymeleaf aracılığıyla HTML sayfasındaki veri kümesini alın    ayarlama şeklimizi değiştiriyoruz. İki yönlü bir bağlama olmadığı için bu gerekli değil - başlığı istemci tarafında güncellemiyoruz, ancak tüm değerler arasında işlemeyi tutarlı tutmayı tercih ediyorum title  Vue'nun beklentileri doğrultusunda referansları geri döndürün  Bakın anne, JavaScript spread operatörünü kullanıyorum  Nesnenin özniteliğini   yapılandırın state  Bu noktada   bir istemci tarafı modelimiz var. reaktif  HTML tarafında ilgili Vue niteliklerini kullanıyoruz:   <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr>  </tbody>    nesnelerinin listesi üzerinde döngü Todo    niteliği, tarayıcının HTML'yi ayrıştırma biçimiyle başa çıkmak için çok önemlidir. Daha fazla ayrıntı için   bakın is Vue belgelerine  Yukarıda ilgili şablonu anlattım.  Modelin güncellenmesi  Artık yeni bir özellik uygulayabiliriz: istemciden yeni bir   ekleyin.   düğmesine tıkladığımızda,   alan değerini okuruz, verileri API'ye göndeririz ve modeli yanıtla yenileriz. Todo Ekle Etiket  İşte güncellenmiş 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 } } }  Kapsamı işlevle sınırlı olan başlığın etrafında reaktif bir sarmalayıcı oluşturun    fonksiyonu uygun create()  API çağrısı tarafından döndürülen yeni JSON nesnesini   listesine ekleyin Todo  Alanın değerini sıfırla  Silerken tüm listeyi değiştirin; mekanizma aynıdır  HTML tarafında bir buton ekliyoruz ve   fonksiyonuna bağlıyoruz. Aynı şekilde   alanını da ekliyoruz ve onu modele bağlıyoruz. 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,   fonksiyonunu HTML düğmesine bağlar. Bunu eş zamanlı olarak çağırır ve çağrı tarafından döndürülen yeni öğeyle reaktif   listesini yeniler. Aynısını, işaretli   nesnelerini kaldırmak için   düğmesi için de yaparız. create() Todo Todo Cleanup  Kodu gereğinden fazla karmaşık hale getirmekten kaçınmak için bilerek herhangi bir hata işleme kodu uygulamadığımı unutmayın. İlk deneyim için yeterli içgörü elde ettiğimizden burada duracağım.  Çözüm  Bu gönderide, Vue ile bir SSR uygulamasını zenginleştirmeye yönelik ilk adımlarımı attım. Oldukça basitti. Karşılaştığım en büyük sorun, Vue'nin satır şablonunu değiştirmesiydi: Belgeleri kapsamlı bir şekilde okumadım ve   niteliğini kaçırdım. is  Ancak HTTP çağrılarında Axios'u kullanmama rağmen bir hayli satır JavaScript yazmam gerekti ve hataları yönetemedim.  Bir sonraki yazımda aynı özellikleri Alpine.js ile uygulayacağım.  Bu yazının tam kaynak koduna GitHub'dan ulaşabilirsiniz:   https://github.com/ajavageek/compare-frontends?embedable=true   Daha ileri gidelim:   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

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Make resilience your competitive advantage

Vue.js ile İstemciyi Geliştirme

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

Kripto Büyümesi: Etkili Kullanıcı Kişilikleri Oluşturma

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

Kripto Büyümesi: Etkili Kullanıcı Kişilikleri Oluşturma

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps