So zeigen Sie Benutzerprofile und Beiträge von einer Python-API mithilfe von JavaScript Fetch an

Benutzerdaten mit JavaScript Fetch anzeigen: Profile und Beiträge

Ein beliebter Anwendungsfall für die leistungsstarken API-Interaktionsfähigkeiten von JavaScript ist der Echtzeitabruf und die Anzeige von Daten aus einem Backend. In diesem Fall möchten Sie Informationen aus zwei verknüpften Tabellen extrahieren: eine zu den Beiträgen eines Benutzers und die andere zu seinem Profil. Dies ist ein großartiger Ansatz, um zu lernen, wie Sie mehrere Datensätze dynamisch auf Ihrer Webseite anzeigen und in einem einzigen API-Aufruf verarbeiten können.

Der API abrufen muss verwendet werden, um die Daten vom Backend abzurufen, bevor Sie fortfahren können. JavaScript analysiert das JSON-Antwort das von einer Python-API zurückgegeben wird, die das Profil und die Beiträge enthält. Sie können die Profil- und Beitragsinformationen korrekt anzeigen, wenn Sie wissen, wie man mit dem DOM mithilfe von JavaScript arbeitet.

Obwohl es schwierig erscheinen kann, ist das Abrufen von Daten aus mehreren Tabellen tatsächlich machbar, wenn Sie wissen, wie die Antwort strukturiert ist. Sie müssen die bearbeiten JSON-Daten und erstellen Sie HTML-Elemente, um sie nach dem Absenden der Abrufanforderung anzuzeigen. Dazu gehört das Erstellen von Listen oder Abschnitten für Benutzerprofile und die dazugehörigen Beiträge.

In diesem Tutorial führe ich Sie durch ein reales Beispiel, das JavaScript verwendet, um Beitragsdaten und Benutzerprofile von einer Python-API zu laden. Am Ende werden Sie verstehen, wie Sie die abgerufenen Daten rendern und sicherstellen, dass sie ordnungsgemäß auf Ihrer HTML-Seite angezeigt werden.

Verständnis der JavaScript- und Python-Integration für dynamische Inhalte

Die enthaltenen Skripte zeigen, wie man ein JavaScript-Frontend und ein Python-Backend auf benutzerfreundliche und dennoch effiziente Weise kombiniert. Dank dieser Integration kann eine Webseite Beitragsdaten und Benutzerprofile dynamisch laden. Der Abruf-API ist der Hauptteil des JavaScript-Codes; Es sendet eine Anfrage an das Backend und gibt eine JSON-Antwort zurück. Der Dann() Die Technik in Verbindung mit Versprechen ermöglicht es dem Skript, das asynchrone Laden der Daten zu gewährleisten. Diese Methode verbessert die Benutzererfahrung, indem sie verhindert, dass der Browser einfriert, während er auf die API-Antwort wartet.

Mithilfe der Benutzer-ID sendet der JavaScript-Code eine Abrufanforderung an die Python-API, die die Profil- und Beitragsdaten zurückgibt. Das Skript konvertiert zunächst die Antwort in JSON, bevor es das DOM ändert, um das Profil und die Beiträge anzuzeigen. Dies geschieht durch die Erstellung von HTML-Elementen wie Absätzen und Listenelementen. Zum Beispiel neu gebaut div Elemente für den Benutzernamen, Follower und Follower werden zur Anzeige von Profildaten verwendet. Alle Informationen werden dem Profilabschnitt der Seite hinzugefügt, nachdem sie in die richtige HTML-Struktur eingefügt wurden.

