flask web如何加载html,Flask Web开发学习笔记（三）

本文主要整理下几个Flask扩展：

0.Flask-Bootstrap：集成Twitter开发的一个开源框架Bootstrap。

1.Flask-Script：为Flask程序添加一个命令行解析器

2.Flask-Moment：本地化日期和时间

本篇基于前两篇博文，需要使用虚拟环境、使用pip安装flask等。

0.什么是扩展

Flask被设计为可扩展形式，故而没有提供一些重要的功能，例如数据库和用户认证，所以我们可以选择最适合的程序的包，或者按需求自行开发。

说白了扩展就是一些附加功能，独立完成某种功能。

1.Flask-Bootstrap

Bootstrap 是 Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代 Web 浏览器。

Bootstrap是客户端框架，因此不会直接涉及服务器。

服务器需要做的指示提供引用了 Bootstrap 层叠样式表(CSS)和 Javascript 文件的 HTML 响应，并在 HTML、CSS 和 JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。

0.安装Flask-Bootstrap扩展

pip install flask-bootstrap

1.创建app.py文件

app.py文件中写入：

from flask import Flask,render_template

from flask.ext.bootstrap import Bootstrap

app = Flask(__name__)

bootstrap = Bootstrap(app)#注意这个地方

@app.route('/')

def index():

return render_template('index.html')

if __name__ == "__main__":

app.run(debug = True)

解释下：

0.from flask.ext.bootstrap import Bootstrap：专为 Flask 开发的扩展都暴露在 flask.ext 命名空间下，Flask-Bootstrap 输出了一个 Bootstrap 类。

1.bootstrap = Bootstrap(app):Flask 扩展一般都在创建程序实例时初始化，这行代码是 Flask-Bootstrap 的初始化方法。

2.创建templates文件夹并创建base.html

base.html中写入：

{% extends "bootstrap/base.html" %}

{% block title %}Flask{% endblock %}

{% block navbar %}

Toggle navigation

Flasky

• Home

{% endblock %}

{% block content %}

{% block page_content %}{% endblock %}

{% endblock %}

解释下：

0.{% extends "bootstrap/base.html" %}：base.html模板继承自bootstrap/base.html

1.其中title、navbar、content都是bootstrap/base.html中定义的块(还有script等)。navbar是显示导航栏。其中的代码比较多，作用是添加Flasky和Home两个链接，理解下即可。

2.page_content块是自己加的。

3.以后的html页面直接继承base.html就可以啦。

3.创建index.html

index.html中写入：

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block page_content %}

这里是首页，Hello World！

{% endblock %}

解释下：

0.{% extends "base.html" %}：继承自base.html

1.page_content块就是上面的自己定义的块。

4.运行程序

显示如下：

运行结果.png

2.Flask-Script

Flask的开发Web服务器支持很多启动设置选项，但只能在脚本中作为参数传给app.run()函数。这种方式很不方便，传递设置选项的理想方式是使用命令行参数。

Flask-Scrip就是这么一个Flask扩展，为Flask程序添加一个命令行解析器。Flask-Script自带了一组常用选项，而且还支持自定义命令。

0.安装Flask-Script扩展

pip install flask-script

1.修改app.py文件

from flask import Flask,render_template

from flask.ext.bootstrap import Bootstrap

from flask.ext.script import Manager

app = Flask(__name__)

manager = Manager(app)#注意这个地方

@app.route('/')

def index():

return render_template('index.html')

if __name__ == "__main__":

manager.run()#注意这个地方

解释下：

0.from flask.ext.script import Manager：Flask-Script输出了一个名为Manager的类，同样也是***flask.ext.XXX***下。

1.manager.run()代替了app.run()，启动后就能解析命令行啦。

2.使用Flask-Script

0.运行app.py:python app.py

3.Flask-Moment

服务器需要统一时间单位，这和用户所在的地理位置无关，所以一般使用协调世界时间(Coordinated Universal Time,UTC)。用户不愿意看到UTC时间，他们更希望看到当地时间，而且采用当地惯用的格式。

要想在服务器上只使用UTC时间，一个优雅的解决方案是，把时间单位发送给Web浏览器。转换成当地时间，然后渲染。Web浏览器可以更好的完成这一任务，因为它能获取用户电脑中的时区和区域设置。

