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

Vue.js ve Axios ile API Verisi Çekme ve Listeleme Rehberi

Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde Vue.js ve Axios kullanarak bir API’den veri çekeceksiniz.
Verileri JSON formatında alıp arayüzde dinamik olarak listeleyeceksiniz.
Sonunda gerçek zamanlı çalışan bir Vue uygulamanız olacak.

Teknik Özet​

  • Amaç: API’den canlı veri almak
  • Çözüm: Axios ile HTTP isteÄŸi
  • Sonuç: Dinamik ve güncel arayüz

Ön Gereksinimler​

Aşağıdakiler yeterlidir:

  • HTML ve JavaScript temel bilgisi
  • JSON veri yapısına aÅŸinalık
  • Bir kod editörü (VS Code önerilir)

1️⃣ Temel Vue Uygulaması OluÅŸturma​

index.html adında bir dosya oluşturun.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>Kripto Fiyatları</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
</head>
<body>

<div id="uygulama" class="container">
  <h3 class="text-center">Güncel Kripto Fiyatları</h3>
</div>

<script src="https://unpkg.com/vue@3"></script>
</body>
</html>
  • Bu dosya Vue uygulamasının HTML iskeletini oluÅŸturur.

2️⃣ JavaScript Kodunu Ayırma​

  1. Aynı dizinde app.js dosyası oluşturun.

const &#123; createApp &#125; = Vue

createApp({
  data() {
    return {
      mesaj: "Veriler yükleniyor..."
    }
  }
}).mount('#uygulama')
  • Vue uygulamasının mantığı ayrı dosyada tutulur.

3️⃣ v-for ile Dinamik Listeleme​

  1. Veri yapısını API’ye uygun hâle getiriyoruz.

createApp({
  data() {
    return {
      sonuclar: {
        BTC: { USD: 3759.91, EUR: 3166.21, TRY: 110500 },
        ETH: { USD: 281.7, EUR: 236.25, TRY: 8500 }
      }
    }
  }
}).mount('#uygulama')

<div v-for="(deger, coin) in sonuclar" class="columns medium-4">
  <div class="card">
    <div class="card-section">{&#123; coin &#125;}</div>
    <div class="card-divider">$ {{ deger.USD }}</div>
    <div class="card-section">€ {{ deger.EUR }}</div>
    <div class="card-section">₺ {{ deger.TRY }}</div>
  </div>
</div>
  • v-for ile veri otomatik listelenir.

4️⃣ Axios ile Canlı API Verisi Çekme​

  1. Axios kütüphanesini ekleyin.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR,TRY";
const &#123; createApp &#125; = Vue

createApp({
  data() {
    return {
      sonuclar: []
    }
  },
  mounted() {
    axios.get(url)
      .then(cevap => {
        this.sonuclar = cevap.data
      })
      .catch(hata => {
        console.error("API hatası:", hata)
      })
  }
}).mount('#uygulama')
  • Sayfa yüklendiÄŸinde API çaÄŸrısı yapar ve veriyi ekrana basar.

❓ Sıkça Sorulan Sorular​

1. Neden Axios kullanıyoruz? Axios JSON dönüşümünü otomatik yapar.

2. Veriler görünmüyorsa ne yapmalıyım? Tarayıcı konsolunu kontrol edin.

3. Yeni coin nasıl eklenir? URL içindeki fsyms parametresine ekleyin.

4. Veri sürekli güncellenebilir mi? Evet, setInterval kullanılabilir.

Sonuç​

Bu rehberle Vue.js ve Axios kullanarak API verisi çektiniz. Verileri dinamik şekilde listelediniz. Aynı yapı farklı API’ler için de kullanılabilir.

Vue projelerinizi güvenle yayınlamak için Rabisu Bulut altyapısını hemen deneyebilirsiniz.

yaml