Comment afficher les profils utilisateur et les publications d'une API Python à l'aide de JavaScript Fetch

Affichage des données utilisateur avec JavaScript Fetch : profils et publications

Un cas d'utilisation populaire des puissantes capacités d'interaction API de JavaScript est la récupération et l'affichage en temps réel de données à partir d'un backend. Dans ce cas, vous souhaitez extraire des informations de deux tables liées : l'une relative aux publications d'un utilisateur et l'autre à son profil. Il s'agit d'une excellente approche pour apprendre à afficher dynamiquement plusieurs ensembles de données sur votre page Web et à les gérer dans un seul appel API.

Le Récupérer l'API doit être utilisé pour récupérer les données du backend avant de pouvoir continuer. JavaScript analysera le Réponse JSON qui est renvoyé par une API Python contenant le profil et les publications. Vous pouvez afficher correctement le profil et publier des informations si vous savez comment travailler avec le DOM à l'aide de JavaScript.

Même si cela peut paraître difficile, récupérer les données de plusieurs tables est en réalité réalisable si vous savez comment la réponse est structurée. Vous devez traiter le Données JSON et construisez des éléments HTML pour les afficher après avoir soumis la demande de récupération. La création de listes ou de sections pour les profils d'utilisateurs et les publications qui les accompagnent en fait partie.

Je vais vous présenter un exemple concret dans ce didacticiel qui utilise JavaScript pour charger des données de publication et des profils utilisateur à partir d'une API Python. Vous comprendrez comment restituer les données récupérées à la fin et vous assurerez qu'elles apparaissent correctement sur votre page HTML.

Comprendre l'intégration JavaScript et Python pour le contenu dynamique

Les scripts inclus montrent comment combiner une interface JavaScript et un backend Python de manière simple et efficace. Une page Web peut charger dynamiquement les données de publication et les profils d'utilisateurs grâce à cette intégration. Le récupérer l'API est la partie principale du code JavaScript ; il envoie une requête au backend et renvoie une réponse JSON. Le alors() Cette technique associée aux promesses permet au script de garantir le chargement asynchrone des données. Cette méthode améliore l'expérience utilisateur en empêchant le navigateur de se bloquer pendant qu'il attend la réponse de l'API.

À l'aide de l'ID de l'utilisateur, le code JavaScript envoie une demande de récupération à l'API Python, qui renvoie le profil et les données de publication. Le script convertit d'abord la réponse en JSON avant de modifier le DOM pour afficher le profil et les publications. Pour ce faire, il produit des éléments HTML tels que des paragraphes et des éléments de liste. Par exemple, nouvellement construit div les éléments pour le nom d'utilisateur, les abonnés et les suivants sont utilisés pour afficher les données de profil. Chaque élément d'information est ajouté à la section de profil de la page après avoir été placé dans la structure HTML appropriée.

Le backend construit par Django est essentiel pour extraire les données de publication et de profil de la base de données. Le Réponse Json La fonction en Python transforme les données en JSON, qui est le format recommandé pour les API en ligne en raison de sa facilité d'analyse et de sa légèreté. Le valeurs() La méthode de Django garantit la récupération efficace des publications dans un format de dictionnaire. De cette manière, il sera simple pour le frontend de parcourir les publications et de les afficher dynamiquement sur le site Web. Le Profil.DoesNotExist L'exception est utilisée par le script pour gérer les problèmes potentiels et s'assurer que le bon feedback est fourni dans les cas où les données ne sont pas disponibles.

Dans l’ensemble, le site Web est dynamique et peut évoluer sans nécessiter un rechargement complet de la page grâce à la combinaison de Python et JavaScript. Cette stratégie fonctionne particulièrement bien sur les blogs et les sites de réseaux sociaux où les informations générées par les utilisateurs, y compris les publications et les profils, sont souvent mises à jour. La solution devient modulaire et facilement maintenable en adhérant aux meilleures pratiques et en organisant le code en fonctions distinctes. De plus, l'inclusion de tests unitaires garantit que les données de profil et de publication sont renvoyées avec précision et que l'API fonctionne comme prévu. Cela permet aux applications en temps réel d'optimiser les performances et de gérer les erreurs plus efficacement.

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

Gestion efficace des données JSON pour les applications Web dynamiques

La gestion efficace de la réponse JSON est cruciale lorsque vous travaillez avec des API qui renvoient des données provenant de nombreuses sources, notamment des profils utilisateur et des publications. Dans l'exemple précédent, nous avons utilisé JavaScript pour mettre à jour dynamiquement la page Web après avoir récupéré les données d'un backend Python. Mais tirer le meilleur parti de la façon dont vous gérez et présentez les données JSON est également essentiel lorsque vous travaillez avec celles-ci. Nous pouvons parcourir des tableaux d'articles en utilisant des boucles efficaces comme pourChaque, et construisez des éléments HTML sans écrire de HTML brut dans le fichier JavaScript à l'aide de techniques telles que créerÉlément. Cette méthode conserve la modularité du code et la facilité de maintenance.

La gestion des erreurs et la validation des données sont des facteurs supplémentaires cruciaux à prendre en compte. S'il n'est pas géré correctement, le backend peut renvoyer des données inexactes ou manquantes, ce qui pourrait entraîner des problèmes sur le frontend. Nous pouvons éviter les mises en page cassées ou les problèmes JavaScript en mettant en œuvre une stratégie de secours dans le code JavaScript, par exemple en déterminant si le réponse inclut les données requises avant de tenter de les afficher. La fiabilité est cruciale dans les applications Web à grande échelle, elle est donc particulièrement vitale. De plus, en utilisant Django Réponse Json garantit que les données sont correctement formatées pour la consommation frontale.

Et enfin, lorsque l’on travaille avec du contenu dynamique, la sécurité est une préoccupation constante. Nettoyer les données avant de les afficher est une méthode pour remédier à ce problème et arrêter les failles de sécurité telles que les attaques de script intersite (XSS). Évitez d'introduire du code potentiellement dangereux en utilisant les fonctionnalités de modification DOM intégrées de JavaScript, telles que texteContenu, plutôt que innerHTML. En adhérant à ces directives, vous pouvez être sûr que les informations contenues dans votre page Web sont sécurisées et dignes de confiance.