Selam millet! Nasılsınız? Bugün aklıma takılan bir konuyu, yani Vue.js’ten C# REST API’ye veri gönderme meselesini biraz deşmek istedim. Hani böyle frontend’de bir şeyler yapıyorsun ya, sonra backend’e göndermen gerekiyor. İşte o anlarda insan bazen takılıyor, değil mi?
Özellikle Dapper ve PostgreSQL gibi teknolojileri kullanırken işler biraz daha detaylı hale gelebiliyor. Ama aslında o kadar da karmaşık değilmiş, inanır mısınız? Kendi projelerimde de bu yollardan geçtiğim için biliyorum, ilk başta biraz göz korkutucu görünebilir. Ama adım adım ilerleyince, aslında gayet keyifli bir süreç olduğunu göreceksiniz.
Şimdi düşününce, bundan birkaç yıl önce bir projede Vue.js ile hazırladığım kullanıcı formunu C# API’sine göndermeye çalışıyordum. O zamanlar Dapper’ı yeni yeni öğreniyordum ve PostgreSQL ile de ilk defa bu kadar derinlemesine çalışıyordum. İlk denemelerimde biraz tökezledim açıkçası. Veri gidiyor ama doğru şekilde işlenmiyordu ya da hata veriyordu. Hatırlıyorum da, kendi yazdığım API sınıfta kaldı resmen :)) Neyse efendim, sonunda çözümü buldum tabii.
Peki, neydi bu işin sırrı? Aslında temel mantık şu: Vue.js tarafında bir veri yapısı oluşturuyorsunuz, bu genellikle bir JavaScript objesi oluyor. Sonra bu objeyi bir HTTP isteğiyle, mesela POST metoduyla, backend’deki API endpoint’inize gönderiyorsunuz. Bu kadar basit!
Fakat işin içine Dapper ve PostgreSQL girdiğinde, backend tarafında bu gelen veriyi alıp veritabanına kaydetmeniz gerekiyor. İşte tam burada Dapper’ın nimetlerinden faydalanıyoruz. Dapper, .NET için geliştirilmiş, mikro-ORM dediğimiz bir kütüphane. SQL sorgularınızı doğrudan çalıştırıp, sonuçları C# objelerine map etmenizi sağlıyor.
Aslında bu süreç, benim gibi hem frontend hem de backend tarafında biraz vakit geçirmiş biri için bile başta biraz kafa karıştırıcı olabiliyor. Hani ilk başta şöyle bir düşünüyorsun, ‘Bu veri oradan buraya nasıl gidecek?’ diye. Ama sonra o JavaScript objesinin bir JSON string’ine dönüştüğünü ve o JSON’un da backend’de C# objesine çevrildiğini anladığın an, her şey yerine oturuyor.
Gelelim işin pratik kısmına. Diyelim ki Vue.js’te şöyle bir kullanıcı bilgisi objeniz var:
const kullaniciBilgisi = { ad: 'Ali', soyad: 'Veli', email: 'ali.veli@example.com', yas: 30 };Bu objeyi bir Vue component’inden veya servisten POST isteğiyle backend’e göndereceksiniz. Axios gibi bir kütüphane ile bu işlem oldukça kolay:
axios.post('/api/kullanicilar', kullaniciBilgisi) .then(response => { console.log('Başarıyla kaydedildi!', response.data); }) .catch(error => { console.error('Hata oluştu:', error); });Bu arada, bu POST isteği `application/json` Content-Type ile gidiyor. Backend’de ise bu gelen JSON verisini alıp C# objesine çevirecek bir yapıya ihtiyacımız var. ASP.NET Core API projelerinde bu otomatik olarak oluyor genellikle. Yani controller’ınızda bir parametre olarak tanımladığınız C# objesine veriler direkt bind ediliyor.
Şimdi asıl can alıcı yere geldik: C# tarafında bu veriyi alıp Dapper ile PostgreSQL’e nasıl kaydedeceğiz? Basit bir örnek yapalım:
Öncelikle, gelen veriyi temsil eden C# modelinizi tanımlamanız gerekiyor. Bu, frontend’deki JavaScript objesine denk gelmeli:
public class Kullanici { public string Ad { get; set; } public string Soyad { get; set; } public string Email { get; set; } public int Yas { get; set; } }Sonra, veritabanı bağlantı bilgilerinizi ayarlayıp, Dapper ile sorgunuzu çalıştırabilirsiniz. Şöyle bir controller action’ı düşünün:
Öncelikle, bu işlemi yaparken genel bir hata almamak için bir tane basit controller action’ı yazdım. Bu action, gelen `Kullanici` objesini alacak ve veritabanına kaydedecek.
Şimdi işin eğlenceli kısmı, Dapper ile bu veriyi PostgreSQL’e göndermek. Şöyle bir kod düşünebilirsiniz:
// YANLIŞ ÖRNEK (Basitlik adına string concatenation kullanıldı, kesinlikle yapılmamalı!) // public async Task PostKullaniciYanlis(Kullanici kullanici) // { // string connectionString = "Server=myServerAddress;Database=myDataBase;User Id=myUsername;Password=myPassword;"; // using (var connection = new NpgsqlConnection(connectionString)) // { // await connection.OpenAsync(); // var sql = $"INSERT INTO Kullanicilar (Ad, Soyad, Email, Yas) VALUES ('{kullanici.Ad}', '{kullanici.Soyad}', '{kullanici.Email}', {kullanici.Yas})"; // await connection.ExecuteAsync(sql); // return Ok("Kullanıcı başarıyla kaydedildi (Yanlış Yöntem)."); // } // }// DOĞRU ÖRNEK (Parametreli sorgu ile SQL Injection'dan korunma) public async Task PostKullanici(Kullanici kullanici) { // Gerçek projede connection string'i config'den alınır. var connectionString = "Server=localhost;Port=5432;Database=testdb;User Id=postgres;Password=your_password;"; using (var connection = new NpgsqlConnection(connectionString)) { await connection.OpenAsync(); var sql = @"INSERT INTO Kullanicilar (Ad, Soyad, Email, Yas) VALUES (@Ad, @Soyad, @Email, @Yas)"; await connection.ExecuteAsync(sql, kullanici); return Ok("Kullanıcı başarıyla kaydedildi."); } }
Gördüğünüz gibi, doğru yöntemde Dapper’ın `ExecuteAsync` metodu, doğrudan `Kullanici` objesini parametre olarak alabiliyor. Bu sayede SQL injection gibi güvenlik açıklarından da korunmuş oluyorsunuz. Bu arada, benim ilk denemelerimde kullandığım yöntem kesinlikle bu değildi, çok daha ilkel bir string birleştirme yapıyordum ve ciddi güvenlik açıkları barındırıyordu. Neyse ki o günler geride kaldı.
PostgreSQL tarafında ise `Kullanicilar` adında bir tablonuzun olması gerekiyor ve bu tabloda `Ad`, `Soyad`, `Email`, `Yas` gibi sütunlar bulunmalı. Hani böyle bir şey işte. Veritabanı yapısını kurduktan sonra gerisi çorap söküğü gibi geliyor.
Bu arada aklıma geldi, Dapper ile ilgili daha detaylı bilgi almak isterseniz, GitHub’da harika bir dokümantasyonu var. Hatta YouTube’da da birçok eğitici video bulabilirsiniz. Şöyle bir Google araması bile işinizi görebilir.
Sonuç olarak, Vue.js’ten C# REST API’ye veri göndermek, Dapper ve PostgreSQL ile birleştiğinde gayet güçlü ve güvenli bir çözüm sunuyor. Teknoloji seçimi yaparken bazen ilk başta zorlayıcı gibi görünse de, doğru adımları izlediğinizde ne kadar kolaylaştığını görebilirsiniz. Bana göre bu, modern web geliştirmenin temel taşlarından biri. Ne dersiniz? Siz de bu tür entegrasyonları sık sık kullanıyor musunuz?
Eğer denemek isterseniz, bu temel yapıyı kullanarak kendi projelerinizi geliştirebilirsiniz. Unutmayın, pratik yapmak her zaman en iyisidir! Hani derler ya, balık tutmayı öğrenmek, balık vermekten iyidir. İşte bu da öyle bir şey. Sanırım bu kadar yeterli olacaktır.
Bu arada, eğer daha önce böyle bir entegrasyon yaptıysanız veya aklınıza takılan bir şeyler varsa, yorumlarda konuşabiliriz. Bilgi paylaşımı her zaman iyidir. 🙂