有一个使用JavaScript开发的优秀客户端开源代码，名为moment.js(http://momentjs.com/),它可以在浏览器中渲染日期和时间。

0.安装Flask-Moment扩展

pip install flask-moment

1.修改app.py文件

from flask import Flask,render_template

from flask.ext.bootstrap import Bootstrap

from flask.ext.script import Manager

from flask.ext.moment import Moment

from datetime import datetime

app = Flask(__name__)

manager = Manager(app)

bootstrap = Bootstrap(app)

moment = Moment(app)

@app.route('/')

def index():

return render_template('index.html',current_time=datetime.utcnow())

if __name__ == "__main__":

manager.run()

解释下：

0.from flask.ext.moment import Moment：导入一个Moment类

1.from datetime import datetime：导入一个datetime类，用于获取UTC时间

2.moment = Moment(app)：向模板开放了moment类，可以在模板中使用

3.current_time=datetime.utcnow()：获取当前UTC时间，作为参数传入index.html

2.修改base.html

base.html修改为：

{% extends "bootstrap/base.html" %}

{% block title %}Flask{% endblock %}

{% block navbar %}

Toggle navigation

Flasky

• Home

{% endblock %}

{% block content %}

{% block page_content %}{% endblock %}

{% block scripts %}

{{ super() }}

{{ moment.include_moment() }}

{% endblock %}

{% endblock %}

解释下：

0.除了moment.js，Flask-Moment还依赖jquery.js。但是Bootstrap中已经引入了jquery.js，故只需要引入moment.js

1.{{ moment.include_moment() }}：引入moment.js，请注意上方的{{ super() }}

3.修改index.html

index.html内容修改为如下：

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block page_content %}

这里是首页，Hello World！

{{ moment(current_time).format('LLL') }}

{{ moment(current_time).fromNow(refresh=True) }}

{% endblock %}

解释下：

0.{{ moment(current_time).format('LLL') }}：根据客户端电脑中的时区和区域设置渲染日期和时间。参数决定了渲染的方式，'L'到'LLL'分别对应不同的复杂度。format()函数还可以接受自定义的格式说明符。

1.{{ moment(current_time).fromNow(refresh=True) }}：moment是app.py开放的类，current_time是app.py传递过来的参数，fromNow()渲染相对时间戳，参数refresh=True会随着时间的推移自动刷新显示时间。

4.一个完整的Demo

这个Demo，包含上方未介绍到的东西：

0.url_for()函数的使用

1.静态文件的引入：设置网页的小图标(如百度网页的那个小熊掌)

2.自定义404错误页面

0.创建文件夹，包含文件

文件夹结构如下：

--app

--app.py

--templates

--base.html

--index.html

--user.html

--404.html

--static

--favicon.png

--venv

1.app.py

from flask import Flask,render_template

from flask.ext.bootstrap import Bootstrap

from flask.ext.script import Manager

from flask.ext.moment import Moment

from datetime import datetime

app = Flask(__name__)

manager = Manager(app)

bootstrap = Bootstrap(app)

moment = Moment(app)

@app.route('/')

def index():

return render_template('index.html',current_time=datetime.utcnow())

@app.route('/user/')

def user(name):

return render_template('user.html',name=name)

@app.errorhandler(404)

def page_not_found(e):

return render_template('404.html'),404

if __name__ == "__main__":

manager.run()

2.base.html

{% extends "bootstrap/base.html" %}

{% block head %}

{{ super() }}

{% endblock %}

{% block title %}Flask{% endblock %}

{% block navbar %}

Toggle navigation

Flasky

• Home

{% endblock %}

{% block content %}

{% block page_content %}{% endblock %}

{% block scripts %}

{{ super() }}

{{ moment.include_moment() }}

{% endblock %}

{% endblock %}

3.index.html

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block page_content %}

这里是首页，Hello World！

{{ moment(current_time).format('LLL') }}

{{ moment(current_time).fromNow(refresh=True) }}

{% endblock %}

4.user.html

{% extends "base.html" %}

{% block title %}User{% endblock %}

{% block page_content %}

{% if name %}

Hello {{ name }}

{% else %}

Hello Stranger

{% endif %}

{% endblock %}

5.404.html

{% extends "base.html" %}

{% block title %} 404 {% endblock %}

{% block page_content %}

404错误：页面没有找到

{% endblock %}

6.favicon.png