devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Flask web表单_flaskform default

作者：Cpp五条 | 2024-02-07 17:06:21

赞

踩

flaskform default

这一章节已经开始头晕了，坡度有点大，需要补的知识有点多，先记录着

为了能够处理 web 表单，我们将使用 Flask-WTF ，该扩展封装了 WTForms 并且恰当地集成进 Flask 中。

许多 Flask 扩展需要大量的配置，因此我们将要在 microblog 文件夹的根目录下创建一个配置文件以至于容易被编辑。这就是我们将要开始的(文件config.py):

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

一个简单的config.py文件，还不知道什么意思，就知道是启用了CSRF功能，后面再百度查吧。这个config文件是建在应用程序根目录下！

创建完config.py文件以后，要告诉flask去读取他，所以要在__init__.py里面设置

from flask import Flask

app = Flask(__name__)
app.config.from_object('config')    #函数的意思是，用app实例的config函数，调取名字为'config'的配置文件，这个字符串是可以自己定义的？

from app import views
在 Flask-WTF 中，表单是表示成对象， Form  类的子类。一个表单子类简单地把表单的域定义成类的变量。

OpenID 登录仅仅需要一个字符串，被称为 OpenID。我们将在表单上提供一个 ‘remember me’ 的选择框，以至于用户可以选择在他们的网页浏览器上种植 cookie ，当他们再次访问的时候，浏览器能够记住他们的登录。

以下是创建的form.py

from flask.ext.wtf import Form                #导入Form类
from wtforms import StringField, BooleanField   #导入文本输入框，导入Boolean选择框，这个Boolean框就是打钩或者不打勾的功能
from wtforms.validators import DataRequired    #导入数据验证功能

class LoginForm(Form):
    openid = StringField('openid', validators=[DataRequired()])  #定义LoginForm类，有2个属性，第一个openid，是一个文本输入框
    remember_me = BooleanField('remember_me', default=False)    #第二个remember_me是一个勾选框，告诉系统要不要勾选，默认不勾选

做完表单模块后，我们要做一个HTML页面，来作为这个表单的渲染！ login.html，也是放在templates下面的

<!-- extend from base layout -->
{% extends "base.html" %}      #这里extends意思是扩展自base.html，意思是调用login.html的时候，预先要读取base.html

{% block content %}
<h1>Sign In</h1>
<form action="" method="post" name="login">  
    {{form.hidden_tag()}}                   #默认都有的，不知道什么意思，先放着
    <p>
        Please enter your OpenID:<br>    #文本显示Please enter.....  
        {{form.openid(size=80)}}<br>     #通过views.py里return render_template来渲染这个变量，form实例里面的openid属性(长度80)
    </p>                                  #<br>这个br挺常用，是换行的意思
    <p>{{form.remember_me}} Remember Me</p> #通过views.py里面render_template来渲染变量，form实例里面的remember属性，勾选框
    <p><input type="submit" value="Sign In"></p> #生成按钮，作用是submit，按钮显示的文本是Sign In
</form>
{% endblock %}

接着我们要进行views.py也就是视图文件的修改了

from flask import render_template, flash, redirect    #导入模块，flash函数，redirect函数
from app import app
from .forms import LoginForm   #导入LoginForm类

# index view function suppressed for brevity

@app.route('/login', methods = ['GET', 'POST'])   #这里'/login'表示的是，网页最后后缀是/login的时候，访问login.html页面
def login():
    form = LoginForm()                 #生成form实例，给render_template渲染使用
    return render_template('login.html',
        title = 'Sign In',
        form = form)


随后，再次更新views.py文件，添加flash和redirect功能，暂时还不知道flash这个什么意思。。

