1、request.from獲取POST表單數據 # hello.py # form.html # home.html #signin-ok.html 2、使用Flask-WTF擴展 # hello.py # index.py 附：共同的基模板 # base.html ...
1、request.from獲取POST表單數據
# hello.py
1 #coding:utf-8 2 3 from flask import Flask,request,render_template 4 5 app = Flask(__name__) 6 7 @app.route('/',methods=['GET']) #methods是一個列表 8 def home(): 9 return render_template('home.html') 10 11 @app.route('/signin',methods=['GET']) 12 def signin_form(): 13 return render_template('form.html') 14 15 @app.route('/signin',methods=['POST']) 16 def signin(): 17 username = request.form['username'] 18 password = request.form['password'] 19 if username == 'admin' and password == 'password': 20 return render_template('signin-ok.html',username=username) 21 else: 22 return render_template('form.html',message='用戶名或者密碼錯誤，請重新登陸>>',username=username) 23 24 25 if __name__ == '__main__': 26 app.run()
# form.html
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>登陸界面</title> 6 </head> 7 <body> 8 {% if message %} 9 <p style="color:red">{{ message }}</p> 10 {% endif %} 11 <form action='/signin' method="post"> 12 <legend>請登陸您的賬號：</legend> 13 <input type="text" name="username" placeholder='Username' value="{{ username }}"><br> 14 <input type="password" name="password" placeholder="Password" value="{{ password }}"><br> 15 <button type="submit">登陸</button> 16 </form> 17 </body> 18 </html>
# home.html
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>主頁</title> 6 </head> 7 <body> 8 <h1>你好，歡迎來到首頁</h1> 9 <p><a href="/signin">點擊登陸</a></p> 10 </body> 11 </html>
#signin-ok.html
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>登陸成功</title> 6 </head> 7 <body> 8 <h1>歡迎你，{{ username }}</h1> 9 </body> 10 </html>
2、使用Flask-WTF擴展
# hello.py
1 #coding:utf-8 2 3 from flask import Flask,render_template 4 from flask.ext.bootstrap import Bootstrap 5 from flask.ext.wtf import Form 6 from wtforms import StringField,SubmitField 7 from wtforms.validators import Required 8 9 app = Flask(__name__) 10 app.config['SECRET_KEY']='hard to guess string' 11 bootstrap = Bootstrap(app) 12 13 14 class NameForm(Form): 15 name = StringField('what is your name?',validators=[Required()]) 16 submit = SubmitField('Submit') 17 18 @app.route('/',methods=['GET','POST']) 19 def index(): 20 name = None 21 form = NameForm() 22 if form.validate_on_submit(): 23 name = form.name.data #沒有這一步，submit後name=None 24 form.name.data = '' #沒有這一步，submit後文字框還會遺留上一次輸入的文字 25 return render_template('index.html',form=form,name=name) 26 27 if __name__ == '__main__': 28 app.run()
# index.py
1 {% extends "base.html" %} 2 {% import "bootstrap/wtf.html" as wtf %} 3 4 {% block title %}Flasky{% endblock %} 5 6 {% block page_content %} 7 <div class="page-header"> 8 <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1> 9 </div> 10 <!-- 導入wtf.html渲染整個Flsk-WTF表單，參數form是hello.py中傳過來的form實例--> 11 {{ wtf.quick_form(form) }} 12 {% endblock %}
附：共同的基模板
# base.html
1 {% extends "bootstrap/base.html" %} 2 {% block title %}Flasky{% endblock %} 3 4 {% block navbar %} 5 <div class="navbar navbar-inverse" role="navigation"> 6 <div class="container"> 7 <div class="navbar-header"> 8 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 9 <span class="sr-only">Toggle navigation</span> 10 <span class="icon-bar"></span> 11 <span class="icon-bar"></span> 12 <span class="icon-bar"></span> 13 </button> 14 <a class="navbar-brand" href="/">Flasky</a> 15 16 </div> 17 <div class="navbar-collapse collapse"> 18 <ul class="nav navbar-nav"> 19 <li><a href="/">Home</a></li> 20 <li><a href="/">Twitter</a></li> 21 <li><a href="/">Blog</a></li> 22 </ul> 23 </div> 24 </div> 25 </div> 26 {% endblock %} 27 28 29 {% block content %} 30 <div class="container"> 31 <div class="page-header"> 32 {% block page_content %}{% endblock %} 33 </div> 34 </div> 35 36 {% endblock %}
