标签归档:Flask

Flask问题集:flash消息分类与美化

bootstrap alert style

Bootstrap提供的alert样式,依次为:‘success’、‘info’、‘warning’、‘danger’。

 

Flask提供了一个很方便的flash函数,在视图函数里只需要一行就可以在网页上闪现一个消息(alert),像这样:

flash(u'登录成功,欢迎回来!')

我们今天来为它添加样式。

 

基本用法

在视图函数里使用flash:

flash(u'要闪现的消息内容')

然后在基模板里使用`get_flashed_messages()`来获取消息,并渲染出来。
比如《Flask Web开发》里使用alert-warning渲染所有的消息:

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

下面我们使用Bootsrtap的消息样式来渲染不同的消息。

 

使用Bootstrap的消息(alert)样式

如果想要开启消息的分类,需要在调用`get_flashed_messages()`时传入参数`with_categories=True`。这时,在基模板里使用这个函数获取消息时,得到的是一个由`(category, message)`形式的元组组成的一个列表。

之后,就可以在使用flash函数时加入消息类别:

flash(u'登录成功,欢迎回来!', 'info')

你可以使用‘success’、‘info’、‘warning’、‘danger’这四个值中的任一个。具体样式文章开头的图片。

这时基模板里渲染消息的部分要改成这样:

{% for message in get_flashed_messages(with_categories=True) %}
<div class="alert alert-{{ message[0] }}">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    {{ message[1] }}
</div>
{% endfor %}

这样一来,每个消息就会按照我们提供的分类样式来渲染了。

 

DIY

当然,你也可以自己定义每一类消息的样式。我推荐你在Bootstrap的四个类别的基础上增加样式,这样只需要在你的css文件里添加一个新的alert样式,比如下面我添加了一个code样式:

/* code alert style, by Grey Li*/
.alert-code {
    color: #66ff66;
    background-color: #000000;
    border-color: #ebccd1;
}

.alert-code hr {
    border-top-color: #000066;
}

.alert-code .alert-link {
    color: #ff9900;
}

然后使用:

flash(u'要闪现的消息', 'code')

效果:

我设计的alert样式

我设计的alert样式:p

如果你不用Bootstrap,只需要加将上面的为div指定类的那行改成:

<div class="{{ message[0] }}">

然后在你的css文件里定义类别对应的样式就可以了。

 

多看源码

源码里面有很多有趣和有价值的东西,要养成看源码的习惯。很多问题靠看源码里的注释基本上就能解决。所以,问题的正确解决方式应该是:看源码——Google——提问。

翻译Flask-Bootstrap文档

一个月前,开发翻相册的时候,查文档时发现Flask-Bootstrap的文档还没有中文版本,就打算自己来翻译它。花了半天时间了解sphinx的使用方法和reStructuredText的基本语法,注册了Read The Docs账号,然后就开始翻译了。

格式

因为作者使用的是reStructuredText,所以我也去简单了解了一下,一开始是打算自己来创建新的文件,但后来发现有更方便的做法:直接拷贝一份作者的文档源文件,然后直接在文件里翻译,翻译好了再删掉英文。

翻译

几天后发现技术文档的翻译并不简单。虽然平时阅读不少,但很多词汇还是不知道该翻译成什么合适。比如说“serve”这个单词翻译过来是“服务”,但在这下面三个句子里明显不合适。

  1. How do I serve the static files in deployment?

  2. …setting up your server to serve this address.

  3. …to ensure newer Bootstrap versions are served.

接下来我又遇到了“include”,“include”翻译过来是“包含”,常常用来指在HTML的head标签里添加文件资源,比如css文件和网页头像(favicon),但有些时候翻译成“包含”总是感觉怪怪的,缺少一种动词的意味,所以有些地方我把它译成了“加载”。

类似这样的纠结在翻译过程中发生了很多次,还好我手里有一本Flask的书,很多地方可以借鉴。除此之外,还有一些不常见的短语,比如“per default”,这就要靠查资料来解决了,很多时候google翻译也帮不上什么忙。

