FlaskWeb开发-Part4-Web表单

今天药忘吃喽~ 2023-01-16 09:52 162阅读 0赞

## FlaskWeb开发-Part4-Web表单 ##

1.什么是web表单？  
web表单用来收集用户在web页面的输入。如用户名，密码等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L015TnVUaA_size_16_color_FFFFFF_t_70_pic_center]  
收集到用户的输入之后，可以调用处理函数进行存储、验证等。  
上图对应的html文件为：

<html>
    <head> 
    <meta charset="utf-8"> 
    <title>zzytest</title> 
    </head>
    <body>
    
    <form>
    	First name:<input type="text" name="firstname"><br>
    	Last name:<input type="text" name="lastname">
    </form>
    
    <form>
    	Password:<input type="password" name="pwd">
    </form>
    
    <form name="input" action="action.php" method="get">
    	Username:<input type="text" name="user">
    	<input type="submit" value="Submit">
    </form>
    
    </body>
    </html>

2.在视图函数中处理表单  
2.1 使用Flask-WTF获取用户提交内容  
web的一个常见需求是获得用户的账号、密码等提交数据。首先，进行安装：

pip install flask-wtf

wtf??? 这个名字真是：what the f\*\*k？？？  
2.2 code  
处理函数

from flask import Flask, render_template
    from flask_bootstrap import Bootstrap
    from flask_moment import Moment
    from flask_wtf import FlaskForm
    from wtforms import StringField, SubmitField
    from wtforms.validators import DataRequired
    
    app = Flask(__name__)
    app.config['SECRET_KEY'] = 'hard to guess string'
    
    bootstrap = Bootstrap(app)
    moment = Moment(app)
    
    
    class NameForm(FlaskForm):
        name = StringField('What is your name?', validators=[DataRequired()])
        //提交名字文本框
        submit = SubmitField('zzy Submit')
        //submit按钮
    
    
    @app.errorhandler(404)
    def page_not_found(e):
        return render_template('404.html'), 404
    
    
    @app.errorhandler(500)
    def internal_server_error(e):
        return render_template('500.html'), 500
    
    
    @app.route('/', methods=['GET', 'POST']) //加入post处理
    def index():
        name = None
        form = NameForm()
        if form.validate_on_submit():
            //第一次打开进入
            name = form.name.data
            form.name.data = ''
        return render_template('index.html', form=form, name=name)
        
    if __name__ == '__main__':
        app.run(debug=True)

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L015TnVUaA_size_16_color_FFFFFF_t_70_pic_center 1]  
填入名字，submit之后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L015TnVUaA_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L015TnVUaA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/b71c4b2839b643f686169fa8c2998795.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L015TnVUaA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/8fd4cc6d2f7f40bc9b375c628368cb78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L015TnVUaA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/051c0c864c904af4ac235e1e804a8ddd.png