flask入門2-模板引擎

時間 2019-12-10

標籤 flask 入門模板引擎欄目 Python 简体版

原文原文鏈接

day2模板

模板引擎

說明：模板文件就是按照必定的規則書寫的展現效果的HTML文件模板引擎就是負責按照指定規則進行替換的工具css

模板引擎選擇jinja2html

1、渲染模板的方法

將渲染的模板進行返回

render_template()python
渲染字符串返回

render_templates_string()flask

實例bootstrap

@app.route('/')
def index():
    #將模板內容響應給用戶
    return render_template('index.html')
    #渲染一內容響應給用戶
    return render_template_string('<h1 style="color:green;font-size:18px;">原諒色</h1>')

2、模板的語法

模板中只存在倆種語法segmentfault

變量app

{{ var }}ide

#像模板文件中傳參
return render_template('index.html',title='首惡')
{{ title }}

標籤
{% 標籤名 %}函數

注意：工具

在模板中使用字典中的鍵 須要像使用對象得方式來調用
{{data.key}}

若是在模板中給定的變量不存在則插入的是空字符串不會報錯

3、過濾器

過濾器使用管道符 | 來使用的

{{ var|abs }} 返回一個數值的絕對值
default 設置默認值

只有當給定的變量不存在時則執行默認值

當設置default的boolean的時候會執行默認值
```
<li>{{ data.bool|default('我是默認值',boolean=True) }}</li>
```
first: 取出變量中的第一個字符
last: 取出變量中的最後一個字符

format：字符的格式化

<li>{{ '我叫%s 我今年%d歲了 個人存款爲 %.2f'|format('羅鐵漢',38,23) }}</li>

length: 返回變量值的長度

join: 拼接成字符串

<li>{{ [1,2,3,4]|join('') }}</li>
<li>{{ [1,2,3,4]|join('x') }}</li>

safe: 不轉義標籤原樣顯示
lower 轉爲小寫
upper 轉爲大寫

replace 替換

<li>{{ data.string|replace('a','x') }}</li>

striptages 去除HTML標籤
{{ data.html|striptags }}

4、標籤

語法格式：{% 標籤名 %}

(1) if

實例

{% if data.bool %}
        <li>{{ data.bool }}值爲真</li>
{% elif True %}
        <li>{{ True }}職位真</li>
{% else %}
        <li>{{ data.bool }}值爲假</li>
{% endif %}

(2) for 循環

實例

