JavaScript Getirmeyi Kullanarak Python API'sinden Kullanıcı Profillerini ve Gönderilerini Gösterme

Kullanıcı Verilerini JavaScript Getirme ile Görüntüleme: Profiller ve Gönderiler

JavaScript'in güçlü API etkileşimi yeteneklerinin popüler kullanım örneklerinden biri, verilerin bir arka uçtan gerçek zamanlı olarak alınması ve görüntülenmesidir. Bu örnekte, iki bağlantılı tablodan bilgi çıkarmak istiyorsunuz: biri kullanıcının gönderileriyle, diğeri ise profiliyle ilgili. Bu, web sayfanızda çeşitli veri kümelerini dinamik olarak nasıl görüntüleyeceğinizi ve bunları tek bir API çağrısında nasıl ele alacağınızı öğrenmek için harika bir yaklaşımdır.

API'yi getir Devam etmeden önce verileri arka uçtan almak için kullanılmalıdır. JavaScript ayrıştırılacak JSON yanıtı bu, profili ve gönderileri içeren bir Python API'si tarafından döndürülür. JavaScript kullanarak DOM ile nasıl çalışılacağını biliyorsanız, profili ve gönderi bilgilerini doğru şekilde görüntüleyebilirsiniz.

Zor görünse de, yanıtın nasıl yapılandırıldığını biliyorsanız, birden fazla tablodan veri almak aslında mümkündür. İşlem yapmalısınız JSON verileri ve getirme isteğini gönderdikten sonra bunu gösterecek HTML öğeleri oluşturun. Kullanıcı profilleri ve onlarla birlikte gönderilen gönderiler için listeler veya bölümler oluşturmak bunun bir parçasıdır.

Bu eğitimde size, bir Python API'sinden gönderi verilerini ve kullanıcı profillerini yüklemek için JavaScript kullanan gerçek dünyadan bir örnek anlatacağım. Sonunda getirilen verileri nasıl oluşturacağınızı anlayacak ve bunların HTML sayfanızda uygun şekilde göründüğünden emin olacaksınız.

Dinamik İçerik için JavaScript ve Python Entegrasyonunu Anlamak

Dahil edilen komut dosyaları, bir JavaScript ön ucunun ve bir Python arka ucunun kullanımı kolay ama etkili bir şekilde nasıl birleştirileceğini gösterir. Bu entegrasyon sayesinde bir web sayfası gönderi verilerini ve kullanıcı profillerini dinamik olarak yükleyebilir. API'yi getir JavaScript kodunun ana parçasıdır; arka uca bir istek gönderir ve bir JSON yanıtı döndürür. Daha sonra() sözlerle birlikte teknik, komut dosyasının verilerin eşzamansız yüklenmesini garanti etmesine olanak tanır. Bu yöntem, tarayıcının API yanıtını beklerken donmasını önleyerek kullanıcı deneyimini iyileştirir.

JavaScript kodu, kullanıcının kimliğini kullanarak Python API'sine, profili ve gönderi verilerini döndüren bir geri alma isteğinde bulunur. Komut dosyası, profili ve gönderileri görüntülemek için DOM'u değiştirmeden önce ilk olarak yanıtı JSON'a dönüştürür. Bunu paragraflar ve liste öğeleri gibi HTML öğeleri üreterek yapar. Örneğin yeni inşa edilen div Kullanıcı adı, takipçiler ve takip etme öğeleri profil verilerini görüntülemek için kullanılır. Her bilgi, uygun HTML yapısına yerleştirildikten sonra sayfanın profil bölümüne eklenir.

Django tarafından oluşturulan arka uç, gönderi ve profil verilerini veritabanından çıkarmak için çok önemlidir. Json Yanıtı Python'daki işlev, verileri, ayrıştırma kolaylığı ve hafif yapısı nedeniyle çevrimiçi API'ler için önerilen format olan JSON'a dönüştürür. değerler() Django'daki yöntem, gönderilerin sözlük formatında verimli bir şekilde alınmasını garanti eder. Bu şekilde, ön yüzün gönderilerin üzerinden geçmesi ve bunları dinamik olarak web sitesinde oluşturması basit olacaktır. Profile.DoesNotExist istisna, komut dosyası tarafından potansiyel sorunları ele almak ve verilerin mevcut olmadığı durumlarda doğru geri bildirimin sağlandığından emin olmak için kullanılır.

Genel olarak web sitesi dinamiktir ve Python ile JavaScript kombinasyonu sayesinde tam sayfanın yeniden yüklenmesine gerek kalmadan değişebilir. Bu strateji, gönderiler ve profiller de dahil olmak üzere kullanıcı tarafından oluşturulan bilgilerin sıklıkla güncellendiği bloglarda ve sosyal ağ sitelerinde özellikle işe yarar. Çözüm, en iyi uygulamalara bağlı kalarak ve kodu farklı işlevler halinde düzenleyerek modüler ve bakımı kolay hale gelir. Ek olarak birim testlerinin dahil edilmesi, profil ve gönderi verilerinin doğru bir şekilde döndürülmesini ve API'nin amaçlandığı gibi çalışmasını garanti eder. Bu, gerçek zamanlı uygulamaların performansı optimize etmesini ve hataları daha etkili bir şekilde ele almasını mümkün kılar.

