Geçen hafta sonu eşim ve çocuğumla Bursa’da kısa bir aile gezisi yaptık, bilirsiniz ya o tür planlar hep son dakikada şekillenir. Ben de arabada otururken aklıma yeni bir Vue projesi için C# backend fikri geldi ama tabii ki kodlama yapacak vakit yoktu, sadece not aldım kafamda. Eve dönünce o fikri uygulamaya koydum fakat ilk denemede Vue tarafında API çağrısı patladı, CORS hatası verdi sanırım, çünkü .NET startup’ında middleware’i unutmuşum. Neyse efendim, hızlıca düzelttim ve çalıştı, aile gezisi molası iyi geldi galiba, zihin tazelendi.
Evet, böyle küçük hatalar insanı deli eder ama öğrenme fırsatı da olur. Dağcılığa benzer biraz, yanlış bir adım atarsın ama geri dönüp düzeltirsin, değil mi?
C# .NET ile REST API geliştirirken Vue.js gibi frontend framework’lerini entegre etmek benim günlük rutinimde önemli bir yer tutuyor. Aslında yıllardır bu ikiliyi kullanıyorum, PostgreSQL veritabanıyla beslenen bir API’yi Vue’da tüketmek hem hızlı hem de verimli oluyor. Tabi bazen entegrasyon sırasında ufak tefek sorunlar çıkıyor, mesela authentication veya veri binding’lerde. Bana göre en güzeli Dapper gibi hafif bir ORM kullanmak, Entity Framework ağır gelebiliyor küçük projelerde.
Bu arada aklıma geldi, geçen ay bir projede jQuery’den Vue’ya geçiş yaptım, eskiden AJAX çağrılarıyla uğraşırken şimdi Vuex store ile state yönetimi çok daha temiz. Sen de mi öyle yapıyorsun yoksa hala vanilla JS mi? Neyse, konuya dönelim.
C# tarafında REST API’yi kurmak için öncelikle bir .NET Core projesi başlatıyorsun, ben genelde console app yerine web API template’ini seçiyorum. Startup.cs veya Program.cs’de (yeni versiyonlarda) middleware’leri ekliyorsun, CORS’u unutma ki Vue dev server’ından çağrı yapabilesin. İşte basit bir örnek, Controller’da bir endpoint tanımlıyorsun:
[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
private readonly IDbConnection _db;
public ProductsController(IConfiguration config)
{
_db = new NpgsqlConnection(config.GetConnectionString("DefaultConnection"));
}
[HttpGet]
public async Task<IActionResult> GetProducts()
{
var products = await _db.QueryAsync<Product>("SELECT * FROM products");
return Ok(products);
}
}Burada Dapper’ın QueryAsync’ini kullandım, PostgreSQL bağlantısı appsettings.json’dan geliyor. Neticede hızlı sorgu yapılıyor, fazla overhead yok. Fakat dikkat et, connection string’i doğru yazmazsan hata alırsın, ben bir keresinde localhost yerine production server’ı karıştırmıştım, veri uçtu gitti 🙂
Vue.js tarafında ise axios gibi bir HTTP client kuruyorsun, ben tercih ediyorum çünkü fetch’e göre daha pratik. App.vue veya bir component’te şöyle bir metod ekliyorsun:
import axios from 'axios';
export default {
data() {
return {
products: []
}
},
async mounted() {
try {
const response = await axios.get('https://localhost:5001/api/products');
this.products = response.data;
} catch (error) {
console.error('API çağrısı başarısız:', error);
}
}
}Evet gayet güzel çalışıyordu derken, production’a deploy ederken HTTPS’i unutursun, mixed content hatası çıkar. Bu yüzden .env dosyasında base URL’i dinamik yap, geliştirme ve prod için ayrı tut. Aslında bu entegrasyonun en keyifli yanı reactive data binding, liste render ederken v-for ile otomatik güncelleniyor, jQuery günlerinde manuel DOM manipülasyonu yoktu öyle.
Veri Doğrulama ve Hata Yönetimi
Şimdi veri doğrulamaya gelelim, C# ‘da model validation için DataAnnotations kullanıyorum, [Required] falan ekliyorsun modele. Vue’da ise form submit ederken computed property’lerle kontrol ediyorsun. Mesela bir ürün ekleme formunda:
Benim deneyimime göre en sık hata authentication’da çıkıyor, JWT token’ı header’a eklemeyi unutuyorsun. .NET’te AddAuthentication middleware’ini kur, Vue’da localStorage’dan token’ı çekip axios interceptor’a koy. Sonuç olarak güvenli bir API elde ediyorsun, ama test ederken Postman’i aç, manuel dene ki sorunları erken yakala.
Bu arada, geçenlerde bir devre tasarımı projesinde gömülü sistem için benzer bir API yazdım, Arduino’dan veri çekip Vue dashboard’una yolluyordum. Orada da bağlantı gecikmesi sorunu yaşadım, latency yüksekti galiba 200-300 ms, ama optimizasyonla düzelttim. Neyse efendim, alakasız bir sapma oldu, geri dönelim.
Sanırım en önemli kısım error handling, try-catch bloklarını bolca kullan ama overkill yapma. Vue’da global error handler kurabilirsin, axios’un default’una ekle. Bana göre bu şekilde kullanıcı deneyimi bozulmuyor, loading spinner’lar falan ekle ki bekletme kimseyi.
Performans İyileştirmeleri
Performans desen, pagination ekle API’ye, yoksa büyük verilerde yavaşlar. C# ‘da Skip-Take ile Dapper sorgusu yap, Vue’da infinite scroll için bir library entegre et. Gerçi ben bazen basit bir sayfalama butonu koyuyorum, kullanıcılar alışkın zaten.
Fakat bazen caching’i unutuyorsun, Redis falan ekle .NET’e, Vue tarafında da service worker ile offline desteği. Neticede app daha hızlı oluyor, mobil kullanımda fark eder. Sen ne dersin, caching kullanıyor musun yoksa her seferinde fresh data mı çekiyorsun?
Açıkçası ben PostgreSQL ile MySQL arasında gidip geliyorum, projeye göre. Vue entegrasyonunda fark etmiyor pek, ama sorgu optimizasyonu önemli. Bir keresinde join’leri fazla kaçırdım, query 5 saniye sürdü, sinir oldum tabii.
(ki bence bu çok önemli, veritabanı indekslerini kontrol etmeyi unutma)
Evet, deploy kısmına değineyim, Azure veya Heroku’ya koyuyorum genelde .NET API’yi, Vue’u Netlify’ye. CI/CD pipeline kurmak zahmetli ama bir kere yapınca rahat. Aslında GitHub Actions ile otomatik deploy ettiriyorsun, push edince build oluyor.
Bu entegrasyonun güzelliği scalability, kullanıcı arttıkça scale edebiliyorsun. Fakat başlangıçta overengineer yapma, MVP ile başla. Benim projelerimde hep öyle, önce temel API, sonra Vue prototipi, feedback al, iterate et.
Neyse efendim, pratik bir ipucu vereyim: Environment variables’ı doğru yönet, .NET’te IConfiguration ile oku, Vue’da process.env. Yanlış ayarlarsan production’da secret’ler leak olur, aman dikkat.
Sonuç olarak C# .NET ve Vue.js ikilisi benim için vazgeçilmez, hem backend hem frontend’i hızlı geliştiriyorsun. Eğer yeni başlıyorsan Microsoft Docs‘a bak, temel kavramlar için iyi. Vue için de resmi site yeterli, tutorial’lar var. Daha fazla örnek istersen Google’da ‘C# .NET Vue.js integration examples’ ara, bol kod snippet çıkar. Bir de Reddit’te r/dotnet subreddit’inde tartışmalar oluyor, community yardımcı. Tabi bir teknoloji blogunda detaylı bir yazı görmüştüm, link unuttum ama faydalıydı.
Sanırım bu kadar, denemeye değer bence. Siz de deneyimlerinizi paylaşın yorumlarda, belki ben de öğrenirim bir şeyler 🙂