使用 Flutter 和 Django REST Framework 实现 Web 应用

2 年 ago
新, 韵
2 minutes

上一篇文章：

 

用django-rest-framework实现后端会怎样呢？这是一次面向初学者的讨论，和上次一样。

Django REST框架是什么？

与FastAPI类似，它是一个可以用Python实现的WebAPI框架。它以流行的Python框架Django为基础。与FastAPI相比，其主要优点和缺点如下。

优点：
– 与Django的兼容性很好。
– 由于社区庞大，很少遇到困难。
– 相比于FastAPI，已实现的功能较多，需要自己实现的部分较少。

缺点
– 初期学习成本较高。
– 实现的功能太多，难以完全掌握。

对于那些不太了解WebAPI的人来说，我建议从django-rest-framework入手。

后端实现

请参考上次的前端部分（https://qiita.com/hima2/items/aaa29cc7546d7e99f5f1），从库的安装开始。

pip install django djangorestframework

下一步是创建Django项目。项目是一组实例设置，包括数据库设置和选项设置。在这里我们将创建一个名为”mysite”的项目。

django-admin startproject mysite

创建项目后，以下文件夹将自动创建。

mysite
    manage.py
    mysite
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

请参阅每个.py文件的详细信息，请点击这里（https://docs.djangoproject.com/ja/4.2/intro/tutorial01/）。
首先，确保服务器已经启动。进入上面的mysite文件夹，并运行以下命令。

python manage.py runserver 8080

manage.py 在 Django 管理过程中扮演多重角色，但在这里我们是启动了服务器，也就是 “runserver”。
打开浏览器，访问 http://127.0.0.1:8080，将会跳转至以下页面。

undefined

在mysite文件夹中执行以下命令。

python manage.py startapp myapp

在这里，创建了一个名为”myapp”的应用程序模板。
然后可以看到在mysite目录下创建了一个名为myapp的文件夹。

请前往myapp下创建一个名为views.py的文件，并复制以下内容。

from rest_framework.views import APIView
from rest_framework.response import Response

class HelloWorld(APIView):
    def get(self, request):
        return Response({"greeting": "Hello"})

这部分是用FastAPI编写的。

@app.get("/")
def read_root():
    return {"greeting": "Hello"}

请理解为和上述意思相同就可以了。
但是，相对于FastAPI，URL的设置有点复杂。
同样，打开myapp下的urls.py文件，复制并粘贴以下内容。

from django.urls import path
from .views import *

urlpatterns = [path("greeting", HelloWorld.as_view())]

接下来，您需要将mysite目录下的urls.py文件按以下方式进行修改。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [path("admin/", admin.site.urls), path("api/", include("myapp.urls"))]

如果问你在做什么，那么在 mysite/urls.py 中，我们配置了：当访问 “http://127.0.0.1:8080/api” 时，会重定向到 myapp/urls.py。
在 myapp/urls.py 中，我们配置了：当访问 “http://127.0.0.1:8080/api/greeting” 时，会调用 HelloWorld 类。
现在请准备另一个命令提示符窗口，使用 curl 命令再次访问 API。

curl http://127.0.0.1:8080/api/greeting

然后，或者于是，或则

{"greeting":"Hello"}

如未能显示，请确认网址是否输入正确，或确保已正确启动runserver的人。

确认动作

由于URL稍微有点变化，所以只需要稍微修改前端代码。

- Uri url = Uri.parse("http://127.0.0.1:8080/");
+ Uri url = Uri.parse("http://127.0.0.1:8080/api/greeting");

当你重新启动Flutter应用并点击按钮，会再次在控制台上显示。

error

实际上（或者应该说是理所当然的），在django-rest-framework中也需要进行类似的CORS设置。

CORS的配置

为了引入 CORS，需要安装一个库。

pip install django-cors-headers

请将mysite/settings.py文件编辑如下。

INSTALLED_APPS = [
...,
'corsheaders', #追加
]
MIDDLEWARE = [
...,
'corsheaders.middleware.CorsMiddleware', # 追加
]
CORS_ORIGIN_WHITELIST = [
'http://localhost:8000'
]

保存成功后，按返回按钮回到Flutter，控制台将输出

{"greeting:"Hello"}

输出为 “と”。

最后

与FastAPI相比，django-rest-framework可能会让人感到有些复杂，但正如前面所提到的，django-rest-framework也有自己的优点。
关于Django，有很多教学资源可以使用，所以请一定要认真学习。
此外，关于CORS的URL如果是http://127.0.0.1~可能无法正常工作，原因我不太清楚，如果你知道的话，请告诉我。

请提供更具体的上下文或句子，以便我能够更好地帮助您进行翻译。

Django的环境设置

 

Django的CORS引入

 

bannerAds