Kā parādīt lietotāju profilus un ziņas no Python API, izmantojot JavaScript ienesi

Python un JavaScript dinamiskai datu ienešanai lietotāju profiliem un ziņām

Šīs pieejas galvenā ideja ir dinamiski ielādēt lietotāju profilus un ziņas, integrējot JavaScript saskarni ar Python API aizmugursistēmu. Metode izmanto Django sistēmu Python aizmugurē un standarta 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 skats profila apkalpošanai un datu publicēšanai

Tabulas Profils un Ziņas ir divas saistītas tabulas, no kurām šis Python Django skats izgūst datus un atgriež kā JSON lietotāja saskarnei.

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)

Vienības pārbaude Python Django View

Lai nodrošinātu datu pareizu apkalpošanu, šis vienības tests pārbauda, ​​vai Django API pareizi iegūst lietotāja profilu un ziņas.

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

Bieži uzdotie jautājumi par JSON datu apstrādi, izmantojot JavaScript un Python

1. Kas padara fetch() labāk nekā citas AJAX metodes?
2. fetch() piedāvā mūsdienīgu, vienkāršu API HTTP pieprasījumu iesniegšanai; solījumi tiek izmantoti, lai pārvaldītu asinhronos uzdevumus, novēršot nepieciešamību pēc sarežģītiem atzvanīšanas mehānismiem.
3. Kāpēc ir response.json() izmanto, iegūstot informāciju no API?
4. Lai pārveidotu neapstrādāto HTTP atbildi par JSON objektu, kas ir viegli manipulējams un tiek rādīts, izmantojot JavaScript, ir jāveic 2. darbība.
5. Kā dara forEach palīdzēt parādīt datus JavaScript?
6. forEach ir metode, kas ļauj pārvietoties pa masīviem, piemēram, ziņu sarakstu, un dinamiski pievienot HTML elementus katram vienumam.
7. Kāda ir loma JsonResponse Django API?
8. Django rīks sauc JsonResponse pārvērš datus kā JSON, lai priekšgals varētu tos viegli pārvaldīt un parādīt, izmantojot JavaScript.
9. Kā, izmantojot JavaScript, var izvairīties no drošības trūkumiem innerHTML?
10. Lai aizsargātos pret XSS uzbrukumiem, ieteicams izmantot JavaScript textContent vai 10 metodes, nevis potenciāli kaitīga koda ievadīšanu.

Pēdējās domas par lietotāja datu iegūšanu un parādīšanu

Dinamiskām tīmekļa vietnēm, integrēšana JavaScript ar Python aizmugursistēmu datu izgūšanai un parādīšanai ir efektīva stratēģija. Pilnīga lapas atkārtota ielāde nav nepieciešama, lai garantētu, ka lietotāja interfeiss tiek efektīvi atjaunināts, ja tiek izmantotas tādas metodes kā atnest un tiek izmantotas JSON atbildes. Rezultātā kopumā tiek uzlabota lietotāja pieredze.

Izstrādājot šādas programmas, ir jāņem vērā kļūdu pārvaldība, drošība un optimizācija. Lietojumprogramma būs elastīgāka, ja tiks apstrādātas nepilnīgas atbildes un nodrošināta datu sanitizācija. Šī pieeja nodrošina spēcīgu pamatu, lai nākotnē pievienotu jūsu projektam sarežģītākas funkcijas.