后记

翻译这份文档大约用了一个月的空闲时间(终于完成了……)。因为是第一次翻译技术文档,有很多地方还需要完善,但也算是收获了翻译的经验,还了解了reStructuredText的语法和文档的部署方法。翻译的过程中还顺便发现了作者的几个小错误,在Github提交了pull request,作者愉快的接受了。

尽管翻译完了,但事情并没有结束,有时间我会再完善一下。如果你发现了错误,欢迎提交改动。

Github项目地址:https://github.com/lihuii/flask-bootstrap-docs-zh

文档地址:http://flask-bootstrap-zh.readthedocs.io/zh/latest/

Flask问题集:单个页面两个(多个)表单

出于简化交互的考虑,我们经常见到很多网站把登录页面和注册界面放在同一个页面上,而当我们使用Flask来实现时,却发现问题重重:

  • 不管是哪个表单按下了提交按钮,总是提交第一个表单的数据;
  • 当一个表单数据验证出错时,两个表单都出现了错误提示;

问题的解决

简单来说,问题的主要原因是Flask-WTF的form1.validate_on_submit()并不验证是哪个表单的submit按钮被按下了,只是通过HTTP方法是否是“PUT”或“POST”来判断。

同时form1.submit1.data的data函数会迭代字段的名字(submit)和数据(True/False)作为一个字典,这会产生键重复的问题,所以确保两个表单的submit字段的名字不同。

另外,更改if语句判断条件的顺序(只对按下按钮的表单执行.validate_on_submit()),避免一个表单出错时两个表单同时出现错误提示信息。具体见下面两个代码块。

为你的不同表单里的SubmitField定义不同的名字,像这样:

class Form1(Form):
    name = StringField('name')
    submit1 = SubmitField('submit')

class Form2(Form):
    name = StringField('name')
    submit2 = SubmitField('submit')

....

在 view.py 里添加if判断:

....
form1 = Form1()
form2 = Form2()
....

if form1.submit1.data and form1.validate_on_submit(): # 注意顺序 
    ....
if form2.submit2.data and form2.validate_on_submit(): # 注意顺序
    ....

现在问题解决了,如果你想了解更多一点,那就继续读下去。

探究问题的本质

这是 validate_on_submit():

def validate_on_submit(self):
    """
    Checks if form has been submitted and if so runs validate. This is
    a shortcut, equivalent to ``form.is_submitted() and form.validate()``
    """
    return self.is_submitted() and self.validate()

这是 is_submitted():

def is_submitted(self):
    """
    Checks if form has been submitted. The default case is if the HTTP
    method is **PUT** or **POST**.
    """
    return request and request.method in ("PUT", "POST")

当你对表单调用 form.validate_on_submit() 的时候,它只是通过HTTP方法来检查提交的表单,而不是哪个表单上的按钮被按下了。所以上面的小技巧只是添加一个过滤器(也就是检查按钮是不是有数据,即 form1.submit.data)。

另外,我们改变了if判断的顺序。这样当我们点击其中一个表单上的按钮时,它只对这个表单调用验证函数validate(),所以不会两个表单都出现错误提示。

故事还没完,这是静态方法.data:

@property
def data(self):
    return dict((name, f.data) for name, f in iteritems(self._fields))

它返回一个以字段名(field name)和字段值(field value)作为键值对的字典,但要注意的是,两个表单的提交按钮的字段名都是submit!

这带了什么问题呢?想一想Python里字典的特性就知道了,字典用键来索引一个值,所以会有键重复的问题。

当我们点击第一个表单上的提交按钮(submit)时,form1.submit1.data返回一个像这样的字典:

temp = {'submit': True}

毫无疑问,当我们调用 if form1.submit.data时,它会返回True。

而当我们点击第二个表单上的提交按钮(也是submit)时,if form1.submit.data先生成了一个键值对,然后form2.submit.data生成了键值对,结果这个字典就变成了这样:

temp = {'submit': False, 'submit': True}

