Guten Abend zusammen!
Ich dreh' mich hier mit meinem Gebastel seit Tagen im Kreis und komme einfach nicht weiter. Könnte mir mal bitte jemand auf die Sprünge helfen?
Und zwar geht es mir drum, dass ich mir ein Web-Frontend für meine Gartenbewässerung bauen möchte. Da bin ich aber zur Zeit noch meilenweit entfernt von, da ich selbst mit Code-Blöcken aus diversen Tutorials nicht zurecht komme.
Was ich habe:
1) app.py Python Skript:
from flask import Flask, abort, request, render_template, json
app = Flask(__name__)
app.static_folder = 'static'
@app.before_request
def limit_remote_addr():
if request.remote_addr != '127.0.0.1':
abort(403) # Forbidden
@app.route('/')
def hello():
return render_template('index.html')
@app.route('/heyhoo/')
def hello2():
return render_template('heyhoo.html')
@app.route('/signup')
def signup():
return render_template('signup.html')
@app.route('/signupuser', methods=['POST'])
def signupuser():
user = request.form['username'];
password = request.form['password'];
print(password);
return render_template('heyhoo.html')
# return json.dumps({'status':'OK','user':user,'pass':password});
if __name__ == '__main__':
app.run(debug=True)
Alles anzeigen
Die ersten beiden Routen zu index.html und heyhoo.html funktionieren. Beide haben jeweils einen statischen Link auf die andere Seite, und alles funktioniert.
Die Route zur signup.html bringt mir ein Anmeldeformular. Ab hier klappt es aber nicht. Ich hätte erwartet, dass ich über Klick auf den Button dann in der letzten Route die eingegebenen Daten zurück nach Python bekomme.
2) signup.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">
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="icon" href="../../favicon.ico"> -->
<title>Signin Template for Bootstrap </title>
<!-- Bootstrap core CSS -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom styles for this template
<link href="{{ url_for('static', filename='css/signin.css') }}" rel="stylesheet"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="{{ url_for('static', filename='js/script.js') }}"> </script>
</head>
<body>
<div class="container">
<form class="form-signin" action="/signup" method="post" role="form">
<h2 class="form-signin-heading">Please Sign Up </h2>
<input type="email" name="username" class="form-control" placeholder="Email address" required autofocus>
<input type="password" name="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="button">Register</button>
</form>
</div>
</body>
</html>
Alles anzeigen
3) sript.js JavaScript Datei
$(function() {
$('button').click(function() {
var user = $('#txtUsername').val();
var pass = $('#txtPassword').val();
$.ajax({
url: '/signupuser',
data: $('form').serialize(),
type: 'POST',
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});
});
});
Alles anzeigen
Was mir zum Beispiel auffällt: Wenn ich den Knopf drücke, dann kann ich in WingIDE nicht "live" die print-Aufgabe sehen.
Aber wenn ich nun ein Skript ändere und der Server sich automatisch neu startet, dann werden plötzlich die print-Ausgaben alle hintereinander ausgeben. dgdgd ist der besagte String aus dem Formular.
127.0.0.1 - - [05/Mar/2018 22:26:59] "POST /signupuser HTTP/1.1" 200 -
127.0.0.1 - - [05/Mar/2018 22:27:40] "POST /signupuser HTTP/1.1" 200 -
127.0.0.1 - - [05/Mar/2018 22:27:40] "POST /signupuser HTTP/1.1" 200 -
127.0.0.1 - - [05/Mar/2018 22:27:42] "POST /signupuser HTTP/1.1" 200 -
127.0.0.1 - - [05/Mar/2018 22:27:42] "POST /signupuser HTTP/1.1" 200 -
* Detected change in 'e:\\Marcus\\Documents\\Python Projekte\\wassersteuerung\\app.py', reloading
dgdgd
dgdgd
dgdgd
dgdgd
dgdgd
* Restarting with stat
* Debugger is active!
* Debugger PIN: 716-288-367
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Alles anzeigen
Im Grunde möchte ich "nur" was ganz einfaches:
1) Daten vom Frontend ans Backend geben
2) Daten vom Backend ans Frontend geben
3) Unter "Frontend" verstehe ich eine Webseite, wo hinterher ein paar Knöpfchen drauf sind für die Ventile, sowie eine zweite Seite mit "Einstellungen" etc.
4) Backend ist für mich die gesamte Logik der Bewässerung, welche in Abhängigkeit von den im Frontend gemachten Einstellungen laufen soll.
Nur wenn ich bei Google danach suche, dann werde ich erschlagen von unterschiedlichen Meinungen bezüglich dem besten JS-Framework und was weiß ich noch alles.
Ich hatte mich auf "Bootstrap" und "jQuery" eingeschossen, hauptsächlich weil ich dazu die passenden Widgets gefunden hatte. (Toggle-Button scheint nicht jedes Framework zu haben)
Würde mich sehr über Hilfe freuen, damit ich mal ein Stück weiter komme.
Vielen Dank.
Gruß,
Marcus