13. gyakorlat¶
A gyakorlat anyaga¶
Flask¶
A Flask egy webes keretrendszer a Pythonhoz, aminek a segítségével könnyedén lehet Python alapú webapplikációkat készíteni. Ez az egyik legnépszerűbb keretrendszer, ugyanis modern, naprakész és a legkisebb alkalmazás megírásától komplexebb rendszerekhez is alkalmas. A Flask egyszerű és könnyen tanulható, szintaktikája könnyen olvasható. A modul saját webszervert képes indítani, így nincs szükség például Apache szerverre. A Flask alapvetően nem objektumorientált, azonban vannak hozzá kiegészítések, amelyek segítségével részben azzá tehető, de ezeket a gyakorlaton nem fogjuk tárgyalni.
A Flaskes metódusok visszatérési értéke minden esetben string, dictionary, tuple, Response instance vagy WSGI callable kell hogy legyen, ugyanis a böngészők ezeket tudják feldolgozni HTML-ként.
Felépítése¶
A program elején létrehozzunk az app változóban egy Flask osztályt aminek átadjuk a "name" paramétert, ami a fájl teljes elérési útvonala. A program végén erre az app változóra hívjuk meg a run függvényt. Ennek különböző paraméterezéseket adhatunk meg. Ezek között tudjuk megadni a függvényeket, amiket szeretnénk, hogy a böngészőben lefussanak.
Útvonalak¶
A függvény deklarálása előtt kell megadni a "@app.route()" dekorátorban string paraméterként. Egy függvényhez több ilyen dekorátor is tartozhat, ilyenkor az adott függvény több webes útvonalon is elérhető lesz.
Egyszerű pontos idő web alkalmazás¶
import datetime
import json
from flask import Flask
app = Flask(__name__)
@app.route('/now')
def now():
# return datetime.datetime.now()
return datetime.datetime.now().isoformat()
@app.route('/now/json')
def now_json():
return json.dumps(dict(current_date=datetime.datetime.now().isoformat()))
@app.route('/')
@app.route('/hello')
def hello():
return 'Hello, World!'
if __name__ == '__main__':
app.run(debug=False, host="127.0.0.1")
Webalkalmazás HTML struktúrával¶
A flask modulból be lehet importálni a render_template nevű függvényt, ami HTML sablonfájlt tölt be, értelmez, tölt ki adatokkal, majd a kész HTML szöveggel tér vissza. A Flaskba beépített Jinja templating engine-nek köszönhetően lehet utasításokat írni dupla kapcsoszárójelek között megadva, ahogy az látható is a kódrészletben.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello():
return render_template("index_simple.html")
if __name__ == '__main__':
app.run(debug=False, host="127.0.0.1")
index_simple.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask webapp</title>
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
Dobókocka és dalszöveg generátor¶
Lehetséges az elérési útvonalban paramétereket is átadni, ahogy azt a következő kódrészletben láthatjuk. Ezeknek a paraméterek meghatározhatjuk a típusát is, így csak egyféle változótípusra fog létezni az útvonal, ha más típusút adunk meg 404-es hibát kapunk.
import random
from flask import Flask, render_template, Markup
import markov_lyrics
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
@app.route('/dobokocka/<int:num>')
# @app.route('/dobokocka/<num>')
def dobokocka(num):
return f"<h1>{random.randint(0, num)+1}</h1>"
@app.route('/generate_lyrics')
def generate_lyrics():
return render_template("lyrics.html", generated_lyrics=Markup(markov_lyrics.get_lyrics("taylor_swift")))
@app.route('/generate_lyrics/<string:eloado>')
def generate_lyrics_by_eloado(eloado):
return render_template("lyrics.html", generated_lyrics=Markup(markov_lyrics.get_lyrics(eloado)))
if __name__ == '__main__':
app.run(debug=False, host="127.0.0.1")
Dalszöveg generátor lenyíló listával és POST metódusokkal megvalósítva¶
from flask import Flask, render_template, Markup, request, url_for, redirect
import markov_lyrics
app = Flask(__name__)
eloadok = {
"Taylor Swift": "taylor_swift",
"Three Days Grace": "three_days_grace",
"Linkin Park": None,
"Queen": None
}
@app.route('/')
def index():
return render_template("index.html")
@app.route('/generate_lyrics')
def generate_lyrics():
return render_template("lyrics.html", eloadok=eloadok, generated_lyrics=Markup(markov_lyrics.get_lyrics("taylor_swift")))
@app.route('/generate_lyrics/<string:eloado>')
def generate_lyrics_by_eloado(eloado):
return render_template("lyrics.html", eloadok=eloadok, generated_lyrics=Markup(markov_lyrics.get_lyrics(eloado)))
@app.route('/handle_new', methods=['POST'])
def handle_data():
eloado_post = request.form['eloado']
return redirect(url_for("generate_lyrics_by_eloado", eloado=eloado_post))
if __name__ == '__main__':
app.run(debug=False, host="127.0.0.1")
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('index')}}">Kezdőlap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Rólunk</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} Dalszöveg Generátor! {% endblock %}</h1>
<div class="jumbotron">
<h1 class="display-4">{{ eloado }}</h1>
<p class="lead">
{{ generated_lyrics }}
</p>
<hr class="my-4">
<p class="lead">
<a href="{{ url_for('generate_lyrics') }}">Kérek egy dalszöveget!</a>
<!-- <form action="{{ url_for('handle_data') }}" method="post">-->
<!-- <select name="eloado" id="eloado">-->
<!-- <option value="taylor_swift">Taylor Swift</option>-->
<!-- <!– <option value="linkin_park">Linkin Park</option>–>-->
<!-- <option value="three_days_grace">Three Days Grace</option>-->
<!-- </select>-->
<!-- <input type="submit">-->
<!-- </form>-->
<form action="{{ url_for('handle_data') }}" method="post">
<select name="eloado" id="eloado">
{% for nev, url in eloadok.items() %}
{% if url %}
<option value="{{ url }}">{{ nev }}</option>
{% else %}
<option value="" disabled>{{ nev }}</option>
{% endif %}
{% endfor %}
</select>
<input type="submit">
</form>
</p>
</div>
{% endblock %}