JavaScript Fetch를 사용하여 Python API에서 사용자 프로필 및 게시물을 표시하는 방법

사용자 프로필 및 게시물에 대한 동적 데이터 가져오기를 위한 Python 및 JavaScript

이 접근 방식의 주요 아이디어는 JavaScript 인터페이스를 Python API 백엔드와 통합하여 사용자 프로필과 게시물을 동적으로 로드하는 것입니다. 이 방법은 백엔드 및 표준 JavaScript에서 Python용 Django 프레임워크를 사용합니다.

// 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 보기

프로필 및 게시물 테이블은 이 Python Django 보기에서 데이터를 검색하고 UI에서 사용할 JSON으로 반환하는 두 개의 관련 테이블입니다.

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)

Python Django View에 대한 단위 테스트

데이터가 적절하게 제공되는지 확인하기 위해 이 단위 테스트에서는 Django API가 사용자 프로필과 게시물을 올바르게 가져오는지 확인합니다.

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

JavaScript 및 Python을 사용한 JSON 데이터 처리에 대한 일반적인 질문

1. 무엇이 만드는가 fetch() 다른 AJAX 기술보다 나은가요?
2. fetch() HTTP 요청 제출을 위한 현대적이고 간단한 API를 제공합니다. Promise는 비동기 작업을 관리하는 데 사용되므로 복잡한 콜백 메커니즘이 필요하지 않습니다.
3. 왜? response.json() API에서 정보를 얻는 동안 사용됩니까?
4. 처리되지 않은 HTTP 응답을 쉽게 조작하고 JavaScript로 표시할 수 있는 JSON 개체로 변환하려면 2단계가 필요합니다.
5. 어떻게 forEach JavaScript로 데이터를 표시하는 데 도움이 되나요?
6. forEach 게시물 목록과 같은 배열을 반복하고 각 항목에 HTML 요소를 동적으로 추가할 수 있는 방법입니다.
7. 역할은 무엇입니까? JsonResponse Django API에서?
8. Django 도구는 다음과 같습니다. JsonResponse 프런트엔드에서 JavaScript를 사용하여 쉽게 관리하고 표시할 수 있도록 데이터를 JSON으로 변환합니다.
9. JavaScript를 활용할 때 JavaScript의 보안 결함을 어떻게 피할 수 있습니까? innerHTML?
10. XSS 공격을 방지하려면 JavaScript를 활용하는 것이 좋습니다. textContent 또는 10 잠재적으로 유해한 코드를 주입하는 대신 기술을 사용합니다.

사용자 데이터 가져오기 및 표시에 대한 최종 생각

동적 웹사이트의 경우 통합 자바스크립트 Python 백엔드를 사용하여 데이터를 검색하고 표시하는 것은 효과적인 전략입니다. 다음과 같은 기술이 사용되는 경우 사용자 인터페이스가 효과적으로 업데이트되도록 보장하기 위해 전체 페이지를 다시 로드할 필요는 없습니다. 술책 JSON 응답 처리가 사용됩니다. 결과적으로 사용자 경험이 전반적으로 향상되었습니다.

이러한 프로그램을 개발할 때는 오류 관리, 보안 및 최적화를 모두 고려해야 합니다. 불완전한 응답을 처리하고 데이터 삭제가 보장되면 애플리케이션의 탄력성이 더욱 높아집니다. 이 접근 방식은 향후 프로젝트에 더욱 정교한 기능을 추가하기 위한 강력한 기반을 제공합니다.