Kako prikazati uporabniške profile in objave iz API-ja Python z uporabo JavaScript Fetch

Prikaz uporabniških podatkov s pridobivanjem JavaScript: profili in objave

Eden od priljubljenih primerov uporabe zmogljivih zmožnosti interakcije API JavaScripta je pridobivanje in prikaz podatkov v realnem času iz ozadja. V tem primeru želite pridobiti informacije iz dveh povezanih tabel: ena se nanaša na objave uporabnika in druga na njegov profil. To je odličen pristop, da se naučite dinamično prikazati več naborov podatkov na svoji spletni strani in jih obravnavati v enem klicu API-ja.

The Fetch API morate uporabiti za pridobivanje podatkov iz ozadja, preden lahko nadaljujete. JavaScript bo razčlenil Odgovor JSON ki ga vrne Python API, ki vsebuje profil in objave. Profil in informacije lahko pravilno prikažete, če znate delati z DOM s pomočjo JavaScripta.

Čeprav se lahko zdi težko, je pridobivanje podatkov iz več tabel dejansko izvedljivo, če poznate strukturo odgovora. Obdelati morate podatki JSON in sestavite elemente HTML, da ga prikažete po oddaji zahteve za pridobivanje. Del tega je ustvarjanje seznamov ali razdelkov za uporabniške profile in objave, ki so jim priložene.

V tej vadnici vas bom popeljal skozi primer iz resničnega sveta, ki uporablja JavaScript za nalaganje podatkov o objavi in ​​uporabniških profilov iz API-ja Python. Na koncu boste razumeli, kako upodobiti pridobljene podatke in se prepričati, da so pravilno prikazani na vaši strani HTML.

Razumevanje integracije JavaScript in Python za dinamično vsebino

Vključeni skripti prikazujejo, kako združiti vmesnik JavaScript in zaledje Python na enostaven za uporabo, a učinkovit način. Zahvaljujoč tej integraciji lahko spletna stran dinamično naloži podatke o objavi in ​​uporabniške profile. The pridobi API je glavni del kode JavaScript; pošlje zahtevo zaledju in vrne odgovor JSON. The potem () tehnika v povezavi z obljubami omogoča skriptu, da zagotovi asinhrono nalaganje podatkov. Ta metoda izboljša uporabniško izkušnjo tako, da prepreči, da bi brskalnik zamrznil, medtem ko čaka na odgovor API-ja.

S pomočjo ID-ja uporabnika koda JavaScript pošlje zahtevo za pridobitev API-ju Python, ki vrne podatke o profilu in objavi. Skript najprej pretvori odgovor v JSON, preden spremeni DOM za prikaz profila in objav. To naredi tako, da ustvari elemente HTML, kot so odstavki in elementi seznama. Na primer, na novo zgrajena div elementi za uporabniško ime, sledilce in spremljanje se uporabljajo za prikaz podatkov profila. Vsaka informacija je dodana razdelku profila strani, potem ko je umeščena v ustrezno strukturo HTML.

Zaledje, ki ga je sestavil Django, je bistvenega pomena za pridobivanje podatkov o objavi in ​​profilu iz baze podatkov. The JsonResponse funkcija v Pythonu pretvori podatke v JSON, ki je priporočena oblika za spletne API-je zaradi enostavnosti razčlenjevanja in lahke narave. The vrednosti() metoda v Djangu zagotavlja učinkovito iskanje objav v obliki slovarja. Na ta način bo frontend preprosto pregledoval objave in jih dinamično upodabljal na spletnem mestu. The Profil.DoesNotExist skript uporablja izjemo za obravnavo morebitnih težav in zagotavljanje ustreznih povratnih informacij v primerih, ko podatki niso na voljo.

Na splošno je spletno mesto dinamično in se lahko spremeni, ne da bi bilo treba znova naložiti celotno stran, zahvaljujoč kombinaciji Pythona in JavaScripta. Ta strategija še posebej dobro deluje na spletnih dnevnikih in spletnih mestih za družabna omrežja, kjer se informacije, ki jih ustvarijo uporabniki, vključno z objavami in profili, pogosto posodabljajo. Rešitev postane modularna in enostavna za vzdrževanje z upoštevanjem najboljših praks in organiziranjem kode v različne funkcije. Poleg tega vključitev testov enote zagotavlja, da so podatki o profilu in objavah vrnjeni natančno in da API deluje, kot je predvideno. To aplikacijam v realnem času omogoča, da optimizirajo delovanje in učinkoviteje obravnavajo napake.

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

Učinkovito ravnanje s podatki JSON za dinamične spletne aplikacije

Učinkovito ravnanje z odzivom JSON je ključnega pomena pri delu z API-ji, ki vračajo podatke iz številnih virov, vključno s profili uporabnikov in objavami. V prejšnjem primeru smo uporabili JavaScript za dinamično posodabljanje spletne strani po pridobivanju podatkov iz zaledja Python. Toda pri delu z njimi je bistvenega pomena tudi, da kar najbolje izkoristite, kako ravnate s podatki JSON in jih predstavljate. Skozi nize člankov lahko krožimo z uporabo učinkovitih zank, kot je forEach, in sestavite elemente HTML brez zapisovanja surovega HTML-ja v datoteko JavaScript s pomočjo tehnik, kot je createElement. Ta metoda ohranja modularnost kode in enostavnost vzdrževanja.

Obravnava napak in preverjanje podatkov sta ključna dodatna dejavnika, ki ju je treba upoštevati. Če z njim ne ravnamo ustrezno, lahko zaledje vrne netočne ali manjkajoče podatke, kar lahko povzroči težave na sprednjem delu. Pokvarjenim postavitvam ali težavam z JavaScriptom se lahko izognemo tako, da v kodo JavaScript implementiramo nadomestno strategijo, kot je ugotavljanje, ali odgovor vključuje zahtevane podatke, preden jih poskuša prikazati. Zanesljivost je ključnega pomena pri obsežnih spletnih aplikacijah, zato je še posebej pomembna. Še več, z uporabo Django's JsonResponse zagotavlja, da so podatki ustrezno oblikovani za uporabo na sprednji strani.

In nazadnje, pri delu z dinamično vsebino je varnost stalna skrb. Prečiščevanje podatkov pred prikazom je eden od načinov za odpravo tega in zaustavitev varnostnih napak, kot so napadi s skriptiranjem na več mestih (XSS). Izogibajte se uvajanju potencialno nevarne kode z uporabo vgrajenih zmožnosti spreminjanja DOM JavaScripta, kot je npr. textContent, namesto innerHTML. Z upoštevanjem teh smernic ste lahko prepričani, da so informacije na vaši spletni strani varne in vredne zaupanja.