如何将Django REST框架连接到前端

Question

我是Django REST Framework的新手。 我有一个index.html，我有简单的表单来添加项目和后端与Django。 我无法理解，我如何将index.html连接到Django REST Framework。 我有下一个代码文件：

models.py

from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=100)
    category = models.CharField(max_length=100)

    def __str__(self):
        return self.title

views.py

from django.shortcuts import render
from django.views.generic import TemplateView
from .models import Book
from rest_framework import viewsets
from .serializers import BookSerializer

class Index(TemplateView):
    template_name = "index.html"
    def get_context_data(self):
        context = super(Index, self).get_context_data()
        return context


class BookViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = Book.objects.all().order_by('title')
    serializer_class = BookSerializer

urls.py

from django.conf.urls import url, include
from rest_framework import routers
from myapp import views

router = routers.DefaultRouter()
router.register(r'books', views.BookViewSet)

# Wire up our API using automatic URL routing.
# Additionally, we include login URLs for the browsable API.
urlpatterns = [
    url(r'^', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^$', views.Index, name='index'),
]

serializers.py

from .models import Book
from rest_framework import serializers

class BookSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Book
        fields = ('title','category')

如果我运行localhost：8000 / index我收到错误'找不到页面'。 我无法理解我应该如何将我的html页面包含在django代码中。 我应该使用router.register吗？

Answer 1

让我们从定义django-rest-framework是什么以及它不是什么开始。

它是构建Web API的好工具包。 这意味着您可以定义几个将处理传入requests端点（URL），并以JSON或XML格式返回response 。

它不是一个HTML渲染工具。 这意味着您无法返回包含要在浏览器中呈现为页面的html代码的response 。 它将返回纯json或xml数据。

现在，您的问题包括两个问题：

1. 您无法访问index.html页面。
2. 您不知道如何将此页面与books端点连接。

关于问题1

检查TEMPLATES设置。 你的index.html放在哪里？ django知道在哪里找到它吗？ 查看TEMPLATES设置并确保您已正确设置。

关于问题2

由于django-rest-framework端点处理传入requests ，因此您需要生成此类请求。 但是，如果您只是在浏览器中访问端点，页面将加载/重新加载，您将在页面上以json形式看到端点上的数据。

为了使页面保持不变，但同时向端点发出请求，您需要在index.html页面中使用ajax （ 异步JavaScript和XML ）。 您可以使用以下方法之一发出ajax请求：

1. 使用纯JavaScript，通过XMLHttpRequest类。 看到这个问题和答案，看看如何做到这一点。
2. 如果你使用jQuery ，它有一个jQuery.ajax()方法来发出ajax请求。
3. 如果你使用任何其他前端框架（angular，backbone，ember等），他们都有ajax调用的实现。 检查他们的文档。

基本上就是这样。 祝好运！

Answer 2

你可以尝试在你的索引之后输入api url吗？

urlpatterns = [
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^$', views.Index, name='index'),
    url(r'^', include(router.urls)),
]

或者为什么不使用/ api /作为你的REST Api网址：

urlpatterns = [
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^$', views.Index, name='index'),
    url(r'^api/', include(router.urls)),
]

并确保已将'rest_framework',添加到INSTALLED_APPS

编辑：

要访问/index/您必须修复urls.py：

urlpatterns = [
    url(r'^index/$', views.Index, name='index'),
    url(r'^api/', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
]