Flask Webserver

Flask-App app.py in Hauptordner
HTML-Seite index.html in Unterordner templates
CSS- & JavaScript-Files style.css & script.js in Unterordner static

from flask import Flask, render_template # import the Flask object from the flask package
 
app = Flask(__name__) # create Flask application instance with name 'app' (name of python file)
app.debug = True
 
# HTTP REQUESTS AND RESPONSES
"""
typical shape
@app.route(...) # this decorator turns a ...
def some_fcn(): # ... regular Python function into a Flask view function which ...
    ...
    return ...  # ... converts the function's return value into a HTTP response
"""
 
@app.route('/') # '/' means that this fcn responds to request for URL /, which is main URL
def index():
    return render_template('index.html', data=data_dict) // returns HTML-file index.html stored in folder templates
 
if __name__ == '__main__': // can run app via F5 in VSCode
    app.run()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="/static/style.css" type="text/css" rel="stylesheet">
    <script src="static/script.js" async></script>
</head>
 
<body>
    ...
</body>
</html>

Hier wollen wir anschauen, wie man eine HTTP-Anfrage (Request) an einen Server stellt, um z.B. gewisse Daten zu erhalten. Eine solche Anfrage über das Web dauert ihre Zeit. Damit die ganze Website nicht einfriert bis die Antwort vom Server eingetroffen ist, sollte man seinen Code asynchron programmieren. D.h. die Website kann auch anderweitig weiterverwendet werden, während sie noch auf eine Antwort wartet. Dies realisiert man mit async und await.

Einen einfachen HTTP-Request sendet man dann wie folgt:

async function sendRequest() {
    const url = 'https://www.wiewarm.ch/api/v1/bad.json/16'; // state url
 
    let fetched = fetch(url);
    // The fetch(url) function initiates a fetch request to the specified URL.
    // It returns a PROMISE that resolves to the response to that request.
 
    let response = await fetched;
    // The await keyword pauses the execution of the function until the Promise
    // returned by fetch(url) is resolved. In this case, it's waiting for the
    // HTTP request to complete and the response to be available.
 
    console.log(response.status) // print response status, e.g. "ok"
 
    let json_data = await response.json();
    // Once the response is available, await response.json() is used to parse the
    // response as JSON. Again, we use await to pause until the JSON parsing is complete.
 
    console.log(json_data);
    // do something with data
}

In fetch wird die URL angegeben, von der etwas gefetched werden soll. Dies kann eine fremde Website sein wie let url = https://www.wiewarm.ch/api/v1/bad.json/16'; oder ein Endpoint für den eigenen Server, z.B. const url = '/dothis';

Oft möchte man einem HTTP-Request auch Daten anhängen, die dann vom Server verarbeitet werden sollen. Dazu modifiziert man den fetch-Befehl wie folgt:

fetch(url, {
    method: 'POST', // because want to send data to server s.t. it can process it
    headers: { // tells server that request body contains json data
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({data: data_to_send}) // data sent to server
})

Es gibt auch noch eine alternative, etwas kompaktere Variante für das Senden eines HTTP-Requests anschauen:

const url = '/dothis';
fetch(url, {
    method: 'POST', // because want to send data to server s.t. it can process it
    headers: { // tells server that request body contains json data
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({data: data_to_send}) // data sent to server
})
.then(function(response) {
    // then-method is called on the promise returned by fetch
    // console.log(response.status)
    // console.log(response.ok)
    return response.json(); // Return the Promise from response.json() to the next .then() in order to access the return data
}).then(function(response_data) { // deal with returned data
 
}).catch(error => { // deal with errors
    // console.error('Error:', error);
})

Sendet man einen HTTP-Request an seinen Flask-Server, kann man diesen wie folgt bearbeiten:

@app.route('/dothis', methods = ['POST'])
def do_this():
    ...
    return {"data": data} // data returned to website

Dies ist eine alte Version des Dokuments!

Flask Webserver

Grundgerüst

HTTP-Requests an Server

**Dies ist eine alte Version des Dokuments!**

Flask Webserver

Grundgerüst

HTTP-Requests an Server

Dies ist eine alte Version des Dokuments!