Flask学习笔记-2-扩展bootstrap,moment

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

Bootstrap 是 Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代 Web 浏览器。Bootstrap是客户端框架，因此不会直接涉及服务器。服务器需要做的指示提供引用了 Bootstrap 层叠样式表（CSS）和 Javascript 文件的 HTML 响应，并在 HTML、CSS 和 JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。

安装

pip install flask-bootstrap

视图函数中调用run.py

from flask_bootstrap import Bootstrap

app=Flask(__name__)
bootstrap = Bootstrap(app) #生成实例

编写模板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 %}

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

安装

pip install flask-moment 

视图函数中run.py

from flask import *
from datetime import datetime

from flask_bootstrap import Bootstrap

from flask_moment import Moment

app=Flask(__name__)
bootstrap = Bootstrap(app)
moment=Moment(app)

@app.route('/')
def index():
        current_time=datetime.utcnow()
        return render_template('index.html',current_time=current_time)

渲染模板 base.html 中加入下面这段代码

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

index.html

{% extends "base.html" %}

<p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
<p>That was {{ moment(current_time).fromNow() }}</p>

注意：

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

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