[Python] Web application from 0! Hands-on (4) -Data molding-

Overview

I had the opportunity to create a web application from scratch with Python, so as a summary! This article is about shaping the data obtained from the database. If the data returned by the API is inconsistent, front-end engineers will be in trouble! So, this time I will explain how to return data in a unified data format called json!

Articles so far [Python] Web application from 0! Hands-on (0) ~ Environment Construction --- Qiita [Python] Web application from 0! Hands-on (1) -Design, DB construction---Qiita [Python] Web application from 0! Hands-on (2) ~ Hello World ~ --Qiita [Python] Web application from 0! Hands-on (3) -API implementation---Qiita

I want this person to read

• Those who have no programming experience but want to make an app
• New web programmers
• Experienced but never written a web app in Python

goal

The goal is to create a web app with CURD functionality using HTML, CSS, JavaScript, Python, and SQL.

Things necessary

• PC（Windows OS）
• Internet line
• Exciting feelings

1. Folder structure

The folders and files created this time are as follows.

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

2. Convert the data obtained from the database to a class object

First, convert the data obtained from the database into a class object to make it easier to handle programmatically. Since Python 3.7, there is a function called dataclasses, which makes it easier to define classes. dataclasses --- dataclasses — Python 3.8.5 documentation

First, execute the following command on the command prompt.

cmd

pip install dataclasses

Next, create a new file called Todo.py under the api folder.

Todo.py

from dataclasses import dataclass

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

Then modify index.py.

index.py

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

#Load an external package
from bottle import route, run
import psycopg2
from Todo import Todo #Added loading of Todo class created above

#Get a connection to the database
def get_connection():
    return psycopg2.connect("host=localhost port=5432 dbname=TodoDatabase user=postgres password=postgres")

#Get Todo data
@route('/todos')
def get_todos():
    #Establish a connection with the database
    with get_connection() as conn:
        #Generate cursor
        with conn.cursor() as cur:
            #Execute SQL
            cur.execute('SELECT * FROM todo')
            
            #Get 1 result of inquiry to database
            data = cur.fetchone()
            
            #Convert the data acquired from DB to class object (create instance of Todo class) and return
            todo = Todo(data[0], data[1], data[2], data[3])
            return str(todo)


#Web server execution configuration
#URL"http://[host]:[port]/[route]"Becomes the composition of
run(host='localhost', port=8080, debug=True)

Go to the root folder of the app on the command prompt, run python index.py to start the server, and access http: // localhost: 8080 / todos with a browser, you will see the following data I think.

2. Convert class object to json format

Let's convert it to the json format of the main subject.

Classes generated by dataclasses can be easily converted to json format by using dataclasses_json. GitHub - lidatong/dataclasses-json: Easily serialize Data Classes to and from JSON

Execute the following command on the command prompt.

pip install dataclasses-json

Edit Todo.py. Import dataclasses_json additionally and add dataclass_json annotation.

Todo.py

from dataclasses import dataclass
from dataclasses_json import dataclass_json #add to

@dataclass_json #add to
@dataclass
class Todo:
    id: str
    title: str
    created: str
    is_deleted: str

Then edit index.py as follows.

index.py

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

#Load an external package
from bottle import route, run, response #Added response
import psycopg2
from Todo import Todo
import json #add to

#Get a connection to the database
def get_connection():
    return psycopg2.connect("host=localhost port=5432 dbname=TodoDatabase user=postgres password=postgres")

#Get Todo data
@route('/todos')
def get_todos():
    #Change response data format to json
    response.headers['Content-Type'] = 'application/json'
    response.headers['Cache-Control'] = 'no-cache'

    #Establish a connection with the database
    with get_connection() as conn:
        #Generate cursor
        with conn.cursor() as cur:
            #Execute SQL
            cur.execute('SELECT * FROM todo')
            
            #Get 1 result of inquiry to database
            data = cur.fetchone()

            #Convert the data acquired from DB to json and return it
            #Creation date and time (data)[2]) Cast to string type
            # "ensure_ascii=False"If you do not specify, non-ASCII characters"\uXXXX"Japanese cannot be returned because it is escaped in the form of
            #Database data class (Todo()) → Dictionary type (.__dict__）→json(json.dumps)Need to be converted to
            todo = Todo(data[0], data[1], str(data[2]), data[3])
            return json.dumps(todo.__dict__, ensure_ascii=False)

#Web server execution configuration
#URL"http://[host]:[port]/[route]"Becomes the composition of
run(host='localhost', port=8080, debug=True)

When I run python index.py again to start the server and access http: // localhost: 8080 / todos in my browser, it now returns like this! By returning each piece of data as a key-value set in this way, it became very easy to handle at the front end. It's also very easy to write when a front-end engineer asks for API specifications!

bonus

By the way, the browser has been confirmed to work with Google Chrome, but it has an extension that formats json format data. It's convenient because it can be colored and the panel can be opened and closed, so please give it a try! JSON Formatter --Chrome Web Store

Summary

We have implemented Rest API that returns database data in json format!

next time···

Until now, I used to enter the URL directly to access the API, but now I want to create a page. Next time, I will create HTML and access it from the JavaScript code!