Şimdi şöyle bir durum var, geçenlerde C# ile bir REST API projesi yapıyordum. Dapper’ı kullanıyordum tabii, malum performanslı çalışıyor. Bir yandan da frontend’de Vue.js ile uğraşıyordum. Frontend’den backend’e veri göndermek, hele ki bu kadar teknoloji iç içeyken, bazen insanı biraz düşündürebiliyor. Hani ilk başta ‘kolaydır ya’ dersin ama sonra bir bakarsın, işler biraz karışmış.
Neticede, bu tür projelerde en kritik şeylerden biri, verinin doğru şekilde, kayıpsız bir şekilde karşıya ulaşması. Yani senin Vue.js uygulamasında bir butona tıkladın, bir veri girdin, o verinin MySQL veya PostgreSQL veritabanına sağlam bir şekilde yazılması lazım. Gerçi ben PostgreSQL kullanıyorum genelde, daha bir güvenilir geliyor bana sanki. Tabii MySQL de iş görür ama neyse.
Bu süreçte en çok dikkat ettiğim şeylerden biri de Dapper’ın kullanımı. Hani ORM’ler var ya, Entity Framework falan, onlar da güzel ama bazen performansı biraz düşürebiliyorlar. Dapper ise daha çok manuel sorgu yazmaya benziyor ama çok daha hızlı. Tabii bu da demek oluyor ki, sorguyu doğru yazmak senin sorumluluğunda. Yanlış bir sorgu, istediğin veriyi getirmez veya hatalı bir işlem yapmana sebep olur. İşte bu yüzden, doğru veri gönderme yöntemini bilmek çok önemli.
Peki, Vue.js tarafından C# REST API’ye nasıl veri göndereceğiz? En basit ve yaygın yöntemlerden biri, Axios kütüphanesini kullanmak. Hani frontend’de JavaScript ile HTTP istekleri yapmanı sağlıyor. POST isteği ile JSON formatında veriyi gönderiyorsun. Sonra C# tarafında bu isteği karşılayan bir controller action’ı yazıyorsun. Orada da Dapper ile bu veriyi PostgreSQL’e kaydediyorsun. İşte bu kadar basit aslında, teorik olarak.
Şimdi gelelim işin pratik kısmına. Hani bazen teorik anlatımlar havada kalabiliyor ya, işte tam burada kod örnekleri devreye giriyor. Geçenlerde yaptığım bir projeden aklıma gelmişken şöyle basit bir örnek göstereyim. Vue.js tarafında bir formunuz var diyelim, kullanıcı adı ve şifre istiyorsunuz. Bu bilgileri alıp API’ye göndereceksiniz. Bu arada, şifreyi asla düz metin olarak göndermemeye dikkat edin, en azından basit bir hash işlemi yapsanız iyi olur. Ya da daha iyisi, HTTPS kullanmak zaten şart tabii ki.
Vue.js tarafında Axios ile yapacağımız istek şöyle bir şeye benziyor:
“`javascript // Vue component içinde methods: { async kullaniciKaydet() { const kullaniciBilgileri = { kullaniciAdi: this.kullaniciAdi, sifre: this.sifre // Unutmayın, şifreyi böyle göndermeyin! Basit bir hash uygulayın veya HTTPS kullanın. };
try { const response = await axios.post(‘/api/kullanici’, kullaniciBilgileri); console.log(‘Başarılı:’, response.data); alert(‘Kullanıcı başarıyla kaydedildi!’); } catch (error) { console.error(‘Hata:’, error); alert(‘Kullanıcı kaydedilemedi.’); } } } “`
Bu kod parçacığı, Vue.js component’inizdeki bir metot içinde çalışacak. `kullaniciBilgileri` adında bir obje oluşturup, formdan aldığınız verileri içine atıyorsunuz. Sonra `axios.post` ile bu objeyi `/api/kullanici` adresine gönderiyorsunuz. Eğer her şey yolunda giderse, backend’den başarılı bir yanıt alacaksınız. Hata olursa da onu yakalayıp ekrana bir mesaj göstereceksiniz. Ne güzel değil mi?
Şimdi bu isteği karşılayacak C# tarafındaki controller action’ına bakalım. Hani bazen C# tarafında bu istekleri karşılamak için bir controller sınıfı ve içinde bir metot oluşturmak gerekiyor. Dapper ile de veritabanına yazacağız tabii. Bu arada, Dapper’ı kullanırken parametreleri doğru şekilde göndermek çok önemli. Aksi takdirde SQL injection gibi güvenlik açıklarına yol açabilirsin. Zaten Dapper’ın kendisi parametreli sorguları destekliyor, yeter ki sen doğru kullan.
İşte C# tarafındaki controller action’ı örneği:
“`csharp // C# Controller içinde using Microsoft.AspNetCore.Mvc; using Dapper; using Npgsql; // PostgreSQL için
[ApiController] [Route(“api/[controller]”)] public class KullaniciController : ControllerBase { private readonly string _connectionString;
public KullaniciController(IConfiguration configuration) { _connectionString = configuration.GetConnectionString(“DefaultConnection”); // appsettings.json’dan alınıyor }
[HttpPost] public async Task
try { using (var connection = new NpgsqlConnection(_connectionString)) { await connection.OpenAsync(); var sql = “INSERT INTO Kullanicilar (KullaniciAdi, Sifre) VALUES (@KullaniciAdi, @Sifre)”; await connection.ExecuteAsync(sql, new { KullaniciAdi = kullanici.KullaniciAdi, Sifre = kullanici.Sifre }); // Buraya hashlenmiş şifre gelecek } return Ok(new { message = “Kullanıcı başarıyla kaydedildi.” }); } catch (Exception ex) { // Hata loglama yapılmalı return StatusCode(500, new { message = “Sunucu hatası oluştu.”, error = ex.Message }); } } }
public class KullaniciModel { public string KullaniciAdi { get; set; } public string Sifre { get; set; } // Buraya hashlenmiş şifre gelecek! } “`
Burada `KullaniciModel` adında basit bir modelimiz var, bu bizim POST isteğiyle gelen JSON’u temsil ediyor. Controller içinde `_connectionString`’i alıyoruz, bu `appsettings.json` dosyamızda tanımlı olmalı. Sonra `NpgsqlConnection` ile veritabanına bağlanıp Dapper’ın `ExecuteAsync` metoduyla INSERT sorgusunu çalıştırıyoruz. `new { KullaniciAdi = kullanici.KullaniciAdi, Sifre = kullanici.Sifre }` ile de sorgu parametrelerini oluşturuyoruz. Gerçek projelerde şifreleri bu şekilde düz göndermemelisiniz. BCrypt gibi kütüphanelerle hashleyip öyle kaydetmek en doğrusu. Bu arada, hata yönetimi de önemli. Bir hata olursa 500 durum koduyla dönüp, hatayı loglamak iyi bir pratik.
Bu arada, geçenlerde bir yerde okumuştum, bazen bu tür veri gönderme işlemleri sırasında ağ kesintileri veya sunucu tarafı hataları olabiliyor. Bu gibi durumlarda Vue.js tarafında yeniden deneme mekanizmaları kurmak faydalı olabilir. Axios’un interceptor’ları bu iş için biçilmiş kaftan. Ya da daha basit bir yaklaşımla, bir fonksiyonu belirli bir süreyle tekrar çalıştırmak gibi. Hani böyle ‘bir daha dene’ mantığı.
Sonuç olarak, Vue.js’ten C# REST API’ye veri göndermek, Dapper ve PostgreSQL gibi teknolojilerle gayet mümkün ve verimli bir şekilde yapılabiliyor. Önemli olan, doğru istek yöntemlerini kullanmak, veri güvenliğini sağlamak ve hata yönetimini ihmal etmemek. Bu arada, bu tür uygulamalar geliştirirken sürekli güncel kalmak gerekiyor, yeni kütüphaneler, yeni yöntemler çıkıyor sürekli. Ben de genelde Google’da arayarak veya YouTube’da ilgili tutorial’lara bakarak öğreniyorum. YouTube’da da çok güzel anlatımlar var aslında, bir göz atabilirsiniz.
Tabii ki bu sadece basit bir örnek. Gerçek projelerde daha karmaşık veri yapıları, yetkilendirme, doğrulama gibi pek çok ek katman olacaktır. Ama temel mantık aynı. Frontend’den veriyi al, API’ye gönder, API de o veriyi veritabanına kaydetsin. En basit haliyle böyle işliyor bu sistemler. Ne güzel değil mi?