@app.route('/login', methods = ['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():  #调用form实例里面的validate_on_submit()功能，验证数据是否安全，如是返回True，默认返回False
        flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
        return redirect('/index') #如果数据符合要求，重定向到主页
    return render_template('login.html',  #如果数据不符合要求，则再次读取login.html页面
        title = 'Sign In',
        form = form)

闪现的消息将不会自动地出现在我们的页面上，我们的模板需要加入展示消息的内容。我们将添加这些消息到我们的基础模板中，这样所有的模板都能继承这个函数。这是更新后的基础模板(文件 app/templates/base.html):

<html>
  <head>
    {% if title %}
    <title>{{title}} - microblog</title>
    {% else %}
    <title>microblog</title>
    {% endif %}
  </head>
  <body>
    <div>Microblog: <a href="/index">Home</a></div>
    <hr>                                          #<hr>的意思是：添加一条水平线
    {% with messages = get_flashed_messages() %}  #Flask有一个函数是get...，赋予变量messages
    {% if messages %}
    <ul>
    {% for message in messages %}
        <li>{{ message }} </li>
    {% endfor %}
    </ul>
    {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
  </body>
</html>


现阶段的应用程序，如果表单提交不合理的数据将不会被接受。相反，会返回表单让用户提交合法的数据。

然后，好像我们缺少了一个提示用户表单哪里出错了。幸运的是，Flask-WTF 也能够轻易地做到这一点

下面修改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 %}     #捕捉openid这个实例的errors信息
            <span style="color: red;">[{{ error }}]</span>  #用span截取这个error信息并渲染颜色
          {% endfor %}<br>
      </p>
      <p>{{ form.remember_me }} Remember Me</p>
      <p><input type="submit" value="Sign In"></p>
  </form>
{% endblock %}


下面修改一下config文件，1不知道为什么要修改要放在config文件，2不知道这OpenId的作用，先照样子敲吧。。。

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.py文件了

@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'])
其实我觉得，providers那个数据，不放在config里面也行，放在views里面，功能是一样一样的


我们从配置中获取 OPENID_PROVIDERS，接着把它作为 render_template 中一个参数传入模板中。

我敢确信你们已经猜到了，我们还需要多做一步来达到目的。我们现在就来说明如何在登录模板中渲染这些提供商的链接(文件app/templates/login.html):

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

{% block content %}
<script type="text/javascript">    #这里用到了javascript语言，这里只是设置方法，用于后面调用它
function set_openid(openid, pr)    #方法名称是set_openid
{
    u = openid.search('<username>') #在openid里面搜索是否有<username>
    if (u != -1) {                  #返回值是-1是表示没有找到，如果找到的话，返回字符的起始位置
        // openid requires username  #在JAVASCRIPT里面，双斜杠表示注释！！！
        user = prompt('Enter your ' + pr + ' username:') #user等于弹出框里面，用户输入的内容，pr在下面调用的时候会提到
        openid = openid.substr(0, u) + user  #刷新openid变量，openid=provider原始截取的网址加上用户输入的内容
    }
    form = document.forms['login'];
    form.elements['openid'].value = openid
}
</script>
#这里补充一下Javascript的基础知识：openid.search('<username>')是指，在openid这个变量里面去搜索是否有<username>这个字符串，如果有的话返回他的起始位置，比如‘http://openid.aol.com/<username>'这个里面，他的起始位置就是22位                                    然后，下面openid.substr(0,u)是代表，截取openid的第0位到第22位，之后加上变量user                                                user=prompt('这里的字符串')，prompt是一个弹出框的作用，并且让你输入内容，而括号里面的内容，是弹出框的提示语句，而user是记录你在输入框里面的输入内容！！！
#Javascript基础知识第二点:form=document.forms['login']意思是，读取名字为login的表单！这里就是login.html                         form.elements['openid'].value我的理解是，索引form实例里面openid的值，来赋予openid。这个没理解透，先做下面的吧。
<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> |      #激活Javascript脚本
        {% endfor %}
    </p>
    <p>{{ form.remember_me }} Remember Me</p>
    <p><input type="submit" value="Sign In"></p>
</form>
{% endblock %}


下面两幅图就是针对上面JavaScript的脚本的讲解！





这样，基本上大致的登录界面就成型了。。。。不容易啊。。。各种恶补。。。啥都不知道。。。























声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/66510
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号