Hoe u gebruikersprofielen en berichten van een Python API kunt tonen met behulp van JavaScript Fetch

Gebruikersgegevens weergeven met JavaScript Fetch: profielen en berichten

Een populair gebruiksscenario voor de krachtige API-interactiemogelijkheden van JavaScript is het realtime ophalen en weergeven van gegevens uit een backend. In dit geval wilt u informatie uit twee gekoppelde tabellen halen: de ene heeft betrekking op de berichten van een gebruiker en de andere op zijn profiel. Dit is een geweldige aanpak om te leren hoe u meerdere datasets dynamisch op uw webpagina kunt weergeven en deze in één enkele API-aanroep kunt verwerken.

De API ophalen moet worden gebruikt om de gegevens uit de backend op te halen voordat u verder kunt gaan. JavaScript parseert de JSON-antwoord dat wordt geretourneerd door een Python API die het profiel en de berichten bevat. U kunt het profiel weergeven en informatie correct posten als u weet hoe u met de DOM moet werken met behulp van JavaScript.

Hoewel het moeilijk kan lijken, is het ophalen van gegevens uit verschillende tabellen feitelijk goed te doen als u weet hoe het antwoord is gestructureerd. U moet de JSON-gegevens en bouw HTML-elementen om deze weer te geven na het indienen van het ophaalverzoek. Het maken van lijsten of secties voor gebruikersprofielen en de bijbehorende berichten is hier een onderdeel van.

In deze zelfstudie neem ik je mee door een praktijkvoorbeeld waarin JavaScript wordt gebruikt om berichtgegevens en gebruikersprofielen te laden vanuit een Python API. Aan het einde begrijpt u hoe u de opgehaalde gegevens moet weergeven en zorgt u ervoor dat deze op de juiste manier op uw HTML-pagina worden weergegeven.

JavaScript- en Python-integratie voor dynamische inhoud begrijpen

De meegeleverde scripts laten zien hoe u een JavaScript-frontend en een Python-backend op een eenvoudig te gebruiken en toch efficiënte manier kunt combineren. Dankzij deze integratie kan een webpagina dynamisch berichtgegevens en gebruikersprofielen laden. De API ophalen is het grootste deel van de JavaScript-code; het stuurt een verzoek naar de backend en retourneert een JSON-antwoord. De Dan() Dankzij deze techniek in combinatie met beloftes kan het script het asynchrone laden van de gegevens garanderen. Deze methode verbetert de gebruikerservaring door te voorkomen dat de browser vastloopt terwijl deze wacht op het API-antwoord.

Met behulp van de ID van de gebruiker doet de JavaScript-code een ophaalverzoek aan de Python API, die het profiel en de postgegevens retourneert. Het script converteert het antwoord eerst naar JSON voordat het de DOM wijzigt om het profiel en de berichten weer te geven. Het doet dit door HTML-elementen te produceren, zoals alinea's en lijstitems. Nieuwbouw bijvoorbeeld div elementen voor de gebruikersnaam, volgers en volgers worden gebruikt om profielgegevens weer te geven. Elk stukje informatie wordt toegevoegd aan het profielgedeelte van de pagina nadat het in de juiste HTML-structuur is geplaatst.

De door Django gebouwde backend is essentieel om de bericht- en profielgegevens uit de database te halen. De Jsonreactie -functie in Python transformeert de gegevens naar JSON, wat het aanbevolen formaat is voor online API's vanwege het gemak van parseren en het lichtgewicht karakter. De waarden() methode in Django garandeert het efficiënt ophalen van berichten in woordenboekformaat. Op deze manier is het voor de frontend eenvoudig om de berichten te bekijken en deze dynamisch op de website weer te geven. De Profiel.BestaatNiet uitzondering wordt door het script gebruikt om potentiële problemen op te lossen en ervoor te zorgen dat de juiste feedback wordt gegeven in gevallen waarin gegevens niet beschikbaar zijn.

Over het algemeen is de website dynamisch en kan deze veranderen zonder dat de volledige pagina opnieuw hoeft te worden geladen dankzij de combinatie van Python en JavaScript. Deze strategie werkt vooral goed op blogs en sociale netwerksites waar door gebruikers gegenereerde informatie, inclusief berichten en profielen, vaak wordt bijgewerkt. De oplossing wordt modulair en gemakkelijk te onderhouden door te voldoen aan best practices en de code in verschillende functies te organiseren. Bovendien garandeert de opname van unit-tests dat de profiel- en berichtgegevens nauwkeurig worden geretourneerd en dat de API functioneert zoals bedoeld. Hierdoor kunnen realtime apps de prestaties optimaliseren en fouten effectiever afhandelen.

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

Efficiënt omgaan met JSON-gegevens voor dynamische webapplicaties

Het effectief afhandelen van de JSON-reactie is van cruciaal belang bij het werken met API’s die gegevens retourneren uit talloze bronnen, waaronder gebruikersprofielen en berichten. In het vorige voorbeeld hebben we JavaScript gebruikt om de webpagina dynamisch bij te werken na het ophalen van gegevens uit een Python-backend. Maar ook als u ermee werkt, is het essentieel dat u optimaal profiteert van de manier waarop u met JSON-gegevens omgaat en presenteert. We kunnen door reeksen artikelen bladeren met behulp van effectieve lussen zoals voorElken construeer HTML-elementen zonder onbewerkte HTML in het JavaScript-bestand te schrijven met behulp van technieken zoals createElement. Deze methode behoudt de modulariteit en het onderhoudsgemak van de code.

Foutafhandeling en gegevensvalidatie zijn cruciale aanvullende factoren waarmee rekening moet worden gehouden. Als er niet op de juiste manier mee wordt omgegaan, kan de backend onnauwkeurige of ontbrekende gegevens retourneren, wat tot problemen aan de frontend kan leiden. We kunnen kapotte lay-outs of JavaScript-problemen voorkomen door een fallback-strategie in de JavaScript-code te implementeren, zoals bepalen of de antwoord bevat de vereiste gegevens voordat u deze probeert weer te geven. Betrouwbaarheid is cruciaal bij grootschalige webapplicaties en daarom is dit vooral van cruciaal belang. Bovendien wordt gebruik gemaakt van Django's Jsonreactie garandeert dat de gegevens op de juiste manier zijn geformatteerd voor frontend-consumptie.

En ten slotte: bij het werken met dynamische inhoud is beveiliging een constante zorg. Het opschonen van de gegevens voordat ze worden weergegeven, is één manier om dit te verhelpen en beveiligingsfouten zoals cross-site scripting (XSS)-aanvallen te stoppen. Vermijd het introduceren van potentieel gevaarlijke code door gebruik te maken van de ingebouwde DOM-modificatiemogelijkheden van JavaScript, zoals tekstInhoud, in plaats van innerHTML. Door deze richtlijnen te volgen, kunt u er zeker van zijn dat de informatie op uw webpagina veilig en betrouwbaar is.