寻求Holoviz Panel与Django集成的可运行示例及资源

我需要一个已集成Panel Apps的Django可运行项目示例，官方集成指引无法帮我成功实现。核心目标是完成Panel仪表盘与Django的集成，业务逻辑无关紧要。以下是我尝试的代码（及变体）：

# project structure:
# myproject/
#   manage.py
#   myproject/
#     __init__.py
#     settings.py
#     urls.py
#     wsgi.py
#   app1/
#     __init__.py
#     apps.py
#     views.py
#   app2/
#     __init__.py
#     apps.py
#     views.py

# myproject/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app1',
    'app2',
    'panel',
]

# myproject/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app1/', include('app1.urls')),
    path('app2/', include('app2.urls')),
]

# app1/apps.py
from django.apps import AppConfig

class App1Config(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'app1'

# app1/views.py
import panel as pn
from django.http import HttpResponse

def app1_panel(request):
    # Create a simple Panel app
    slider = pn.widgets.FloatSlider(start=0, end=10, name='Slider')
    text = pn.widgets.StaticText(name='Slider Value')

    @pn.depends(slider.param.value)
    def update_text(value):
        text.value = f"Slider value: {value:.2f}"

    app = pn.Column(slider, text)
    
    # Serve the Panel app
    return HttpResponse(app.servable())

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

urlpatterns = [
    path('', views.app1_panel, name='app1_panel'),
]

# app2/apps.py
from django.apps import AppConfig

class App2Config(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'app2'

# app2/views.py
import panel as pn
import altair as alt
import pandas as pd
from django.http import HttpResponse

def app2_panel(request):
    # Create a simple Panel app with an Altair plot
    df = pd.DataFrame({'x': range(10), 'y': [i**2 for i in range(10)]})
    
    chart = alt.Chart(df).mark_line().encode(
        x='x',
        y='y'
    ).properties(
        title='Square Function',
        width=400,
        height=300
    )
    
    altair_pane = pn.pane.Vega(chart)
    
    app = pn.Column(
        pn.pane.Markdown("# App 2: Square Function Plot"),
        altair_pane
    )
    
    # Serve the Panel app
    return HttpResponse(app.servable())

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

urlpatterns = [
    path('', views.app2_panel, name='app2_panel'),
]

# Requirements (update requirements.txt):
# Django
# panel
# altair
# pandas

问题分析与修正方案 #

当前代码的核心问题是直接将Panel对象通过HttpResponse返回，无法正确渲染Panel的交互逻辑。以下是修正后的可运行完整方案：

1. 项目结构（保持不变）

myproject/
  manage.py
  myproject/
    __init__.py
    settings.py
    urls.py
    wsgi.py
  app1/
    __init__.py
    apps.py
    views.py
    urls.py
  app2/
    __init__.py
    apps.py
    views.py
    urls.py

2. 修正后的关键文件代码

myproject/settings.py

import panel as pn

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app1',
    'app2',
    'panel',
]

# 配置Panel静态资源路径，确保Django能加载Panel的前端文件
STATICFILES_DIRS = [
    pn.io.resources.get_static_path(),
]

app1/views.py（修正渲染方式）

import panel as pn
from django.http import HttpResponse

# 初始化Panel扩展，加载必要的前端资源
pn.extension()

def app1_panel(request):
    # 创建简单Panel应用
    slider = pn.widgets.FloatSlider(start=0, end=10, name='滑块')
    text = pn.widgets.StaticText(name='滑块值')

    @pn.depends(slider.param.value)
    def update_text(value):
        text.value = f"滑块值: {value:.2f}"

    app = pn.Column(slider, text)
    
    # 将Panel应用渲染为完整HTML字符串，包含交互逻辑
    html = app.render()
    return HttpResponse(html, content_type='text/html')

app2/views.py（修正渲染方式）

import panel as pn
import altair as alt
import pandas as pd
from django.http import HttpResponse

# 初始化Vega扩展，支持Altair图表渲染
pn.extension('vega')

def app2_panel(request):
    # 创建带Altair图表的Panel应用
    df = pd.DataFrame({'x': range(10), 'y': [i**2 for i in range(10)]})
    
    chart = alt.Chart(df).mark_line().encode(
        x='x',
        y='y'
    ).properties(
        title='平方函数曲线',
        width=400,
        height=300
    )
    
    altair_pane = pn.pane.Vega(chart)
    
    app = pn.Column(
        pn.pane.Markdown("# App 2: 平方函数图表"),
        altair_pane
    )
    
    # 将Panel应用渲染为完整HTML字符串
    html = app.render()
    return HttpResponse(html, content_type='text/html')

3. 依赖安装

确保requirements.txt包含：

Django>=4.0
panel>=1.2.0
altair>=5.0.0
pandas>=2.0.0

4. 运行步骤

1. 安装依赖：pip install -r requirements.txt
2. 执行数据库迁移：python manage.py migrate
3. 启动Django服务：python manage.py runserver
4. 访问 http://localhost:8000/app1/ 和 http://localhost:8000/app2/ 查看集成效果

进阶集成方式（嵌入Django模板） #

如果需要将Panel应用嵌入到自定义Django模板中，可按以下步骤修改：

1. 在app1/templates/app1/目录下创建panel.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Panel集成示例</title>
    {% load static %}
</head>
<body>
    <div class="container">
        {{ panel_html|safe }}
    </div>
</body>
</html>

2. 修改app1/views.py：

import panel as pn
from django.shortcuts import render

pn.extension()

def app1_panel(request):
    # 保持Panel应用创建代码不变
    slider = pn.widgets.FloatSlider(start=0, end=10, name='滑块')
    text = pn.widgets.StaticText(name='滑块值')

    @pn.depends(slider.param.value)
    def update_text(value):
        text.value = f"滑块值: {value:.2f}"

    app = pn.Column(slider, text)
    
    # 渲染为HTML片段，传入模板
    html = app.render()
    return render(request, 'app1/panel.html', {'panel_html': html})

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