html - 将数据从 Django View 作为 JSON 对象传递到 vue 实例

Question

我有以下 Django View 方法，用于将信息发送到 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>

Answer 1

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

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

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

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

或者，您可以 use a seralizer to directly encode the QuerySet .

我相信，一旦您在模板输出中获得了 JSON，您的其余代码应该无需太多调整即可工作。您可以直接将 json 渲染到组件数据中，也可以作为组件属性渲染。

不过我会注意到，以 JSON 格式从 Django 检索“复杂”数据的典型方法是通过 Django Rest Framework。将您的方法用于简单属性非常好，但是当您开始提取更大的数据集时，您将通过让 Vue 组件发出异步请求来获取数据来实现一些性能提升。不过，这是以增加复杂性为代价的(在 Vue 代码中管理 ajax 请求/响应和状态)。

附言。我知道这不是你的问题，但我想指出，我认为通过 Django 模板上的脚本标签使用 Vue 的一般方法存在缺点，最明显的是缺少单文件组件 (SFC) 的简单性和便利性、热重载和 webpack 的优化。除非您的项目很小，否则我建议您花一些时间来设置这样的集成；根据我的经验，前期的努力是值得的。此外，正如我所写的那样，设置并不难 some articles describing the approach并 build 了一个cookiecutter to boostrap Vue+Django projects .

好黑客!