iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
AI & Data

觀賞魚辨識的YOLO全餐系列 第 6

Django + MariaDB + RESTful API + ARC-Day 06

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)中得到結果,如下圖所示。

https://ithelp.ithome.com.tw/upload/images/20210906/20129510SxGGq4TsNy.png
圖 1、Advanced REST client 的 GET 請求

可以發現透過 ARC 來進行請求的回應結果是中文,而非瀏覽器所顯示經過編碼(encode)的結果,那是因為 ARC 會將回應結果在進行解碼(decode)的關係,如果要看原始的回應結果可以回應中選擇 RAW 就可以看到如先前網頁瀏覽器看到的結果,如下圖所示。這是一個很重要的功能,因為我們所撰寫的前端程式真正處理的就是這樣的資料,而非上一個圖。

https://ithelp.ithome.com.tw/upload/images/20210906/201295104Sm1O62qwI.png
圖 2、Advanced REST client 查看 RAW 的回應

此外,也可以選擇觀看 Headers 這個視圖,這表示的是實際的 HTTP 請求的格式,關於 HTTP 1.1 請求格式,建議去看由網際網路工程任務組 (Internet Engineering Task Force, IETF) 所制定的 RFC 2616這份文件,有詳細介紹 HTTP 協定的請求與回應格式與相關規範,要進行 Web API 設計時,最好要先了解。下圖則是利用 ARC 來查看 HTTP 的請求與回應表頭(Headers)。

https://ithelp.ithome.com.tw/upload/images/20210906/20129510fexJKkp555.png
圖 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,如下圖所示。

https://ithelp.ithome.com.tw/upload/images/20210906/20129510e2vZInc6qq.png
圖 4、Djando 新增應用 rest_framework

修改 urls.py

將 imgUpload 路由轉向支援 restframework 的對象 FishView ,如下圖所示。

https://ithelp.ithome.com.tw/upload/images/20210906/20129510uo2RYEDw0P.png
圖 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)

https://ithelp.ithome.com.tw/upload/images/20210906/20129510EOk9GMPa9d.png
圖 6、 view.py的詳細代碼

下圖是 GET 請求帶參數的回應

https://ithelp.ithome.com.tw/upload/images/20210906/20129510noU9JyMdiM.png
圖 7、 GET 請求帶參數的回應

下圖是 POST 請求的回應,要特別注意一點,http://[EC2_IPv4]:8000/imgUpload/ 這個 URI 請求中最後的 /(trailing slash)絕對不可以忽略,不然會出現 301 的請求錯誤。

https://ithelp.ithome.com.tw/upload/images/20210906/20129510FIxdmqY950.png
圖 8、 POST 請求的回應

參考資料


上一篇
Django + MariaDB 在 Amazon Linux 2-Day 05
下一篇
RESTful API 在 Amazon Linux 2 上傳圖片實作-Day 07
系列文
觀賞魚辨識的YOLO全餐38

尚未有邦友留言

立即登入留言