如何访问Django管理页面加载的javascript文件中的服务器数据



我需要访问一个javascript文件中的服务器数据,该文件将加载一个管理页面。在我的情况下,我需要一个在settings.py文件中设置的json变量(在生产版本中,这个json变量是从env变量加载的,这意味着该变量的内容在启动时是已知的,但不是硬编码的(。

我使用javascript来验证和填充管理页面中的一些字段——这是一个比在服务器端更好的用户体验。

是否可以将脚本标记添加到admin-html页面的头部,其中包含服务器数据,即非静态数据?

如果我正确理解你的问题,你需要从网站向管理员发送一些数据,是的,有多种方法可以做到这一点

  • 制作一个API来提供数据,并使用ajax从管理员处获取数据
  • 将数据添加到页面的上下文中,并直接在管理员中使用

在这两种方式中,你都需要编辑管理员并添加一些js代码,所以这就是我在这里向你展示的

编辑管理员

首次批准

在这里,我们将在静态文件中创建一个js文件,然后使用admin 中Media类中的js变量导入

class TestAdmin(admin.ModelAdmin):
class Media:
js = ('js/some_js_file.js',)

然后编写一个API来提供您的数据,并从js 中使用它

第二种方法

我们将扩展add表单模板,并直接在模板中编写js代码

{% extends 'admin/change_form.html' %}
{% block extrahead %}{{ block.super }}
# write code here
{% endblock %}

并且在管理员中

class TestAdmin(admin.ModelAdmin):
add_form_template = 'path_to_template'

注意:您需要在设置中启用模板

现在,如果您不喜欢API方法,您可以覆盖adminadd_form函数并添加需要的上下文

class TestAdmin(admin.ModelAdmin):
add_form_template = 'admin/test_form_Change.html'

def changeform_view(self, request, object_id=None, form_url='', extra_context=None):
extra_context = extra_context or {}
extra_context['some_data'] = 'value'
return super(TestAdmin, self).changeform_view(request, object_id, extra_context=extra_context)

你可以用这个标签将数据添加到模板

Mina Atef的回答帮助我完成了这项工作。谢谢米娜·阿提夫。

这是我使用的确切代码,以防对某人有所帮助。这适用于Django 4.1。我需要在列表视图中使用此方法,但您也可以在详细信息视图中使用这种方法。

添加到管理类:

class PlaceNameAdmin(admin.ModelAdmin):
# A lof of code not shown
class Media:
# Adding the javascript file
js = ('multi_line_list_edit.js',)
def changelist_view(self, request, extra_context=None):
extra_context = extra_context or {}
# Adding the extra context. It comes from settings but it can be any dynamic data.
# The REGISTER_PLACES_SETTINGS is actually not static, since it comes 
# from env-variable that is set in production docker environment.
extra_context['register_places_settings'] = settings.REGISTER_PLACES_SETTINGS
return super(PlaceNameAdmin, self).changelist_view(request, extra_context)

需要将名为change_list.html的文件添加到templates/admin/目录中。有关如何覆盖管理模板的更多信息,请参阅django文档。

{% extends "admin/change_list.html" %}
{% block extrahead %}
{{ block.super }}
{% comment %}
See docs.djangoproject.com/en/4.1/ref/templates/builtins/#json-script for doc on how to use json_script
{% endcomment %}
{{ register_places_settings|json_script:"register_places_settings" }}
{% endblock %}

以下是如何在multi_line_list_edit.js中使用数据。这个javascript文件需要放在static/目录中。

$(document).ready(function() {

const register_places_settings = JSON.parse(document.getElementById('register_places_settings').textContent);
// A lof of code not shown

});    

相关内容

  • 没有找到相关文章

最新更新