这就是为什么我们不论点击那个表单上的按钮,对第一个表单的验证总是返回True。我们通过为两个表单的字段设定不同的名字解决了这个问题。

感谢你读到这里,这样看来,你有很强的好奇心和耐心,而且对编程怀有很大的热情,我说的没错吧:p

首发于Stack Overflow:python – flask-bootstrap with two forms in one page

更多关于Flask的优质内容,欢迎关注Hello, Flask! – 知乎专栏

Flask笔记(5):表单

Flask有众多的扩展来简化集成各种常用的库和框架,比如Flask-Bootstrap集成了Bootstrap,Flask-WTF集成了WTForms。这篇要介绍的就是Flask-WTF。

 

安装和配置

安装很简单,使用pip:

pip install flask-wtf

Flask-WTF默认支持CSRF(跨站请求伪造)保护,只需要在程序中设置一个密钥。Flask-WTF使用这个密钥生成加密令牌,再用令牌验证表单中数据的真伪。(关于Flask项目的配置和初始化,后续文章会谈到)你可以使用app.config字典来存储配置变量:

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string'

或是从系统环境变量中获取

app = Flask(__name__)
app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY')

很多重要的信息,比如邮箱账户和密码都不能直接下载程序里,而要设置系统环境变量,设置方法如下(Windows CMD):

set SECRET_KEY=very very hard to guess string

后面的字符串不需要用任何符号括起来。

 

表单

每个表单都用一个继承自Form的类表示,每个字段都用一个对象表示,每个对象可以附加多个验证函数。常见的验证函数有Required()Length()Email()等。
一个登录表单示例:

from flask_wtf import Form # 导入Form
from wtforms import StringField, SubmitField, RadioField, PasswordField, BooleanField # 导入字段
from wtforms.validators import Required, Length, Email # 导入验证函数
class LoginForm(Form):
    email = StringField(u'邮箱', validators=[Required(message= u'邮箱不能为空'), Length(1, 64), Email(message= u'请输入有效的邮箱地址,比如:username@domain.com')])
    password = PasswordField(u'密码', validators=[Required(message= u'密码不能为空')])
    remember_me = BooleanField(u'记住我')
    submit = SubmitField(u'登录')
  • 在验证函数中传入出错时的提示信息,覆盖默认的英文错误提示。
  • WTForms支持的基本字段
  • WTForms支持的验证函数
 

渲染表单

表单有很多种渲染方式。
下面以一个撰写文章的表单为例。

 

默认的渲染方式

<form class="form" method="POST">
    {{ form.hidden_tag() }}
    {{ form.title.label }}{{ form.title() }}
    {{ form.body.label }}{{ form.body() }}
    {{ form.submit() }}
</form>

这种方式渲染出来的表单没有样式,而且很繁琐(当然,你也可以使用for循环来遍历字段)。

 

使用Flask-Bootstrap渲染

Flask-Bootstrap提供了一个模板(wtf.html),可以让你快速生成样式良好的表单。

{% import "bootstrap/wtf.html" as wtf %}
<form class="form" method="POST">
    {{ form.hidden_tag() }}
    {{ wtf.form_field(form.title) }}
    {{ wtf.form_field(form.body) }}
    {{ wtf.form_field(form.submit) }}
</form>

假如你不需要调整Boostrap的默认表单样式,只想要快速生成表单,那么Flask-Bootstrap还提供了一个强大的函数,只需要一行就可以快速生成表单):

{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}
 

控制表单的样式

对于样式,可以通过给表单增加id或class来实现。比如这样:

{{ form.body.label }}{{ form.body(class="post-body") }} # 默认渲染
{{ wtf.form_field(form.body, class="post-body") }} # 使用Flask-Bootstrap渲染

也可以在表单类里传入参数,像这样:

body = TextAreaField(u'正文', validators=[Required(u'内容不能为空!')], render_kw={'rows': 20, 'placeholder': u'你有什么想法?'})

在表单字段里传入一个render_kw字典,将HTML的参数和值以键值对的形式写入字典。WTForms2.1及以上版本适用。

