将 Django 视图中的数据作为 JSON 对象传递给 vue 实例

Posted 2023-02-24

【中文标题】将 Django 视图中的数据作为 JSON 对象传递给 vue 实例

【英文标题】：Passing data from Django views to vue instance as JSON object

【发布时间】：2021-01-19 20:39:33

【问题描述】：

我有以下 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>

【参考方案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 直接渲染到组件数据中，或者作为组件属性。

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

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

很好的黑客攻击！

【讨论】：

很棒的文章！我想我会尝试使用您描述的方法合并 Vue。

我还想知道在 Heroku 上运行它有多棘手？您是否尝试过将其部署在服务器上？

@RemoBajwa 我有一个使用 docker-compose 的生产部署，非常接近 pydanny django cookiecutter 建议的 docker 设置。我没有尝试过 Heroku。但是，我认为除了标准的 django 部署之外没有太多额外的工作：在收集静态之前只是一个 yarn/npm 构建。