flask(3) 表单

最新推荐文章于 2025-06-07 14:30:00 发布

qq_44482764

最新推荐文章于 2025-06-07 14:30:00 发布

阅读量131

点赞数

分类专栏：前端文章标签： flask

本文链接：https://blog.youkuaiyun.com/qq_44482764/article/details/110503789

版权

前端专栏收录该内容

5 篇文章

订阅专栏

博客展示了Flask相关的整体代码，包含app.py、login.html和base.html等文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整体代码

app.py

from flask import Flask,request,url_for, request, session, redirect, render_template,flash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, BooleanField, SubmitField, SelectMultipleField, SelectField
from wtforms.validators import DataRequired, EqualTo, ValidationError
from flask_bootstrap import Bootstrap

app = Flask(__name__)
app.secret_key = 'Very Hard Secret'
bootstrap = Bootstrap(app)

# -----------------   定义一个表单类  -------------------------------
# 登录类：下面定义了一个LoginForm类，该类中定义了三个字段
class LoginForm(FlaskForm):
    username = StringField('Username',validators=[DataRequired()])
    password = PasswordField('Password',validators=[DataRequired()])
    submit = SubmitField('login')

#   字段类          作用             对应的HTML
# StringField     文本字段          <input type="text">
# SubmitField     提交按钮          <input type="submit">
# PasswordField   密码文本字段       <input type="password">
# SubmitField     文件上传字段       <input type="file">
# SelectField     下拉列表          <select></select>

# 验证器（validator）是一系列用于验证字段数据的类，我们在实例化字段类时使用 validators 关键字来指定附加验证器列表。
# 验证器 ：
# DataRequired  验证数据是否存在
# Email 验证email地址
# EqualTo 验证两个字段是否一致


# -----------------------------   在模板中渲染表单  提交表单   ------------------------
# 为了能够在模板中渲染表单，我们需要把表单实例传入模板。
# 1.首先实例化表单类 LoginForm    2.然后在 render_template() 函数中传入模板
# @app.route('/login/', methods=['GET', 'POST'])
# def login():
#     form = LoginForm()
#     return render_template('login.html',form=form)



# ----------------------- 处理表单数据 -------------------------
# 一般来说，从获取表单数据到保存表单数据大致需要以下几步：
                                            # 解析请求，获取表单数据
                                            # 对数据进行转换，
                                            # 验证表单数据是否符合要求
                                            # 如果验证错误，那么提示相关的错误信息
                                            # 如果验证通过，则保存数据

# 在视图函数中处理表单
@app.route('/login/',methods=['GET','POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        username = form.username.data  #通过 form.username.data 来获取表单中的用户名
        session['username']=username  #通过 session 来保存username
        flash("登录成功,%s" % username)
        return redirect(url_for('index'))  #重定向到 index 视图函数
    return render_template('login.html',form=form)
# 数据的验证，使用函数 validate_on_submit()，如果返回 True，则代表验证通过。
# 数据验证成功，则进入index函数，否则进入登录页面模板

@app.route('/user/')
def index():
    user = session.get('username')
    return render_template('index.html',user=user)
# 从session中拿到用户名，传递给index.html模板

if __name__ == '__main__':
    app.run(debug=True)

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}My Web - Login{% endblock %}

{% block page_content %}
    {{ wtf.quick_form(form) }}
    {% for message in get_flashed_messages() %}
    <div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert">
            &times;
        </button>
        {{ message }}
    </div>
    {% endfor %}

{% endblock %}

base.html

{% extends "bootstrap/base.html" %}

<head>
{% block head%}
    {{ super() }}
    <meta charset="utf-8">
    <title>
    {% block title %}My Web{% endblock %}
    </title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico')}}">
{% endblock %}
</head>


{% block navbar %}
<div class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span> </button>
                <a href="#" class="navbar-brand">HelloFlask</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="{{ url_for('index') }}" class="smoothScroll">Home</a></li>
                    <li><a href="{{ url_for('signup') }}" class="smoothScroll">Signup</a></li>
                    <li><a href="{{ url_for('login') }}" class="smoothScroll">Login</a></li>
                    <li><a href="#portfolio" class="smoothScroll">作品</a></li>
                    <li><a href="#contact" class="smoothScroll">联系我们</a></li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}


{% block content %}
<div class="container">
    {% block page_content %}{% endblock %}
</div>
{% endblock %}