碼上快樂

相關內容    簡體    繁體

flask的模板語言

本文轉載自   查看原文   2018-08-20 20:02   725 

目錄

Flask的模板語言是按Jinja2模板語言的標准，基於jinja2做了一點點的封裝

1.使用STUDENT字典傳遞到前端

后端:

@app.route("/student")
def index():

    return render_template("student.html", student=STUDENT)

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student information manage</title>
</head>
<body>
<div>{{ student }}</div>
<table border="1px">
           <tr>
               <td>{{ student.name }}</td>
               <td>{{ student["age"] }}</td>
               <td>{{ student.get("gender") }}</td>
           </tr>
</table>
</body>
</html>

2. STUDENT_LIST 列表傳入前端Jinja2 模板的操作

后端:

@app.route("/student_list")
def student_list():

    return render_template("student_list.html", student=STUDENT_LIST)

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student information manage</title>
</head>
<body>
<div>{{ student }}</div>
<table border="1xp">
    {% for foo in student %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ foo.name }}</td>
            <td>{{ foo.get("age") }}</td>
            <td>{{ foo["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

3.STUDENT_DICT 大字典傳入前端 Jinja2 模板

后端:

@app.route("/student_dict")
def student_dict():
    return render_template("student_dict.html", student=STUDENT_DICT)

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student information manage</title>
</head>
<body>
<table>
    {% for foo in student %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ student.get(foo).name }}</td>
            <td>{{ student[foo].get("age") }}</td>
            <td>{{ student[foo]["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

在遍歷字典的時候,foo 其實是相當於拿出了字典中的Key

4.結合所有的字符串兒全部專遞前端Jinja2 模板

后端:

@app.route("/allstudent")
def all_student():
    return render_template("all_student.html", student=STUDENT ,
                           student_list = STUDENT_LIST,
                           student_dict= STUDENT_DICT)

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student information manage</title>
</head>
<body>
<div>{{ student }}</div>
<table border="1px">
    <tr>
        <td>{{ student.name }}</td>
        <td>{{ student["age"] }}</td>
        <td>{{ student.get("gender") }}</td>
    </tr>
</table>
<hr>
<div>{{ student_list }}</div>
<table border="1xp">
    {% for foo in student_list %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ foo.name }}</td>
            <td>{{ foo.get("age") }}</td>
            <td>{{ foo["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
<hr>
<div>{{ student_dict }}</div>
<table border="1xp">
    {% for foo in student_dict %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ student_dict.get(foo).name }}</td>
            <td>{{ student_dict[foo].get("age") }}</td>
            <td>{{ student_dict[foo]["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>
View Code

render_template中可以傳遞多個關鍵字。當前端定義了jinja2的變量，而后端有什么都沒傳，會報錯。而后端傳個空字典或關鍵字參數就能解決。

5.利用 **{}字典的方式傳遞參數

后端:

@app.route("/allstudent")
def all_student():
    return render_template("all_student.html", **{"student":STUDENT ,
                           "student_list" : STUDENT_LIST,
                           "student_dict": STUDENT_DICT})

6. Jinja2 的高階用法

6.1. safe :

后端代碼:
from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")
def index():
    tag = "<input type='text' name='user' value='aa'>"
    return render_template("index.html",tag=tag)

app.run("0.0.0.0",5000)
前端代碼:
{{tag|safe}}

6.2Markup

后端代碼:
from flask import Flask
from flask import render_template
from flask import Markup  # 導入 flask 中的 Markup 模塊

app = Flask(__name__)

@app.route("/")
def index():
    tag = "<input type='text' name='user' value=’aa’>"
    markup_tag = Markup(tag)  # Markup幫助咱們在HTML的標簽上做了一層封裝,讓Jinja2模板語言知道這是一個安全的HTML標簽
    return render_template("index.html", tag=markup_tag)

app.run("0.0.0.0", 5000, debug=True)
前端代碼：
{{tag}}

6.3從后端傳函數到前端

后端代碼
from flask import Flask
from flask import render_template
from flask import Markup  # 導入 flask 中的 Markup 模塊

app = Flask(__name__)

#定義一個函數,把它傳遞給前端
def a_b_sum(a,b):
    return a+b

@app.route("/")
def index():
    return render_template("index.html", tag=a_b_sum)

app.run("0.0.0.0", 5000, debug=True)
前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ tag }}
    <br>
    {{ tag(99,1) }}
</body>
</html>

6.4定義全局函數,無需后端傳遞給前端,Jinja2直接就可以執行的函數

后端代碼:
from flask import Flask
from flask import render_template
from flask import Markup  # 導入 flask 中的 Markup 模塊

app = Flask(__name__)

@app.template_global()  # 定義全局模板函數
def a_b_sum(a, b):
    return a + b

@app.template_filter()  # 定義全局模板函數
def a_b_c_sum(a, b, c):
    return a + b + c

@app.route("/")
def index():
    return render_template("index.html", tag="")

app.run("0.0.0.0", 5000, debug=True)
前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ a_b_sum(99,1) }}
    <br>
    {{ a_b_sum(99,1) | a_b_c_sum(197,2) }}
    <!—將管道符前的函數的結果當做第二個函數的一個參數傳入 -->
</body>
</html>

7.Jinja2模板復用 block

如果我們前端頁面有大量重復頁面,沒必要每次都寫,可以使用模板復用的方式復用模板

前端代碼:

index.html 文件中的內容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Welcome OldboyEDU</h1>
    <h2>下面的內容是不一樣的</h2>
    {% block content %}
 
    {% endblock %}
    <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2>
    <h1>OldboyEDU is Good</h1>
</body>
</html>
login.html 文件中的內容
{% extends "index.html" %}
{% block content %}
    <form>
        用戶名:<input type="text" name="user">
        密碼:<input type="text" name="pwd">
    </form>
{% endblock %}
home.html 文件中的內容
{% extends "index.html" %}
{% block content %}
    <h1>student information manage</h1>
{% endblock %}

后端代碼:

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/login")
def login():
    return render_template("login.html")

@app.route("/home")
def home():
return render_template("home.html")

app.run("0.0.0.0", 5000, debug=True)

8.Jinja2模板語言的模塊引用 include

login.html 文件中的內容:
<form>
    用戶名:<input type="text" name="user">
    密碼:<input type="text" name="pwd">
</form>
index.html 文件中的內容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>student information manage</h1>
    <h2>下面的內容是不一樣的</h2>
    {% include "login.html" %}
    <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2>
</body>
</html>

后端代碼:

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

app.run("0.0.0.0", 5000, debug=True)

9. Jinja2模板語言中的宏定義

前端代碼:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% macro type_text(name,type) %}
    <input type="{{ type }}" name="{{ name }}" value="{{ name }}">
{% endmacro %}
<h2>在下方是使用宏來生成input標簽</h2>
{{ type_text("one","text") }}
{{ type_text("two","text") }}
</body>
</html>

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 flask之jinjia2模板語言 【Flask】 Jinja2模板語言 flask基礎之jijia2模板語言進階（三） flask模板 【7】Flask 模板 Flask模板 Flask - 模板語言jinja2 和render_template高級用法 flask模板 flask-bootstrap Flask模板注入 flask04-模板
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM