Sådan viser du brugerprofiler og indlæg fra en Python API ved hjælp af JavaScript Fetch

Python og JavaScript til dynamisk datahentning til brugerprofiler og indlæg

Hovedideen bag denne tilgang er at indlæse brugerprofiler og indlæg dynamisk ved at integrere en JavaScript-grænseflade med en Python API-backend. Metoden gør brug af Django frameworket til Python på backend og standard JavaScript.

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

Python Django API-visning til visning af profil- og udsendelsesdata

Tabellerne Profil og Posts er to relaterede tabeller, som denne Python Django-visning henter data fra og returnerer som JSON, som brugergrænsefladen kan bruge.

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)

Enhedstest for Python Django View

For at sikre, at data serveres korrekt, verificerer denne enhedstest, at Django API korrekt henter brugerprofilen og indlæggene.

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

Almindelige spørgsmål om håndtering af JSON-data med JavaScript og Python

1. Hvad gør fetch() bedre end andre AJAX-teknikker?
2. fetch() tilbyder en moderne, ligetil API til indsendelse af HTTP-anmodninger; løfter bruges til at håndtere asynkrone opgaver, hvilket eliminerer behovet for indviklede tilbagekaldsmekanismer.
3. Hvorfor er response.json() bruges, mens du henter oplysninger fra en API?
4. For at transformere det ubehandlede HTTP-svar til et JSON-objekt, der let kan manipuleres og vises med JavaScript, kræves trin 2.
5. Hvordan gør forEach hjælp til at vise data i JavaScript?
6. forEach er en metode, der lader dig sløjfe på tværs af arrays, som postlisten, og tilføje HTML-elementer dynamisk til hvert element.
7. Hvad er rollen JsonResponse i en Django API?
8. Et Django-værktøj kaldet JsonResponse konverterer dataene som JSON, så frontend kan administrere og vise dem med lethed ved hjælp af JavaScript.
9. Hvordan kan sikkerhedsfejl i JavaScript undgås ved brug innerHTML?
10. For at beskytte sig mod XSS-angreb er det at foretrække at bruge JavaScript textContent eller 10 teknikker frem for at injicere potentielt skadelig kode.

Sidste tanker om hentning og visning af brugerdata

For dynamiske websteder, integration JavaScript med en Python-backend til at hente og vise data er en effektiv strategi. En komplet sidegenindlæsning er ikke nødvendig for at garantere, at brugergrænsefladen opdateres effektivt, når teknikker som f.eks hente og håndtering af JSON-svar bruges. Brugeroplevelsen forbedres generelt som et resultat.

Fejlhåndtering, sikkerhed og optimering bør alle tages i betragtning, når sådanne programmer udvikles. Applikationen vil være mere modstandsdygtig, hvis ufuldstændige svar håndteres, og datasanering er sikret. Denne tilgang giver et stærkt grundlag for at tilføje mere sofistikerede funktioner til dit projekt i fremtiden.