Question

编辑：我正在使用Django开发版，所以我可以访问JsonResponse（如下所示）。

我正在搞乱Django并试图让它与AngularJS一起使用。目前我正在尝试一次从数据库中查询4行，并将结果作为JSON对象发送到Angular脚本。我只是继续遇到问题 - 它不起作用。

这是我的代码在StackOverflow上进行大量搜索以试图帮助自己之后所处的位置：

# views.py

class AJAXListMixin(object):
    def dispatch(self, request, *args, **kwargs):
        if not request.is_ajax():
            raise Http404("Improper access.")
        return super(object, self).dispatch(request, *args, **kwargs)

    def get_queryset(self):
        return Project.objects.filter(added__lte=timezone.now())

    def get(self, request, *args, **kwargs):
        return JsonResponse(self.get_queryset(), safe=False)


class PageApi(AJAXListMixin, generic.ListView):
    paginate_by = 4  # 4 results per page
    ordering = '-added'  # Most recent to oldest

----------------------
# models.py

class Project(models.Model):
    title = models.CharField(max_length=100)
    desc = models.TextField()
    link = models.URLField(default=None, blank=True, null=True)

    slug = models.SlugField(null=True)
    added = models.DateField(_("Date Added"), default=datetime.today)

    def __str__(self):
        return self.title

    def save(self, *args, **kwargs):
        self.slug = slugify(self.title)
        super(Project, self).save(*args, **kwargs)

    def as_dict(self):
        return {
            "title": self.title,
            "description": self.desc,
            "link": self.link,
            "slug": self.slug,
            "date": self.added,
            "previews": {
                preview.as_dict() for preview in self.preview_set.all()
            }
        }


class Preview(models.Model):
    project = models.ForeignKey(Project)
    file = models.FileField(upload_to='project/preview/')

    def __str__(self):
        return "{project} Preview {id}".format(
            project=self.project.title, id=self.id
        )

    def as_dict(self):
        return {
            "url": self.file.url
        }

这是我开始使用的角度代码：

projects = angular.module("Projects", []);

projects.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
}]);

projects.controller("ProjectList", ['$scope', '$http', function ($scope, $http) {
  $scope.projects = {};
  $scope.page = 1;

  $http.get('api/page/' + $scope.page)
      .success(function (response) {
        console.log(response)
      })
      .error(function (status) {
        alert("Error. Check network logs.");
      });
}]);

我想将响应存储在projects $ scope变量中，以便我可以使用angular模板中的数据执行操作。

Answer 1

我建议您查看以下帖子：

http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html或此https://thinkster.io/django-angularjs-tutorial/

通过在Django中设置REST API来序列化模型，并使用Django Rest Framework指定要序列化和返回JSON数据的字段。

请注意，该示例使用CoffeeScript并使用GruntJS将其编译为JavaScript。

相反，您的Angular控制器看起来应该更像下面的内容（假设您有一个URL＆＃39; / api / projects /＆＃39;，它会路由到返回包含多个项目的JSON对象的API视图）：< / p>

$scope.projects = [];
$http.get('/api/projects/').success(function(data) {
    $scope.projects = data;
    console.log($scope.projects);

});

不确定这会如何与其他分页一起使用，但您可以在Django Rest Framework文档中阅读更多相关信息：

http://www.django-rest-framework.org/api-guide/pagination/

希望这有帮助！

Django和AngularJS - 将查询JSON数据发送到Angular

1 个答案: