[PYTHON] Persönliche Best-Practice-Vorlage, die verwendet werden soll, wenn Sie MVP mit Flask erstellen möchten

Beim Erstellen einer Webanwendung ist es praktisch, eine Vorlage zu haben. Dieses Mal möchte ich die Vorlage der Flask-App vorstellen, die ich normalerweise verwende.

Annahme

• OS: Windows 10
• Editor: Visual Studio Code
• Host auf Heroku
• Python 3.6
• Flask 1.1.2
• gunicorn 20.0.4
• Erstellt eine Umgebung mit Anaconda.
• In Anacondas Repository wurde jedoch nur Gunicorn nicht gefunden, daher habe ich es mit pip installiert.

Site-Übersicht

• TOP-Bildschirm
• PRJ-Ressourcenerstellungs- / Referenz- / Suchfunktion
• Facebook-Authentifizierungsfunktion

Es ist eine Webanwendung, mit der ein einfaches PRJ erstellt und verwaltet wird.

Die wichtigsten Spezifikationen der Website lauten wie folgt.

• Die angemeldete Person kann einen PRJ erstellen
• Site-Benutzer können über PRJ-Details an PRJ teilnehmen
• Nur PRJ-Mitglieder können den Fortschritt von PRJ aktualisieren
• Nur der PRJ-Ersteller (Anführer) kann den PRJ vervollständigen

Ordnerstruktur

Wie oben erwähnt, handelt es sich um eine einfache Anwendung. Es handelt sich also um eine Skala, die in eine Datei geschrieben werden kann. Ich möchte die Ordner ordentlich organisieren, um Skalierbarkeit und Lesbarkeit zu gewährleisten.

Insbesondere wurden die Ordner unter Berücksichtigung der folgenden Punkte organisiert.

• Separate Ordner nach Verarbeitungshierarchie
• Separate Dateien für jede Ressource wie TOP / PRJ

Die tatsächliche Ordnerstruktur ist wie folgt.

tree

Stamm Stammordner
│  .gitignore         
│  LICENSE
│  main.py Der erste ausgeführte Anwendungsserver
│ Procfile Wird verwendet, wenn auf Heroku ausgeführt wird
│  README.md
│  requirements.txt Wird verwendet, wenn auf Heroku ausgeführt wird
│
├─.vscode VSCode-Konfigurationsdatei (für gitignore)
│      launch.Definieren Sie die JSON-Debug-Konfiguration
│      settings.json Python Spezifikation der virtuellen Umgebung usw.
│
Business─biz Geschäftslogikspeicher
│     prj.Schreiben Sie Geschäftslogik wie py DB-Operationen und API-Aufrufe
│
├─mw Middleware (Filter) Speicher
│     prj.Schreiben Sie die Gesamtverarbeitung der mittleren Ebene, die py route und biz verbindet
│
├─Routen-Routendefinitionsspeicher (Blueprint)
│     prj.Schreiben Sie eine Routing-Definition für jede Py-Ressource
│     top.Schreiben Sie eine Routing-Definition für jede Py-Ressource
│
├─statische Speicherung statischer Inhalte
│ ├Gemeinsamer statischer Inhalt, der auf allen Seiten verwendet wird
│  │  ├─css
│  │  │      page.css
│  │  │
│  │  └─js
│  │         page.js
│  │
│ ├prj Speicherung statischer Inhalte nach Ressourcen
│  │  ├─css
│  │  │      page.css
│  │  │
│  │  └─js
│  │          page.js
│  │
│ └top Speicherung statischer Inhalte nach Ressourcen
│      ├─css
│      │      page.css
│      │
│      └─js
│              page.js
│
└─ Vorlagen Jinja Template-Speicher
   │  footer.HTML-Fußzeile
   │  header.HTML Common Header
   │  layout.Definition des HTML-Seitenlayouts
   │  top.Individuelle Seite für jede HTML-Ressource (1 Dateisystem)
   │
└─prj Einzelne Seite nach Ressource (mehrseitiges System)
           entry.html
           search.html
           show.html

Überblick über die Verarbeitung

Starten Sie den Flask-Server

Führen Sie beim Starten des Flask-Servers main.py aus.

Online-Verarbeitung (Anzeige des TOP-Bildschirms)

Wenn der Flask-Server eine Anforderung des Benutzers an die TOP-Seite akzeptiert, wird er gemäß dem folgenden Ablauf verarbeitet. Es gibt keine bestimmte Logik in der Verarbeitung, wenn die TOP-Seite angezeigt wird und die entsprechende Vorlage einfach zurückgegeben wird, sodass der Verarbeitungsablauf wie folgt ist.

