Html 将数据作为JSON对象从Django视图传递到vue实例

我有以下Django视图方法，用于将信息发送到details.html中的一些Vue.js前端代码。我基本上想知道如何将数据发送到vue模板。如何进行JSON转储？我想这就是我搞砸的

def works(request):
    heading_info = Heading.objects.order_by('-name')[:1]
    welcome_info = Welcome.objects.order_by('-title')[:1]
    skills_info = Skill.objects.order_by('position')[:5]
    projects_info = Project.objects.order_by('name')[:10]

    items = []
    items.append({'heading_info':heading_info, 'welcome_info':welcome_info, 'path':path, 'path2':path2, 'skills_info':skills_info,'projects_info':projects_info})


    # context = {}
    # context["items_json"] = json.dumps(items)


    context = {'heading_info':heading_info, 'welcome_info':welcome_info, 'path':path, 'path2':path2, 'skills_info':skills_info,'projects_info':projects_info}
    
    return render(request, 'home/details.html', context)

这是我试图访问这些数据的html

  <script type='text/javascript'>
    var data = {{ projects_info|safe }};
  </script> 

<div id="app">

[[projects_info_vue]]     

{% comment %} #Passing array as vue data. This gets rendered as QuerySet. How do I access these value in Vue. {% endcomment %}

<div class="row">
{% for project in projects_info %}            

{% comment %} #Here is the array being rednered in Django. This array gets rendered as a QuerySet in Vue. {% endcomment %}

<div class="col">
{{project.name}}
</div>
{% endfor %}
</div>


</div>

<script>
var app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: {
    projects_info_vue: '{{projects_info}}',
  },
});
</script>

var数据={{projects_info | safe}}；
[[项目信息]]
{%comment%}#将数组作为vue数据传递。这将被渲染为QuerySet。如何在Vue中访问这些值。{%endcomment%}
{%用于项目中的项目。\u info%}
{%comment%}#这是在Django中重新编写的数组。此数组在Vue中呈现为查询集。{%endcomment%}
{{project.name}
{%endfor%}
var app=新的Vue({
分隔符：[“[”，“]]”，
el:“#应用程序”，
数据：{
项目信息：{{projects\u info}}，
},
});

您完全正确，在某个时候您需要将Python对象转换为Javascript/Vue可以理解的文本，是的，JSON是合适的，因为您的数据比单个值（字符串、数字等）更复杂

要将QuerySet转换为json字符串，一个好方法是首先使用将它从QuerySet对象转换为一个简单字典列表，然后将其编码为json。例如：

import json
j = json.dumps(list(Project.objects.order_by('name')[:10].values('name','id')))

您需要将参数调整为包含感兴趣的字段的值，或者完全忽略它们以包含所有字段

或者，你也可以

我相信，在模板输出上获得JSON后，代码的其余部分应该可以正常工作，而无需进行太多调整。您可以直接将json呈现到组件数据中，或者作为组件属性呈现

然而，我将注意到，以JSON格式从Django检索“复杂”数据的典型方法是通过Django Rest框架。对简单属性使用您的方法是很好的，但是当您开始提取更大的数据集时，通过让Vue组件发出异步请求来获取数据，您将获得一些性能提升。但是，这是以增加复杂性为代价的（管理Vue代码中的ajax请求/响应和状态）

另外，我知道这不是你的问题，但我想指出的是，我认为通过Django模板上的脚本标记使用Vue的一般方法存在缺点，最明显的是缺少了单文件组件（SFC）、热重新加载和webpack优化的易用性和便利性。除非你的项目很小，否则我建议你花点时间建立这样一个集成；根据我的经验，前期的努力是非常值得的。而且，正如我所写并构建的那样，设置也不是那么困难

---

好黑客

真棒的文章！我想我会尝试使用您描述的方法合并Vue。我还想知道在Heroku上运行它有多棘手？你试过在服务器上部署它吗？@RemoBajwa我有一个使用docker compose的生产部署，非常接近Pydenny django cookiecutter建议的docker设置。我没有试过和希罗库在一起。然而，我认为除了标准的django部署之外，没有太多额外的工作：在收集静态数据之前，只需要构建一个Thread/npm。