如何将 JSON 数据从 Django 视图传递到 Vue.js 实例方法答案

【问题标题】：How to Pass JSON data from Django view to Vue.js instance methods如何将 JSON 数据从 Django 视图传递到 Vue.js 实例方法
【发布时间】：2016-07-15 07:32:07
【问题描述】：

我是 Vue.js 的新手。如何将 Django 视图中的 JSON 数据传递给 vue 实例（方法）。

Views.py

def articles(request):
    model = News.objects.all() # getting News objects list
    random_generator = random.randint(1, News.objects.count())
    context = {
              'title' : 'Articles' , 
              'modelSerialize' :  serializers.serialize('json',News.objects.all()),
              'num_of_objects' : News.objects.count() , 
              } 
    return render(request, 'articles.html',context)

VueScript.js

new Vue({

    el: '#list-Of-Articles-Displayed',
                data: {
                   count: 0
              },    
        ready: function() {


          this.$http.get('http://127.0.0.1:8000/article/').then(function (response) {
              response.status;
              console.log(response); 
          }, function (response) {
                  alert("error ");
              // error callback
          });

        }

        })

模板（article.html）

<div id = "list-Of-Articles-Displayed" class = "col-lg-10" v-for="news in loadArticles" >
<div class = "col-lg-11">
   <br>
   <a href = "<%news.id%>" ><%news.title%></a> 
   <h5><small><%news.date%></small></h5>
   <p>
      <%news.body%>...<span style = "color : purple" > <a href = "<%news.id%>"> Call to Action</a>
      <br><br></span> 
   </p>
</div>

我正在尝试访问 VueScript.js 中的 JSON 数据，而不是 JSON 数据，我得到的是完整的 HTML 结构。

谁能帮帮我。？谢谢

【问题讨论】：

标签： python json django templates vue.js

【解决方案1】：

可能是这样的：

views.py

context = {'page_data' : json.dumps({"title": "Articles"})}

article.html

<body data="{{ page_data }}">

在 vue 实例中

beforeMount(){
  this.page = JSON.parse(document.getElementsByTagName('body')[0].getAttribute('data') || '{}');
}

【讨论】：

【解决方案2】：

也许您应该改用JsonResponse：

from django.http import JsonResponse

def articles(request):
    model = News.objects.all() # getting News objects list
    random_generator = random.randint(1, News.objects.count())
    context = {
              'title' : 'Articles' , 
              'modelSerialize' :  serializers.serialize('json',News.objects.all()),
              'num_of_objects' : News.objects.count() , 
              } 
    return JsonResponse(context)

您遇到的问题是，render 返回内容类型为text/html 的响应，而ajax 调用需要的是内容类型为application/json 的响应。 JsonResponse 是一种快速的方法，可以确保您拥有正确的响应内容类型。您可以阅读有关 JsonResponse here 的更多信息或阅读此 StackOverflow answer

【讨论】：

我只获取 JSON 数据并显示在页面中。如何使用 json 数据获取完整的 html 页面

【解决方案3】：

您可以将 html 添加到您的 vue-components 并通过 restful-api 提供 json，例如使用Django 休息框架。为了进行 API 调用，您可以将 vue-router 添加到 vue： https://github.com/vuejs/vue-router

【讨论】：