Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Node.js ve Vue.js ile Hafif Fatura Uygulaması Geliştirme: Kullanıcı Arayüzü

Bu rehberde ne öğreneceksiniz?​

Bu rehberde, Node.js ile hazırlanan fatura API’si için Vue.js tabanlı bir kullanıcı arayüzü geliştireceksiniz.
Kullanıcı girişi, fatura oluşturma ve fatura listeleme işlemleri tek panelde ele alınır.

🧠 Teknik Özet​

Bu rehber, Vue.js ile fatura uygulaması arayüzü oluşturmayı anlatır.
Amaç, backend hazırken kullanıcı etkileşimini tamamlamaktır.
Çözüm, Vue Router, Axios ve bileşen tabanlı mimaridir.

Ön Gereksinimler​

  • Node.js v16+ kurulu olmalı
  • Vue CLI yüklü olmalı
  • Temel Vue.js ve JavaScript bilgisi yeterlidir
  • Backend API (Seri Bölüm 1) çalışıyor olmalıdır

1️⃣ Vue.js Projesini Oluşturma​

Frontend ve backend ayrı dizinlerde tutulur.
Bu yapı ölçeklenebilirlik sağlar.

npx @vue/cli create invoicing-app-frontend
  • Bu komut Vue Router içeren bir Vue.js projesi oluşturur.
cd invoicing-app-frontend
npm run serve
  • Bu komut geliştirme sunucusunu başlatır.

2️⃣ Axios ve Bootstrap Kurulumu​

  1. Backend ile iletişim için Axios kullanılır.
npm install [email protected]
  • Bu paket HTTP isteklerini yönetir.
  • Bootstrap eklemek için public/index.html düzenlenir.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  • Bu stil dosyası responsive bir arayüz sağlar.

3️⃣ Vue Router Yapılandırması​

  1. Uygulamada iki ana rota bulunur.

  2. / → Giriş / Kayıt

  3. /dashboard → Kullanıcı Paneli


const routes = [
  { path: '/', component: SignUp },
  { path: '/dashboard', component: Dashboard }
]
  • Bu yapı sayfa geçişlerini yönetir.

4️⃣ Header ve Navigation Bileşenleri​

  1. Header, uygulama başlığını ve kullanıcı bilgisini gösterir.

<Header :user="user" />
  • Navigation, panel içi geçişleri kontrol eder.
setActive(option) {
  this.$parent.$parent.isactive = option
}
  • Bu yöntem aktif sekmeyi değiştirir.

5️⃣ Giriş ve Kayıt (SignUp) Bileşeni​

  1. Kullanıcı giriş ve kayıt işlemleri burada yapılır.
<form @submit.prevent="login">
  • Bu kullanım sayfa yenilenmesini engeller.
axios.post("http://localhost:3128/login", formData)
  • Bu istek kullanıcı doğrulaması yapar.

6️⃣ Dashboard (Panel) Yapısı​

  1. Dashboard varsayılan olarak fatura oluşturma ekranını gösterir.
<CreateInvoice v-if="isactive === 'create'" />
  • Sekmeler Navigation bileşeniyle değiştirilir.

7️⃣ Fatura Oluşturma (CreateInvoice)​

  1. Kullanıcı fatura ve işlem kalemleri ekler.
this.transactions.push({ id, name, price })
  • Bu kod yeni işlem ekler.

this.invoice.total_price = total

  • Bu işlem toplam tutarı hesaplar.

  • Veriler backend’e gönderilir.

axios.post("http://localhost:3128/invoice", formData)

8️⃣ Fatura Listeleme (ViewInvoices)​

  1. Kullanıcıya ait faturalar listelenir.
axios.get(`/invoice/user/${this.user.id}`)
  • Bu istek kullanıcının faturalarını getirir.

❓ Sıkça Sorulan Sorular (SSS)​

1. Network Error alıyorum, neden? Backend sunucusunun çalıştığından emin olun.

2. CORS hatası nasıl çözülür? Backend tarafında CORS izinleri açılmalıdır.

3. Mobil uyumlu mu? Evet, Bootstrap sayesinde responsive çalışır.

4. Frontend ayrı sunucuya alınabilir mi? Evet, production ortamında önerilir.

🎯 Sonuç​

Bu rehberde Vue.js ile Node.js tabanlı bir fatura uygulamasının kullanıcı arayüzünü geliştirdiniz. Kayıt, giriş, fatura oluşturma ve listeleme işlemleri tamamlandı.

Uygulamanızı Rabisu Bulut altyapısında barındırarak güvenli ve ölçeklenebilir hale getirebilirsiniz. Frontend hazırsa, sıra JWT ve fatura gönderimi tarafında 🚀