2016-01-04-1 flask web 开发(一)_html/css_WEB-ITnose
- WBOY原创
- 2016-06-21 09:00:571519浏览
2016年, 看的第一本书, 作者是 Miguel Grinberg 安道翻译.
Flask 可算是小而精的web开发框架. 自设计伊始就被定义为可扩展的框架, 通过提供基础服务的核心骨架 + 其它扩展功能 实现, 以满足不同人的需求.
其中, Werkzeug , Jinja2 都是由Flask核心开发者开发而成.
该项目地址在 https://github.com/miguelgrinberg/flasky.git
建议使用pip 完成安装:
pip install flask
程序基本结构
下面从 git 中 1a 开始, (tag=1a),
from flask import Flaskfrom flask import requestapp =Flask(__name__)@app.route('/')def index(): # user_agent user_agent = request.headers.get('User-Agent') return '<h1>Hello World! This is My Flask Project. </h1>'@app.route('/user/<name>')def user(name): return '<h1>Hello, %s!</h1>' % nameif __name__ == '__main__': app.run(debug=True) 初始程序 hello.py 定义了 index() , user 两个函数(称之为视图函数), 分别route 产生了两类网页:
- localhost:port/
- localhost:port/user/foobar
页面会显示对应的 html 内容. 由自身的 python 函数定义. 如不加指定, 则使用端口为5000.
通过运行服务器的脚本主不可以访问了, 由于 hello.py 给出了 main 入口, 因此
$ python hello.py
便可启动服务, 中止服务器进行使用 ^ + C.
这里就会显示只有一级标题的"home page"了.
index() 函数 返回的是一段html 内容, 还可以返回第2个结果,
return '4a249f0d628e2318394fd9b75b4636b1Hello World! This is My Flask Project. 473f0a7621bec819994bb5020d29372a', 400
400 就是页面的state code. 后面涉及到定制错误页面时会涉及到.
Flask-Script
这里只有app.run()方法来定义嗠的启动, 但这样纯在Py-script中定义非常不方便, Flask-script是Flask扩展, 为Flask程序添加了命令行解析器. 自带了一组常用选项和自定义命令.
-
pip install flask-script
-
封装 & 使用
from flask.ext.script import Managermanager = Manager(app)... ...... ...if __name__ == "__main__": manager.run()
启动形式(usage):
-
python hello.py shell 用于维护任务和测试, 调试
-
python hello.py runserver 启动Web服务器 其下又可使用以下参数
- -t HOST 或 --host
- -p PORT 或 --port
- --threaded
- --processes PROCESSES
- --passthrough-errors
- -d, --no-debug
- -r --no-reload
模板 Templates --- Jinja 2
上面的视图函数非常简单, 对于最简单的一类请求来说这就足够, 但一般而言, 请求会改变程序的状态, 这种变化也会在视图函数中产生.
考虑, 是一个用户在网站中的注册行为. 会有一个用户输入的表单(username, useremail, password, confirm password, valid code, ... ) , 服务器接受到用户的请求(带有信息)之后, Flask会把请求分发到处理注册机制的视图函数中, 这个视图函数需要访问数据库, 首先看看user是否已经在数据库了, 如果在则返回警告, 如果不在就继续验证密码是否符合规范, ... 直到满足条件生成一个新用户, 添加至数据库. 然后将响应回送至浏览器. 这个流程就涉及到了 业务逻辑 和 表现逻辑 .
两种逻辑的混淆就会大大增加代码的理解负担和维护成本.
模板是一个包含响应文本的文件. 其中用占位的方式表示了动态部分. 具体的值只在请求的context中才会知道. Flask使用Jinja2这一强大模板引擎.
Jinja2
首先看一个最简单的jinja2模板文件, user.html:
<h1>Hello, {{ name }}!</h1> 这个文件中使用 {{ xxx }}} 的方式定义了 name 这一动态变量, 后续要使用 外部渲染的方式进行传值.
from flask import ..., render_template ... @app.route('/user/<name>')def user(name): return render_template('user.html', name=name) 这里再来简单介绍Jinja2的变量处理. 先来看支持的变量类型及格式
-
4a249f0d628e2318394fd9b75b4636b1Hello, {{ name }}!473f0a7621bec819994bb5020d29372a str
-
4a249f0d628e2318394fd9b75b4636b1Hello, {{ dict1['key'] }}!473f0a7621bec819994bb5020d29372a dict
-
4a249f0d628e2318394fd9b75b4636b1Hello, {{ mylist[3] }}!473f0a7621bec819994bb5020d29372a list
-
4a249f0d628e2318394fd9b75b4636b1Hello, {{ obj.somemethod() }}!473f0a7621bec819994bb5020d29372a function
其次, 若是需要一些变换, 也可以模板文件中来完成修改, 这一操作通过Jinja2的 过滤器 实现.
如:
- {{ name|capitalize }} 完成首字母大写
- {{ name|safe }} 渲染值是不转义
- {{ name|upper }} 完成字母大写
- {{ name|lower }} 完成字母小写
- {{ name|trim }} 完成首尾空格去除
- {{ name|striptags }} 渲染之前把值中所有HTML标签去掉.
转义: 默认情况下, Jinja2 会转义所有变量 --
Hello... 会被渲染成 '4a249f0d628e2318394fd9b75b4636b1Hello .... , 浏览器能显示这个h1元素, 但不会进行解释. 千万不要在不可信的值上使用safe过滤器, 特别是用户在表单的输入.
完成的过滤器文档在 Jinja2文档
控制结构
渲染流程当然也涉及到结构的概念(先后顺序, 条件分支...), 参考下面的例子:
{% if user %} Hello, {{ user }}!{% else %} Hello, Stranger!{% endif %} 除此之外, Jinja2还支持宏(macro, 类似于Python中的函数), 当涉及到重复渲染时, 可能会用到. 宏以外, 还可以使用 模板的继承.
模板继承
模板继承, 将不同页面中相同的元素抽象成一个block. 这是一个base范例
<html><head> {% block head %} <title>{% block title %}{% endblock %} - My Application</title> {% endblock %}</head><body> {% block body %} {% endblock %}</body></html> 这个基模板就有3个block: head, title和body(注: title是嵌套在head之中的), 在继承时, 就可以使用了.
{% extends "base.html" %}{% block title %}Index{% endblock %}{% block head %} {{ super() }} <style> </style>{% endblock %}{% block body %}<h1>Hello, World!</h1>{% endblock %} 框架 - Bottstrap
Bootstrap( http://getbootstrap.com/ ) 是Twitter开发的一汞客户端框架, 提供了用户界面组件, 简洁有力, 兼容Web浏览器. 但因其不涉及服务器, 服务器使用还要提供 CSS和JS文件的HTML响应. Flask提供了拓展.
Flask-Bootstrap
- pip install flask-bootstrap
- 初始化
from flask.ext.boostrap import Bootstrap bootstrap = Bootstrap(app)
- 使用
在模板文件中继承,
{% extends "bootstrap/base.html" %} ... 从Flask-Bootstrap中extends了base基模板文件, 从而引入了Bootstrap中所有CSS和JS文件.
自定义错误页面
如果用户输入了错误的route 地址, 为了体现更好的体验, 保持完整统一性. 可通过自定义实现.
常见的错误代码有404: 客户请求未知页; 500, 有未处理的异常时显示.
@app.errorhandler(404)def page_not_found(e): return render_template('404.html'), 404@app.errorhandler(500)def internal_server_error(e): return render_template('500.html'), 500 404.html
{% extends "base.html" %}{% block title %}Flasky - Page Not Found{% endblock %}{% block page_content %}<div class="page-header"> <h1>Not Found</h1></div>{% endblock %} 链接
Flask提供了url_for()辅助函数, 可以使用程序URL映射中保存的信息来生成URL.
url_for() 最简单用法是以视图函数名作为参数, 返回对应URL. 例如, hello.py 程序中调用 url_for('index') 得到结果是 / 调用 url_for('index', _external=True)返回绝对地址, 这里是 http://localhost:5000
如果生成在浏览器之外使用的链接, 则必须使用绝对地址, 例如: 在电子邮件中发送的注册确认link.
静态文件
Web程序不光是由Python代码和模板组成, 大多数程序还会涉及静态文件. 如引用的图片, JS源码文件和CSS.
- static
对静态文件的引用会被作为一个特殊的route, 即 /staticor/
例如调用 url_for('static', filename='css/style.css', _external=True) 得到结果为 http://localhost:5000/static/css/style.css
默认情况下, Flask将会在根目录寻找static的子目录寻找静态文件.
Flask-Moment
使用Web程序处理时间, 考虑时区, 格式化的问题. 有一个使用JS开发的优秀客户端开源代码库, 名为 moment.js , 可以实现在浏览器中渲染日期和时间. Flask-Moment是在此基础的flask拓展, 能把moment.js集成到Jinja2中.
-
pip install flask-moment
-
初始化
from flask.ext.moment import Momentmoment = Moment(app)
- 使用
使用Flask-Moment渲染时间戳,
<p>The local date and time is {{ moment(current_time).format('LLL') }}.</p><p>That was {{ moment(current_time).fromNow(refresh=True) }}.</p> format('LLL')根据客户端电脑中的时区和区域设置渲染日期和时间, 参数'L'到'LLLL'分别对不同的复杂程序. format() 函数还可接触自定义的格式符号.
fromNow() 渲染相对时间戳, 如 2 minute ago, 随着refresh=True的指定, 内容会随着时间推移而更新. 一直待在这样的页面, 会发现这个值是动态变化的.
- 语言本地化
语言可在模板中选择, 传到lang()函数,
{{ moment.lang('es') }}