JavaScript フェッチを使用して Python API からユーザー プロフィールと投稿を表示する方法

Python と JavaScript によるユーザー プロファイルと投稿の動的データ フェッチ

このアプローチの背後にある主なアイデアは、JavaScript インターフェイスを Python API バックエンドと統合することによって、ユーザー プロファイルと投稿を動的に読み込むことです。このメソッドでは、バックエンドで Python の Django フレームワークと標準の 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 ビューがデータを取得し、UI が使用する JSON として返す 2 つの関連テーブルです。

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

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 を利用する際にセキュリティ上の欠陥を回避するにはどうすればよいですか innerHTML?
10. XSS 攻撃を防ぐには、JavaScript の textContent または 10 潜在的に有害なコードを挿入するのではなく、この技術を使用します。

ユーザーデータの取得と表示に関する最終的な考え方

動的な Web サイトの場合、統合 JavaScript Python バックエンドを使用してデータを取得して表示することは効果的な戦略です。次のような手法を使用する場合、ユーザー インターフェイスが効果的に更新されることを保証するために、ページを完全にリロードする必要はありません。 フェッチ JSON 応答の処理が使用されます。その結果、ユーザーエクスペリエンスが全体的に向上します。

このようなプログラムを開発するときは、エラー管理、セキュリティ、最適化をすべて考慮する必要があります。不完全な応答が処理され、データのサニタイズが確実に行われる場合、アプリケーションの回復力はさらに高まります。このアプローチは、将来的にプロジェクトにさらに高度な機能を追加するための強力な基盤となります。