时间戳

首页 > 解决方案 > 如何获取JS文件以从数据库中提取数据

javascript - 如何获取JS文件以从数据库中提取数据

问题描述

我是 Django 新手，正在做一个简单的项目，该项目涉及用户提交的表单，然后是仪表板页面，该页面提供一些漂亮的可视化图表来总结用户输入的数据。我正在为仪表板页面使用免费模板。它被创意蒂姆称为黑色仪表板。

在我的 HTML 模板中有以下内容

<canvas id="chartBig1"></canvas>

这我相信参考 JS 文件中有关要显示的图表的信息

下面是我认为 html 引用的 JS 文件的片段

var myChart = new Chart(ctxGreen, {
  type: 'line',
  data: data,
  options: gradientChartOptionsConfigurationWithTooltipGreen

});



var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
var chart_data = [100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100];


var ctx = document.getElementById("chartBig1").getContext('2d');

数据是静态的。使用我使用 models.py 保存的数据显示这些图表的最佳方式是什么。我可以将数据直接拉到JS文件中吗？

谢谢

标签： javascriptdjangosqlitetemplatesdjango-models

解决方案

执行此操作的标准方法是创建一个 django 模板过滤器，将上下文变量转换为 json（根据设计，它是有效的有效 javascript 值文字）：

from django.import template
from django.utils.safestring import mark_safe
import json
register = template.Library

@register.filter
def jsonval(val):
    """Output ``val`` as a (json) value suitable for assigning to variables in
       javascript::

           var js_var = {{ python_var|jsonval }};

    """
    return mark_safe(json.dumps(val, sort_keys=True, indent=4))

这需要放在应用程序的 templatetags 文件夹中，通常在一个名为的文件中myapp_tags.py（阅读有关在文档中创建自定义过滤器的更多信息：https ://docs.djangoproject.com/en/2.1/howto/custom-template-tags/ ） .

在您的模板中，您需要在使用之前加载过滤器：

{% load myapp_tags %}
....
var chart_data = {{ chart_data|jsonval }};
....

在您看来，您需要确保 chart_data 上下文变量是 json-serializable - 即。仅包含列表、字典、字符串、数字、布尔值和无（即没有 Django 查询集等）。json 文档包含有关绕过此限制的方法的信息，请参阅https://docs.python.org/3/library/json.html - 在“扩展 JSONEncoder”下；这可能需要在 js 端进行类似的解码步骤：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter虽然这会使您的过滤器标签有点更复杂：

@register.simple_tag
def json_setup():
    return """
    var my_reviver = function (key, val) {
        if (typeof val === 'string' && val.startsWith("@date:")) {
            var dateval = val.slice("@date:".length);
            return new Date(Date.parse(dateval));
        }
        return val;  // else
    };
    """

class MyEncoder(json.JSONEncoder):
    def default(self, obj):
        if isinstance(obj, datetime.date):
            return "@date:" + obj.isoformat()   # e.g. "@date:2019-03-15"
        if isinstance(obj, decimal.Decimal):
            return float(obj)
        # ..etc..
        # Let the base class default method raise the TypeError
        return json.JSONEncoder.default(self, obj)

@register.filter
def jsonval(val):
    return mark_safe('JSON.parse("%s", my_reviver)' % json.dumps(val, cls=MyEncoder, sort_keys=True))

和你的模板：

{% load myapp_tags %}
{% json_setup %}
....
var chart_data = {{ chart_data|jsonval }};
....

推荐阅读