// JavaScript Code to Fetch and Display Profile and Posts
function load_profile(author_id) {
    // Fetch profile and posts from the backend
    fetch(`/profile/${author_id}`)
        .then(response => response.json())
        .then(response => {
            // Create a profile section
            const content_profile = document.createElement('div');
            content_profile.className = "content_profile";
            const user = document.createElement('h3');
            user.innerHTML = response.prof.user;
            const followers = document.createElement('p');
            followers.innerHTML = `Followers: ${response.prof.followers}`;
            const following = document.createElement('p');
            following.innerHTML = `Following: ${response.prof.following}`;
            const followButton = document.createElement('button');
            followButton.className = "btn btn-primary";
            followButton.innerHTML = "Follow";
            content_profile.append(user, followers, following, followButton);
            document.querySelector('#profile').append(content_profile);

            // Display posts
            response.posts.forEach(post => {
                const postList = document.createElement('ul');
                const authorInfo = document.createElement('li');
                authorInfo.innerHTML = `${post.author} at ${post.timestamp} says:`;
                const content = document.createElement('li');
                content.innerHTML = post.content;
                const likes = document.createElement('li');
                likes.innerHTML = `${post.like} Likes`;
                postList.append(authorInfo, content, likes);
                document.querySelector('#postbox').append(postList);
            });
        })
        .catch(error => console.error('Error loading profile:', error));
}

from django.http import JsonResponse
from .models import Profile, Post
def profile_view(request, author_id):
    try:
        # Fetch profile and posts data
        profile = Profile.objects.get(user_id=author_id)
        posts = Post.objects.filter(author_id=author_id).values()
        # Prepare the JSON response
        return JsonResponse({
            'prof': {
                'user': profile.user.username,
                'followers': profile.followers.count(),
                'following': profile.following.count()
            },
            'posts': list(posts)
        })
    except Profile.DoesNotExist:
        return JsonResponse({'error': 'Profile not found'}, status=404)

from django.test import TestCase
from .models import Profile, Post
class ProfileViewTest(TestCase):
    def setUp(self):
        # Create test data
        user = User.objects.create(username='testuser')
        profile = Profile.objects.create(user=user)
        Post.objects.create(author=user, content='Test post')

    def test_profile_view(self):
        # Make request to the API
        response = self.client.get('/profile/testuser')
        self.assertEqual(response.status_code, 200)
        data = response.json()
        # Check if profile data is correct
        self.assertEqual(data['prof']['user'], 'testuser')
        self.assertEqual(len(data['posts']), 1)
}

Dinamik Web Uygulamaları için JSON Verilerini Verimli Bir Şekilde Kullanma

Kullanıcı profilleri ve gönderiler de dahil olmak üzere çok sayıda kaynaktan veri döndüren API'lerle çalışırken JSON yanıtının etkili bir şekilde işlenmesi çok önemlidir. Önceki örnekte, Python arka ucundan veri aldıktan sonra web sayfasını dinamik olarak güncellemek için JavaScript'i kullandık. Ancak JSON verilerini işleme ve sunma şeklinizden en iyi şekilde yararlanmak, JSON verileriyle çalışırken de çok önemlidir. Aşağıdaki gibi etkili döngüler kullanarak makale dizileri arasında geçiş yapabiliriz: Her biri içingibi tekniklerin yardımıyla JavaScript dosyasının içine ham HTML yazmadan HTML öğeleri oluşturun. createElement. Bu yöntem kodun modülerliğini ve bakım kolaylığını korur.

Hata işleme ve veri doğrulama, dikkate alınması gereken önemli ek faktörlerdir. Uygun şekilde ele alınmazsa arka uç hatalı veya eksik veriler döndürebilir ve bu da ön uçta sorunlara yol açabilir. JavaScript kodunda bir geri dönüş stratejisi uygulayarak, bozuk düzenlerden veya JavaScript sorunlarından kaçınabiliriz. cevap göstermeye çalışmadan önce gerekli verileri içerir. Büyük ölçekli web uygulamalarında güvenilirlik çok önemlidir, bu nedenle özellikle hayati öneme sahiptir. Üstelik Django'yu kullanarak Json Yanıtı Verilerin ön uç tüketimi için uygun şekilde biçimlendirildiğini garanti eder.

Ve son olarak, dinamik içerikle çalışırken güvenlik sürekli bir endişe kaynağıdır. Verileri görüntülemeden önce temizlemek, bunu düzeltmenin ve siteler arası komut dosyası çalıştırma (XSS) saldırıları gibi güvenlik kusurlarını durdurmanın bir yöntemidir. JavaScript'in yerleşik DOM değiştirme yeteneklerini kullanarak potansiyel olarak tehlikeli kod eklemekten kaçının. metinİçerik, innerHTML yerine. Bu yönergelere bağlı kalarak web sayfanızdaki bilgilerin güvenli ve güvenilir olduğundan emin olabilirsiniz.