search

Home >Web Front-end >HTML Tutorial >2016-01-04-1 flask web 开发(一)_html/css_WEB-ITnose

2016-01-04-1 flask web 开发(一)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:00:571552browse

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') }}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：LR的实用小小课 做个小水印打倒盗图贼_html/css_WEB-ITnoseNext article：用类与原型写一个组件（三）--学习笔记_html/css_WEB-ITnose

Related articles

See more