Das von Django erstellte Backend ist unerlässlich, um die Beitrags- und Profildaten aus der Datenbank abzurufen. Der JsonResponse Die Funktion in Python wandelt die Daten in JSON um, das aufgrund seiner einfachen Analyse und seines geringen Gewichts das empfohlene Format für Online-APIs ist. Der Werte() Die Methode in Django garantiert das effiziente Abrufen von Beiträgen in einem Wörterbuchformat. Auf diese Weise wird es für das Frontend einfacher, die Beiträge durchzugehen und sie dynamisch auf der Website darzustellen. Der Profile.DoesNotExist Die Ausnahme wird vom Skript verwendet, um potenzielle Probleme zu behandeln und sicherzustellen, dass in Fällen, in denen Daten nicht verfügbar sind, das richtige Feedback bereitgestellt wird.

Insgesamt ist die Website dynamisch und kann dank der Kombination von Python und JavaScript geändert werden, ohne dass ein vollständiges Neuladen der Seite erforderlich ist. Diese Strategie funktioniert besonders gut auf Blogs und Social-Networking-Sites, wo benutzergenerierte Informationen, einschließlich Beiträge und Profile, häufig aktualisiert werden. Durch die Einhaltung von Best Practices und die Organisation des Codes in verschiedene Funktionen wird die Lösung modular und leicht wartbar. Darüber hinaus garantiert die Einbeziehung von Unit-Tests, dass die Profil- und Beitragsdaten korrekt zurückgegeben werden und dass die API wie vorgesehen funktioniert. Dies ermöglicht es Echtzeit-Apps, die Leistung zu optimieren und Fehler effektiver zu behandeln.

// 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)
}

Effizienter Umgang mit JSON-Daten für dynamische Webanwendungen

Bei der Arbeit mit APIs, die Daten aus zahlreichen Quellen zurückgeben, einschließlich Benutzerprofilen und Beiträgen, ist die effektive Handhabung der JSON-Antwort von entscheidender Bedeutung. Im vorherigen Beispiel haben wir JavaScript verwendet, um die Webseite dynamisch zu aktualisieren, nachdem Daten von einem Python-Backend abgerufen wurden. Aber auch bei der Arbeit mit JSON-Daten ist es wichtig, das Beste aus der Art und Weise zu machen, wie Sie mit JSON-Daten umgehen und diese präsentieren. Mit effektiven Schleifen können wir durch Arrays von Artikeln blättern fürJedenund erstellen Sie mithilfe von Techniken wie HTML-Elemente, ohne rohes HTML in die JavaScript-Datei zu schreiben createElement. Diese Methode behält die Modularität und Wartungsfreundlichkeit des Codes bei.

Fehlerbehandlung und Datenvalidierung sind entscheidende zusätzliche Faktoren, die berücksichtigt werden müssen. Bei unsachgemäßer Handhabung kann es sein, dass das Backend ungenaue oder fehlende Daten zurückgibt, was zu Problemen im Frontend führen kann. Wir können fehlerhafte Layouts oder JavaScript-Probleme vermeiden, indem wir eine Fallback-Strategie im JavaScript-Code implementieren, z. B. feststellen, ob die Antwort schließt die erforderlichen Daten ein, bevor versucht wird, sie anzuzeigen. Zuverlässigkeit ist bei großen Webanwendungen von entscheidender Bedeutung und daher besonders wichtig. Darüber hinaus unter Verwendung von Djangos JsonResponse garantiert, dass die Daten für den Frontend-Verbrauch geeignet formatiert sind.

Und schließlich ist die Sicherheit bei der Arbeit mit dynamischen Inhalten ein ständiges Problem. Das Bereinigen der Daten vor der Anzeige ist eine Möglichkeit, dieses Problem zu beheben und Sicherheitslücken wie Cross-Site-Scripting-Angriffe (XSS) zu stoppen. Vermeiden Sie die Einführung potenziell gefährlichen Codes, indem Sie die integrierten DOM-Änderungsfunktionen von JavaScript nutzen, z Textinhalt, statt innerHTML. Durch die Einhaltung dieser Richtlinien können Sie sicher sein, dass die Informationen auf Ihrer Webseite sicher und vertrauenswürdig sind.