使用 Django REST Framework 构建 REST API

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

欢迎来到本系列的第二部分。在这里，我们将为Notes应用程序创建 REST API，并完成后端开发。

如果你是第一次看到这部分内容，可以点击这里查看第一部分。我们已经在那篇教程中完成了项目设置。

我们将继续第一部分的内容；所以这部分也很容易理解。

我们开始吧！

创建 API 端点

你应该仍然在 project1 目录中。如果不在，请导航到该目录。

cd React-Django/project1

请确保您位于包含 manage.py 文件的文件夹中。

Django REST framework是一个功能强大且灵活的 Web API 构建工具包。我们将使用它来创建 API 端点。首先，我们需要安装它；

 pip install djangorestframework

settings.py

接下来，我们在 settings.py 文件的已安装应用部分注册它。INSTALLED_APPS你的 settings.py 文件中的这部分应该如下所示👇

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #my_apps
    'core',
    'rest_framework',
]

models.py

models.py然后我们在应用程序目录下的文件中创建模型。core

class Notes(models.Model):
    title = models.CharField(max_length=60)
    content = models.CharField(max_length=120)

    def __str__(self):
        return self.title

serializers.py

我们还需要serializers.py在应用程序目录“core”内创建一个新文件。该文件将包含serializer负责将模型转换为JavaScript和React框架可理解的数据类型的代码。

from rest_framework import serializers
from .models import Notes

class NoteSerializer(serializers.ModelSerializer):
    class Meta:
        model = Notes
        fields = ('id', 'title', 'content')

这里我们从已安装的 Django REST framework 包中导入序列化器类，以及Notes之前创建的模型。然后，我们声明要转换数据的模型字段。如果你的模型有多个字段，并且想要序列化所有字段，只需将下面的代码行替换上面的字段声明行即可。

fields = '__all__'

你的核心目录现在应该看起来像这样。

views.py

最后，为了完成后端设置，我们需要更新该views.py文件。请将以下导入语句添加到文件顶部。

from rest_framework.decorators import api_view
from rest_framework.response import Response
from rest_framework import status
from .serializers import NoteSerializer
from .models import Notes

我们将使用基于函数的视图和api_view装饰器。这将允许我们声明方法类型。默认情况下只GET允许使用方法，因此我们必须指定所需的方法POST。DELETE

在前一个视图的正下方front，我们将创建一个note带有 `api_view` 装饰器的视图。该视图将处理 ` GETand`POST方法，因此我们也需要将其添加到装饰器中。

@api_view(['GET', 'POST'])
def note(request):

    if request.method == 'GET':
        note = Notes.objects.all()
        serializer = NoteSerializer(note, many=True)
        return Response(serializer.data)

    elif request.method == 'POST':
        serializer = NoteSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

这里我们检查请求方法的类型，如果是get请求方法，则查询数据库以检索所有可用的笔记，然后将从数据库接收到的数据序列化。many=True这里使用标志是因为我们从数据库中获取的是对象列表，而不仅仅是一个对象实例。最后，我们将序列化后的数据返回给前端进行显示。

但是，如果请求方法是一个post方法，我们会反序列化前端提交的数据，并使用该is_valid方法检查所有数据是否有效，然后再访问数据库并将其存储。之后，我们会向前端返回一个不包含任何数据的成功状态消息。当我们开始编写前端代码时，您就会明白其中的原因。

接下来，我们创建note_detail视图。该视图将处理该DELETE方法，因此我们将把它包含在api_view装饰器中。

@api_view(['DELETE'])
def note_detail(request, pk):
    try:
        note = Notes.objects.get(pk=pk)
    except Notes.DoesNotExist:
        return Response(status=status.HTTP_404_NOT_FOUND)

    if request.method == 'DELETE':
        note.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

primary key field(pk)这里我们将主键与请求一起传递给 `note_detail` 函数，因为我们需要将主键添加到数据库查询中，以便获取要删除的特定笔记。一旦成功检索到具有指定主键的笔记，我们就检查方法类型；如果是DELETE，则从数据库中删除该笔记。

