flask-bootstrap集成Bootstrap
Bootstrap是Twitter开发的一个开源框架,提供的用户界面组件可用于创建简洁且具有吸引力的网页。使用bootstrap需要(1)引用bootstrap层叠样式表和相关js(2)在代码中实例化所需组件。
安装flask-bootstrap
pip install flask-bootstrap
flask-bootstrap的实例化
from flask_bootstrap import Bootstrap
from flask import Flask,render_template
app=Flask(__name__)
bootstrap=Bootstrap(app)
使用flask-bootstrap模板
bootstemp3.html完整代码:
{% extends "bootstrap/base.html" %}
{% block title %}这是个title{% 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="https://www.baidu">这是个navbar,跳到百度</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 | upper}}!</h1>
</div>
</div>
{% endblock %}
- 首先Jinja2中的指令从flask-bootstrap中导入bootstrap/base.html,bootstemp3.html继承自bootstrap/base.html。flask-bootstrap的基模板base.html提供了一个网页框架,引入bootstrap所需的所有CSS和js文件。
- 基模板中定义了可以在衍生模块中重定义的块{% block %},本示例中使用到title、navbar、content这三种block。
base中定义的block
运行效果
自定义404页面
修改py文件,添加路由:
@app.errorhandler(404)
def page_not_found(e):
return render_template('404.html'),404
定义一个base.html,继承自bootstrap/base.html,是一个包含navbar的模板:
{% extends "bootstrap/base.html" %}
{% block title %}base{% 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="https://www.baidu">这是个navbar,跳到百度</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_content">
</div>
</div>
{% endblock %}
定义404.html,继承自base.html:
{% extends "base.html" %}
{% block title %}Page not Found{% endblock %}
{% block content %}
<div class="container">
<div class="page_content">
<h1>Not Found</h1>
</div>
</div>
{% endblock %}
重定向和用户会话
因为如果一个请求是包含表单数据的POST请求,在刷新页面后会再次提交表单。为了解决这个问题,需要用到重定向和用户会话。
用户会话是一种私有存储,存在于每个连接到服务器的客户端中。是一个请求上下文中的变量,名为session。
修改路由:
from flask import Flask,render_template,session,redirect,url_for
@app.route('/',methods=['GET','POST'])
def index():
myform = NameForm()
if myform.validate_on_submit():
session['name']=myform.name.data
return redirect(url_for('index'))
return render_template('index2.html',form=myform,name=session.get('name'))
注意:
- 当redirect之后的请求是一个POST,这里如果没有修改路由规则为methods=[‘GET’,‘POST’],则会默认处理为GET,导致报出405的错误
- url_for函数的第一个且唯一必须指定的参数是端点名,即路由的内部名字,也就是处理路由@app.route所定义的那个函数,这里是index
更多推荐
(学习flask) 03 使用flask-bootstrap
发布评论