美文网首页flask学习
Flask-表单学习

Flask-表单学习

作者: 你就像只铁甲小宝 | 来源:发表于2019-02-16 15:40 被阅读4次

第一种方式,使用html写的表单


1.设置路由,和视图函数

 常用的html表单
@app.route('/form_1')
def form_1():
    return render_template('forms/forms_1.html')

2.来编写forms_1.html文件

<form method="post">
<label for="username">Username</label><br>
<input type="text" name="username" placeholder="Héctor Rivera"><br>
<label for="password">Password</label><br>
<input type="password" name="password" placeholder="19001130"><br>
<input id="remember" name="remember" type="checkbox" checked>
<label for="remember"><small>Remember me</small></label><br>
<input type="submit" name="submit" value="Log in">
</form>

第二种方式,用Flask-wft渲染表单


1.安装,然后在主模块中设置秘钥

安装:
pip install Flask-wtf

设置秘钥,字符串随便设置,在实际中用的是随机值。:
app.secret_key = 'secret string'

2.然后要构造一个表单函数

forms.py

from flask_wtf import FlaskForm
from flask_wtf.file import FileRequired, FileAllowed
from wtforms import StringField, PasswordField, BooleanField, SubmitField, IntegerField, FileField
from wtforms.validators import DataRequired, Length, ValidationError


class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired(), Length(8)])
    remember = BooleanField('Remember me')
    submit = SubmitField(' Log in ')

validators里的是验证器:DataRequired()验证要有数据,Length验证长度。

3.最后主模块中引入,编写函数。

from forms import LoginForm

@app.route('/')
def index():
    return render_template('index.html')

# 使用Flask-wtf渲染的表单
@app.route('/basic', methods=['GET', 'POST'])
def basic():
    form = LoginForm()
    # vlidate_on_submit:数据有效且为post请求返回True,反之False.
    if form.validate_on_submit():
        username = form.username.data
        flash(f'welcome home,{username}')
        return redirect(url_for('index'))
    return render_template('forms/login.html', form=form)
  • 若为post请求,验证数据,重定向到index页面,利用flash闪现出消息,'welcome home,xxxx'
  • 若为get请求,渲染login.html模板

4. 编写html页面:

login.html

<form method="post">
{{ form.csrf_token }} <!-- 渲染CSRF令牌隐藏字段 -->
{{ form.username.label }}{{ form.username }}<br>
{% for message in form.username.errors %}
    <small class="error" style="color:red">{{ message }}</small><br>
{% endfor%}
{{ form.password.label }}{{ form.password }}<br>
    {%for message in form.password.errors%}
        <small class="error" style="color:red">{{ message }}</small>
    <br>
    {% endfor %}
{{ form.remember }}{{ form.remember.label }}<br>
{{ form.submit }}<br>
</form>
  • form.username.label:显示标签,form.username:输入框
  • form.xxx.errors:当输入错误时,显示的错误提醒,一般用for循环遍历。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% for message in get_flashed_messages()%}
        <div >{{ message }}</div>
{% endfor %}
</body>
</html>

5.结果:

图片.png
图片.png

表单上传


1.先在本地创建一个uploads文件夹,然后在主模块中设置参数

# >>> app.root_path
# 'C:\\Users\\Administrator\\PycharmProjects\\flask-form'
app.config['UPLOAD_PATH'] = os.path.join(app.root_path, 'uploads')

2. 同样的,我们需要编写上传的表单函数。

forms.py

class UploadForm(FlaskForm):
    photo = FileField('upload Image', validators=[FileRequired(), FileAllowed])
    submit = SubmitField()

3. 编写视图函数

app.py

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    form = UploadForm()
    if form.validate_on_submit():
        f = form.photo.data
        # f:<FileStorage: 'timg.jpg' ('image/jpeg')>
        filename = f.filename
        print(filename)
        # 保存到/uploads目录下
        f.save(os.path.join(app.config['UPLOAD_PATH'], filename))
        flash('Upload success.')
        # 把filename保留到会话中。
        session['filenames'] = [filename]
        print(session['filename'])
        return redirect(url_for('show_images'))
    return render_template('upload.html', form=form)

@app.route('/show_images')
def show_images():
    return render_template('show_images.html')

4.编写html页面

show_images.html

</head>
<body>
{% for message in get_flashed_messages()%}
        <div >{{ message }}</div>
{% endfor %}
<img src="{{ url_for('get_file', filename=session.filename[0]) }}" width="50%" height="50%">
{{ session.filename[0] }}
</body>
</html>

这里为了获取图片,编写了一个get_flie视图函数来获取图片。

app.py

@app.route('/uploads/<path:filename>')
def get_file(filename):
     # C:\Users\Administrator\PycharmProjects\flask-form\uploads timg.jpg
    print(app.config['UPLOAD_PATH'], filename)
    return send_from_directory(app.config['UPLOAD_PATH'], filename)

upload.html

<!DOCTYPE html>
{% from 'macros.html' import form_field %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
    {{ form.csrf_token}}
    {{ form.photo.label}}{{form.photo}}
    {{form.submit }}
</form>

</body>
</html>

5.结果:

图片.png
图片.png

感觉这些都是熟能生巧的活,还要多学多练哈哈哈。


相关文章

  • Flask-表单学习

    第一种方式,使用html写的表单 1.设置路由,和视图函数 2.来编写forms_1.html文件 第二种方式,用...

  • Flask 框架(2)-模板

    Flask-模板

  • python版websocket

    背景 目前看到实现websocket的框架的- django的channels- flask- sanic好奇,用...

  • Angular表单处理

    第七章 表单处理 学习内容: 一.简述模板式表单与响应式表单的不同 Angular表单API 模板式表单简述: ...

  • 2019-10-24 表单标签

    今天学习了html表单 HTML表单(

    标签) 属性: 1 action:决定表单提交的地...

  • 表单设计-学习笔记

    文/丹顶鹤的日记本 学习笔记注:本文所说的表单(Form),是网页或者移动应用表单。 一) 表单的作用 表单的主要...

  • HTML表单(5)

    饥人谷学习第5天 HTML表单 表单是一个包含表单元素的区域 表单元素是允许用户在表单中(比如:文本域、下拉列表、...

  • 【工作日报】7.28

    1.学习了安卓表单配置 安卓表单配置工具是为了方便移动端的表单配置,配置完成表单后下载,将其放到文书的CisSer...

  • 第二十五谈:验证表单

    本节课我们来开始学习 Bootstrap 的提供验证表单组件样式功能。 一.验证表单 表单需要在提交前验证,如果出...

  • 2018-03-26 Ch9 Form

    Day004, 60min 开始学习表单。5种表单标签:form, input, textarea, select...

网友评论

    本文标题:Flask-表单学习

    本文链接:https://www.haomeiwen.com/subject/nunbeqtx.html