Flask表单(Flask-WTF)

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 %}

 

转载于:https://www.cnblogs.com/wongbingming/p/6781770.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Flask 中实现登录界面,可以按照以下步骤进行: 1. 安装 Flask-WTF 扩展,用于处理表单。 ``` pip install Flask-WTF ``` 2. 创建一个表单类,定义表单中需要的字段,比如用户名和密码等。 ```python from flask_wtf import FlaskForm from wtforms import StringField, PasswordField, SubmitField from wtforms.validators import DataRequired, Length class LoginForm(FlaskForm): username = StringField('用户名', validators=[DataRequired(), Length(1, 20)]) password = PasswordField('密码', validators=[DataRequired(), Length(6, 20)]) submit = SubmitField('登录') ``` 3. 创建一个路由,用于显示登录界面和处理登录请求。 ```python from flask import render_template, redirect, url_for from flask_login import login_user from yourapp.models import User from yourapp.forms import LoginForm @app.route('/login', methods=['GET', 'POST']) def login(): form = LoginForm() if form.validate_on_submit(): user = User.query.filter_by(username=form.username.data).first() if user and user.check_password(form.password.data): login_user(user) return redirect(url_for('index')) else: flash('用户名或密码错误', 'danger') return render_template('login.html', form=form) ``` 4. 在模板中渲染表单,并可以使用 Bootstrap 等前端框架美化界面。 ```html {% extends "base.html" %} {% block content %} <div class="container"> <h2>登录</h2> <form method="post"> {{ form.hidden_tag() }} <div class="form-group"> {{ form.username.label }} {{ form.username(class="form-control") }} </div> <div class="form-group"> {{ form.password.label }} {{ form.password(class="form-control") }} </div> {{ form.submit(class="btn btn-primary") }} </form> </div> {% endblock %} ``` 以上就是 Flask 中实现登录界面的基本步骤。需要注意的是,我们使用了 Flask-WTF 扩展来处理表单,并使用了 Flask-Login 扩展来处理用户的登录和认证。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值