关于python：如何将JSON数据从Django视图传递给Vue.js实例方法


How to Pass JSON data from Django view to Vue.js instance methods

我是Vue.js的新手。如何将json数据从django视图传递到Vue实例(方法)。

Views.py

号

1
2
3
4
5
6
7
8
9
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

号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
          });

        }

        })

号

Template(article.html)

号

1
2
3
4
5
6
7
8
  "><%news.title%>
   <h5><small><%news.date%></small></h5>
   <p>

      <%news.body%>...<span style ="color : purple">"> Call to Action
      </span>
   
</p>

我试图访问vuescript.js中的JSON数据，而不是JSON数据，我得到了完整的HTML结构。

有人能帮我吗？谢谢

可能是这样：

视图.py

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

号

文章.html

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

在Vue实例中

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

。

您可以将HTML添加到Vue组件中，并通过restful API(如django rest framework)为JSON提供服务。对于进行API调用，您将向Vue添加Vue路由器：https://github.com/vuejs/vue-路由器

也许你应该用JsonResponse代替：

1
2
3
4
5
6
7
8
9
10
11
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的信息，或者阅读这个stackOverflow答案。

相关讨论