개요

파이썬에서 0부터 웹 앱을 만들 기회가 있었기 때문에 그 요약으로!
이 기사에서는 데이터베이스에서 얻은 데이터의 성형에 대해 씁니다.
API로부터 반환되는 데이터에 통일성이 없으면, 프런트 엔드 엔지니어 씨는 곤란해 버립니다!
그래서 이번에는 json이라는 데이터 형식으로 통일하여 데이터를 반환하는 방법을 설명합니다!

지금까지 기사
【Python】0부터 웹 앱! 핸즈온(0)～환경 구축편～ - Qiita
【Python】0부터 웹 앱! 핸즈온(1)~설계, DB 구축편~ - Qiita
【Python】0부터 웹 앱! 핸즈온(2)~헬로 월드편~ - Qiita
【Python】0부터 웹 앱! 핸즈온(3)～API 실장편～ - Qiita

이런 분들께 읽어주길 바래

프로그래밍 미경험이지만 앱 만들고 싶은 분

신인 웹 프로그래머 쪽

경험자이지만 Python으로 웹 앱을 쓴 적이없는 분

목표

HTML, CSS, JavaScript, Python, SQL을 사용하여 CURD 기능을 가진 웹 앱을 만드는 것이 목표입니다.

필요한 것

PC(Windows OS)

인터넷 회선

흥미로운 감정

1. 폴더 구성

이번에 작성하는 폴더, 파일은 다음과 같습니다.

todo/
　└ api/
　　├ index.py
　　└ Todo.py

2. 데이터베이스에서 얻은 데이터를 클래스 객체로 변환

우선은 데이터베이스로부터 취득한 데이터를 프로그램상에서 취급하기 쉽게 하기 위해서 클래스 오브젝트로 변환합니다.
Python3.7 이후에는 dataclasses라는 기능이 있어 클래스의 정의가 쉬워졌습니다.
dataclasses --- 데이터 클래스 — Python 3.8.5 문서

먼저 명령 프롬프트에서 다음 명령을 실행합니다.

cmd

pip install dataclasses

그런 다음 api 폴더 아래에 Todo.py라는 새 파일을 만듭니다.

Todo.py

from dataclasses import dataclass

@dataclass
class Todo:
    id: str
    title: str
    created: str
    is_deleted: str

그리고 index.py를 수정합니다.

index.py

# -*- coding:utf-8 -*-

# 外部のパッケージを読み込む
from bottle import route, run
import psycopg2
from Todo import Todo # 上で作成したTodoクラスの読み込みを追加

# データベースへの接続を取得する
def get_connection():
    return psycopg2.connect("host=localhost port=5432 dbname=TodoDatabase user=postgres password=postgres")

# Todoデータを取得
@route('/todos')
def get_todos():
    # データベースとの接続を確立
    with get_connection() as conn:
        # カーソルを生成
        with conn.cursor() as cur:
            # SQLを実行
            cur.execute('SELECT * FROM todo')

            # データベースへの問い合わせ結果を1件取得
            data = cur.fetchone()

            # DBから取得したデータをクラスオブジェクトに変換（Todoクラスのインスタンス生成）して返却
            todo = Todo(data[0], data[1], data[2], data[3])
            return str(todo)


# Webサーバーの実行構成
# URLの "http://[host]:[port]/[route]" の構成となる
run(host='localhost', port=8080, debug=True)

명령 프롬프트에서 앱의 루트 폴더로 이동하여 python index.py를 실행하여 서버를 시작한 다음 브라우저에서 http://localhost:8080/todos에 액세스하면 다음과 유사한 데이터가 표시된다고 생각합니다.

2. 클래스 객체를 json 형식으로 변환

그럼 본제의 json 형식으로 변환해 봅시다.

dataclasses에서 생성한 클래스는 dataclasses_json을 사용하여 쉽게 json 형식으로 변환할 수 있습니다.
GitHub - lidatong/dataclasses-json: Easily serialize Data Classes to and from JSON

명령 프롬프트에서 다음 명령을 실행합니다.

pip install dataclasses-json

Todo.py를 편집합니다.
dataclasses_json을 추가로 가져오고 dataclass_json 주석을 추가합니다.

Todo.py

from dataclasses import dataclass
from dataclasses_json import dataclass_json # 追加

@dataclass_json # 追加
@dataclass
class Todo:
    id: str
    title: str
    created: str
    is_deleted: str

그리고 index.py를 다음과 같이 편집합니다.

index.py

# -*- coding:utf-8 -*-

# 外部のパッケージを読み込む
from bottle import route, run, response # response追加
import psycopg2
from Todo import Todo
import json # 追加

# データベースへの接続を取得する
def get_connection():
    return psycopg2.connect("host=localhost port=5432 dbname=TodoDatabase user=postgres password=postgres")

# Todoデータを取得
@route('/todos')
def get_todos():
    # レスポンスのデータ形式をjsonに変更
    response.headers['Content-Type'] = 'application/json'
    response.headers['Cache-Control'] = 'no-cache'

    # データベースとの接続を確立
    with get_connection() as conn:
        # カーソルを生成
        with conn.cursor() as cur:
            # SQLを実行
            cur.execute('SELECT * FROM todo')

            # データベースへの問い合わせ結果を1件取得
            data = cur.fetchone()

            # DBから取得したデータをjsonに変換して返却
            # 作成日時（data[2]）は文字列型にキャストする
            # "ensure_ascii=False"を指定しないと、非ASCII文字が "\uXXXX" の形にエスケープされるので、日本語が返却できない
            # データベースのデータをクラス（Todo()）→辞書型（.__dict__）→json(json.dumps)に変換する必要がある
            todo = Todo(data[0], data[1], str(data[2]), data[3])
            return json.dumps(todo.__dict__, ensure_ascii=False)

# Webサーバーの実行構成
# URLの "http://[host]:[port]/[route]" の構成となる
run(host='localhost', port=8080, debug=True)

다시 python index.py를 실행하여 서버를 시작하고 브라우저에서 http://localhost:8080/todos에 액세스하면 이런 식으로 돌아옵니다!

이와 같이 데이터 하나 하나가 key-value 세트가 되어 반환해 오는 것으로, 프런트 엔드에서 매우 취급하기 쉬워졌습니다.
또, 프런트 엔드 엔지니어로부터 API의 사양서를 요구받았을 때도 매우 쓰기 쉬운 것입니다!

덤

덧붙여서 브라우저는 Google 크롬에서 동작 확인하고 있습니다만, json 형식의 데이터를 포맷 해 주는 확장 기능을 넣고 있습니다.
색을 붙이거나 패널의 개폐를 할 수 있어 편리하므로 꼭 시험해라!
JSON Formatter - Chrome 웹 스토어

요약

데이터베이스 데이터를 json 형식으로 반환하는 Rest API 구현을했습니다!

다음 번은···

지금까지는 URL을 직접 입력해 API에 액세스하고 있었습니다만, 이제 페이지를 만들어 가고 싶은 것입니다.
다음 번에는 HTML을 만들고 JavaScript 코드에서 액세스해 보겠습니다!