• Der Benutzer greift mit einem Browser auf https: // my-site.com / zu
• Der Flask-Server (main.py) empfängt die Anfrage und leitet sie an route / top.py weiter
• route / top.py gibt die render_template ('top') Methode zurück
• Die Methode render_template ('top') wurde zurückgegeben. Verwenden Sie also template / top.html, um die TOP-Seite zu konfigurieren und das Ergebnis an den Browser zurückzugeben.

Online-Verarbeitung (Anzeige des PRJ-Bildschirms)

Der Verarbeitungsablauf des PRJ-Bildschirms wird anhand des PRJ-Detailbildschirms als Beispiel grob erläutert.

Im Gegensatz zum TOP-Bildschirm muss der PRJ-Bildschirm mehrere Aktionen wie Registrierung, Suche und Referenz implementieren. Daher hat jede Schicht die folgenden Rollen.

• route: Extrahiert Aktionen aus empfangenen Anforderungen und verteilt die Verarbeitung (Routing)
• mw: Definieren Sie die Scheckverarbeitung und die Geschäftsverarbeitung, um jede Aktion aufzurufen
• biz: Zugriff auf API und DB

Auf diese Weise kann die Verarbeitung in jede Schicht unterteilt und auf leicht verständliche Weise verwaltet werden. Außerdem können Sie leichter erkennen, wo beim Hinzufügen neuer Funktionen Korrekturen vorgenommen werden müssen.

※たとえば、新しいアクションdeleteを追加したければ、route、mw、biz、templateの各prj.py/prj.htmlにdeleteアクションに対応するメソッドを追加する、など。

• Als weiteres Beispiel können Sie beispielsweise beim Abrufen von prj-Informationen die Benutzerinformationen des prj-Erstellers von einer anderen Entität, der Benutzerentität, abrufen, indem Sie den Benutzererfassungsprozess zu mw / prj.py hinzufügen. Ich werde.

Die Verarbeitungsbeziehung zwischen Ebenen wird mit der folgenden Richtlinie implementiert.

• Jede Methode in der Routenschicht wird in Routing-Einheiten definiert
• Jede Methode der Routenschicht wird verarbeitet, indem die Methodenaufrufverarbeitung der MW-Schicht nach Ihren Wünschen kombiniert wird.
• Jede Methode der MW-Schicht ist in einer beliebigen Einheit definiert.
• Jede Methode der MW-Schicht wird verarbeitet, indem die Methodenaufrufverarbeitung der Geschäftsschicht nach Ihren Wünschen kombiniert wird.
• Jede Methode in der Geschäftsschicht führt einen bestimmten API-Aufrufprozess oder einen DB-Zugriffsprozess aus.

Implementierungsdetails

maiy.py: Startvorgang des Flask-Servers

Importieren Sie * .py in den Routenordner und App.register_blueprint (), damit verschiedene Anfragen richtig weitergeleitet werden können.

main.py

from flask import Flask, redirect, url_for

app = Flask(__name__)

from route.top import top
from route.prj import prj

app.register_blueprint(top)
app.register_blueprint(prj)

if __name__ == '__main__':
  app.debug = True
  app.run(host='127.0.0.1',port=5000)

