这一章节已经开始头晕了，坡度有点大，需要补的知识有点多，先记录着
为了能够处理 web 表单，我们将使用 Flask-WTF ，该扩展封装了 WTForms 并且恰当地集成进 Flask 中。
许多 Flask 扩展需要大量的配置，因此我们将要在 microblog 文件夹的根目录下创建一个配置文件以至于容易被编辑。这就是我们将要开始的(文件config.py):
CSRF_ENABLED = TrueSECRET_KEY = 'you-will-never-guess'
一个简单的config.py文件，还不知道什么意思，就知道是启用了CSRF功能，后面再百度查吧。这个config文件是建在应用程序根目录下！
创建完config.py文件以后，要告诉flask去读取他，所以要在__init__.py里面设置
from flask import Flaskapp = 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 appfrom .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 = TrueSECRET_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的脚本的讲解！
这样，基本上大致的登录界面就成型了。。。。不容易啊。。。各种恶补。。。啥都不知道。。。
0 0