这里需要注意的是,Flask-Bootstrap会给表单添加class来控制样式,这时你再通过render_kw传入已经被定义过的参数会失败。所以,如果要使用render_kw传入class,得确保表单字段使用默认的渲染方式。

 

提交表单视图

这是一个添加文章的视图。

@main.route('/new/post', methods=['GET', 'POST'])
@login_required
def new_post():
form = PostForm()
if form.validate_on_submit():
    post = Post(
    title = form.title.data,
    body = form.body.data)
    db.session.add(post)
    db.session.commit()
    return redirect(url_for('.post', id=post.id))
return render_template('edit/new_post.html', form=form)
 

常见问题索引

  1. 一个页面里有多个表单
  2. 文件及多文件上传
  3. 文本编辑器支持

 

Flask笔记索引

这个系列的文章是我学习Flask的经验总结。大致按照《Flask Web开发》这本书的主要章节来分类,总结书里内容的同时增加了其他内容。还有一些是我在开发翻相册的过程中遇到的问题和解决方案。预计在年底完成所有文章。

Flask开发

  1. 环境搭建与项目结构
  2. 程序配置与初始化
  3. 路由和视图函数
  4. 模板
  5. 表单
  6. 数据库
  7. 电子邮件
  8. 测试
  9. 部署

实际应用

  1. 用户认证
  2. 用户角色与权限
  3. Markdown文章
  4. 分页
  5. 关注 
  6. 应用编程接口

问题集

  1. 单个页面多个表单
  2. 文件和多文件上传
  3. 喜欢按钮
  4. 动态删除照片

Flask笔记(1):环境搭建与项目结构

环境搭建

完成一个Flask项目需要三个工具: – git:用于版本控制 – pip:用来安装各种包 – virtualenv:用来创建虚拟环境 git和pip是基本工具,就不多说了,这里主要介绍一下virtualenv。

virtualenv

virtualenv可以用来建立一个独立的Python虚拟环境。你可以为每一个项目建立不同的虚拟环境,各个环境互相独立。这样可以带来很多好处:方便分发项目,避免Python环境杂乱。 在Python3.4中,可以使用原生的pyvenv。 使用pip安装virtualenv

pip install virtualenv  

切换到你的项目目录,然后使用下面的命令创建一个虚拟环境

virtualenv venv 

venv 是虚拟环境的名字,你可以更改它,但一般常使用venv。每次要使用这个虚拟环境时,你都要激活它。在你的项目根目录使用下面的命令激活虚拟环境。

# Linux:
source venv/bin/activate
# Windows:
venv\Scripts\activate

激活以后你会看到你的命令行提示符前面多了一个虚拟环境的名称:(venv)。当你需要退出虚拟环境时,在命令行下输入deactivate即可。

项目结构

一个大的Flask项目需要合理的组织,比如把数据库模型、路由、表单等分别放在不同的文件里。良好的项目结构可以使开发更加高效,也利于代码的维护和测试。 典型的Flask项目结构是这样的:

|-flask*  你的项目名称
    |-app/
        |-templates/  模板文件
        |-static/  静态文件(CSS和JS文件,图片等)
        |-main/
            |-__init__.py
            |-errors.py  错误处理
            |-forms.py  表单
            |-views.py  路由
        |-__init__.py
        |-email.py  邮件
        |-models.py  数据库模型
    |-migrations/  数据库迁移
    |-tests/  单元测试
        |-__init__.py
        |-test*.py
    |-venv/  虚拟环境
    |-requirements.txt  项目依赖的库
    |-config.py  配置(项目变量等)
    |-manage.py  管理(启动程序等)

###requirements.txt(需求文件) 需求文件是你的项目所依赖的库和版本号。类似这样:

Flask==1.1
Flask-Bootstrap==3.0.
Mako==1.4

借助这个需求文件,你可以在其他电脑上快速生成相同的环境。使用pip生成:

pip freeze >requirements.txt

在其他的电脑创建副本时,使用下面的命令:

pip install -r requirements.txt