如何将Django REST Framework与前端集成并在HTML中渲染API数据？

你的API已经能返回学生数据，要实现"请求API→展示数据"的流程，主要有两种可行方案，根据你的场景选择：

方案一：服务器端渲染（后端直接获取数据后渲染模板） #

如果页面是Django服务端渲染的，没必要额外发HTTP请求调用自己的API，直接复用API里的业务逻辑更高效：

1. 抽离数据获取逻辑：把API里获取学生数据的代码单独封装，方便复用

# 在你的app下新增utils.py文件，写入工具函数
def get_student_data():
    # 替换为真实的数据库查询逻辑
    dummy_students = [
        {'id': 1, 'name': 'Alice', 'age': 20, 'grade': 'A'},
        {'id': 2, 'name': 'Bob', 'age': 22, 'grade': 'B'},
        {'id': 3, 'name': 'Charlie', 'age': 21, 'grade': 'C'},
    ]
    return dummy_students

2. 修改原API，复用工具函数

@api_view(['POST'])
@authentication_classes([JWTAuthentication])
@permission_classes([IsAuthenticated])
def homeapi(request):
    try:
        data = json.loads(request.body.decode('utf-8'))
        print(data)
        
        # 调用抽离的逻辑获取数据
        students = get_student_data()

        return JsonResponse({'students': students})
    except Exception as e:
        return JsonResponse({'error': str(e)}, status=400)

3. 编写页面渲染视图
   这个视图需要和API一致的身份验证，拿到数据后传给HTML模板：

from django.shortcuts import render
from rest_framework.permissions import IsAuthenticated
from rest_framework.authentication import JWTAuthentication
from rest_framework.decorators import authentication_classes, permission_classes
from .utils import get_student_data

@authentication_classes([JWTAuthentication])
@permission_classes([IsAuthenticated])
def home_page(request):
    students = get_student_data()
    return render(request, 'home.html', {'students': students})

4. 编写HTML模板（templates/home.html）
   用Django模板语法直接渲染数据：

<!DOCTYPE html>
<html>
<head>
    <title>学生列表</title>
</head>
<body>
    <h1>学生信息</h1>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
        {% for student in students %}
        <tr>
            <td>{{ student.id }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>{{ student.grade }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>

5. 配置路由
   在urls.py中添加页面路由：

from django.urls import path
from .views import homeapi, home_page

urlpatterns = [
    path('api/home/', homeapi, name='home-api'),
    path('home/', home_page, name='home-page'),
]

方案二：客户端异步请求（前端用JS调用API后动态渲染） #

如果是单页应用或需要动态加载数据，用JavaScript发POST请求调用API，拿到数据后渲染到页面：

1. 编写HTML模板（templates/home.html）
   预留数据容器，编写JS请求和渲染逻辑：

<!DOCTYPE html>
<html>
<head>
    <title>学生列表</title>
</head>
<body>
    <h1>学生信息</h1>
    <div id="student-container">
        <!-- 数据将在这里动态渲染 -->
    </div>

    <script>
        // 根据你的登录逻辑获取JWT Token（示例从localStorage读取）
        const token = localStorage.getItem('access_token');

        // 请求API获取数据
        async function fetchStudents() {
            try {
                const response = await fetch('/api/home/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    },
                    body: JSON.stringify({}) // 按API要求传递POST参数，这里传空对象示例
                });

                if (!response.ok) throw new Error('请求失败');
                
                const data = await response.json();
                renderStudents(data.students);
            } catch (err) {
                document.getElementById('student-container').innerHTML = `<p>加载失败：${err.message}</p>`;
            }
        }

        // 渲染数据到页面
        function renderStudents(students) {
            const container = document.getElementById('student-container');
            let tableHtml = '<table border="1"><tr><th>ID</th><th>姓名</th><th>年龄</th><th>成绩</th></tr>';
            
            students.forEach(student => {
                tableHtml += `
                    <tr>
                        <td>${student.id}</td>
                        <td>${student.name}</td>
                        <td>${student.age}</td>
                        <td>${student.grade}</td>
                    </tr>
                `;
            });

            tableHtml += '</table>';
            container.innerHTML = tableHtml;
        }

        // 页面加载完成后自动请求数据
        window.addEventListener('load', fetchStudents);
    </script>
</body>
</html>

2. 编写页面视图
   这个视图只需要返回HTML模板，身份验证由前端请求API时处理：

from django.shortcuts import render

def home_page(request):
    return render(request, 'home.html')

3. 注意事项

• 确保JWT Token能正确获取（如果存在cookie中，需用JS读取cookie）
• 严格匹配API的请求方法（POST）和参数格式
• 处理请求失败的异常场景，给用户明确提示

内容的提问来源于stack exchange，提问作者Kazi Shahriar Sanjid 212117264