今天我们使用form表单来实现简单的登陆界面，直接开始
一、搞一个登陆界面
我们先在HTML文件里面写写一个form表单，如下：
<form method="post">
<label>用户名:</label><input type="text" name="username"><br>
<label>密码:</label><input type="password" name="password"><br>
<label>确认密码:</label><input type="password" name="password2"><br>
<input type="submit" value="提交"><br>
</form>
然后我们在我们的python代码中只需要获取表单里的信息并对这信息进行判断，即可实现简单的登陆界面
-
因为路由默认支持GET请求，并不支持POST，所以首先我们将路由设置成POST和GET请求
@app.route('/', methods=['GET', 'POST']) -
我们对GET请求设置返回登陆界面，POST请求判断登陆信息后选择成功或者失败弹回界面
def hello_world(): # 判断请求方式是post if request.method == 'POST': # 获取参数, 并效验参数完整性, 如果有问题就进行打印 username = request.form.get('username') password = request.form.get('password') password2 = request.form.get('password2') if not all([username, password, password2]): print('参数不完整') # 效验密码 elif password != password2: print('密码不一致') # 4. 没有问题就返回'success' else: print(username) return 'success' return render_template('index.html')
我们运行一下，看看效果：
-
如果输入不全
-
如果密码不一致
-
只有成功了才会显示
二、改进一下
刚才实现的东西大多数都是在终端才能看见，用户可是看不到这些东西的，用户会以为你的网站登陆不了，所以我们改进一下，让用户可以直接看到自己的错误
from flask import flash
运用flash我们需要设置secret_key 进行加密
app.secret_key = 'huanyushi'#字符串随意，用于混淆
接着我们在HTML里需要显示字的地方添加如下代码：
{% for get_flashed_message in get_flashed_messages() %}
{{ get_flashed_message }}
{% endfor %}
最后我们将代码中print的地方全部改成flash即可
运行效果如下图所示
完整代码：
index.html--------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
<label>用户名:</label><input type="text" name="username"><br>
<label>密码:</label><input type="password" name="password"><br>
<label>确认密码:</label><input type="password" name="password2"><br>
<input type="submit" value="提交"><br>
</form>
{% for get_flashed_message in get_flashed_messages() %}
{{ get_flashed_message }}
{% endfor %}
</body>
</html>
app.py----------------------------------------------------------------
from flask import Flask,render_template,request,flash
app=Flask(__name__)
app.secret_key = 'huanyushi'
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
password2 = request.form.get('password2')
# 3. 判断参数是否填写 & 密码是否相同
if not all([username, password, password2]):
flash('参数不完整')
elif password != password2:
flash('密码不一致')
else:
return 'success'
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
三、改进两下
对于上面的判断操作属实麻烦，因为如果你要判断的东西多了，这些代码自己一个一个写就变得麻烦，而且可能会遗漏一下逻辑判断！ （比如我们刚才就忘了CSRF）
CSRF指攻击者盗用了你的身份，以你的名义发送恶意请求。包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…
造成的问题：个人隐私泄露以及财产安全。
我们这次用新的方式一次解决这些问题，避免出现这些问题
使用Flask-WTF
Flask-WTF是什么?
是一个关于表单的扩展库，可以自动生成表单的HTML代码和验证提交的表单数据，并且提供跨站请求伪造（Cross-Site Request Forgery）保护的功能，使用非常方便
使用步骤:
-
创建表单类,实例化对象
from flask_wtf import FlaskForm #从wtforms里import 文本字段，密码文本字段 表单提交按钮 from wtforms import StringField, PasswordField, SubmitField # EqualTo 比较两个字段的值；常用于要求输入两次密码进行确认的情况 # DataRequired 数据验证是否有输入 from wtforms.validators import DataRequired, EqualTo class LoginForm(FlaskForm): username = StringField('用户名:', validators=[DataRequired()]) password = PasswordField('密码:', validators=[DataRequired()]) password2 = PasswordField('确认密码:', validators=[DataRequired(), EqualTo('password', '密码填入的不一致')]) submit = SubmitField('提交') -
在模板中使用该对象
login_form=LoginForm() # 通过参数传入 return render_template('index.html', form=login_form)<form method="post"> {{ form.csrf_token() }} #提供csrf保护，不添加会出现异常 {{ form.username.label }}{{ form.username }} <br> {{ form.password.label }}{{ form.password }} <br> {{ form.password2.label }}{{ form.password2 }} <br> {{ form.submit}} <br> </form> -
在试图函数中处理表单
if login_form.validate_on_submit(): print (username, password) return 'success' else: # 我们这里做最简单的判断 当然也会有很多异常，我们一律认为参数有误，以后我们有时间细细盘点 flash('参数有误')
然后我们就大功告成了！
完整代码：
index.html--------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
{{ form.csrf_token() }}
{{ form.username.label }}{{ form.username }} <br>
{{ form.password.label }}{{ form.password }} <br>
{{ form.password2.label }}{{ form.password2 }} <br>
{{ form.submit}} <br>
</form>
{% for get_flashed_message in get_flashed_messages() %}
{{ get_flashed_message }}
{% endfor %}
</body>
</html>
app.py----------------------------------------------------------------
from flask import Flask, render_template, request, flash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo
import sys
app = Flask(__name__)
app.secret_key = 'huanyushi'
class LoginForm(FlaskForm):
username = StringField('用户名:', validators=[DataRequired()])
password = PasswordField('密码:', validators=[DataRequired()])
password2 = PasswordField('确认密码:', validators=[DataRequired(), EqualTo('password', '密码填入的不一致')])
submit = SubmitField('提交')
@app.route('/form', methods=['GET', 'POST'])
def login():
login_form = LoginForm()
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
password2 = request.form.get('password2')
if login_form.validate_on_submit():
print (username, password)
return 'success'
else:
flash('参数有误')
return render_template('index.html', form=login_form)
if __name__ == '__main__':
app.run(debug=True)
四、常用的WTForms的标准字段
| 字段类型 | 说 明 |
|---|---|
| StringField | 文本字段 |
| TextAreaField | 多行文本字段 |
| PasswordField | 密码文本字段 |
| HiddenField | 隐藏文本字段 |
| DateField | 文本字段，值为 datetime.date 格式 |
| DateTimeField | 文本字段，值为 datetime.datetime 格式 |
| IntegerField | 文本字段，值为整数 |
| DecimalField | 文本字段，值为 decimal.Decimal |
| FloatField | 文本字段，值为浮点数 |
| BooleanField | 复选框，值为 True 和 False |
| RadioField | 一组单选框 |
| SelectField | 下拉列表 |
| SelectMultipleField | 下拉列表，可选择多个值 |
| FileField | 文件上传字段 |
| SubmitField | 表单提交按钮 |
| FormField | 把表单作为字段嵌入另一个表单 |
| FieldList | 一组指定类型的字段 |
五、常见的验证函数
| 验证函数 | 说 明 |
|---|---|
| 验证电子邮件地址 | |
| EqualTo | 比较两个字段的值；常用于要求输入两次密码进行确认的情况 |
| IPAddress | 验证 IPv4 网络地址 |
| Length | 验证输入字符串的长度 |
| NumberRange | 验证输入的值在数字范围内 |
| Optional | 无输入值时跳过其他验证函数 |
| Required | 确保字段中有数据 |
| Regexp | 使用正则表达式验证输入值 |
| URL | 验证 URL |
| AnyOf | 确保输入值在可选值列表中 |
| NoneOf | 确保输入值不在可选值列表中 |
最后，希望更的再快一点，给大家整个完整的玩意出来
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
