Geçenlerde bir arkadaşımla oturmuş sohbet ediyorduk, biliyorsun artık teknoloji o kadar hızlı ilerliyor ki bazen yakalamak zorlaşıyor. Kendisi web tarafında Vue.js ile güzel işler yapıyor, ben de backend’de C# ve PostgreSQL ile takılıyorum. Sohbet sırasında aklımıza takıldı, bu Vue.js’ten C# tarafına veri gönderme işini en temiz nasıl yaparız diye. Hani böyle arada bir takılıp kaldığım oluyor, kendi programım sınıfta kaldı 🙂 Tabii hemen atladım, hadi bir bakalım şu işe diyerekten.
Şimdi bu işin mantığı aslında basit. Frontend dediğimiz Vue.js uygulaması, backend’e bir istek (request) gönderiyor ve bu isteğin içine de göndermek istediği veriyi koyuyor. Backend ise bu isteği alıyor, veriyi işliyor ve ne gerekiyorsa yapıyor. Bu kadar basit aslında, değil mi? Fakat işin içine girince bir sürü detay çıkıyor ortaya. Mesela veri formatı ne olacak? JSON mu, form-data mı? Hangi HTTP metodu kullanılacak? GET mi, POST mu? POST daha mantıklı tabii, çünkü veri gönderiyoruz, değil mi?
Benim bu konudaki favori yollarından biri tabii ki RESTful API’lar. C# tarafında ASP.NET Core ile gayet güzel REST API’lar geliştirebiliyoruz. Dapper da işin içine girince, veritabanı işlemlerimiz hem hızlı hem de temiz oluyor. Dapper’ı ben çok seviyorum, çünkü SQL sorgularını doğrudan yazabiliyorsun ve performansı inanılmaz iyi. Yani şey gibi, sanki direkt veritabanıyla konuşuyormuşsun gibi.
Şimdi gelelim işin pratiğine. Diyelim ki bir kullanıcı kaydı yapacağız. Frontend’de Vue.js ile bir formumuz var ve kullanıcı adı, e-posta gibi bilgileri alıyoruz. Bu bilgileri bir JavaScript objesi olarak hazırlayıp, POST isteğiyle backend’e göndereceğiz. Backend’de ise bu isteği karşılayacak bir controller action’ımız olacak. Bu action, gelen JSON verisini alıp bir C# modeline deserialize edecek. Sonra da bu modeli kullanarak Dapper ile veritabanına kaydedecek.
Ne güzel değil mi? Bu arada, tam hatırlamıyorum ama bu tür istekler için kullanılan birkaç popüler kütüphane vardı frontend tarafında. Axios gibi mesela. Axios, Promise tabanlı bir HTTP client’ı ve kullanımı gayet basit. Veriyi JSON olarak gönderirken Content-Type header’ını da `application/json` olarak ayarlamayı unutmamak lazım.
Peki, bu işi nasıl kodlarız diye merak edenler olabilir. Hani benim gibi bazen “nasıl yapıyordum bunu ya?” dediğim oluyor 🙂 Basit bir örnekle göstereyim. Şöyle bir şey düşünelim:
// Vue.js Frontend (JavaScript) async function kullaniciKaydet(kullaniciBilgileri) { try { const response = await axios.post('/api/kullanicilar', kullaniciBilgileri, { headers: { 'Content-Type': 'application/json' } }); console.log('Kayıt başarılı:', response.data); return response.data; } catch (error) { console.error('Kayıt hatası:', error); throw error; } }Bu kodda, `kullaniciBilgileri` objesini alıp, `/api/kullanicilar` endpoint’ine POST isteğiyle gönderiyoruz. Content-Type’ı da belirttik. Gayet basit.
Şimdi backend tarafında C# ile bu isteği nasıl karşılarız ona bakalım. Hani kendi başıma denediğimde bazen bir yerleri unutabiliyorum. İşte burada Dapper devreye giriyor.
// C# Backend (ASP.NET Core Controller) [HttpPost("/api/kullanicilar")] public async Task<IActionResult> KaydetKullanici([FromBody] KullaniciModel kullanici) { if (!ModelState.IsValid) { return BadRequest(ModelState); } // Dapper ile veritabanına kaydetme using (var connection = new SqlConnection("Bağlantı Stringiniz")) // Bağlantı stringini unutma :) { var sql = "INSERT INTO Kullanicilar (Adi, Eposta) VALUES (@Adi, @Eposta)"; await connection.ExecuteAsync(sql, kullanici); }
return Ok(new { message = "Kullanıcı başarıyla kaydedildi." }); }
// KullaniciModel (Basit bir POCO) public class KullaniciModel { public string Adi { get; set; } public string Eposta { get; set; } }
Burada `[FromBody]` attribute’ü önemli, gelen JSON’u `KullaniciModel` objesine bağlamamızı sağlıyor. Sonra Dapper ile basit bir `INSERT` sorgusu çalıştırıyoruz. Tabii burada bağlantı stringinizi doğru yazdığınızdan emin olun, yoksa işler biraz karışabilir. Hani bazen unutulabiliyor o da.
Ne güzel değil mi? Bu kadar basit bir işlem bile arkada bir sürü mekanizmayı çalıştırıyor. Aslında bu temel adımları öğrendikten sonra diğer veri aktarım yöntemleri de çok kolay geliyor insana. Mesela bazen form-data ile de veri göndermek gerekebiliyor ama genellikle JSON daha kullanışlı oluyor bana göre.
Bu arada, bu işlemleri yaparken hata yönetimi de çok önemli. Frontend tarafında `try-catch` blokları kullanmak, backend’de ise `ModelState.IsValid` kontrolü yapmak gibi. Yoksa kullanıcıdan gelen beklenmedik verilerle program patlayabilir. Kendi yazdığım bir programda bu hatayı yapmıştım, ciddi bir hata idi. Neyse efendim, sonuç olarak bu iki dünya arasındaki köprüyü sağlam kurmak, hem kullanıcı deneyimi hem de sistemin kararlılığı için hayati önem taşıyor.
Eğer daha fazla detaya bakmak isterseniz, Dapper’ın resmi belgelerine göz atabilirsiniz, gayet açıklayıcı. Ya da Vue.js ile API istekleri nasıl yapılır diye Google’da aratabilirsiniz, bolca kaynak bulursunuz sanırım. Hatta YouTube’da da güzel anlatımlar var, bir bak isterseniz.