Como mostrar perfis de usuário e postagens de uma API Python usando JavaScript Fetch

Python e JavaScript para busca dinâmica de dados para perfis de usuário e postagens

A ideia principal por trás dessa abordagem é carregar perfis de usuários e postagens dinamicamente, integrando uma interface JavaScript com um backend de API Python. O método faz uso da estrutura Django para Python no backend e JavaScript padrão.

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

Visualização da API Python Django para servir perfil e postar dados

As tabelas Profile e Posts são duas tabelas relacionadas das quais esta visualização Python Django recupera dados e retorna como JSON para a UI usar.

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)

Teste de unidade para Python Django View

Para garantir que os dados sejam servidos adequadamente, este teste de unidade verifica se a API do Django obtém corretamente o perfil do usuário e as postagens.

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

Perguntas comuns sobre como lidar com dados JSON com JavaScript e Python

1. O que faz fetch() melhor que outras técnicas AJAX?
2. fetch() oferece uma API simples e contemporânea para enviar solicitações HTTP; promessas são usadas para gerenciar tarefas assíncronas, eliminando a necessidade de mecanismos intrincados de retorno de chamada.
3. Por que é response.json() usado ao obter informações de uma API?
4. Para transformar a resposta HTTP não processada em um objeto JSON que seja facilmente manipulável e mostrado por JavaScript, a etapa 2 é necessária.
5. Como é que forEach ajuda na exibição de dados em JavaScript?
6. forEach é um método que permite percorrer arrays, como a lista de postagens, e adicionar elementos HTML dinamicamente a cada item.
7. Qual é o papel JsonResponse em uma API Django?
8. Uma ferramenta Django chamada JsonResponse converte os dados como JSON para que o frontend possa gerenciá-los e exibi-los com facilidade usando JavaScript.
9. Como as falhas de segurança em JavaScript podem ser evitadas ao utilizar innerHTML?
10. Para se proteger contra ataques XSS, é preferível utilizar JavaScript textContent ou 10 técnicas em vez de injetar código potencialmente prejudicial.

Considerações finais sobre como buscar e exibir dados do usuário

Para sites dinâmicos, integrando JavaScript com um back-end Python para recuperar e mostrar dados é uma estratégia eficaz. Não é necessário recarregar completamente a página para garantir que a interface do usuário seja atualizada de maneira eficaz quando técnicas como buscar e o tratamento de respostas JSON são usados. Como resultado, a experiência do usuário é aprimorada em geral.

O gerenciamento de erros, a segurança e a otimização devem ser levados em consideração ao desenvolver tais programas. A aplicação será mais resiliente se as respostas incompletas forem tratadas e a limpeza dos dados for garantida. Essa abordagem fornece uma base sólida para adicionar recursos mais sofisticados ao seu projeto no futuro.