VueJs’de Vue Resource Kullanarak .Net Core Web Api Servisi ile Haberleşmek

Selamlar, bu makalede VueJs‘de Vue Resource kullanarak hazırlamış olduğumuz Web Api servisi ile nasıl haberleşiriz onun üzerine konuşuyor olacağız.

Uygulamamız kitap satışı yapan bir işletmenin elinde bulunan kitapların uygulama üzerinden yönetilmesini sağlamak olacak.Uygulamamız inşa ederken front-end tarafta VueJs backend tarafta ise Asp.Net Core Web Api kullanıyor olacağız. Çok detaylı işlemlere girmeden basit crud işlemler ile konuyu kavramaya çalışacağız.

İlk olarak servis yapımızı tanıyarak başlayalım. Servis inşa ederken önemli konulardan bir tanesi ortak dönüş modelidir.Yazmış olduğumuz servis bir çok farklı uygulama ve platform tarafından tüketiliyor olabilir. Bu noktada gelen tüm isteklere dönülen cevapların net ve anlaşılır olması hayati bir önem taşımaktadır. ServiceResponse.cs uygulama genelinde kullanacağımız ortak dönüş modelimiz olacak.

BookListDto.cs

BookDto.cs

Servisimiz temel seviyede 5 adet method sunmakta. Methodların işlevleri isimlerinden anlaşılır olsa da aşağıda her bir metodun hangi işlemi gerçekleştirdiğini ve servise ait tüm kodları bulabilirsiniz. Servisimizin son hali bu şekilde olacaktır.

  • Delete:Kitap silme işlemi gerçekleştirir.
  • Get:Tüm kitaplar listesini döner.
  • Add:Kitap ekleme işlemi gerçekleştirir.
  • GetBookById:Tek bir kitap kaydını getirir
  • Update:Kitap düzenleme işlemi gerçekleştirir.

NOT:Mapping işlemleri için AutoMapper kütüphanesi kullanılmıştır. AutoMapper hakkında bilgi edinmek isterseniz buradaki linkten AutoMapper ile ilgili yazıma ulaşabilirsiniz.

Servisimizi inşa ettik.Şimdi sıra geldi servisimizi tüketecek olarak VueJs projemizde Vue Resource yapılandırması gerçekleştirmeye. İlk olarak aşağıdaki komutu kullanarak Vue Resource‘u projemize dahil ediyoruz.

Paket başarılı şekilde yüklendikten sonra main.js içerisine gelip Vue Resource‘uimport ediyoruz. İmport işleminde sonra Vue Resource‘u proje genelinde kullanıma hazır hale getirmiş oluyoruz.

NOT:Vue.http.options.root yapılandırmasının amacı VueJs tarafında servisimize istek gönderirken her endpoint’in başına “https://localhost:44344/” yazmamak için global bir tanımlama yaptık.

App.vue

Tasarımımız hazır. Şimdi ise VueJs tarafında kullanacağımız nesnelerimizi tanımlıyoruz.Tüm kitapları Get ettiğimizde elimizde bulunan kitap listesini bookList nesnesine aktaracağız. Onun dışında Post,Put işlemlerinde ise booksDto nesnemizi kullanıyor olacağız.

main.js içerisinde yapmış olduğumuz Vue Resource yapılandırmasından sonra this.$http syntax‘ı ile artık Vue Resource‘un bize sunmuş olduğu hazır methodlar üzerinden servisimize istekler göndermeye hazırız.

Kodumuzu inceleyecek olursak this.$http syntax‘ı üzerinden servisimize göndermek istediğimiz istek türüne göre POST,PUT,DELETE,GET vue resource tarafından bize sunulan hazır http metodunun çağırımını gerçekleştiriyoruz.Göndreceğimiz isteğe göre parametrelerimizi geçip dönen cevabı then kısmında yakalıyoruz ve servisten dönen cevabı elde etmiş oluyoruz. Sizde dilerseniz uygulamayı indirip kendiniz front-end ve back-end tarafta geliştirmeler yapabilirsiniz.

Benim bu makalede aktaracaklarım bu kadar. Umarım faydalık bir yazı olmuştur.Bir başka makalede görüşmek dileğiyle hoşçakalın 🙂

Source Code: https://github.com/eaktassssss/BookStore

Source:

BUNLAR DA HOŞUNUZA GİDEBİLİR...

Bir cevap yazın

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