{% for i in data.xxxx %}
{#  錯誤的迭代方法TypeError: 'bool' object is not iterable #}
{#    {% for i in data.bool %}#}
        <li>{{ i }}</li>
{% else %}
        <li>當迭代的變量不存在時 則執行else</li>
{% endfor %}

注意：

break continue 不可以在這裏使用

迭代字典

{% for k,v in data.items() %}
     <li>{{ k }}=>{{ v }}</li>
{% endfor %}

獲取當前迭代的狀態

變量	描述
loop.index	獲取當前迭代的索引從1開始
loop.index0	獲取當前迭代的索引從0開始
loop.first	是否爲第一次迭代
loop.last	是否爲最後一次迭代
loop.length	迭代的長度

6、註釋

{# 多行註釋 #}

7、文件包含 include

至關於把一個文件拷貝到當前的你的包含的位置

實例

{% include 'common/header.html' %}
<div>我是中間的內容</div>
{% include 'common/footer.html' %}

注意：

包含的公共的文件中只存放公共的代碼除此之外什麼都不要存在
導入的時候若是文件和在同一級別直接導入就能夠若是包含在某個目錄中須要寫出路徑
```
{% include 'common/header.html' %}
{% include 'test.html' %}
```

8、宏 macro

概念： 相似python中的函數

實例

在macro.html中

{% macro input(name,type='text',value='') %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

宏的調用

{{ input('text','username','') }}
{{ input() }} 
{{ input(type='password',name='userpass') }}

宏的導入

(1) import

{% import 'test.html' as test %}
{% import 'common/test.html' as test %}
<p>用戶名： {{ test.input(type='password',name='userpass') }}</p>

(2) form import

{% from 'test.html' import input %}
{% from 'common/test.html' import input %}
<p>用戶名： {{ input(type='password',name='userpass') }}</p>

注意：

宏的調用只能在定義的下方去調用不然未定義
宏若是存在形參且沒有默認值則能夠調用(沒意義)
形參的默認值須要遵循默認值規則有默認值的參數放右側
能夠正常使用關鍵字參數

9、繼承 extends

語法：

{% extends %} 繼承某個模板
{% block %} 挖坑和填坑
{{ super() }} 調用被替換掉的代碼

base.html

<!DOCTYPE html>
<html lang="en">
<head>
{% block header %}
    <meta charset="UTF-8">
    {% block meta %}
    {% endblock %}
    <title>{% block title%}首頁{% endblock %}</title>
    <style>
        {% block style %}
            p{color:red;}
        {% endblock %}
    </style>
    {% block link %}
    {% endblock %}
    {% block script %}
    {% endblock %}
{% endblock %}
</head>
<body>
<header>頭部</header>
{% block con %}
    我是中間的內容部分
{% endblock %}
<footer>尾部</footer>
</body>
</html>

index.html繼承 base.html

{% extends 'common/base.html' %}
{% block title %}
個人首頁
{% endblock %}
{% block style %}
    {{ super() }}
    p{color:green;}
{% endblock %}
{% block con %}
<p>我是首頁的內容</p>
    我是首頁的內容
{% endblock %}

注意：

若是當替換某個樣式的時候全部原來的樣式都消失了去查看是否使用了super()

10、flask-bootstrap

安裝

pip install flask-bootstrap

sudo pip3 install flask-bootstrap

使用

繼承 bootstrap/base.html 基礎模板改形成適用於本身網站的base.html基礎模板

本身的base.html

{% extends 'bootstrap/base.html' %}
{% block navbar %}
    <nav class="navbar navbar-inverse" style="border-radius: 0px;">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="#"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">發帖子</a></li>

                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                    <li><a href="#">註冊</a></li>
                    <li><a href="#">登陸</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">我的中心 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">我的信息</a></li>
                            <li><a href="#">修改頭像</a></li>
                            <li><a href="#">修改密碼</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">退出登陸</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
{% endblock %}
{% block content %}
    <div class="container">
        {% block pagecontent %}
            網頁的中間內容部分寫在當前的位置
        {% endblock %}
    </div>
{% endblock %}

使用 index.html

{% extends 'common/base.html' %}
{% block title %}
首頁
{% endblock %}

11、錯誤頁面的定製

manage.py

@app.errorhandler(404)
def page_not_found(e):
    return render_template('common/error.html',error=e,code=404)

@app.errorhandler(500)
def server_error(e):
    return render_template('common/error.html',error=e,code=500)

error.html

{% extends 'common/base.html' %}
{% block title %}
    {{ code }}錯誤
{% endblock %}
{% block pagecontent %}
    <div class="alert alert-danger" role="alert">{{ error }}</div>
{% endblock %}

12、視圖傳遞多個參數

(1) 原始傳參

@app.route('/')
def index():
    return render_template('index.html',arg1=1,arg2=2...)

(2) 使用字典

@app.route('/')
def index():
    return render_template('index.html',arg={arg1:1,arg2:2...})
    kwarg={arg1:1,arg2:2...}
    return render_template('index.html',``)

(3) 使用全局變量g

@app.route('/')
def index():
    g.name = '張三'
    g.age = 18
    return render_template('index.html')
模板中
    <ol>
        <li>{{ g.name }}</li>
        <li>{{ g.age }}</li>
    </ol>

(4) 使用 **locals()

@app.route('/')
def index():
    name = '張三'
    age = 18
    print(locals())
    return render_template('index.html',**locals())
模板中
<li>{{ name }}</li>
<li>{{ age }}</li>

十3、url_for 構造絕對的連接地址

@app.route('/test/')
def test():
    print(url_for('index',_external=True))
    return 'test'

十4、加載靜態資源

靜態資源：圖片，css，js，視頻，音頻，，

實例

<img src="{{ url_for('static',filename='img/17.jpg') }}" alt="">

flask入門3-表單

1. Thymeleaf模板引擎入門
2. Velocity模板引擎入門
3. VTemplate模板引擎入門
4. thymeleaf模板引擎入門
5. Flask框架——模板引擎
6. srpingboot 菜鳥入門 -- 6、Thymeleaf模板引擎，freemarker模板引擎
7. Jade模板引擎入門教程
8. 【Node.js】Express入門_模板引擎hbs
9. 模板引擎jsrender的簡單入門
10. jade模板引擎入門教程
更多相關文章...
• Maven 項目模板 - Maven教程
• Eclipse 代碼模板 - Eclipse 教程
• YAML 入門教程
• 委託模式

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

flask入門2-模板引擎

day2模板

模板引擎

1、渲染模板的方法

將渲染的模板進行返回

渲染字符串返回

2、模板的語法

3、過濾器

4、標籤

語法格式 ：{% 標籤名 %}

(1) if

(2) for 循環

迭代字典

獲取當前迭代的狀態

6、註釋

7、文件包含 include

8、宏 macro

宏的導入

(1) import

(2) form import

9、繼承 extends

語法：

base.html

index.html繼承 base.html

10、flask-bootstrap

本身的base.html

11、錯誤頁面的定製

manage.py

error.html

12、視圖傳遞多個參數

(1) 原始傳參

(2) 使用字典

(3) 使用全局變量g

(4) 使用 **locals()

十3、url_for 構造絕對的連接地址

十4、加載靜態資源

語法格式：{% 標籤名 %}