我们已经完成了视图的创建，如果您按照上述所有步骤操作，您的 views.py 文件应该如下所示👇。

from django.shortcuts import render
from rest_framework.decorators import api_view
from rest_framework.response import Response
from rest_framework import status
from .serializers import NoteSerializer
from .models import Notes
# Create your views here.

def front(request):
    context = {
        }

    return render(request, "index.html", context)

@api_view(['GET', 'POST'])
def note(request):

    if request.method == 'GET':
        note = Notes.objects.all()
        serializer = NoteSerializer(note, many=True)
        return Response(serializer.data)

    elif request.method == 'POST':
        serializer = NoteSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

@api_view(['DELETE'])
def note_detail(request, pk):
    try:
        note = Notes.objects.get(pk=pk)
    except Notes.DoesNotExist:
        return Response(status=status.HTTP_404_NOT_FOUND)

    if request.method == 'DELETE':
        note.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

urls.py

我们需要将核心应用程序中的新视图函数导入到该urls.py文件中。我们只需在现有代码行的基础上添加新行即可。

from core.views import front, note, note_detail

然后将它们映射到各种urls。

    path("notes/", note, name="note"),
    path("notes/<int:pk>/", note_detail, name="detail"),

你的 urls.py 文件应该看起来像这样👇

from django.contrib import admin
from django.urls import path
from core.views import front, note, note_detail

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", front, name="front"),
    path("notes/", note, name="note"),
    path("notes/<int:pk>/", note_detail, name="detail"),
]

我们已经完成了 API 和后端配置。为了进行测试，我们将对文件所做的更改迁移models.py到数据库模式中。

python manage.py makemigrations

python manage.py migrate

然后我们运行该应用程序

python manage.py runserver

你应该仍然会看到默认的 React 页面，将 URL 更改为http://127.0.0.1:8000/notes/。你会看到 Django REST framework 的可浏览 API。将下面的 JSON 数据粘贴到内容框中，然后点击按钮。这将是前端发送的 POST 数据的格式。

POST

    {
        "title": "Hello Ace!",
        "content": "This is a new note."
    }

刷新页面，您将看到新的 POST 数据。瞧！您已成功执行 ` POSTand`GET方法。我们再来测试一下 ` method` 方法。将您的 URL 更改为 `<your_note_id> `。URL 末尾的数字是您要删除的笔记的 ID。点击按钮，然后返回到之前的 URL 。您会发现之前创建的笔记已被删除。

DELETEhttp://127.0.0.1:8000/notes/1/DELETEhttp://127.0.0.1:8000/notes/

注意：为了简化本教程，我们使用了带有装饰器的函数式视图api_view。您也可以选择使用视图集，viewsets它会处理所有方法，GET , POST , PUT , DELETE而无需像使用装饰器那样手动声明。您可以点击此处api_view阅读更多关于视图集的信息。

我们已确认 API 端点（GET、POST、DELETE）运行正常，因此在第三部分中，我们将继续构建前端，并使用上述 API URL 发起 API 调用。希望这部分内容易于理解。第三部分见！祝好！

额外提示：要禁用 Django REST framework 的可浏览 API 视图，防止用户通过它与数据库交互，请将以下代码添加到 settings.py 文件中。

REST_FRAMEWORK = {
     'DEFAULT_RENDERER_CLASSES': (
         'rest_framework.renderers.JSONRenderer',
     )
 }

如果您有任何疑问，欢迎在评论区留言，或者通过领英或推特给我发消息，我会尽快回复。再见👋

文章来源：https://dev.to/nagatodev/how-to-connect-django-to-reactjs-part-2-2oje

菜单

分享

使用 Django REST Framework 构建 REST API DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

使用 Django REST Framework 构建 REST API

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

创建 API 端点

settings.py

models.py

serializers.py

views.py

urls.py

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码