Valla bu aralar yine kod dünyasında bir dolanıyorum, malumunuz benim de öyle aman aman bir iş yoğunluğum yokken, biraz eski konulara dönüp tazelemek istedim. Özellikle ön yüzden C# ile yazdığım REST API’lere veri gönderme konusu, hani böyle bazen unutulabiliyor, ya da daha modern yaklaşımlar nelerdir diye merak ediliyor ya, işte tam da bu yüzden bu konuya bir daha el atmaya karar verdim. Özellikle Vue.js’ten ASP.NET Core ile yazdığım API’lere veri aktarımı, Dapper ORM’ini de kullanarak nasıl daha verimli hale getirilir, biraz ondan bahsedeceğim sizlere.
Biliyorsunuz, teknoloji dediğimiz şey sürekli ilerliyor. Eskiden olsa direkt JSON string’ini gönderir, sunucu tarafında onu parse edip işlerdik. Ama şimdi işler biraz daha farklılaştı sanki. Özellikle .NET Core’un getirdiği yenilikler, Dapper gibi performans odaklı ORM’ler, işleri çok daha kolaylaştırdı ve hızlandırdı, bana göre tabii.
Şimdi diyeceksiniz ki, ‘Hocam neyin kafasını yaşıyorsun, zaten yapıyorduk işte!’ Evet, yapıyorduk, ama bazen küçük detaylar büyük farklar yaratabiliyor, hani bilirsiniz, ince ayarlar gibi. Mesela, veriyi nasıl gönderdiğiniz, sunucu tarafında onu nasıl karşıladığınız, hata yönetimi falan filan… Bu arada, geçenlerde bir yerde okudum, bu tür API iletişimlerinde SSL sertifikalarının önemi üzerine bir makale vardı sanırım. Güvenlik her zaman ön planda olmalı, değil mi?
Öncelikle, Vue.js tarafında işler genellikle Axios gibi kütüphanelerle halledilir. Basit bir POST isteği yaparken, gönderdiğimiz veri modelinin sunucu tarafındaki modelle uyumlu olması gerekiyor. Eskiden bunu elle yapardık ama şimdi model binding olayı sağ olsun, işler çok daha otomatikleşti. Hani böyle bir sihir gibi, değil mi?
ASP.NET Core tarafında ise, gelen veriyi karşılamak için controller’lar ve action method’ları kullanıyoruz. Dapper’ı burada devreye sokmak ise ayrı bir keyif. Direkt SQL sorgularını çalıştırmak yerine, parametrelerle sorgularımızı Dapper’a emanet ediyoruz. Bu hem daha güvenli hem de daha performanslı oluyor.
Şimdi gelelim işin biraz daha teknik kısmına. Kendi yazdığım bir projede, kullanıcı bilgilerini bir formdan alıp API’ye gönderiyordum. Şöyle bir senaryoydu: Ad, soyad, e-posta ve şifre gibi bilgileri alıyordum. Başlangıçta, Vue.js’te Axios ile bir JSON objesi oluşturup bunu POST isteğiyle gönderiyordum. Sunucu tarafında ise, gelen JSON’u direkt bir C# sınıfına deserialize edip, ardından bu sınıfı kullanarak Dapper ile veritabanına kaydediyordum.
Bir keresinde şöyle bir olay yaşandı, tam hatırlamıyorum ama sanırım 15-20 Euro arası bir şey tuttuğum bir aboneliği iptal etmeye çalışırken, formu gönderdim ama sunucu tarafında bir hata oluştu. Gelen veri tam olarak doğru şekilde işlenememişti. Meğersem, Vue.js’ten gönderdiğim JSON’daki bir anahtar adı, sunucu tarafındaki C# modelindeki alan adıyla tam olarak eşleşmiyormuş. Küçük bir harf hatası yüzünden bütün sistem tıkandı kaldı anlayacağınız 🙂
Neyse efendim, bu tür ufak tefek hatalar insanı daha dikkatli olmaya itiyor. İşte o zamanlar, hem Vue.js tarafında veri modelini doğru ayarlamanın hem de C# tarafında gelen veriyi karşılayacak modeli düzgün oluşturmanın ne kadar önemli olduğunu anladım. Özellikle Dapper kullanırken, sorgudaki parametrelerin isimlerinin, gönderilen modeldeki özellik isimleriyle eşleşmesi kritik önem taşıyor.
Şimdi gelelim kod kısmına. Basit bir senaryo üzerinden gidelim.
Vue.js Tarafı (axios ile veri gönderme)
Bu kısımda, kullanıcıdan aldığımız bilgileri bir obje haline getirip Axios ile POST isteği yapıyoruz. Hani böyle temel bir kullanıcı kaydı gibi düşünün.
// Vue Component (Örnek) methods: { async kaydet() { const userData = { ad: this.ad, soyad: this.soyad, email: this.email, sifre: this.sifre // Güvenlik için hashlenmesi gerekir! }; try { const response = await axios.post('https://localhost:5001/api/kullanici', userData); // Kendi API adresinizi girin console.log('Başarılı:', response.data); alert('Kullanıcı başarıyla kaydedildi!'); } catch (error) { console.error('Hata oluştu:', error); alert('Kullanıcı kaydedilemedi. Hata detayları için konsola bakın.'); } } }
Burada dikkat etmeniz gereken şey, `userData` objesindeki anahtar isimlerinin, sunucu tarafındaki model ile uyumlu olması. Hani benim az önce bahsettiğim harf hatası gibi bir şey olmasın sonra 🙂
C# (ASP.NET Core) Tarafı
Şimdi de sunucu tarafına geçelim. Gelen veriyi karşılayacak modelimizi ve Dapper ile veritabanına kaydeden controller method’umuzu oluşturalım.
Önce modelimizi tanımlayalım:
// Models/KullaniciModel.cs public class KullaniciModel { public string Ad { get; set; } public string Soyad { get; set; } public string Email { get; set; } public string Sifre { get; set; } // Gerçek uygulamada hashlenmeli! }Şimdi de controller’ımızı ve Dapper ile kaydetme işlemini yapalım. Bu arada, veritabanı bağlantı cümlesi (connection string) gibi detayları burada göstermedim, onlar zaten projenizin `appsettings.json` dosyasında olmalı, hani bilirsiniz.
// Controllers/KullaniciController.cs [ApiController] [Route("api/[controller]")] public class KullaniciController : ControllerBase { private readonly IDbConnection _dbConnection; public KullaniciController(IConfiguration configuration) { // Connection string'inizi appsettings.json'dan alın var connectionString = configuration.GetConnectionString("DefaultConnection"); _dbConnection = new SqlConnection(connectionString); // SQL Server için örnek // Farklı veritabanları için uygun Dapper provider'ını kullanın }
[HttpPost] public async Task PostKullanici([FromBody] KullaniciModel kullanici) { // Model doğrulama (validation) burada yapılmalı! if (!ModelState.IsValid) { return BadRequest(ModelState); }
// Dapper ile sorgu var sql = @"INSERT INTO Kullanicilar (Ad, Soyad, Email, Sifre) VALUES (@Ad, @Soyad, @Email, @Sifre)"; // Tablo ve sütun isimleri size göre değişebilir
try { // Parametreler direkt modelden geliyor, Dapper bunu anlıyor. await _dbConnection.ExecuteAsync(sql, kullanici); return Ok(new { message = "Kullanıcı başarıyla kaydedildi." }); } catch (Exception ex) { // Gerçek uygulamada daha detaylı loglama yapılmalı Console.WriteLine($"Hata: {ex.Message}"); return StatusCode(500, new { message = "Kullanıcı kaydedilemedi. Bir hata oluştu.", error = ex.Message }); } } }
İşte bu kadar! Gördüğünüz gibi, `[FromBody] KullaniciModel kullanici` ifadesi, gelen JSON verisini otomatik olarak `KullaniciModel` nesnesine bindiriyor. Sonra da Dapper’ın `ExecuteAsync` metoduyla bu modeli direkt sorguya parametre olarak geçiyoruz. Hani böyle, kod yazmak ne güzel değil mi?
Bir de şöyle bir durum var, eskiden bu işleri yaparken bazen kendi yazdığım basit bir proxy programı ile denemeler yapardım, hani böyle yasaklı sitelere girmek için falan uğraşırken. Kendi programım sınıfta kaldı ama o ayrı bir hikaye tabii 🙂
Bu arada, bu kod örneği temel bir senaryo. Gerçek bir projede, şifreleri kesinlikle hash’leyip öyle kaydetmeniz gerekir. Bunun için BCrypt gibi kütüphaneler kullanabilirsiniz. Ayrıca, gelen verinin doğruluğunu kontrol etmek için `ModelState.IsValid` gibi temel doğrulama mekanizmalarını kullanmak da önemli. Daha karmaşık senaryolarda, FluentValidation gibi kütüphanelerle daha detaylı validasyonlar yapabilirsiniz.
Sonuç olarak, Vue.js’ten C# REST API’ye veri gönderme işlemi, Axios ve Dapper gibi araçlarla oldukça kolay ve performanslı hale geliyor. Önemli olan, Vue.js tarafındaki veri yapısıyla C# tarafındaki modelin uyumlu olması ve veritabanı işlemlerini güvenli bir şekilde gerçekleştirmek. Hani böyle, hem hızlı hem güvenli, tam istediğimiz gibi!