詳解flask入門模板引擎

更新時(shí)間：2018年07月18日 10:12:45 作者：rottengeek

這篇文章主要介紹了詳解flask入門模板引擎，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

模板引擎

說(shuō)明：模板文件就是按照一定的規(guī)則書寫的展示效果的HTML文件模板引擎就是負(fù)責(zé)按照指定規(guī)則進(jìn)行替換的工具

模板引擎選擇jinja2

一、渲染模板的方法

1、將渲染的模板進(jìn)行返回

render_template()

2、渲染字符串返回

render_templates_string()

實(shí)例

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

二、模板的語(yǔ)法

模板中只存在倆種語(yǔ)法

1、變量

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

2、標(biāo)簽

{% 標(biāo)簽名 %}

注意：

在模板中使用字典中的鍵需要像使用對(duì)象得方式來(lái)調(diào)用

如果在模板中給定的變量不存在則插入的是空字符串不會(huì)報(bào)錯(cuò)

三、過(guò)濾器

過(guò)濾器使用管道符 | 來(lái)使用的

1、{{ var|abs }} 返回一個(gè)數(shù)值的絕對(duì)值

2、default 設(shè)置默認(rèn)值

只有當(dāng)給定的變量不存在時(shí) 則執(zhí)行默認(rèn)值

當(dāng)設(shè)置default的boolean的時(shí)候會(huì)執(zhí)行默認(rèn)值

<li>{{ data.bool|default('我是默認(rèn)值',boolean=True) }}</li>

3、first: 取出變量中的第一個(gè)字符

4、last: 取出變量中的最后一個(gè)字符

5、format：字符的格式化

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

6、length: 返回變量值的長(zhǎng)度

7、join: 拼接成字符串

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

8、safe: 不轉(zhuǎn)義標(biāo)簽原樣顯示

9、lower 轉(zhuǎn)為小寫

10、upper 轉(zhuǎn)為大寫

11、replace 替換

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

12、striptages 去除HTML標(biāo)簽

四、標(biāo)簽

語(yǔ)法格式：{% 標(biāo)簽名 %}

(1) if

實(shí)例

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

(2) for 循環(huán)

實(shí)例

{% for i in data.xxxx %}
{# 錯(cuò)誤的迭代方法TypeError: 'bool' object is not iterable #}
{#  {% for i in data.bool %}#}
    <li>{{ i }}</li>
{% else %}
    <li>當(dāng)?shù)淖兞坎淮嬖跁r(shí) 則執(zhí)行else</li>
{% endfor %}

注意：

break continue 不能夠在這里使用

迭代字典

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

獲取當(dāng)前迭代的狀態(tài)

變量	描述
loop.index	獲取當(dāng)前迭代的索引從1開始
loop.index0	獲取當(dāng)前迭代的索引從0開始
loop.first	是否為第一次迭代
loop.last	是否為最后一次迭代
loop.length	迭代的長(zhǎng)度

六、注釋

{# 多行注釋 #}

七、文件包含 include

相當(dāng)于把一個(gè)文件拷貝到當(dāng)前的你的包含的位置

實(shí)例

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

注意：

1、包含的公共的文件中只存放公共的代碼除此以外什么都不要存在

2、導(dǎo)入的時(shí)候如果文件和在同一級(jí)別直接導(dǎo)入就可以如果包含在某個(gè)目錄中需要寫出路徑

{% include 'common/header.html' %}
{% include 'test.html' %}

八、宏 macro

概念：類似python中的函數(shù)

實(shí)例

在macro.html中

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

宏的調(diào)用

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

宏的導(dǎo)入

(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>

注意：

宏的調(diào)用只能在定義的下方去調(diào)用否則未定義
宏如果存在形參且沒(méi)有默認(rèn)值則可以調(diào)用(沒(méi)意義)
形參的默認(rèn)值需要遵循默認(rèn)值規(guī)則有默認(rèn)值的參數(shù) 放右側(cè)
可以正常使用關(guān)鍵字參數(shù)

九、繼承 extends

語(yǔ)法：

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

base.html

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

index.html繼承 base.html

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

注意：

如果當(dāng)替換某個(gè)樣式的時(shí)候所有原來(lái)的樣式都消失了去查看是否使用了super()

十、flask-bootstrap

安裝

pip install flask-bootstrap

sudo pip3 install flask-bootstrap

使用

繼承 bootstrap/base.html 基礎(chǔ)模板改造成適用于自己網(wǎng)站的base.html基礎(chǔ)模板

自己的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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁(yè) <span class="sr-only">(current)</span></a></li>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >發(fā)帖子</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注冊(cè)</a></li>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登錄</a></li>
          <li class="dropdown">
            <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">個(gè)人中心 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >個(gè)人信息</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改頭像</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改密碼</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登錄</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
{% endblock %}
{% block content %}
  <div class="container">
    {% block pagecontent %}
      網(wǎng)頁(yè)的中間內(nèi)容部分寫在當(dāng)前的位置
    {% endblock %}
  </div>
{% endblock %}

使用 index.html

{% extends 'common/base.html' %}
{% block title %}
首頁(yè)
{% endblock %}

十一、錯(cuò)誤頁(yè)面的定制

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 }}錯(cuò)誤
{% endblock %}
{% block pagecontent %}
  <div class="alert alert-danger" role="alert">{{ error }}</div>
{% endblock %}

十二、視圖傳遞多個(gè)參數(shù)

(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>

十三、url_for 構(gòu)造絕對(duì)的鏈接地址

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

十四、加載靜態(tài)資源

靜態(tài)資源：圖片，css，js，視頻，音頻，，

實(shí)例

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解flask入門模板引擎

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具