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

Posted 2023-02-24

【中文标题】Django 和 AngularJS - 向 Angular 发送查询 JSON 数据

【英文标题】：Django and AngularJS - Sending query JSON data to Angular

【发布时间】：2015-02-01 15:27:24

【问题描述】：

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

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

在 *** 上进行大量搜索以尝试帮助自己解决问题后，这就是我的代码现在所在的位置：

# 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.");
      );
]);

我想将响应存储在项目 $scope 变量中，以便我可以对我的角度模板中的数据进行处理。

【参考方案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 框架返回 JSON 数据。

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

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

$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/

希望这会有所帮助！

【讨论】：

我对如何创建我的序列化程序来访问我想要的预览图像有点迷茫。我目前没有一个 url 路径来单独查看与它们关联的项目的预览图像。有没有办法设置序列化程序以获取图像的 url 而无需设置路由？见pastebin.com/AaVzGyer

Preview 是如何与 Project 关联的？

一个项目有一个或多个预览图像。每个图像（预览）都是从项目条目的管理界面上传的单个图像。

Snig501，您可以在这里查看更多详细信息：reddit.com/r/django/comments/2o87mq/…

以下有帮助吗？ django-rest-framework.org/api-guide/relations/…（抱歉，我现在正在工作，所以目前无法提供大量帮助 - 即我无法自己测试：P）