route/top.py Nur der Vorgang zum Anzeigen des TOP-Bildschirms. Weil es das Routing ist, wenn auf die Site-Route (https: // my-site.com /) zugegriffen wird Das url_prefix von Blueprint setzt '' (leeres Zeichen).

route/top.py

from flask import Flask, render_template, request, Blueprint

top = Blueprint('top', __name__, url_prefix='')

@top.route('/')
def index():
  return render_template('top.html', title='TOP')

route/prj.py prj System Routing Definition. Setzen Sie "/ prj" in url_prefix von Blueprint. Auf diese Weise können Sie Anfragen für "https: // my-site.com / prj / ~" annehmen. Durch Definieren einer Route wie "@ prj.route (" / search ", Methods = [" POST ")) werden verschiedene Aktionen wie" https: // my-site.com / prj / search "akzeptiert. Wird in der Lage sein.

route/prj.py

from flask import Flask, render_template, request, Blueprint

from mw.prj import parse, search_prj, get_prj, create_prj, update_prj

prj = Blueprint('prj', __name__, url_prefix='/prj')

@prj.route('/')
def index():
  return render_template('prj/search.html', title='Projektsuche', prj={})

@prj.route('/search', methods=['POST'])
def search():
  q = parse(request)
  if q is None:
    #Vorzeitige Rückkehr
    return jsonify({'code': 'W00100','message': 'Der eingegebene Wert ist ungültig.'})
  
  #Suchen Sie die Datenbank mit den eingegebenen Bedingungen
  data = search_prj(q)

  #Suchergebnisse anzeigen
  return jsonify({'data': data})

@prj.route('/show/<prj_id>', methods=['GET'])
def show(prj_id):
  if prj_id is None:
    #Vorzeitige Rückkehr
    return render_template('prj/show.html', title='Projekt Details', data={})
  
  # prj_Suche DB nach ID
  data = get_prj(prj_id)

  #Detailseite anzeigen
  return render_template('prj/show.html', title='Projekt Details', data=data)

@prj.route('/entry', methods=['GET'])
def entry():
  #Erstanzeige des PRJ-Eingabebildschirms
  return render_template('prj/entry.html', title='Projekterstellung')

@prj.route('/create', methods=['POST'])
def create():
  #Erstellen Sie PRJ
  data = create_prj(parse(request))
  #Detailseite anzeigen
  return render_template('prj/show.html', title='Projekt Details', data=data, message='Ich habe ein Projekt erstellt.')

mw/prj.py Schreiben Sie einen Überprüfungsprozess und einen Biz-Aufrufprozess, um jede Aktion zu verarbeiten.

mw/prj.py

from flask import request
import biz.prj as prj

def parse(request):
  #Ausgelassen

def search_prj(dto):
  #Ausgelassen

def get_prj(prj_id):
  """
Holen Sie sich das Projekt mit der angegebenen Projekt-ID
  """
  return prj.get(prj_id)

def create_prj(dto):
  #Ausgelassen

def update_prj(data, dto):
  #Ausgelassen

biz/prj.py Schreib-API-Zugriffsverarbeitung und DB-Zugriffsverarbeitung. Das folgende Beispiel beschreibt einen Abrufprozess, der eine API über HTTP aufruft. Da API-Endpunkte und API-Schlüssel als System vertrauliche Informationen sind, werden sie so eingestellt, dass sie aus Umgebungsvariablen gelesen werden.

biz/prj.py

import requests
import os

api_endpoint = os.environ.get('API_ENDPOINT')
headers = {
  'x-api-key':os.environ.get('API_KEY')
}

def get(prj_id):
  r_get = requests.get(api_endpoint + '/prj/' + prj_id, headers=headers)
  return r_get.json()

template/layout.html Vorlage für alle HTML-Seiten. CSS und JS, die allen Seiten gemeinsam sind, können in dieser layout.html gelesen und definiert werden. Ich versuche es nicht auf jede Seite zu schreiben.

"{% Block css%}" und "{% block js%}" sind so definiert, dass CSS und JS für jede Seite einzeln gelesen werden können.

Der Inhalt des Body-Tags wird als gemeinsamer Header, Inhalt jeder Seite und gemeinsamer Fußzeile definiert.

<link rel="stylesheet" href="/static/common/css/page.css" /> <script src="/static/common/js/page.js"></script> Beim Lesen von statischem Inhalt unter statisch werden href und src mit einem Schrägstrich wie "/ static" definiert. Dies ist dieselbe layout.html für allgemeinen statischen Inhalt unter "static / common /", auch wenn sich die Seitenhierarchie von "template / top.html" und "template / prj / show.html" unterscheidet. Dies ist so, dass es mit gelesen werden kann.

template/layout.html

<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<!--Gemeinsamer Stil-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link rel="stylesheet" href="/static/common/css/page.css" />
<!--Einzelne Seite CSS-->
{% block css %}
{% endblock %}
</head>
<body class="has-navbar-fixed-top">

  <!--Header-->
  {% include "header.html" %}

  <!--Inhalt-->
  {% block content %}
  {% endblock %}

  <!--Fusszeile-->
  {% include "footer.html" %}

  <!--Gemeinsame JS-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="/static/common/js/page.js"></script>

  <!--Einzelne Seite JS-->
  {% block js %}
  {% endblock %}
</body>
</html>

template/top.html

template/top.html

{% extends "layout.html" %}
{% block css %}
<link rel="stylesheet" href="/static/top/css/page.css" type="text/css" />
{% endblock %}

{% block content %}
<section class="hero is-medium is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-centered">
        <div class="column is-narrow">
          <h1 class="title is-1">
            Site Concept
          </h1>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block js %}
<script async src="/static/top/js/page.js"></script>
{% endblock %}

template/prj/show.html

template/prj/show.html

{% extends "layout.html" %}
{% block css %}
<link rel="stylesheet" href="/static/prj/css/page.css" type="text/css" />
{% endblock %}

{% block content %}
<section class="hero is-medium is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-centered">
        <div class="column is-narrow">
          <h1 class="title is-1">
            {{ data['name'] }}
          </h1>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block js %}
<script async src="/static/prj/js/page.js"></script>
{% endblock %}

Vollständiger Code für die Beispiel-App

Der mit dieser Vorlage erstellte Anwendungscode wird auf Github veröffentlicht. https://github.com/KeitaShiratori/ripple