[Python] Webanwendung von 0! Hands-on (4) -Datenformung-

Überblick

Ich hatte die Möglichkeit, mit Python eine Web-App von Grund auf neu zu erstellen, also als Zusammenfassung! In diesem Artikel geht es um die Gestaltung der aus der Datenbank erhaltenen Daten. Wenn die von der API zurückgegebenen Daten nicht einheitlich sind, sind Front-End-Ingenieure in Schwierigkeiten! Dieses Mal werde ich erklären, wie Daten in einem einheitlichen Datenformat namens json zurückgegeben werden!

Artikel bisher [Python] Webanwendung von 0! Hands-on (0) ~ Umweltkonstruktion --- Qiita [Python] Webanwendung von 0! Hands-on (1) -Design, DB-Konstruktion- --Qiita [Python] Webanwendung von 0! Hands-on (2) - Hallo Welt - Qiita [Python] Webanwendung von 0! Hands-on (3) ~ API-Implementierung ~ --Qiita

Ich möchte, dass diese Person liest

• Diejenigen, die keine Programmiererfahrung haben, aber eine App erstellen möchten
• Neue Webprogrammierer
• Erfahren, aber nie eine Web-App in Python geschrieben

Tor

Ziel ist es, eine Web-App mit CURD-Funktionalität unter Verwendung von HTML, CSS, JavaScript, Python und SQL zu erstellen.

Dinge notwendig

• PC（Windows OS）
• Internetleitung
• Aufregende Gefühle

1. Ordnerstruktur

Die diesmal erstellten Ordner und Dateien lauten wie folgt.

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

2. Konvertieren Sie die aus der Datenbank abgerufenen Daten in ein Klassenobjekt

Konvertieren Sie zunächst die aus der Datenbank erhaltenen Daten in ein Klassenobjekt, um die programmgesteuerte Verarbeitung zu vereinfachen. Seit Python 3.7 gibt es eine Funktion namens Datenklassen, die das Definieren von Klassen erleichtert. Datenklassen --- Datenklassen - Python 3.8.5-Dokumentation

Führen Sie zunächst den folgenden Befehl an der Eingabeaufforderung aus.

cmd

pip install dataclasses

Erstellen Sie als Nächstes eine neue Datei mit dem Namen Todo.py im API-Ordner.

Todo.py

from dataclasses import dataclass

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

Ändern Sie dann index.py.

index.py

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

#Laden Sie ein externes Paket
from bottle import route, run
import psycopg2
from Todo import Todo #Das Laden der oben erstellten Todo-Klasse wurde hinzugefügt

#Stellen Sie eine Verbindung zur Datenbank her
def get_connection():
    return psycopg2.connect("host=localhost port=5432 dbname=TodoDatabase user=postgres password=postgres")

#Holen Sie sich Todo-Daten
@route('/todos')
def get_todos():
    #Stellen Sie eine Verbindung mit der Datenbank her
    with get_connection() as conn:
        #Cursor generieren
        with conn.cursor() as cur:
            #Führen Sie SQL aus
            cur.execute('SELECT * FROM todo')
            
            #Holen Sie sich 1 Abfrageergebnis in die Datenbank
            data = cur.fetchone()
            
            #Konvertieren Sie die von der Datenbank erfassten Daten in ein Klassenobjekt (erstellen Sie eine Todo-Klasseninstanz) und geben Sie sie zurück
            todo = Todo(data[0], data[1], data[2], data[3])
            return str(todo)


#Konfiguration der Webserverausführung
#URL"http://[host]:[port]/[route]"Wird die Zusammensetzung von
run(host='localhost', port=8080, debug=True)

Gehen Sie an der Eingabeaufforderung zum Stammordner der App, führen Sie python index.py aus, um den Server zu starten, und greifen Sie mit einem Browser auf http: // localhost: 8080 / todos zu. Die folgenden Daten werden angezeigt Ich denke.

