Geçenlerde bir projede Vue.js arayüzünden backend’e veri gönderirken ufak bir takıldığım yer oldu. Hani böyle her şey yolunda gidiyor zannedersin de, bir bakarsın veri gitmemiş falan. İşte tam o anlarda insanın aklına ‘Acaba nerede hata yaptım?’ sorusu düşüyor. Benim de başıma geldi bu durum, Vue.js tarafında bir form doldurdum, ‘Gönder’ tuşuna bastım, ama ne yazık ki o veri backend’e ulaşmadı. Birkaç denemeden sonra sorunun basit bir konfigürasyon hatası olduğunu fark ettim. Neyse ki bu tür aksilikler bizi yıldırmıyor, tam tersine daha dikkatli olmamızı sağlıyor.
Aslında bu durum beni biraz düşündürdü. Frontend ve backend arasındaki iletişim ne kadar önemli, değil mi? Birbirini anlamayan iki sistem gibi düşünün. Birbirlerine ne kadar iyi komut verirlerse versinler, eğer karşı taraf anlamazsa sonuç hüsran. Bizim bu işlerde de öyle. Vue.js’ten gönderdiğimiz verinin C# tarafında doğru şekilde karşılanması, Dapper ile veritabanına işlenmesi gerekiyor. Bu zincirin neresinde bir kopukluk olursa, bütün emek boşa gidebiliyor. Bu yüzden bu bağlantıları sağlam kurmak, hem geliştirme aşamasında hem de canlıda sorun yaşamamak adına kritik.
Bu yazıda, Vue.js’ten aldığımız veriyi C# REST API’miz aracılığıyla PostgreSQL veritabanına Dapper kullanarak nasıl gönderebileceğimizi adım adım inceleyeceğiz. Gerçek bir projede başıma gelenleri de araya serpiştirerek, hem teorik bilgiyi hem de pratik tecrübemi paylaşmaya çalışacağım. Umarım bu yazı, benzer sorunlarla karşılaşanlar için bir ışık tutar.
Öncelikle, backend tarafında bir REST API projesi oluşturduğumuzu varsayalım. Ben genellikle C# ve .NET Core kullanıyorum bu tür projeler için. Veritabanı olarak da PostgreSQL tercih ediyorum çünkü hem esnek hem de güçlü bir veritabanı. API’mizde, Vue.js’ten gelecek kullanıcı bilgileri gibi verileri karşılayacak bir controller ve bir de bu verileri işleyecek servis katmanımız olacak.
Dapper, .NET için geliştirilmiş, performansı yüksek, basit bir ORM (Object-Relational Mapper) diyebiliriz. Yani, yazdığımız SQL sorgularının sonuçlarını doğrudan C# nesnelerine dönüştürmemize yarıyor. Bu da işleri bayağı hızlandırıyor. Özellikle büyük veri setleriyle çalışırken veya performansın kritik olduğu durumlarda Dapper gerçekten hayat kurtarıcı olabiliyor. Hani böyle her şeyi kendimiz yazmak yerine, hazır ve optimize edilmiş bir araç kullanmak gibi düşünün.
Veri Gönderme Süreci: Vue.js’ten C# API’ye
Vue.js tarafında bir formumuz olduğunu ve bu formda kullanıcı adı, e-posta gibi alanların bulunduğunu düşünelim. Kullanıcı bu bilgileri doldurduktan sonra ‘Kaydet’ butonuna basacak. İşte o anda, Vue.js’in `axios` gibi bir kütüphane kullanarak bu verileri HTTP POST isteğiyle bizim C# API’mize göndermesi gerekiyor. Bu isteğin içeriği genellikle JSON formatında oluyor.
API tarafında ise bu isteği karşılayacak bir endpoint’e ihtiyacımız var. Genellikle bu, bir controller içinde tanımlanan bir metot olur. Örneğin, `/api/kullanicilar` gibi bir URL’ye POST isteği geldiğinde bu metot çalışacak. Bu metot, gelen JSON verisini alıp bir C# nesnesine (örneğin `KullaniciModel`) dönüştürecek. Hani böyle iki farklı dil konuşan insanı bir tercümanla anlaştırmak gibi bir şey. Frontend’in konuştuğu JSON dilini backend’in anladığı C# nesnesine çeviriyoruz.
Burada dikkat etmemiz gereken en önemli şeylerden biri, frontend’den gelen veri yapısıyla backend’deki modelin uyumlu olması. Eğer Vue.js’ten gönderdiğimiz alan adları ile C# modelimizdeki alan adları birebir aynı olmazsa, Dapper veya .NET Core’un model bağlama mekanizması bu veriyi doğru şekilde eşleştiremez. Bu da benim yaşadığım o ilk takılma anına sebep olabiliyor. Yani isimler, tipler falan hep tutmalı.
Gelen veriyi bir `KullaniciModel` nesnesi olarak aldık diyelim. Şimdi sıra geldi bu veriyi PostgreSQL’e kaydetmeye. İşte burada Dapper devreye giriyor. Veritabanı bağlantısını kurduktan sonra, INSERT sorgumuzu hazırlayacağız. Dapper’ın `ExecuteAsync` metodu bu iş için biçilmiş kaftan. Bu metot, sorguyu çalıştırır ve etkilenen satır sayısını döndürür. Tabii ki SQL injection gibi güvenlik açıklarından korunmak için parametreli sorgular kullanmak şart. Hani böyle birine anahtar verirken, anahtarın üzerine bir de kilit takmak gibi düşünün.
Şimdi gelelim o koddaki hatayı nasıl düzelttiğime. İlk denememde, Vue.js’ten gönderdiğim veriyi doğrudan bir dictionary olarak alıp, Dapper’a öyle göndermiştim. Ancak bu, veritabanına doğru şekilde parametreleri geçirmemi engelliyordu. Sonra fark ettim ki, gelen veriyi önce ilgili C# modeline bağlamam ve ardından o modelin özelliklerini Dapper sorgusunda parametre olarak kullanmam gerekiyormuş. Bu basit bir değişiklik gibi görünse de, sorunun çözülmesinde kilit rol oynadı.
İşte ilk denememdeki yanlış yaklaşım şöyleydi:
// YANLIŞ: Gelen veriyi doğrudan dictionary olarak işleme public async Task<IActionResult> PostKullaniciYanlis(dynamic kullaniciVerisi) { var kullaniciDict = (IDictionary<string, object>)kullaniciVerisi; var sql = "INSERT INTO Kullanicilar (Ad, Eposta) VALUES (@Ad, @Eposta)"; // Burada parametre eşleştirmesi düzgün çalışmıyor await _dbConnection.ExecuteAsync(sql, kullaniciDict); return Ok(); }Bu kodda, `dynamic` kullanarak gelen veriyi bir sözlük gibi almaya çalıştım ama Dapper’ın parametre eşleştirmesi için bu yeterli olmadı. Hata da tam olarak burada başlıyordu. Veritabanına gönderilen ‘@Ad’ ve ‘@Eposta’ parametreleri, gelen sözlükteki anahtarlarla doğru şekilde eşleşmiyordu.
Sonra doğrusunu şöyle yaptım:
// DOĞRU: Gelen veriyi modele bağlayıp Dapper ile parametreli sorgu çalıştırma public class KullaniciModel { public string Ad { get; set; } public string Eposta { get; set; } }public async Task<IActionResult> PostKullaniciDogru([FromBody] KullaniciModel kullanici) { var sql = "INSERT INTO Kullanicilar (Ad, Eposta) VALUES (@Ad, @Eposta)"; // Dapper, KullaniciModel'deki özelliklerle sorgudaki parametreleri otomatik eşleştirir await _dbConnection.ExecuteAsync(sql, kullanici); return Ok("Kullanıcı başarıyla kaydedildi."); }
Gördüğünüz gibi, `[FromBody]` attribute’ü ile gelen JSON verisini doğrudan `KullaniciModel` nesnesine bağladık. Dapper da `ExecuteAsync` metodunu çağırırken, `KullaniciModel` nesnesindeki `Ad` ve `Eposta` özelliklerini, SQL sorgusundaki `@Ad` ve `@Eposta` parametreleriyle otomatik olarak eşleştirdi. Bu, hem daha temiz bir kod sağlıyor hem de güvenlik açısından çok daha sağlam bir yapı sunuyor. Bu basit değişiklik, benim yaşadığım sorunu kökten çözdü.
Bu arada, bu tür veri aktarımında hata ayıklama yaparken tarayıcınızın geliştirici araçlarındaki ‘Network’ sekmesi çok işinize yarayacaktır. Oradan gönderdiğiniz isteği, içeriğini ve gelen cevabı detaylıca görebilirsiniz. Hani böyle bir dedektif gibi iz sürüyorsunuz resmen. Frontend’den ne gönderildi, backend ne aldı, neyi işledi, hepsi orada.
PostgreSQL tarafında da ilgili tablonun doğru şekilde oluşturulduğundan emin olmak önemli. `Kullanicilar` tablosunda `Ad` ve `Eposta` sütunlarının doğru veri tiplerine (örneğin `VARCHAR` veya `TEXT` için `Ad`, `VARCHAR` veya `TEXT` için `Eposta`) sahip olması gerekiyor. Eğer tablo yapısı uyumsuzsa, yine hata alırsınız. Bu tür altyapısal kontrolleri de atlamamak lazım.
Sonuç olarak, Vue.js’ten C# REST API’ye Dapper ile veri gönderme süreci, doğru modelleme ve parametreli sorgular kullanıldığında oldukça basit ve verimli hale geliyor. Bu tür bağlantıların sağlamlığı, uygulamalarımızın güvenilirliği için temel taşıdır. Hani böyle sağlam bir temel üzerine inşa edilen ev gibi düşünün, depreme bile dayanıklı olur. Umarım bu pratik örnek, sizin de projelerinizde işinize yarar.