3flask模板

3模板

看完第三章回来总结的：

都是用的扩展类。的基础用法。配置pip 然后app=扩展（app），然后再用那些封装好的。

表现逻辑用模板提高程序的可维护性。业务逻辑用

3.1Jinja2模板引擎

3.1.1渲染模板

renturn_template('user.html',name=name)

3.1.2变量

部分过滤器

https://jinja.palletsprojects.com/en/2.11.x/templates/#builtin-filters

3.1.3控制结构

if、for、宏（=python中的函数）

基模板block块

include:引入html？

extends:导入模板。（模板继承）

3.2使用Flask-Bootstrap集成Twitter Bootstrap

http://getbootstrap.com/

git checkout 3b

flask_bootstrap

from flask_bootstrap import Bootstrap
from flask import Flask, render_template
app = Flask(__name__)
bootstrap = Bootstrap(app)  # 放在最后也正常，但是为了加载最好放在这里，后面要用，对吧！
@app.route('/user/<name>')
def user(name):
    return render_template("user.html", name=name)
​
# if __name__=='__main__':
#     app.run()

user.html

{#{% extends 'D:PythonCodeFlask_Web_Dog_bookLibsite-packagesflask_bootstrap	emplatesootstrapase.html' %}#}
{% extends "bootstrap/base.html" %}
{% block 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="/">刘洋</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">家园</a></li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    <div class="container">
        <h1>Hello,{{ name }}!</h1>
    </div>
{% endblock %}
​

{#{% extends 'D:PythonCodeFlask_Web_Dog_bookLibsite-packagesflask_bootstrap emplatesootstrapase.html' %}#}

这样写的时候，报错，可能是f没有识别，小红点处

jinja2.exceptions.TemplateNotFound: D:PythonCodeFlask_Web_Dog_bookLibsite-packages•lask_bootstrap   emplateootstraase.html

竟然能找到地址。不通过绝对路径，加载了地址了吗

这个还以为是错的，没想到extends，可以正常识别。

结果显示：

base.html中的其他可用模块

集成模板时扩展用super

3.3自定义错误页面

404：page not found

500: internal_server_error

写模板，改block 'page_content'

然后，user.html、404.html、505.html都继承这个模板。

404和user.html修改如下。

但是不知道什么原因：

error1 ?

我这个写的500，去了404的页面。

404是路由不匹配的。

后端显示。500

"GET /404 HTTP/1.1" 404 -
"GET /500 HTTP/1.1" 404 -

base.html

{#{% extends 'D:PythonCodeFlask_Web_Dog_bookLibsite-packagesflask_bootstrap	emplatesootstrapase.html' %}#}
{% extends "bootstrap/base.html" %}
{% block 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="/">刘洋</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">家园</a></li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
​
    <div class="container">
        {% block page_content %}{% endblock %}
    </div>
{% endblock %}
​
​
​

404页面

{% extends "base.html" %}
{% block title %}Flasker - Page Not Found{% endblock %}
{% block page_content %}
    <div class="page-header">
        <h1>Not Found</h1>
    </div>
{% endblock %}
​

user.html

{% extends "base.html" %}
{% block title %}刘洋的秘密花园{% endblock %}
{% block page_content %}
    <div class="container">
        <h1>Hello,{{ name }}!</h1>
    </div>
{% endblock %}

500.html

{% extends "base.html" %}
{% block title %}Flasker - Internal_Server_error{% endblock %}
{% block page_content %}
    <div class="page-header">
        <h1>internal_server_error</h1>
    </div>
{% endblock %}
​

F4 404和505的自定义写法以及加载模板的程序

from flask_bootstrap import Bootstrap
from flask import Flask, render_template
app = Flask(__name__)
bootstrap = Bootstrap(app)  # 放在最后也正常，但是为了加载最好放在这里，后面要用，对吧！
# @app.route('/user/<name>')
# def user(name):
#     return render_template("base.html", name=name)

@app.route('/user/<name>')
def user(name):
    return render_template("user.html", name=name)

@app.errorhandler(500)  # 内部服务器错误
def internal_server_error(e):
    return render_template('500.html'), 500

@app.errorhandler(404)
def page_not_fount(e):
    return render_template('404.html'), 404




# if __name__=='__main__':
#     app.run()

3.4链接

url_for()防止混乱的/url依赖。改一个都变。都要改。还可以选择绝对路径和相对路径。

3.5静态文件

图片什么的。css,js什么，在static下。

还是要用url_for(,filename='css/styles.css')

怎么两个link?

{% block head %}
    {{ super() }}
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}

写link的时候，没有提示。rel='shortcut icon'以及后面的url_for()都没有。

nocan1?

不过看不懂第二行代码什么意思？和第一行啥区别？url_for url_for

3.6使用Flask_Moment本地化日期和时间

初始化扩展第三个了。挺方便的。

moment.js 集成到Jinja2模板中。

base.html改js代码。集成以及用一个类。

然后写py文件。函数传过去值。实时更新。

多种格式。以及语言本地化。

F5时间本地化程序

from flask import Flask, render_template
from datetime import datetime
app = Flask(__name__)
from flask_moment import Moment
manager = Moment(app)

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

base.html

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

index.html

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