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
flask web如何加载html,Flask Web开发学习笔记(三)相关推荐
- 移动Web开发--学习笔记三 响应式项目实战(微金所)
响应式项目实战(微金所) 响应式项目开发流程 选择一种屏幕格式进行开发 相应功能模块完成后,测试是否响应式效果 确保响应式效果满足要求 进行下一个功能模块开发 使用自定义字体图标 创建自己的字体图标h ...
- php加载shellcode,萌新逆向学习笔记——CreateRemoteThread注入Shellcode
前言 笔者已经有一段时间没发文了,说实话最近学习逆向没劲儿,不知道是不是因为天气总是变化无常,人感觉有点疲惫. 友情提示:下面一堆笔者废话,所以只想看技术细节可跳过. 之前一直在看韩国人写的<逆 ...
- Web 页面加载动画
Web 页面加载动画 在 Web 开发中,通常会需要在页面中添加加载动画,以减少用户等待页面加载的焦虑感.下面介绍一个常用的页面加载动画的实现方法,同时介绍其 CSS 和 JavaScript 代码. ...
- JAVA Web.xml 加载顺序
web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...
- 内嵌WEB服务器加载原理
内嵌WEB服务器加载原理 理解里面的tomcat是如何启动的 Startup.bat Server.start() 1,概述 我们在使用springboot项目的时候并没有使用外部的tomcat,那么 ...
- oracle 找不到程序单元,Oracle Web ADI 加载时错误:ORA-06508: PL/SQL: 无法在调用之前找到程序单元...
Oracle EBS 的Web ADI给批量导入数据提供一个不错的解决方案.但是,Web ADI开发比较麻,主要缺点如: 1.集成器设置好以后不能修改,必须要事先考虑包的存储过程或函数的参数.则否,存 ...
- web.xml加载详细过程(步骤)
转载自:http://blog.csdn.net/believejava/article/details/43229361 这篇文章主要是综合网上关于web.xml的一些介绍,希望对大家有所帮助,也欢 ...
- web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
- python网页优化_400% 的飞跃-web 页面加载速度优化实战
前言 一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. 正常 ...
最新文章
- java c s 与b s架构结合使用_Java技术学习笔记:C/S 与B/S 区别
- 第四周实践项目3单链表:逆置、连接与递增判断(包含三个程序)
- 一个不错的报表工具 open flash chart 2
- PP面向订单生产模式探讨
- 理清Python网络编程
- 神策数据多少含金量?PICOOC 有品帮你智能称量
- 0 uC/OS 系统精讲索引
- partition oracle用法,Oracle partition by 使用说明
- 04.卷积神经网络 W2.深度卷积网络:实例探究(作业:Keras教程+ResNets残差网络)
- scrapy 模拟登陆
- 使用IDEA创建springcloud父工程
- 热点Key问题的发现与解决
- 苹果要换Type-C接口?丁磊建议统一充电器接口 工信部回复来了...
- 一份阿里员工的Java问题排查工具单
- MySQL练习题 (练习表+题目+答案)
- Glide原生方法加载圆形图片
- 如何自己编写一个交通仿真软件(一)火种
- MySQL基础——多表查询
- Gateway 出现Can not connect to tcp://127.0.0.1: Connection refused
- 中缀表达式X=A+B*(C-(D+F))/E转后缀表达式之后是什么?
热门文章
- c语言简单题目练习之逆序数、时间差、找零计算器
- MegaCli使用方法
- ElasticSearch高级 (Query DSL查询 bulk批量操作 导入数据 各种查询 实战技巧-优化比重 全量与增量数据同步)
- c语言考试成绩评价规则编程,上海市高等学校计算机二级C语言程序设计考试大纲.doc...
- 陶泓达:4.11黄金原油白银最新走势分析及操作策略!
- Elasticsearch:ICU 分词器介绍
- 数据库--1166错误
- 笔电蓝屏--0x0000007E
- Devexpress 进度条皮肤设置
- 1月29日服务器例行维护公告,7月29日服务器例行维护公告 升至1.1.7.5