小白初尝flask(2)

最新推荐文章于 2024-01-10 16:44:24 发布

weixin_44942551

最新推荐文章于 2024-01-10 16:44:24 发布

阅读量159

点赞数

文章标签： python

本文链接：https://blog.csdn.net/weixin_44942551/article/details/90177908

版权

web表单

配置
即<form>这个标签，需要使用到Flask-WTF这个扩展包，
先创建一个config.py文件作为配置文件，在其内添加

CSRF_ENABLED = True
SECRET_KEY = 'password'

CSRF_ENABLED是用来激活跨站点请求伪造
在这里插入图片描述
此处有详细说明；
SECRET_KEY即为加密令牌；
修改app/init.py代码

app.config.from_object('config')

登陆表单

在app文件内添加一个forms.py文件
敲入代码

from flask_wtf import Form
from wtforms import StringField, BooleanField
from wtforms.validators import DataRequired

class LoginForm(Form):
    openid = StringField('openid',validators=[DataRequired()])
    remember_me = BooleanField('remember_me',default=False) 
    #BooleanField使用场景：进行选择框，比如：登陆界面，是否记住密码，选择框，就可以使用

OpenID是一种登陆机制，对于用户而言更加安全。
remember_me是一个选择是否给用户cookie的选择框，但选择后无需重复登陆即可访问网站。
DataRequired()是一个验证器，验证填空区域是否为空，空则弹出提示。
StringField顾名思义字符串字段
BooleanField即True和Flase两个返回值
在这里插入图片描述
https://www.cnblogs.com/sysnap/p/6568346.html 图片来源

login.html

登陆同样需要一个模板
在app/templates/login.html内添加

{% extends "base.html" %}

{% block content %}
<h1>Sign In</h1>
<form action="" method="post" name="login">
    {{form.hidden_tag()}}
    <p>
        Please enter your OpenID:<br>
        {{form.openid(size=80)}}<br>
    </p>
    <p>{{form.remember_me}} Remember Me</p>
    <p><input type="submit" value="Sign In"></p>
</form>
{% endblock %}

form.hidden_tag() 模板参数将被替换为一个隐藏字段，用来是实现在配置中激活的 CSRF 保护。如果你已经激活了 CSRF，这个字段需要出现在你所有的表单中。
{{ form.field_name }}的模板来渲染我们的表单
在view中没有定义SubmitField所以只简单应用<input>来提交我们的表单

修改views.py

from flask import render_template, flash, redirect
from app import app
from .forms import LoginForm

# index view function suppressed for brevity

@app.route('/login', methods = ['GET', 'POST'])
def login():
    form = LoginForm()
    return render_template('login.html',
        title = 'Sign In',
        form = form)

render_template()第一个参数是我们template文件里面的模板，后面的参数是content，即传入模板的内容
LoginForm即刚刚编写的forms.py里面的一个登陆表单函数
此时运行程序后输入
http://localhost:5000/login
可以看到表单的出现，但提交按钮因为还未给他一个跳转，因此点击后没有任何反应

@app.route('/login', methods = ['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
        return redirect('/index')
    return render_template('login.html',
        title = 'Sign In',
        form = form)

再次修改views，此时添加一个判断， form.validate_on_submit()为True，则执行flash()，flash是为了显示我们在先前一个网页提交的内容是否有效

if form.validate_on_submit():

form.validate_on_submit()在表单未提交时，返回Flase，即if flase，并且将执行余下的return将表单呈现给用户，当提交后将网页redirect—重定向到index–主页，并且在主页呈现

Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data)

这条语句
基于此需要修改base.html

<html>
    <head>
        {% if title %}  
            <title>{{ title }}-Blog</title>
            {% else %}
            <title>Welcome Blog</title>
            {% endif %}
    </head>
    <body>
        <div>
            <a href="/index">Home</a>
            <a href="/login">Login in</a>
        </div>
        <hr>
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <ul>
            {% for message in messages %}
                <li>{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}
    </body>
</html>

修改后的base使得index也能呈现flash的消息，
这里添加了一个login in使我们无需修改url即可进入登陆网页。

加强字段验证

修改login.html

<!-- extend base layout -->
{% extends "base.html" %}

{% block content %}
  <h1>Sign In</h1>
  <form action="" method="post" name="login">
      {{ form.hidden_tag() }}
      <p>
          Please enter your OpenID:<br>
          {{ form.openid(size=80) }}<br>
          {% for error in form.openid.errors %}
            <span style="color: red;">[{{ error }}]</span>
          {% endfor %}<br>
      </p>
      <p>{{ form.remember_me }} Remember Me</p>
      <p><input type="submit" value="Sign In"></p>
  </form>
{% endblock %}

form.field_name.errors 存储验证字段的错误信息，我们使用form.openid.errors来显示这些信息
修改config

CSRF_ENABLED = True
SECRET_KEY = 'you-will-never-guess'

OPENID_PROVIDERS = [
    { 'name': 'Google', 'url': 'https://www.google.com/accounts/o8/id' },
    { 'name': 'Yahoo', 'url': 'https://me.yahoo.com' },
    { 'name': 'AOL', 'url': 'http://openid.aol.com/<username>' },
    { 'name': 'Flickr', 'url': 'http://www.flickr.com/<username>' },
    { 'name': 'MyOpenID', 'url': 'https://www.myopenid.com' }]

修改views

`@app.route('/login', methods = ['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
        return redirect('/index')
    return render_template('login.html',
        title = 'Sign In',
        form = form,
        providers = app.config['OPENID_PROVIDERS'])`

再次修改login.html

<!-- extend base layout -->
{% extends "base.html" %}

{% block content %}
<script type="text/javascript">
function set_openid(openid, pr)
{
    u = openid.search('<username>')
    if (u != -1) {
        // openid requires username
        user = prompt('Enter your ' + pr + ' username:')
        openid = openid.substr(0, u) + user
    }
    form = document.forms['login'];
    form.elements['openid'].value = openid
}
</script>
<h1>Sign In</h1>
<form action="" method="post" name="login">
    {{ form.hidden_tag() }}
    <p>
        Please enter your OpenID, or select one of the providers below:<br>
        {{ form.openid(size=80) }}
        {% for error in form.openid.errors %}
          <span style="color: red;">[{{error}}]</span>
        {% endfor %}<br>
        |{% for pr in providers %}
          <a href="javascript:set_openid('{{ pr.url }}', '{{ pr.name }}');">{{ pr.name }}</a> |
        {% endfor %}
    </p>
    <p>{{ form.remember_me }} Remember Me</p>
    <p><input type="submit" value="Sign In"></p>
</form>
{% endblock %}

运行run即可！！