كيفية إظهار ملفات تعريف المستخدمين والمشاركات من واجهة برمجة تطبيقات Python باستخدام JavaScript Fetch

Python وJavaScript لجلب البيانات الديناميكية لملفات تعريف المستخدمين والمشاركات

الفكرة الرئيسية وراء هذا الأسلوب هي تحميل ملفات تعريف المستخدمين والمشاركات ديناميكيًا من خلال دمج واجهة JavaScript مع واجهة برمجة تطبيقات 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 لعرض الملف الشخصي ونشر البيانات

يعد جدولا الملف الشخصي والمشاركات جدولين مرتبطين حيث يسترد عرض 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

من أجل ضمان تقديم البيانات بشكل مناسب، يتحقق اختبار الوحدة هذا من حصول 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() أفضل من تقنيات أجاكس الأخرى؟
2. fetch() يقدم واجهة برمجة تطبيقات معاصرة ومباشرة لإرسال طلبات HTTP؛ يتم استخدام الوعود لإدارة المهام غير المتزامنة، مما يلغي الحاجة إلى آليات رد الاتصال المعقدة.
3. لماذا response.json() تستخدم أثناء الحصول على معلومات من API؟
4. من أجل تحويل استجابة HTTP غير المعالجة إلى كائن JSON يمكن التعامل معه بسهولة وعرضه بواسطة JavaScript، يلزم إجراء الخطوة 2.
5. كيف forEach مساعدة في عرض البيانات في جافا سكريبت؟
6. forEach هي طريقة تتيح لك التكرار عبر المصفوفات، مثل قائمة المنشورات، وإضافة عناصر HTML ديناميكيًا إلى كل عنصر.
7. ما هو دور JsonResponse في واجهة برمجة تطبيقات جانغو؟
8. أداة جانغو تسمى JsonResponse يقوم بتحويل البيانات بتنسيق JSON حتى تتمكن الواجهة الأمامية من إدارتها وعرضها بسهولة باستخدام JavaScript.
9. كيف يمكن تجنب العيوب الأمنية في JavaScript عند استخدامها innerHTML؟
10. للحماية من هجمات XSS، من الأفضل استخدام JavaScript textContent أو 10 التقنيات بدلاً من حقن تعليمات برمجية قد تكون ضارة.

الأفكار النهائية حول جلب بيانات المستخدم وعرضها

للمواقع الديناميكية، التكامل جافا سكريبت مع واجهة بايثون الخلفية لاسترداد البيانات وعرضها تعد استراتيجية فعالة. إن إعادة تحميل الصفحة بالكامل ليست ضرورية لضمان تحديث واجهة المستخدم بشكل فعال عند الحاجة إلى تقنيات أحضر ويتم استخدام معالجة ردود JSON. تم تحسين تجربة المستخدم بشكل عام نتيجة لذلك.

يجب أخذ إدارة الأخطاء والأمان والتحسين في الاعتبار عند تطوير مثل هذه البرامج. سيكون التطبيق أكثر مرونة إذا تمت معالجة الردود غير المكتملة وضمان تعقيم البيانات. يوفر هذا الأسلوب أساسًا قويًا لإضافة المزيد من الميزات المتطورة لمشروعك في المستقبل.