Şimdi bu Vue.js meselesine dalacağız ama öyle ‘teknik ders’ gibi değil, hani böyle oturup kahve içerken sohbet ediyormuşuz gibi düşünün. Biliyorsunuz, artık web dünyasında ön yüz (frontend) ve arka yüz (backend) ayrımı iyice belirginleşti. Ben de hem C# ile REST API yazan biri olarak hem de Vue.js ile ufak tefek şeyler yapan biri olarak bu iki dünya arasındaki köprüleri nasıl kurduğumuzu anlatacağım size. Özellikle de o meşhur ‘event handling’ olayları var ya, hani bir şeye tıklayınca bir şey olsun, bir değişiklik olunca başka bir şey tetiklensin falan… İşte onların Vue.js’teki karşılığına bakacağız.
Vue.js’te olayları yönetmek için en sık kullanılan iki yöntem var aslında: `v-on` direktifi ve onun kısaltması olan `@` işareti. Bence ikisi de gayet güzel, hangisi elinize yatkınsa onu kullanabilirsiniz. Ama hani bazen insan ‘Abi neden bu kadar uzatmışlar ki?’ diye düşünür ya, işte o an `@` işareti kurtarıcı oluyor. Hem daha kısa hem de daha okunaklı geliyor bana açıkçası. Mesela bir butona tıklanınca bir fonksiyonu çalıştırmak istediğinizde, `` yerine `` yazmak bana daha sempatik geliyor.
Peki, bu olayları tetiklediğimizde ne oluyor da arka plana, yani C# tarafına bir şeyler gönderiyoruz? İşte orada da API’lar devreye giriyor. Vue.js’ten gönderdiğimiz veriyi bir API endpoint’ine yolluyoruz ve C# tarafında bu isteği karşılayan bir controller metodu oluyor. Orada da Dapper gibi ORM’lerle veritabanına işliyoruz falan. Bu arada, bazen bu veri gönderme olayı biraz kafa karıştırıcı olabiliyor, özellikle de ilk başlarda. Hani böyle elinizde bir veri var ama onu nasıl paketleyip karşı tarafa göndereceğinizi tam bilemiyorsunuz. Benim de ilk başlarda bayağı bir deneme yanılma yaptığım oldu bu konuda.
Şimdi gelelim işin C# kısmına. Diyelim ki Vue.js tarafında bir form doldurdunuz ve ‘Kaydet’ butonuna bastınız. Bu `click` eventi, Vue.js’te tanımladığınız bir metodu tetikliyor. Bu metodun içinde de genellikle `axios` veya `fetch` gibi kütüphanelerle bir HTTP isteği yapıyorsunuz. Genelde `POST` metoduyla, JSON formatında veriyi gönderiyorsunuz. Bu JSON verisi de C# tarafında karşılayan modelinize map ediliyor. İşte bu noktada, veriyi doğru bir şekilde modellemek çok önemli. Eğer modeliniz uymazsa, hani böyle bir şey yolluyorsunuz ama karşı taraf ‘Ben bunu anlamadım ki’ diyor ya, işte tam öyle bir durum yaşarsınız.
Bu arada, geçenlerde bir proje üzerinde çalışırken Vue.js’ten gönderdiğim bir veriyi C# controller’ımda yakalayamama gibi bir sorunum olmuştu. Meğersem Vue.js tarafında `axios.post` ile gönderdiğim verinin içeriğini tam olarak belirtmemişim. Yani `Content-Type` header’ını `application/json` olarak ayarlamamışım. C# tarafında da `[FromBody]` attribute’unu kullanmayı unutmuşum. İnanın ki, bu küçük detaylar yüzünden saatlerce uğraştığımı hatırlıyorum. Sonra dedim ki, ‘Neyse efendim, en iyisi bu tür şeyleri bir kenara not alayım da sonra unutmayayım.’
Şimdi size basit bir örnek göstereyim. Bu örnekte, Vue.js tarafında bir input’a yazdığımız metni, bir butona tıklayarak C# tarafındaki bir REST API’mize göndereceğiz. C# tarafında da bu gelen metni alıp ekrana yazdıracağız diyelim. Bu, olayın mantığını anlamak için en temel seviye diyebiliriz.
Vue.js Tarafı
Öncelikle Vue.js’te bir metot tanımlayalım. Bu metot, butona tıklandığında çalışacak ve bizim yazdığımız metni `axios` ile POST isteği olarak gönderecek. Veriyi göndermeden önce `JSON.stringify` ile JSON’a çevirmeyi unutmayın, yoksa karşı taraf anlayamaz sanırım.
Sonrasında da bu isteği karşılayacak C# tarafındaki API endpoint’ini yazacağız. Bu API endpoint’i de gelen veriyi alıp işleyecek. Ne güzel değil mi? İki farklı teknoloji, birbiriyle konuşuyor.
C# Tarafı
C# tarafında ise bir controller metodu oluşturacağız. Bu metodun `[HttpPost]` attribute’u ile işaretlenmesi gerekiyor ve gelen veriyi alabilmesi için parametresine `[FromBody]` eklemeyi unutmamalıyız. Gelen veriyi bir model sınıfı ile karşılamak en temiz yol olacaktır. Bu model sınıfı, Vue.js’ten gönderdiğimiz JSON’daki anahtarlarla eşleşmeli.
Şimdi gelin şu kodlara bir bakalım. Bu örnekte, Vue.js’ten gönderilen mesajı alan bir C# controller metodu var. Gerçekten çok basit bir örnek ama mantığı anlamak için yeterli olacaktır diye düşünüyorum. Bu arada, siz de kendi projelerinizde bu mantığı kullanarak daha karmaşık veri akışları kurabilirsiniz tabi.
Şimdi yanlış bir yaklaşımla başlayalım. Bazen insanlar veriyi direkt string olarak göndermeye çalışıyorlar ve karşı tarafta da bunu direkt string olarak almaya çalışıyorlar. Bu, özellikle karmaşık verilerde veya farklı veri tipleri olduğunda işleri çok zorlaştırabilir. Hani böyle bir yapbozun parçalarını rastgele birleştirmeye çalışmak gibi. Sonuç genellikle hüsran oluyor.
İşte bu durumun daha doğru bir yolu var tabi ki. Veriyi önce bir model sınıfına map edip, sonra bu modeli JSON formatında göndermek. Karşı tarafta da aynı model yapısını kullanarak veriyi almak. Bu, hem daha düzenli hem de daha güvenli bir yol. Hem de hata yapma olasılığınız azalıyor, ne güzel değil mi?
// YANLIŞ YAKLAŞIM (Genellikle veri kaybı veya hata olur) // Vue.js tarafında (basitçe) axios.post('/api/mesaj', 'Bu benim mesajım')
// C# Controller Tarafı [HttpPost("api/mesaj")] public IActionResult PostMesaj(string mesaj) { // Gelen mesajı loglama veya işleme Console.WriteLine($"Gelen mesaj: {mesaj}"); return Ok(); }
// DOĞRU YAKLAŞIM (Model kullanımı) // Vue.js tarafında export default { data() { return { kullaniciMesaji: '' }; }, methods: { mesajiGonder() { axios.post('/api/kaydet', { mesaj: this.kullaniciMesaji }) .then(response => { console.log('Başarılı:', response.data); }) .catch(error => { console.error('Hata:', error); }); } } }
// C# Model Sınıfı public class MesajModel { public string Mesaj { get; set; } }
// C# Controller Tarafı [HttpPost("api/kaydet")] public IActionResult KaydetMesaj([FromBody] MesajModel model) { if (model == null) { return BadRequest("Geçersiz veri."); } Console.WriteLine($"Gelen mesaj: {model.Mesaj}"); return Ok(new { message = "Mesaj başarıyla kaydedildi." }); }
Gördüğünüz gibi, doğru yaklaşımda hem Vue.js tarafında veriyi bir obje içine koyuyoruz hem de C# tarafında bu veriyi karşılayacak bir `MesajModel` sınıfı kullanıyoruz. Bu, kodun okunurluğunu ve yönetilebilirliğini inanılmaz derecede artırıyor. Açıkçası, ilk başlarda bu kadar detaya girmeyip işleri karmaşıklaştırdığım günler oldu benim de 🙂
Neticede, Vue.js’teki `v-on` ve `@` ile olayları tetikleyip, `axios` gibi kütüphanelerle veriyi JSON formatında C# REST API’mize göndermek oldukça standart ve etkili bir yöntem. Bu sayede ön yüz ve arka yüz arasındaki iletişim sorunsuz bir şekilde sağlanabiliyor. Bu arada, bu konuyla ilgili daha fazla detay arayanlar için Google’da güzel kaynaklar bulabilirsiniz. Ben de oradaki bilgileri kullanarak kendi çözümlerimi geliştirmiştim.
Sonuç olarak, teknoloji dünyasında her zaman yeni şeyler öğreniyoruz. Önemli olan, öğrenirken keyif alabilmek ve bu öğrendiklerimizi pratikle birleştirebilmek. Vue.js ve C# ile bu tür veri alışverişleri yapmak da tam olarak böyle bir şey işte. Umarım bu anlattıklarım size de bir nebze olsun faydalı olmuştur. Hadi bakalım, kodlamaya devam! 🙂