Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- talit:flask_webserver [2023-12-18 15:22] – [Grundgerüst] sca
+++ talit:flask_webserver [2023-12-18 15:25] (aktuell) – sca
@@ Zeile 2: / Zeile 2: @@
 ===== Grundgerüst =====
+==== Übersicht ====
+Erstelle folgende Files
    * Flask-App `app.py` in Hauptordner
    * HTML-Seite `index.html` in Unterordner `templates`
    * CSS- & JavaScript-Files `style.css` & `script.js` in Unterordner `static`
+==== Setup & Ausführen ====
+   * Installiere Flask with pip
+   * Führe `app.py` aus, dann klicke auf den Link in der Konsole und du solltest auf die Website gelangen.
+==== Files im Detail ====
 <code python app.py>
@@ Zeile 70: / Zeile 81: @@
 // function that interacts with flask server app
-async function somethingHasHappened(word){
+async function interactWithServer(word){
     // send post request to server
     let response = await fetch('/interactWithServer', {
@@ Zeile 177: / Zeile 188: @@
 </code>
-# Flask Tutorial (Version 2)
-## Basic structure of project
-Create the following files and folders:
-   * `app.py`
-   * `templates / index.html`
-   * `static / style.css`
-   * `static / script.js`
-## Run server
-   * Install Flask with pip
-   * Just run `app.py`, then click on the link and the website should open.
-## Flask-App (app.py)
-```python
-from flask import Flask, render_template, request, jsonify # import the Flask object from the flask package
-import datetime
-import random
-app = Flask(__name__) # create Flask application instance with name 'app' (name of python file)
-#app.debug = True
-# HTTP REQUESTS AND RESPONSES
-# return root resource index.html for first get request "GET /"
-@app.route('/') # '/' means that this fcn responds to request for URL /, which is main URL
-def index():
-    return render_template('index.html') # can also pass dictionary with data as argument: ...('index.html', data=data_dict)
-@app.route('/interactWithServer', methods = ['POST'])
-def do_something():
-    data = request.json['data'] # save data sent by JS in variable
-    # do something with data
-    # e.g. create dictionary with response data
-    data_response = {"name":"Johanna", "age":42}
-    return data_response
-if __name__ == '__main__':
-    app.run()
-"""
-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 an HTTP response)
-"""
-```
-## HTML (index.html)
-```html
-<!-- I'm sure you know how a html file looks like ;) -->
-<!-- can access dictionary with data that is passed as argument (see app.py above) -->
-<p>My data: {{ data.name_of_key }}</p>
-```
-## JavaScript (script.js)
-```javascript
-// access html elements from withing JS
-let htmlElement = document.getElementById("idOfMyHtmlElement");
-// function that interacts with flask server app
-async function somethingHasHappened(word){
-    // send post request to server
-    let response = await fetch('/interactWithServer', {
-        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({"name":"John", "age":41}) // data sent to server
-    });
-    // write response status (hopefully not 404!) into console
-    console.log(response.status);
-    // wait for server's response, then access data sent back
-    let json_data = await response.json();
-    // now do something with data
-    htmlElement.innerHTML = json_data.nameOfKey;
-}
-// function that is executed on even
-function somethingHasHappened(event){
-    // call function that interacts with server
-    interactWithServer(inpPlainText.value);
-}
-// add event listeners (clicking button, typing something into input box, ...)
-htmlElement.addEventListener('input',somethingHasHappened)
-```