[PYTHON] Lassen Sie uns mit Flask eine Webanwendung zur Konvertierung von A nach B erstellen! Von Grund auf neu ...
Zunaechst
Ein Artikel, der Schwierigkeiten hatte, Flask zu verstehen. Ich würde mich sehr freuen, wenn Sie einen Kommentar abgeben könnten, wenn Sie einen Rat haben, dass er hier falsch ist und Sie ihn so interpretieren sollten. Hier ist das fertige Produkt. https://neutrino-converter.herokuapp.com/ OK, fangen wir an.
Überblick
--Erstellen Sie eine ** - basierte Webanwendung, die ** Zeichenfolgen in Form von A nach B konvertiert ――Wenn Sie mit NEUTRINO arbeiten, ist es mühsam, Leerzeichen in die Zeichen einzufügen. Verwenden Sie diese Option, um die Probleme zu beseitigen.
Teil 1 "Kolben vorbereiten"
Die Sprache, die ich benutze, ist Python, weil ich sie nur benutzen kann. Ich benutze ein Modul namens Flask, aber dies ist tatsächlich meine erste Erfahrung. Lassen Sie uns Schritt für Schritt von 1 erklären.
Installieren Sie den Kolben mit Pip
Ich habe "pipenv" für diese Entwicklung verwendet, aber dieser Artikel wird mit "pip" erklärt. Führen Sie den folgenden Befehl aus, um Flask zu installieren.
pip install Flask
Bereiten Sie das Verzeichnis vor
--Erstellen Sie die Ordner "app" und "models" im Verzeichnis "project".
--__init __. Py im Ordner models
--Erstellen Sie "Vorlagen", "statische" Ordner im Ordner "App".
--Erstellen Sie app.py im Ordner app.
--Erstelle run.py im Verzeichnis project.
Ich denke, das fällt dir auf.
project
├app/
│ ├templates/
│ ├static/
│ └app.py
├models/
│ └__init__.py
└run.py
Bereiten Sie HTML vor
Bereiten Sie index.html im Ordner app / templates vor.
Der Inhalt ist so.
Dies ist das Motiv der ** Ausgabeseite. ** ** **
index.html
<!DOCTYPE html>
<html>
<head>
<title>Musescore Charakterumwandlung zum Gießen</title>
</head>
<body>
<h1>Hier ist der Index.Es ist HTML!</h1>
</body>
</html>
Bereiten Sie eine Python-Datei vor
Ich werde den Inhalt des ~ .py zusammenstellen, den ich zuvor gemacht habe.
run.py
Wird beim Starten des Servers ausgeführt. Rufen Sie einfach die App an und führen Sie sie aus.
run.py
from app.app import app
if __name__ == "__main__":
app.run()
app.py
Dies ist der grundlegende Teil der Webanwendung. Lassen Sie uns vorerst "Hallo Welt" anzeigen.
app.py
from flask import Flask, render_template, request
#Erstellen eines Flask-Objekts
app = Flask(__name__)
@app.route('/')
def index():
#Zeigen Sie einfach die Zeichenfolge an
return 'hello world.'
# 〜/Wenn auf index zugegriffen wird, index.Zeichne HTML
@app.route('/index')
def post():
return render_template('index.html')
Ich werde den Inhalt später erklären. Jetzt können Sie loslegen.
Teil 2 "Lass es uns vorerst tun"
Die Mindestkonfiguration ist abgeschlossen.
Starten wir den Server einmal mit dieser Konfiguration.
Der Weg, um es zu starten, besteht darin, ** run.py in einer Umgebung auszuführen, in der ** flask ausgeführt werden kann.
python run.py
Wenn Sie es ausführen, werden verschiedene Zeichen im Terminal angezeigt, aber dies ist der Punkt, den Sie beobachten sollten.
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Wenn Sie die angezeigte URL öffnen, sollte ein Bildschirm wie dieser angezeigt werden.
Vergleichen wir diesen Bildschirm mit dem Python-Code.
app.py
@app.route('/')
def index():
return 'Hello World'
Die Bedeutung dieses Codes ist wie folgt.
- Wenn Sie auf
/zugreifen, dh auf http: //127.0.0.1: 5000 / `, wird die Funktion aufgerufen. - Die Funktion gibt einfach den String
Hello Worldzurück. - Der Rückgabewert dieser Funktion, "Hello World", wird auf der Seite angezeigt.
Hast du es irgendwie verstanden?
Natürlich haben Sie auch einen solchen Code eingegeben.
app.py
# 〜/Wenn auf index zugegriffen wird, index.Zeichne HTML
@app.route('/index')
def post():
return render_template('index.html')
Die Bedeutung dieses Codes ist wie folgt.
--Wenn Sie auf / index zugreifen, dh http: //127.0.0.1: 5000 / index, wird die Funktion aufgerufen.
- Die Funktion gibt render_template ('index.html') zurück.
--
rendern… zeichnen --template… Vorlage - Mit anderen Worten bedeutet "render_template (" index.html ")" **, um "index.html" als Vorlage zu beschreiben **.
- Wenn Sie auf "http: //127.0.0.1: 5000 / index" zugreifen, wird "index.html" angezeigt.
Es ist wie es ist. Ich glaube, ich habe den Mechanismus verstanden. Irgendwie ist es okay, weil ich die detaillierte Bedeutung nicht kenne ...
Teil 3 "Lass uns eine Seite machen"
Rezension
Diese Seite möchte ich dieses Mal machen.
Lassen Sie uns die notwendigen Elemente für diese Seite erstellen.
Erstellen Sie index.html
Das HTML, das ich zuvor berührt habe, war ein normales HTML, aber von hier aus werde ich ein etwas anderes HTML schreiben.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Musescore Charakterumwandlung zum Gießen</title>
</head>
<body>
<!-- form -->
<form action="/" method="POST">
<textarea name="before" rows="4" cols="40">Fügen Sie den Text hier ein</textarea>
<input type="submit" value="Umwandlung">
{% if body %}
<textarea name="after" rows="4">{{body}}</textarea>
{% else %}
<textarea name="after" rows="4">Wenn Sie die Taste drücken, wird sie hier ausgegeben</textarea>
{% endif %}
</form>
<!-- form -->
</body>
</html>
Einige Charaktere sind unbekannt, also erklären wir sie Schritt für Schritt.
--html zwischen {% wenn A%} und {% endif%} wird nicht angezeigt, es sei denn, Bedingung A ist erfüllt.
Ich bin mir nicht sicher, wie ich das schreiben soll, aber wenn Sie mit Web-Apps vertraut sind, erklären Sie bitte ...
- Wenn das Element "body" von der Kolbenseite empfangen wird, wird es in "{{body}}" eingefügt.
Es fühlt sich an, als wären Sie daran gewöhnt, wenn Sie von der Programmierung gebissen wurden. Lassen Sie uns nun die folgenden Punkte beachten.
Wenn das Element
bodyvon der Kolbenseite empfangen wird, wird es in{{body}}eingefügt.
Wie sieht das aus?
Hier ist die app.py, die tatsächlich den Element body von der Kolbenseite passiert.
app.py
@app.route('/', methods=['post'])
def post():
body = 'hoge'
return render_template('index.html', body=body)
Es ist eine einfache Geschichte, bereiten Sie einfach "body" als Argument für den Rückgabewert vor. Umgekehrt wird es so, wenn ein Element von der "HTML-Seite" zur "Flask-Seite" übergeben wird.
index.html
<form action="/" method="POST">
<textarea name="before" rows="4" cols="40">Fügen Sie den Text hier ein</textarea>
<input type="submit" value="Umwandlung">
</form>
app.py
body = request.form['before']
--Erstellen Sie ein POST-Formular und geben Sie die Seite an, auf der die Aktion ausgeführt werden soll, wenn Sie dieses Formular mit "Aktion" ausführen.
- Setzen Sie
textareaaufname =" before ". - Setzen Sie
type =" submit "aufinput. - Wenn Sie in diesem Zustand die Taste drücken, wird die Seite in Form von ** angezeigt. Beziehen des auf der Kolbenseite angegebenen Elements von HTML **.
Mit anderen Worten
Das ist
Es wird so sein
... Oh, der Vorgang wird übersprungen. Folgen wir den schnellen Schritten.
Teil 4 "Erstellen eines Mechanismus zum Konvertieren von Zeichenketten"
Das ist richtig, wie ich die Zeichenfolge konvertiert habe, wird übersprungen.
Legen Sie Ihre eigenen Module in den Modellordner
Wenn Sie Ihre eigenen Module mit Flask verwenden möchten, fügen Sie sie im Ordner "models" zusammen. Der Inhalt des Ordners sollte so aussehen.
models/
├__init__.py
└convert.py
Durch Setzen von "__init __. Py" können Sie aus Modellen importieren.
Referenz: Zusammenfassung zum Importieren von Dateien in Python 3 \ -Qiita
Spielen wir jetzt mit convert.py.
Konvertieren Sie eine Zeichenfolge mit einem regulären Ausdruck
Dieses Mal werde ich mit regulären Ausdrücken angreifen. Ich wollte sie in einer Funktion zusammenfügen, aber ehrlich gesagt schien es nicht die Anzahl der Zeilen zu sparen, also habe ich sie zusammengesetzt.
Wenn ich das Verfahren erkläre, sieht es so aus.
--Suchen Sie nach einer Zeichenfolge mit (.) Und setzen Sie mit \ 1 ein Leerzeichen dahinter, ohne Änderungen an der Zeichenfolge vorzunehmen.
\s(Ja|Shu|Yo|〜)damitTrauerSuchen Sie nach der Zeichenfolge und entfernen Sie den zusätzlichen Speicherplatz.
Ich denke, es gibt einen intelligenteren Weg, dies zu tun, aber bitte lassen Sie es mich wissen. --Suchen Sie mit
\ s {2,}nach zwei oder mehr aufeinanderfolgenden Leerzeichen und löschen Sie die zusätzlichen Leerzeichen.
convert.py
import re
def convert(arg: str):
pattern_before = r'(.)'
pattern_after = r'\1 '
s = arg
s = re.sub(pattern_before, pattern_after, s)
pattern_before = r'\s(Ja|Shu|Yo|Ah|ich|U.|Eh|Mm|Turbolader|Yu|Yo|EIN|ich|U.|E.|Oh)'
pattern_after = r'\1'
s = re.sub(pattern_before, pattern_after, s)
pattern_before = r'\s{2,}'
pattern_after = r' '
s = re.sub(pattern_before, pattern_after, s)
return s
Rufen Sie convert.py mit app.py auf
Rufen wir nun convert.py von app.py auf und verwenden es.
app.py
from models import convert
@app.route('/', methods=['post'])
def post():
body = request.form['before']
body = convert.convert(body)
return render_template('index.html', body=body)
--Import konvertieren mit "von Modellen importieren konvertieren".
- Holen Sie sich das Vorher-Element, indem Sie auf die Schaltfläche im Formular klicken
- Führen Sie die Funktion
convertfürbeforeaus. --Depizieren Sie die konvertierte Zeichenfolgebody
Es ist wie es ist.
Mit anderen Worten, das ist endlich
Das ist
Wird so sein
Ich konnte es richtig erklären.
Teil 5 "Sobald die Funktion abgeschlossen ist, das nächste Erscheinen"
Es sieht ein wenig hässlich aus, also verwenden Sie Bootstrap, um das Erscheinungsbild anzupassen.
Im Ordner "app" befindet sich ein Ordner mit dem Namen "static". Hier werden CSS, JS usw. eingefügt. Dieses Mal verwenden wir nur CSS, sodass wir keinen JS-Ordner vorbereiten.
app/
└static/
└css
└bootstrap.min.css
Lassen Sie uns mit der Konfiguration fortfahren.
Weil du mit Bootstrap spielst ... index.html, nicht wahr?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Musescore Charakterumwandlung zum Gießen</title>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron text-center">
<h1 class="display-4">Lyrics -> Musescore</h1>
<p class="lead">for NEUTRINO</p>
<hr class="my-4">
<p>Es ist ein Typ, der den Texten automatisch ein Leerzeichen hinzufügt, wenn Musescore für NEUTRINO vorbereitet wird.</p>
<p>Aiue Okyakyukyo → Aiue Okyakyukyo</p>
</div>
<!-- form -->
<form action="/" method="POST">
<div class="container-fluid">
<div class="row justify-content-around form-group">
<textarea class="col-11 col-md-4 form-control" name="before" rows="4" cols="40">Fügen Sie den Text hier ein</textarea>
<div class="col-md-1 my-md-auto">
<input type="submit" class="btn btn-primary btn-lg" value="Umwandlung">
</div>
{% if body %}
<textarea class="col-11 col-md-4 form-control" name="after" rows="4">{{body}}</textarea>
{% else %}
<textarea class="col-11 col-md-4 form-control" name="after" rows="4">Wenn Sie die Taste drücken, wird sie hier ausgegeben</textarea>
{% endif %}
</div>
</div>
</form>o
<!-- form -->
<footer class="text-muted ">
<div class="container">
<p class="text-center">
Kontaktieren Sie uns hier:<a href="https://twitter.com/_Sotono">@_Sotono</a>
</p>
</div>
</footer>
</body>
</html>
Jetzt sieht es so aus.
Es war eine lange Reise ... Danach können Sie frei damit umgehen, indem Sie es veröffentlichen, kochen oder backen.
Extra Edition "Verstopfter Ort und Lösung"
--Q. Ich führe im Test app.py aus, aber es steht" Kein Modul namens app"und funktioniert nicht ... --A. Lass unsrun.py` laufen, es wird alles lösen.
――Q. Ich spucke einen langen Fehler aus, den ich nicht verstehe ... jinja2.exceptions.TemplateNotFound wird am Ende geschrieben ...
- A.
Index.htmlundapp.pypassen möglicherweise nicht gut zusammen. Überprüfen wir den Code ordnungsgemäß. Rufen Sie ein Element auf, das nicht existiert?
abschließend
Es wurde ein langer Satz. Diesmal habe ich das gemacht, weil ich beim Komponieren als Hobby "Amendokuse !!!" dachte. Ich denke, NEUTRINO ist eine erstaunliche Technologie und freue mich auf zukünftige Entwicklungen. Ende.
Recommended Posts