Як показати профілі користувачів і публікації з API Python за допомогою JavaScript Fetch

Python і JavaScript для динамічного отримання даних для профілів користувачів і публікацій

Основна ідея цього підходу полягає в тому, щоб динамічно завантажувати профілі користувачів і публікації шляхом інтеграції інтерфейсу JavaScript із серверною частиною API Python. Метод використовує фреймворк Django для Python на серверній частині та стандартний 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 для обслуговування профілю та публікації даних

Таблиці Profile і Posts — це дві пов’язані таблиці, з яких це представлення Python Django отримує дані та повертає їх як 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)
}

Поширені запитання щодо обробки даних JSON за допомогою JavaScript і Python

1. Що робить fetch() краще за інші методи AJAX?
2. fetch() пропонує сучасний простий API для надсилання запитів HTTP; обіцянки використовуються для керування асинхронними завданнями, усуваючи потребу в складних механізмах зворотного виклику.
3. Чому response.json() використовується під час отримання інформації з API?
4. Щоб перетворити необроблену відповідь HTTP на об’єкт JSON, яким легко керувати та відображати JavaScript, потрібен крок 2.
5. Як робить forEach допомогти у відображенні даних у JavaScript?
6. forEach це метод, який дозволяє циклічно переходити між масивами, такими як список публікацій, і динамічно додавати елементи HTML до кожного елемента.
7. Яка роль JsonResponse в API Django?
8. Інструмент Django називається JsonResponse перетворює дані як JSON, щоб інтерфейс міг легко керувати ними та відображати їх за допомогою JavaScript.
9. Як можна уникнути недоліків безпеки в JavaScript під час використання innerHTML?
10. Щоб захиститися від атак XSS, краще використовувати JavaScript textContent або 10 техніки, а не впроваджувати потенційно шкідливий код.

Останні думки щодо отримання та відображення даних користувача

Для динамічних веб-сайтів, інтеграція JavaScript із серверною частиною Python для отримання та показу даних є ефективною стратегією. Повне перезавантаження сторінки не є необхідним, щоб гарантувати ефективне оновлення інтерфейсу користувача, коли такі методи, як принести і обробка відповідей JSON. В результаті користувальницький досвід покращується.

При розробці таких програм слід враховувати управління помилками, безпеку та оптимізацію. Додаток буде більш стійким, якщо оброблятиметься неповна відповідь і буде забезпечено очищення даних. Цей підхід забезпечує міцну основу для додавання більш складних функцій до вашого проекту в майбутньому.