2. Konvertieren Sie das Klassenobjekt in das JSON-Format

Lassen Sie es uns in das JSON-Format des Hauptthemas konvertieren.

Von Datenklassen generierte Klassen können mithilfe von dataclasses_json problemlos in das JSON-Format konvertiert werden. GitHub - lidatong/dataclasses-json: Easily serialize Data Classes to and from JSON

Führen Sie den folgenden Befehl an der Eingabeaufforderung aus.

pip install dataclasses-json

Edit Todo.py. Importieren Sie zusätzliche dataclasses_json und fügen Sie die Annotation dataclass_json hinzu.

Todo.py

from dataclasses import dataclass
from dataclasses_json import dataclass_json #hinzufügen

@dataclass_json #hinzufügen
@dataclass
class Todo:
    id: str
    title: str
    created: str
    is_deleted: str

Bearbeiten Sie dann index.py wie folgt.

index.py

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

#Laden Sie ein externes Paket
from bottle import route, run, response #Antwort hinzugefügt
import psycopg2
from Todo import Todo
import json #hinzufügen

#Stellen Sie eine Verbindung zur Datenbank her
def get_connection():
    return psycopg2.connect("host=localhost port=5432 dbname=TodoDatabase user=postgres password=postgres")

#Holen Sie sich Todo-Daten
@route('/todos')
def get_todos():
    #Ändern Sie das Antwortdatenformat in json
    response.headers['Content-Type'] = 'application/json'
    response.headers['Cache-Control'] = 'no-cache'

    #Stellen Sie eine Verbindung mit der Datenbank her
    with get_connection() as conn:
        #Cursor generieren
        with conn.cursor() as cur:
            #Führen Sie SQL aus
            cur.execute('SELECT * FROM todo')
            
            #Holen Sie sich 1 Abfrageergebnis in die Datenbank
            data = cur.fetchone()

            #Konvertieren Sie die von DB erfassten Daten in json und geben Sie sie zurück
            #Erstellungsdatum und -zeit (Daten)[2]) In String-Typ umwandeln
            # "ensure_ascii=False"Wenn Sie keine Nicht-ASCII-Zeichen angeben"\uXXXX"Japanisch kann nicht zurückgegeben werden, da es in Form von maskiert ist
            #Klassifizieren Sie die Daten in der Datenbank (Todo()) → Wörterbuchtyp (.__dict__）→json(json.dumps)Muss konvertiert werden zu
            todo = Todo(data[0], data[1], str(data[2]), data[3])
            return json.dumps(todo.__dict__, ensure_ascii=False)

#Konfiguration der Webserverausführung
#URL"http://[host]:[port]/[route]"Wird die Zusammensetzung von
run(host='localhost', port=8080, debug=True)

Wenn ich python index.py erneut starte, um den Server zu starten und mit einem Browser auf http: // localhost: 8080 / todos zuzugreifen, wird es jetzt so zurückgegeben! Durch die Rückgabe jedes Datenelements als Satz von Schlüsselwerten auf diese Weise wurde die Handhabung am Frontend sehr einfach. Es ist auch sehr einfach zu schreiben, wenn ein Front-End-Ingenieur nach einer API-Spezifikation fragt!

Bonus

Übrigens wurde bestätigt, dass der Browser mit Google Chrome funktioniert, aber er hat eine Erweiterung, die Daten im JSON-Format formatiert. Es ist praktisch, weil es farbig sein kann und das Panel geöffnet und geschlossen werden kann. Probieren Sie es also aus! JSON Formatter --Chrome Webstore

Zusammenfassung

Wir haben die Rest-API implementiert, die Datenbankdaten im JSON-Format zurückgibt!

nächstes Mal···

Bisher habe ich die URL direkt eingegeben, um auf die API zuzugreifen, aber jetzt möchte ich eine Seite erstellen. Nächstes Mal werde ich HTML erstellen und über JavaScript-Code darauf zugreifen!