Django模型更新时动态刷新HTML页面的极简示例需求

这里给你提供两种极简实现方式，不用纠结复杂的框架配置：

方案一：轮询（零配置，适合小流量/低频率更新场景） #

前端定时请求后端接口拉取最新数据，直接更新页面内容。

后端视图代码 #

# views.py
from django.http import JsonResponse
from .models import Status

def get_latest_status(request):
    # 假设仅需展示单个Status实例，按需调整筛选逻辑
    status = Status.objects.first()
    return JsonResponse({
        'core_field': status.core_field,
        'progress': status.progress,
        # 其他需要展示的字段
    })

前端页面代码 #

<!-- 报表展示区域 -->
<div class="status-report">
  <p>核心字段：<span id="core-field"></span></p>
  <p>当前进度：<span id="progress"></span>%</p>
</div>

<script>
// 刷新数据函数
function updateStatus() {
  fetch('/get-latest-status/') // 对应后端路由地址
    .then(res => res.json())
    .then(data => {
      document.getElementById('core-field').textContent = data.core_field;
      document.getElementById('progress').textContent = data.progress;
    });
}

// 页面加载时初始化数据，之后每2秒刷新一次
window.onload = () => {
  updateStatus();
  setInterval(updateStatus, 2000);
};
</script>

路由配置 #

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('get-latest-status/', views.get_latest_status, name='get_latest_status'),
]

方案二：Django Channels + WebSocket（真正实时，适合高频率更新场景） #

用3.x版本的Channels，配置比1.x简洁很多：

1. 安装依赖 #

pip install channels==3.0.4

2. 修改项目settings.py #

INSTALLED_APPS = [
    # 原有应用...
    'channels',
]

# 指定ASGI应用
ASGI_APPLICATION = '你的项目名.asgi.application'

# 开发环境用内存通道层
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer",
    },
}

3. 改写asgi.py #

# asgi.py
import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
from . import routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', '你的项目名.settings')

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": URLRouter(routing.websocket_urlpatterns),
})

4. 创建路由文件routing.py #

# routing.py
from django.urls import path
from . import consumers

websocket_urlpatterns = [
    path('ws/status/', consumers.StatusConsumer.as_asgi()),
]

5. 创建消费者文件consumers.py #

# consumers.py
from channels.generic.websocket import WebsocketConsumer
import json
from .models import Status
from django.db.models.signals import post_save
from django.dispatch import receiver

# 监听Status模型保存事件，触发实时推送
@receiver(post_save, sender=Status)
def push_status_update(sender, instance, **kwargs):
    StatusConsumer.broadcast_update(instance)

class StatusConsumer(WebsocketConsumer):
    # 维护在线客户端集合
    active_clients = set()

    def connect(self):
        self.accept()
        self.active_clients.add(self)
        # 连接成功时先推送一次最新数据
        latest_status = Status.objects.first()
        self.send(text_data=json.dumps({
            'core_field': latest_status.core_field,
            'progress': latest_status.progress,
        }))

    def disconnect(self, close_code):
        self.active_clients.remove(self)

    @classmethod
    def broadcast_update(cls, instance):
        update_data = json.dumps({
            'core_field': instance.core_field,
            'progress': instance.progress,
        })
        # 给所有在线客户端推送更新
        for client in cls.active_clients:
            client.send(text_data=update_data)

6. 前端WebSocket代码 #

<div class="status-report">
  <p>核心字段：<span id="core-field"></span></p>
  <p>当前进度：<span id="progress"></span>%</p>
</div>

<script>
// 建立WebSocket连接
const ws = new WebSocket('ws://' + window.location.host + '/ws/status/');

// 接收后端推送的更新
ws.onmessage = function(event) {
    const data = JSON.parse(event.data);
    document.getElementById('core-field').textContent = data.core_field;
    document.getElementById('progress').textContent = data.progress;
};

// 连接断开时自动重连
ws.onclose = function() {
    setTimeout(() => window.location.reload(), 3000);
};
</script>

选择建议 #

• 轮询方案适合更新频率低的场景，无需额外配置，开发速度快。
• WebSocket方案适合需要实时感知数据变化的场景，生产环境需搭配Daphne等ASGI服务器部署。

内容的提问来源于stack exchange，提问作者Vince