如何使用 JavaScript Fetch 从 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 视图从中检索数据并以 JSON 形式返回以供 UI 使用。

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() 提供现代、简单的 API 用于提交 HTTP 请求； Promise 用于管理异步任务，消除了对复杂回调机制的需要。
3. 为什么是 response.json() 从 API 获取信息时使用？
4. 为了将未处理的 HTTP 响应转换为易于操作并由 JavaScript 显示的 JSON 对象，需要执行步骤 2。
5. 怎么样 forEach 有助于在 JavaScript 中显示数据？
6. forEach 是一种允许您循环遍历数组（例如帖子列表）并将 HTML 元素动态添加到每个项目的方法。
7. 的作用是什么 JsonResponse 在 Django API 中？
8. 一个 Django 工具，名为 JsonResponse 将数据转换为 JSON，以便前端可以使用 JavaScript 轻松管理和显示它。
9. 使用时如何避免JavaScript中的安全漏洞 innerHTML？
10. 为了防范 XSS 攻击，最好使用 JavaScript textContent 或者 10 技术而不是注入潜在有害的代码。

关于获取和显示用户数据的最终想法

对于动态网站，集成 JavaScript 使用 Python 后端来检索和显示数据是一种有效的策略。当使用诸如 拿来 并使用处理 JSON 回复。结果，用户体验总体得到增强。

开发此类程序时应考虑错误管理、安全性和优化。如果处理不完整的回复并确保数据清理，应用程序将更具弹性。这种方法为将来向项目添加更复杂的功能奠定了坚实的基础。