无刷新仪表盘：用 HTMX + Django 构建实时数据图表

放弃前后端分离的复杂 REST 架构，利用 HTMX 的 hx-trigger 轮询与 Django 模板片段，每 5 秒自动刷新 KPIs。 · 难度：入门 · +10XP

无刷新仪表盘：用 HTMX + Django 构建实时数据图表

常规教程会用 Vue/React + WebSocket，学习成本高。本教程使用 HTMX 的 hx-get + hx-trigger='every 5s' 自动请求 Django 视图，返回渲染好的 HTML 片段（如销售总数、在线用户数）。后端使用 Django 缓存装饰器避免频繁查询数据库。同时结合 Chart.js 的静态版本，数据随 HTML 一起下发，前端只负责绘图。最终实现一个零 JS 框架、自动刷新的运营仪表盘。

# dashboard.html
<div hx-get="{% url 'kpi' %}" hx-trigger="every 5s">
    {% include 'kpi_partial.html' %}
</div>
# views.py
from django.shortcuts import render
def kpi(request):
    context = {
        'total_sales': get_sales(),
        'online_users': get_online(),
    }
    return render(request, 'kpi_partial.html', context)