Django + MariaDB + RESTful API + ARC－Day 06

开发 Web API 需要有工具来模拟 API 的呼叫，所以我们安装 Advanced REST client，使用方法很简单，只要输入适当的参数即可，以上一个案例而言，HTTP 请求的方法是 GET ，而读取的URL为 [EC2_IPv4]:8000/imgUpload/，所以安装完 Advanced REST client (ARC)，後启动 ARC，分别设定方法与 URL ，按下送出，就可以在回应(Response)中得到结果，如下图所示。

图 1、Advanced REST client 的 GET 请求

可以发现透过 ARC 来进行请求的回应结果是中文，而非浏览器所显示经过编码(encode)的结果，那是因为 ARC 会将回应结果在进行解码(decode)的关系，如果要看原始的回应结果可以回应中选择 RAW 就可以看到如先前网页浏览器看到的结果，如下图所示。这是一个很重要的功能，因为我们所撰写的前端程序真正处理的就是这样的资料，而非上一个图。

图 2、Advanced REST client 查看 RAW 的回应

此外，也可以选择观看 Headers 这个视图，这表示的是实际的 HTTP 请求的格式，关於 HTTP 1.1 请求格式，建议去看由网际网路工程任务组 (Internet Engineering Task Force, IETF) 所制定的 RFC 2616这份文件，有详细介绍 HTTP 协定的请求与回应格式与相关规范，要进行 Web API 设计时，最好要先了解。下图则是利用 ARC 来查看 HTTP 的请求与回应表头(Headers)。

图 3、Advanced REST client 查看请求与回应表头

可以很清楚的看到当我们在浏览器的网址输入 [EC2_IPv4]:8000/imgUpload/ 时，真正送到服务器的请求表头内容如下。

GET /imgUpload/ HTTP/1.1
Host: 13.212.162.1:8000

而收到的回应表头是

Date: Mon, 06 Sep 2021 11:32:27 GMT
Server: WSGIServer/0.2 CPython/3.7.10
Content-Type: application/json
X-Frame-Options: DENY
Content-Length: 416
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin

而回应的主体(body)则是 JSON 格式的阵列。

[{"fishName": "\u9ec3\u91d1\u73cd\u73e0\u864e", "LatinName": "Altolamprologus compressiceps"}, {"fishName": "\u5e1d\u738b\u9bdb", "LatinName": "Chilotilapia rhoadesii"}, {"fishName": "\u9e92\u9e9f\u9e1a\u9d61", "LatinName": "Cichlasoma var. Kilin Parrot"}, {"fishName": "\u85cd\u8309\u8389\u767d\u5b50", "LatinName": "Cyrtocara moorii Albino"}, {"fishName": "\u7d05\u91d1\u6ce2\u7f85", "LatinName": "Heros severus"}]

有了这个 REST API 的前端工具，接下来我们就可以开始设计後端的 Web REST API。整个设计流程如下

• 安装相关套件
• 修改 settings.py，以支援 rest framework
• 修改 urls.py，指定 URI 到 rest framework 的对象
• 修改 view.py，新增新的 rest framework 的对象

安装相关套件

安装 djangorestframework

pip3 install djangorestframework

修改 settings.py

把 rest_framework 加到 settings.py 的 INSTALLED_APPS，如下图所示。

图 4、Djando 新增应用 rest_framework

修改 urls.py

将 imgUpload 路由转向支援 restframework 的对象 FishView ，如下图所示。

图 5、Djando 设定 URI 路由

修改 view.py

在 view.py 中新增以下代码，切记是新增，还是要保留资料库的连线部分，完成程序码在下图中。说明以下程序码，FishView 这个类别继承 GenericAPIView 这个事先在 rest_framework 泛用类别中定义的类别，所以这个类别中的 get/post 方法会自动对应到前端 HTTP 请求的 GET/POST 方法，在 get 方法中使用 query_params 这个属性来读取前端所传过来的参数，而根据这个参数来决定 SQL 的查询语法。图 7. 就是查询 fid 编号为
1 的鱼类资料，图 8. 可以看出当前端使用 POST 方法後，後端会自动对应到 post 这个回应方法。

from rest_framework.generics import GenericAPIView
from rest_framework.response import Response


class FishView(GenericAPIView):

    def get(self, request, *args, **krgs):
        print('FishView->get')
        mark = request.query_params['fid']
        print('FishView->mark')
        sql = "select fishName,LatinName from fishInfoTbl"
        if mark:
            sql = sql + " WHERE mark="+ mark
        print('FishView->' + sql )
        with connection.cursor() as cursor:
            cursor.execute(sql)
            data = dictfetchall(cursor)
        return JsonResponse(data, safe=False)

    def post(self, request, *args, **krgs):
        print('FishView->post')
        data = {'message': 'post'}
        return JsonResponse(data)

图 6、 view.py的详细代码

下图是 GET 请求带参数的回应

图 7、 GET 请求带参数的回应

下图是 POST 请求的回应，要特别注意一点，http://[EC2_IPv4]:8000/imgUpload/ 这个 URI 请求中最後的 /(trailing slash)绝对不可以忽略，不然会出现 301 的请求错误。

图 8、 POST 请求的回应

参考资料

• Free and open source API testing tool, https://install.advancedrestclient.com/install
• Hypertext Transfer Protocol -- HTTP/1.1, https://datatracker.ietf.org/doc/html/rfc7231
• 用 Django REST Framework 撰写 RESTful API 并生成 Swagger 文档（上） — 用Django REST Framework 撰写 RESTful API, https://zoejoyuliao.medium.com/用-django-rest-framework-撰写-restful-api-并生成-swagger-文档-7cbef7c8e8d6
• Django REST framework 快速入门, https://q1mi.github.io/Django-REST-framework-documentation/tutorial/quickstart_zh/
• Django REST framework, https://www.django-rest-framework.org/#quickstart
• Django rest framework: How to make a simple file upload API using viewsets, https://joel-hanson.medium.com/drf-how-to-make-a-simple-file-upload-api-using-viewsets-1b1e65ed65ca
• Django returning HTTP 301?, https://stackoverflow.com/questions/1579846/django-returning-http-301