python flask学习(2)
本文主要整理下几个Flask扩展:
0.Flask-Bootstrap:集成Twitter开发的一个开源框架Bootstrap。
1.Flask-Script:为Flask程序添加一个命令行解析器
2.Flask-Moment:本地化日期和时间
基于jinja2的模板引擎实现效果
什么是flask扩展?
Flask被设计为可扩展形式,故而没有提供一些重要的功能,例如数据库和用户认证,所以我们可以选择最适合的程序的包,或者按需求自行开发。
这大大拓展了flask框架的延展性,可以让开发者自由的添加想要的功能。当然,灵活的设计也意味着设计难度的增加。
0.Flask-Bootstrap学习
创建app.py文件
from flask import Flask,render_template
from flask_bootstrap import Bootstrap //Python3.6中需要此种导入 app = Flask(__name__)
bootstrap = Bootstrap(app)#注意这个地方 @app.route('/')
def index():
return render_template('index.html') if __name__ == "__main__":
app.run(debug = True)
示例代码中,bootstrap = Bootstrap(app)详解:
Flask 扩展一般都在创建程序实例时初始化,这行代码是 Flask-Bootstrap 的初始化方法。
flask专用扩展都存储在flask.ext 命名空间下,Flask-Bootstrap 输出了一个 Bootstrap 类。在Python3.6中需要用flask_package方式导入。
创建templates文件夹并创建base.html
base.html中写入:
{% extends "bootstrap/base.html" %} {% block title %}Flask{% endblock %} {% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %} {% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
要点注意:
1.{% extends "bootstrap/base.html" %}是jinja2中的指令,声明从Flask-Bootstrap中导入bootstrap/base.html,从而实现模板继承
2.<div class="navbar navbar-inverse" role="navigation">该句code是bootstrap的默认导航栏声明语句,显示导航栏。这块代码较多,但主要作用是添加Flasky和Home两个链接
3.以后的html页面直接继承base.html就可以啦
3.创建index.html
index.html中写入:
{% extends "base.html" %} {% block title %}首页{% endblock %} {% block page_content %}
<h1>这里是首页,Hello World!</h1>
{% endblock %}
要点注意:
0.{% extends "base.html" %}
:继承自base.html
1.page_content
块就是上面的自己定义的块。
4.运行程序
显示如下:

2.Flask-Script
Flask的开发Web服务器支持很多启动设置选项,但只能在脚本中作为参数传给app.run()
函数。这种方式很不方便,传递设置选项的理想方式是使用命令行参数。
Flask-Scrip就是这么一个Flask扩展,为Flask程序添加一个命令行解析器。Flask-Script自带了一组常用选项,而且还支持自定义命令。
0.安装Flask-Script扩展
pip install flask-script
修改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()#注意这个地方
注意:此处代码用manager.run()取代了之前的app.run(),这样就可以实现解析命令行
3.Flask-Moment
服务器需要统一时间单位,这和用户所在的地理位置无关,所以一般使用协调世界时间(Coordinated Universal Time,UTC)。用户不愿意看到UTC时间,他们更希望看到当地时间,而且采用当地惯用的格式。
要想在服务器上只使用UTC时间,一个优雅的解决方案是,把时间单位发送给Web浏览器。转换成当地时间,然后渲染。Web浏览器可以更好的完成这一任务,因为它能获取用户电脑中的时区和区域设置。
有一个使用JavaScript开发的优秀客户端开源代码,名为moment.js(http://momentjs.com/),它可以在浏览器中渲染日期和时间。
修改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()
注意:
1.moment=Moment(app)是把程序实例传入构造方法实现初始化。
2.current_time=datetime.utcnow()获取当前时间,并作为参数传入index.html页面
接下来就需要前端接收后台数据并渲染了!
修改base.html
base.html修改为:
{% extends "bootstrap/base.html" %} {% block title %}Flask{% endblock %} {% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %} {% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div> <!--注意下方block script-->
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %} {% endblock %}
要点解释:
1.除了moment.js
,Flask-Moment还依赖jquery.js
。但是Bootstrap中已经引入了jquery.js,故只需要引入moment.js。其中代码
{{ moment.include_moment() }}就是引入moment.js的命令,但请注意上面的{{ super() }}。这是程序需要向已经有内容的块中添加新内容,必须用jinja2提供的super函数声明。
2.之前我将moment部分代码放在最上方,但是这样前端显示不出来。找了半天问题。发现应该放在{% block content %}中后半部分。
修改index.html
index.html内容修改为如下:
{% extends "base.html" %} {% block title %}首页{% endblock %} {% block page_content %}
<h1>这里是首页,Hello World!</h1> <p>{{ moment(current_time).format('LLL') }}</p>
<p>{{ moment(current_time).fromNow(refresh=True) }}</p> {% endblock %}
一个完整的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/<name>')
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() }}
<link rel="shortcut icon" href="{{ url_for('static',filename = 'favicon.png') }}" type='image/x-icon'/>
<link rel="icon" href="{{ url_for('static',filename = 'favicon.png') }}" type="image/x-icon"/>
{% endblock %} {% block title %}Flask{% endblock %} {% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %} {% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div> {% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %} {% endblock %}
3.index.html
{% extends "base.html" %} {% block title %}首页{% endblock %} {% block page_content %}
<h1>这里是首页,Hello World!</h1> <p>{{ moment(current_time).format('LLL') }}</p>
<p>{{ moment(current_time).fromNow(refresh=True) }}</p> {% endblock %}
4.user.html
{% extends "base.html" %} {% block title %}User{% endblock %} {% block page_content %} {% if name %}
<h1> Hello {{ name }} </h1>
{% else %}
<h1> Hello Stranger </h1>
{% endif %} {% endblock %}
5.404.html
{% extends "base.html" %} {% block title %} 404 {% endblock %} {% block page_content %}
<h1>404错误:页面没有找到 </h1>
{% endblock %}
python flask学习(2)的更多相关文章
- Python Flask学习笔记之模板
Python Flask学习笔记之模板 Jinja2模板引擎 默认情况下,Flask在程序文件夹中的templates子文件夹中寻找模板.Flask提供的render_template函数把Jinja ...
- Python Flask学习笔记之Hello World
Python Flask学习笔记之Hello World 安装virtualenv,配置Flask开发环境 virtualenv 虚拟环境是Python解释器的一个私有副本,在这个环境中可以安装私有包 ...
- Python Flask学习
开了一个新坑..一直以来对web的前端后端了解比较模糊,所以打算学一个后端框架,写个小博客什么的增长一下姿势水平. 初学嘛,选个相对轻量级一点的,就决定学习flask啦.
- python flask学习第2天 URL中两种方式传参
新创建项目 自己写个url映射到自定义的视图函数 在url中传递参数 app.py from flask import Flask app = Flask(__name__) @app.route ...
- python flask学习(3)
这次主要学习web表单.学了下,很像是Django的form表单验证.不过有许多的不同.可以说是功能更加碎块化.Django的验证方式是很固定和严谨的,风格完全不同. 尽管Flask的请求对象提供的对 ...
- python flask学习(1)与Git基础操作
今天从简单的flask开始完成Flask web开发的学习.今天学习了Git和GitHub项目的提交. Git尝试提交过程中出现了"Could not read from remote re ...
- Python Flask学习之安装SQL,python3,Pycharm(网上下载安装即可)
1,下载时更改pypi源.可以额外安装虚拟化环境:pip install -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.co ...
- python flask学习第1天
flask安装: 第一个flask程序: 用pycharm新建一个flask项目,新建项目的截图如下: app.py代码如下: #从flask这个包中导入Flask这个类 #Flask这个类是项目的核 ...
- Python Flask学习笔记(1)
1.搭建虚拟环境 a. 安装 virtualenv : pip3 install virtualenv b. 建立虚拟环境 : 任意目录下建立一个空文件(我的是 Py_WorkSpace) ,在该文件 ...
随机推荐
- 自定义带图标input样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- easyui tree 树形节点 formatter 渲染不起作用
接了个需求,需要对一个树形列表进行重新渲染,在进行渲染的过程中发现树形节点的formatter 属性无法生效.经反复测试,发现在外部环境中正常,但在项目环境中始终无效.最终发现问题出在 easyui ...
- 谈谈java中成员变量与成员方法继承的问题
谈谈java中成员变量与成员方法继承的问题 关于成员变量和成员方法的的继承问题,我也可以做一个小测试,来看看结果. 首先我们先创建一个父类:
- codeforces 569D D. Symmetric and Transitive(bell数+dp)
题目链接: D. Symmetric and Transitive time limit per test 1.5 seconds memory limit per test 256 megabyte ...
- C# HTML解析工具HtmlAgilityPack使用实例(一)
一.生成HTML字符串 //生成DOM字符串结构 HtmlNode container = HtmlNode.CreateNode("<div />"); HtmlNo ...
- CS231n 2016 通关 第四章-反向传播与神经网络(第一部分)
在上次的分享中,介绍了模型建立与使用梯度下降法优化参数.梯度校验,以及一些超参数的经验. 本节课的主要内容: 1==链式法则 2==深度学习框架中链式法则 3==全连接神经网络 =========== ...
- c++友元函数友元类
友元函数和友元类的需要: 类具有封装和信息隐藏的特性.只有类的成员函数才能访问类的私有成员,程序中的其他函数是无法访问私有成员的.非成员函数可以访问类中的公有成员,但是如果将数据成员都定义为公有的,这 ...
- 3-2if条件结构
不同条件做不同的操作.例如满100就减去20 条件结构 package com.imooc.operator; public class ConditionDemo1 { public static ...
- UVaLive 2965 Jurassic Remains (状态压缩)
题意:给定 n 个大写字母组成的字符串,选择尽量多的串,使得大写字母都能出现偶数次. 析:由于n比较小,我们可以枚举前n/2的所有组合,然后再从后面查找. 代码如下: #pragma comment( ...
- POJ3696【欧拉函数+欧拉定理】
题意: 求最小T,满足L的倍数且都由8组成,求长度: 思路: 很强势的福利:点 图片拿出去食用更优 //#include<bits/stdc++.h> #include<cstdio ...