Geçenlerde yine bir projede Vue.js frontend’inden C# backend’ine veri gönderme işi çıktı başıma. Hani bazen böyle basit sanırsın da işin içine girince bir bakarsın ki o kadar da basit değilmiş ya, işte öyle bir durum. Normalde bu tür işlerde ya doğrudan http post atarız ya da bir ara kullandığım SignalR gibi çözümlere yöneliriz. Ama bu sefer işler biraz daha farklı ilerledi. Direkt olarak bir REST API’ye ihtiyacımız vardı ve backend’de de elimizde Dapper ile PostgreSQL’e bağlanan bir yapı vardı. Ne yapalım ki, işte böyle durumlarda biraz kafa yormak gerekiyor.
Bu arada aklıma geldi, bundan birkaç yıl önce bir ara kendim için basit bir proxy programı yazmıştım. Hani böyle yasaklı sitelere girmeye çalışırken TTnet’in filtrelerini delmek için falan. O programın da temelinde yine http isteklerini yönetmek vardı tabii. Ne hikmetse o program bu sefer pek işe yaramadı, kendi yazdığım kod sınıfta kaldı 🙂 Neyse, konumuza dönelim. Vue.js tarafında işler aslında oldukça standart. Bir component’ten veya bir servis katmanından veriyi alıp, onu JSON formatına çevirip, bir POST isteğiyle backend’e yollayacağız. Bu kısım çoğu framework’te aşağı yukarı aynıdır sanırım. Asıl olay backend’de başlıyor.
Backend’de C# tarafında bir ASP.NET Core Web API projesi kurdum. Dapper zaten hazır, PostgreSQL bağlantısı da ayarlamış durumdayız. Şimdi Vue.js’ten gelecek olan JSON verisini alacak bir controller action’ı yazmamız gerekiyor. Bu gelen veriyi de Dapper’ın `ExecuteAsync` metoduyla doğrudan PostgreSQL’e göndereceğiz. Basit bir INSERT işlemi olacak yani. Ama tabii işin içinde güvenlik, validasyon gibi detaylar da var. Hani her gelen veriye güvenemezsin ya, değil mi?
Şimdi şöyle bir örnek düşünelim. Vue.js tarafında bir kullanıcı profili formu olduğunu varsayalım. Bu formda kullanıcı adı, e-posta ve belki de bir şifre alanı var. Bu bilgileri alıp backend’e göndereceğiz. Backend’de de bu bilgileri alıp `Users` tablosuna kaydedeceğiz. Tabii ki bu sadece basit bir örnek. Gerçek projelerde şifreleri asla düz metin olarak göndermez ve veritabanına kaydetmezsiniz. Hashing ve saltlama yöntemleri kullanmak şart. Ama konsepti anlatmak için bu örnek yeterli olacaktır diye düşünüyorum.
Öncelikle Vue.js tarafında bir `fetch` isteği yapalım. Basit bir `POST` metoduyla, `Content-Type` başlığını `application/json` olarak ayarlayarak veriyi gönderiyoruz. Veriyi de `JSON.stringify` ile string’e çeviriyoruz tabii ki.
// Vue.js component'i içinde veya bir servis dosyasında async function saveUserData(userData) { try { const response = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userData) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); }
const result = await response.json(); console.log('Kullanıcı başarıyla kaydedildi:', result); return result; } catch (error) { console.error('Kullanıcı kaydedilirken hata oluştu:', error); // Hata yönetimi burada yapılır. Kullanıcıya bilgi verilir vs. } }
İşte bu kadar basit. Vue.js tarafı böyle. Şimdi gelelim C# tarafına.
Backend’de ASP.NET Core projemizde bir `UsersController` oluşturalım ve içine bir `Post` action’ı yazalım. Bu action, Vue’den gelen JSON’u alacak ve Dapper ile veritabanına kaydedecek.
Şimdi öncelikle veritabanı modelimizi bir tanımlayalım. Basit bir `User` sınıfı yeterli olacaktır.
// Models/User.cs public class User { public int Id { get; set; } // Otomatik artan primary key public string Username { get; set; } public string Email { get; set; } // Gerçek projelerde şifre alanı ve ilgili işlemler eklenir. }Şimdi controller’ımızı yazabiliriz. Bu arada veritabanı bağlantı string’ini `appsettings.json` dosyasından almayı unutmayın. Sanırım 15-20 Euro arası bir şey tutuyor herhalde o da 🙂 Neyse, bu örnek için bağlantı string’ini doğrudan kodda göstermeyeceğim ama sizin orayı ayarlamanız gerekecek.
Şimdi controller’ımızı oluşturalım. Bu arada, Dapper’ı kullanabilmek için `Dapper` NuGet paketini projenize eklemeniz gerekiyor, unutmayın.
// Controllers/UsersController.cs using Dapper; using Microsoft.AspNetCore.Mvc; using System.Data; using Npgsql; // PostgreSQL için[ApiController] [Route(\"api/[controller]\")] public class UsersController : ControllerBase { private readonly string _connectionString; // appsettings.json'dan okunacak
public UsersController(IConfiguration configuration) { // Bu kısımda bağlantı string'ini okuyup _connectionString'e atayacaksınız. // Örnek: _connectionString = configuration.GetConnectionString(\"DefaultConnection\"); _connectionString = "Host=localhost;Username=myuser;Password=mypassword;Database=mydatabase"; // Sadece örnek }
[HttpPost] public async Task<IActionResult> PostUser([FromBody] User user) { // Gelen veriyi doğrulamamız gerekiyor. Hani her gelene inanmamak lazım :) if (user == null || string.IsNullOrWhiteSpace(user.Username) || string.IsNullOrWhiteSpace(user.Email)) { return BadRequest(\"Geçersiz kullanıcı verisi.\"); }
// Gerçek projede şifre validasyonu ve hashing burada yapılır. // Bu sadece konsepti anlatmak için.
using (IDbConnection db = new NpgsqlConnection(_connectionString)) { var sql = @\" INSERT INTO Users (Username, Email) VALUES (@Username, @Email); SELECT CAST(SCOPE_IDENTITY() as INT); // PostgreSQL'de ID'yi almak için \";
try { // Dapper ile veriyi veritabanına ekleyelim. // user nesnesindeki property'ler SQL'deki parametre adlarıyla eşleşmeli. var newUserId = await db.QuerySingleAsync<int>(sql, user);
// Başarılı olduğunda 201 Created durumu dönebiliriz. return CreatedAtAction(nameof(GetUser), new { id = newUserId }, user); } catch (Exception ex) { // Hata durumunda loglama yapabiliriz. // Sadece örnek olması açısından basit bir hata mesajı dönüyorum. return StatusCode(500, $\"Veritabanı hatası oluştu: {ex.Message}\"); } } }
// Örnek olarak GetUser action'ı da ekleyelim. [HttpGet(\"{id:int}\")] public async Task<IActionResult> GetUser(int id) { using (IDbConnection db = new NpgsqlConnection(_connectionString)) { var sql = \"SELECT * FROM Users WHERE Id = @Id;\"; var user = await db.QuerySingleOrDefaultAsync<User>(sql, new { Id = id });
if (user == null) { return NotFound(); } return Ok(user); } } }
İşte bu kadar! Vue.js’ten gelen veriyi C# Dapper ile PostgreSQL’e nasıl gönderebileceğimizi gördük. Tabii bu sadece basit bir INSERT işlemi. Update, Delete gibi işlemleri de benzer mantıkla yapabilirsiniz. Önemli olan, Vue.js tarafında doğru JSON yapısını oluşturmak ve backend’de de bu yapıyı doğru bir şekilde karşılayıp veritabanına aktarmak.
Neticede, bu tür entegrasyonlar yazılım geliştirmenin en temel parçalarından biri. Hem frontend hem de backend’i iyi anlamak, sorunsuz çalışan sistemler kurmanın anahtarı. Hani bazen böyle karmaşık gözüken şeyler aslında çok basit mantıklarla çözülebiliyor ya, işte bu da onlardan biriydi sanırım. Gerçi gerçek projelerde işler biraz daha karmaşıklaşabiliyor ama ana mantık hep aynı kalıyor.
Bu arada, Dapper’ın performansını da unutmamak lazım. ORM’lere göre daha hızlıdır ve basit sorgularda gerçekten fark yaratabiliyor. Tabii ki bu performans avantajını doğru kullanmak önemli. Hani her şeyi Dapper ile yapmaya çalışmak yerine, uygun olduğu yerlerde kullanmak daha mantıklı olabilir. Sonuç olarak, Vue.js ve Dapper ile veri gönderme süreci oldukça verimli bir şekilde tamamlanabiliyor. Yani evet, gayet de güzel çalışıyor bu sistem.
Eğer merak ederseniz, Dapper’ın kendi sitesine de bir göz atabilirsiniz. Linki tam hatırlamıyorum ama Google’da aratırsanız kolayca bulursunuz sanırım.
Dapper ORM hakkında Google araması
Kendi programım sınıfta kaldı ama bu sefer Dapper ile güzel bir iş çıkarmış olduk 🙂