python Flask学习笔记(二)-集成bootstrap
2016-12-19 20:52
477 查看
Flask Bootstrap起步
user.html
自定义错误页面 404.html
在template/base.html中引入moment.js
hello.py中加入
即
index.html
发现时间总是不能正常显示,查看页面代码发现 时间的样式表中
效果如下图所示
本文参考《Flask Web开发-基于Python的Web应用开发实战》
pip3 install flask-script pip3 install flask-bootstrap
flask bootstrap使用
hello.pyfrom flask import Flask, render_template from flask_script import Manager from flask_bootstrap import Bootstrap app = Flask(__name__) manager = Manager(app) bootstrap = Bootstrap(app) @app.route('/') def index(): return render_template('index.html') @app.route('/user/<name>') def user(name): return render_template('user.html', name=name) if __name__ == '__main__': manager.run()
user.html
{% extends "bootstrap/base.html" %} {% block title %}Flasky{% 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"> <div class="page-header"> <h1>Hello, {{ name }}!</h1> </div> </div> {% endblock %}
自定义基类模板
base.html# 集成自bootstrap/base.html {% extends "bootstrap/base.html" %} {% block title %}Flasky{% 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 %}
继承自自定义base.html
user.html{% extends "base.html" %} {% block title %}Flasky{% endblock %} {% block page_content %} <div class="page-hearder"> <h1>Hello, {{ name }}</h1> </div> {% endblock %}
自定义错误页面 404.html
# 继承自定义base.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-Moment本地化日期时间
moment.js可以在浏览器渲染日期和事件,Flask-moment是一个Flask扩展,可以把moment.js集成到Jinja模板中pip install flask-moment
在template/base.html中引入moment.js
{% block script %} {{ super() }} {{ moment.include_moment() }} {% endblock %}
hello.py中加入
moment = Moment(app)
即
from flask import Flask, render_template from flask_script import Manager from flask_bootstrap import Bootstrap from datetime import datetime from flask_moment import Moment app = Flask(__name__) moment = Moment(app) manager = Manager(app) bootstrap = Bootstrap(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) if __name__ == '__main__': manager.run()
index.html
{% extends "base.html" %} {% block content %} {{ super() }} <h1>Hello the local date and time is {{ moment(current_time).format('LLLL') }}</h1> <p>That was {{ moment(current_time).fromNow(refresh=True) }}</p> {% endblock %}
发现时间总是不能正常显示,查看页面代码发现 时间的样式表中
style="display:none"改为
style="display:block"即可正常显示
效果如下图所示
本文参考《Flask Web开发-基于Python的Web应用开发实战》
相关文章推荐
- Python动态类型的学习---引用的理解
- Python3写爬虫(四)多线程实现数据爬取
- 垃圾邮件过滤器 python简单实现
- 下载并遍历 names.txt 文件,输出长度最长的回文人名。
- install and upgrade scrapy
- Scrapy的架构介绍
- Centos6 编译安装Python
- 如何使用 Flask 编写 Python Web API
- 使用Python生成Excel格式的图片
- 让Python文件也可以当bat文件运行
- [Python]推算数独
- Python中zip()函数用法举例
- Python中map()函数浅析
- Python将excel导入到mysql中
- Python在CAM软件Genesis2000中的应用
- 使用Shiboken为C++和Qt库创建Python绑定
- FREEBASIC 编译可被python调用的dll函数示例