Vue.js (2) : Vue-resource Kullanarak Veri Çekmek

Vue.js ile ilgili yazı dizimize devam ediyoruz. Bu yazımızda vue-resource kütüphanesini kullanarak bir rest servisinden veri getireceğiz. Http get/post metodlarını kullanarak, rest kaynaklar üzerinde işlem yapacağız.

Vue-resource Nedir ?

vue-resource, vue topluluğu tarafından geliştirilmiş bir http client kütüphanesidir. Http web çağrılarını yapmak ve geriye dönen dönüş değerlerini okuyabilmek için gerekli servisleri sunan bir plugindir. Vue.js’nin kullanmış olduğumuz 2 nolu versiyon ile de uyumlu bir şekilde çalışmaktadır.

Rest api olarak https://jsonplaceholder.typicode.com/ servisini kullanacağız. jsonplaceholder, herkesin kullanabileceği, test amaçlı hazırlanmış bir servis. Bu servisin http get, post, put vs… metodlarını kullanarak uygulamamızı geliştireceğiz.

UserList Örneği

Çok zaman kaybetmeden, user verilerini çeken basit bir örnek yapalım:

userlist

Vue.js kütüphanesinde ingilizcesi life cycle hooks terimine karşılık gelen metodlar var. Bu metodlar model objesinin oluşturulması sırasında, belli bir sırayla çalıştırılır. created, mounted, destroyed, updated vs… Biz html sayfamız gösterilir gösterilmez veriyi çekmek istediğimiz için, mounted metodu ekliyoruz.

jsfiddle üzerinde de gösterelim:

Post Metodu

Örneğimizi biraz daha geliştirelim. Yeni bir user eklemek istiyoruz. Bir kaç text input alanı ve bir button ekleyelim.

jsfiddle gösterimi:

v-model özelliğinin kullanımına dikkat edelim. v-model kullanarak, vue modelimizdeki newUser objesi ile html input alanlarımızı ilişkilendirmiş olduk.

Sonuç

vue-resource ile vue kütüphanesini birlikte kullanarak, interaktif, hızlı bir şekilde ajax uygulamaları geliştirebiliriz.

Spring Boot ve Vue.js

Bir arkadaşımızın talebi üzerine, daha önce geliştirmiş olduğumuz spring boot todo uygulamasını vue ve vue-resource kütüphanelerini kullanarak güncelleyelim.

TodoController classını aşağıdaki şekilde değiştirelim:

index.html:

Controller paketinin içerisine yeni bir sınıf ekleyelim (TodoRestController):

Todo sınıfında da id alanını public yapalım:

Bu şekilde çalıştıralım ve uygulamanın son halini görelim:

springbootvue

 

 

1 düşünce - “Vue.js (2) : Vue-resource Kullanarak Veri Çekmek”

Yorum Gönder

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top