必備知識點模版

Formerly0^0發表於2024-03-28

模版

1.尋找html模版

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                # 'django.contrib.auth.context_processors.auth',
                # 'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

優先去專案根目錄 > 每個已註冊的app的templates目錄找

2. 模版層渲染前端步驟

# 第一步 在檢視函式中 在render物件中新增一個引數 locals()
# locals() ---> 獲取到當前的名稱空間 

# 傳給了 render 函式中的第三個引數 context 引數 上下文物件

def register(request):
    # 【一】字串型別的資料
    name = "serein"

   
    return render(request, 'register.html', locals())

3. 前端渲染的八大基本資料型別

def index(request):
    # 字串型別
    n1 = "hello world"

    # 數字型別
    # 整型
    age = 19

    # 小數型別
    money = 100.98

    # 列表
    num = [1, 2, 3, 4]

    # 字典型別
    user_data = {"username": "serein", "password": "123", "age": 22, "hobby": ["music", "sport", "walk"],
                 "addr": {"country": "China", "location": "Shanghai"}}

    # 布林型別
    is_right = 2>3

    # 元組型別
    num_tuple = (1, 2, 3, 4, 5)

    # 【七】集合型別
    num_set = {1, 2, 3, 4, 5, 5, 5}
    return render(request, 'app01/index.html', locals())

前端頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{#字串#}
<h1>index首頁{{ n1 }}</h1>
{#整數#}
<p>{{ age }}</p>
{#浮點數字#}
<p>{{ money }}</p>
<ul>
{#列表#}
    {% for i in num %}
    	<li>{{ i }}</li>
    {% endfor %}
</ul>
{#字典型別值，直接.獲取#}
<p>{{ user_data.addr.location }}</p>

{#布林型別#}
<p>{{ is_right }}</p>

{#元祖#}
<p>{{ num_tuple }}</p>

{#集合#}
<p>{{ num_set}}</p>

</body>
</html>

4.前端渲染函式和類

4.1 渲染函式

渲染函式
函式無返回值渲染結果是none
函式有汗繪製渲染出來的是指定返回值

def function(request):
    # 無返回值
    def demo1():
        content = f"這是demo1函式"
        print(content)

    # 有返回值
    def demo2():
        content = f"這是demo2函式"
        return content

    return render(request, 'app01/demo.html', locals())

前端頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>{{ demo1 }}</p>
<p>{{ demo2 }}</p>
</body>
</html>

4.2 渲染類

渲染物件，就是相當於觸發了 Student 類的__str__ 方法

def cls_function(request):
    class Student:
        def __init__(self, name, age, gender):
            self.name = name
            self.age = age
            self.gender = gender

        # 繫結給物件的方法
        def read(self):
            print(f"{self.name} 正在看書")
            return f"這是繫結給物件的方法"

        # 繫結給類的方法
        @classmethod
        def wirte(cls):
            return f"這是繫結給類的方法"

        @staticmethod
        def sleep():
            return f"當前非繫結方法"

        def __str__(self):
            return f'這是 Student 類'

    student = Student('serein', 18, 'male')

    return render(request, 'app01/student.html', locals())

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{#渲染物件，其實就是相當於觸發了 Student 類的__str__ 方法#}
{{ student }}

{#渲染物件屬性#}
{{ student.name }}

{#渲染物件的繫結方法和非繫結方法#}
{#繫結給物件的方法#}
{{ student.read }}
{#繫結給類的方法#}
{{ student.wirte }}
{#非繫結方法#}
{{ student.sleep }}
</body>

</html>

5.過濾器

5.1 過濾器簡介

在Django的模板語言中，透過使用過濾器來改變變數的顯示

5.2 語法

{{資料|過濾器:引數}}

注意事項：

過濾器支援“鏈式”操作。即一個過濾器的輸出作為另一個過濾器的輸入。
過濾器可以接受引數，例如：{{ sss|truncatewords:30 }}，這將顯示sss的前30個詞。
過濾器引數包含空格的話，必須用引號包裹起來。比如使用逗號和空格去連線一個列表中的元素，如：{{ list|join:', ' }}
|左右沒有空格!沒有空格!沒有空格!

5.3 常用過濾器

def demo3(request):
    name = 'serein'
    name1 = 'SEREIN'
    age = ''
    current_time = datetime.datetime.now()
    list1 = [1, 2, 3, 4, 5]
    html_content = "<p>蒹葭蒼蒼，白露為霜，所謂伊人，在水一方。</p>"
    # 第一種方法用mark_safe
    html_content = mark_safe(html_content)
    return render(request, 'app01/demo3.html', locals())

{% load jp %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

{#計算變數長度#}
{{ name|length }}

{#變大寫#}
<p>{{ name|upper }}</p>

{#變小寫#}
<p>{{ name1|lower }}</p>

{#指定預設值#}
<p>{{ age|default:18 }}</p>

{#格式化日期物件#}
<p>{{ current_time|date:"Y-m-d H:i:s" }}</p>

{#切片，顧頭不顧尾#}
<p>{{ list1|slice:"0:2" }}</p>

{#切取摘要#}
<div>{{ list1|truncatechars:9 }}</div>

{#移除指定字元#}
<div>{{ name }}</div>
<div>{{ name|cut:"r" }}</div>

{#拼接，可以拼接的前提是後端的資料可以迭代#}
<div>{{ list1 }}</div>
<div>{{ list1|join:"|" }}</div>

{#取消轉義#}
{#<div>{{ html_content }}</div>#}
{#第二種方法#}
<div>{{ html_content|safe }}</div>

<h2>{{ name|myfunc }}</h2>
</body>
</html>

5.4 自定義過濾器方法模版

使用template模組
在app下建立temolatetags資料夾
建立所需要自定義的方法的py檔案
在前端頂部匯入


from django import template

register = template.Library()

# filter存在引數個數限制
@register.filter
def myfunc(value):
    return value.upper()
  
 
# simple_tag 不存在引數個數限制,返回文字
@register.simple_tag()
def mytag1():
    return "哈哈哈"


@register.simple_tag()
def mytag2(a1, a2):
    return a1 + a2
  
# inclusion_tag 不存在引數個數限制,返回html片段
@register.inclusion_tag("app01/xxxxx.html")
def xxx():
    return {"name": "serein", "age": 73}

{% load jp %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>{{ name|myfunc }}</h2>
  
<p>{% mytag1 %}</p>
<p>{% mytag2 'xxx' 'aaa' %}</p>
 
 # 返回的是inclusion_tag("app01/xxxxx.html")裡的內容
<p>{% xxx %}</p>
</body>
</html>

6. 標籤(tags)

6.1 for迴圈

6.1.1普通for迴圈

<ul>
{% for user in user_list %}
    <li>{{ user.name }}</li>
{% endfor %}
</ul>

6.1.2 for迴圈可用的一些引數：

Variable	Description
`forloop.counter`	當前迴圈的索引值（從1開始）
`forloop.counter0`	當前迴圈的索引值（從0開始）
`forloop.revcounter`	當前迴圈的倒序索引值（從1開始）
`forloop.revcounter0`	當前迴圈的倒序索引值（從0開始）
`forloop.first`	當前迴圈是不是第一次迴圈（布林值）
`forloop.last`	當前迴圈是不是最後一次迴圈（布林值）
`forloop.parentloop`	本層迴圈的外層迴圈

6.1.3 for ... empty

這是 Django 模板中的一段程式碼，用於在模板中遍歷一個使用者列表並顯示使用者的姓名。這段程式碼使用了模板中的 {% for %} 模板標籤和 {% empty %} 來處理列表為空的情況

具體而言，這段程式碼做了以下事情：

{% for user in user_list %}: 遍歷 user_list 列表中的每個使用者物件。
<li>{{ user.name }}</li>: 對於每個使用者，顯示一個列表項，其中包含使用者的姓名。
{% empty %}: 如果 user_list 為空，則執行這個塊中的內容。
<li>空空如也</li>: 在列表為空的情況下，顯示一個包含文字 "空空如也" 的列表項。

這樣，當 user_list 不為空時，會按照使用者列表中的順序顯示每個使用者的姓名；而當 user_list 為空時，會顯示一個包含 "空空如也" 的列表項

<ul>
{% for user in user_list %}
    <li>{{ user.name }}</li>
{% empty %}
    <li>空空如也</li>
{% endfor %}
</ul>

6.2 if判斷

6.2.1 if ~ elif ~ else

{% if user_list %}
  使用者人數：{{ user_list|length }}
{% elif black_list %}
  黑名單數：{{ black_list|length }}
{% else %}
  沒有使用者
{% endif %}

6.2.2 只有if和else

{% if user_list|length > 5 %}
  七座豪華SUV
{% else %}
    黃包車
{% endif %}

if語句支援 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判斷。

6.3 with

定義一箇中間變數，多用於給一個複雜的變數起別名。
注意等號左右不要加空格。

{% with total=business.employees.count %}
    {{ total }} employee{{ total|pluralize }}
{% endwith %}

{% with business.employees.count as total %}
    {{ total }} employee{{ total|pluralize }}
{% endwith %}

6.4 csrf_token

這個標籤用於跨站請求偽造保護。
在頁面的form表單裡面寫上

6.5 註釋

{# ... #}

6.6 注意事項

Django的模板語言不支援連續判斷，即不支援以下寫法：

{% if a > b > c %}
...
{% endif %}

Django的模板語言中屬性的優先順序大於方法

def xx(request):
    d = {"a": 1, "b": 2, "c": 3, "items": "100"}
    return render(request, "xx.html", {"data": d})

如上，我們在使用render方法渲染一個頁面的時候
- 傳的字典d有一個key是items並且還有預設的 d.items() 方法
- 此時在模板語言中:

{{ data.items }}

預設會取d的items key的值。

6.7 forloop示例

d = ["你好", "我好", "大家好"]
{% for re in d %}

    <p>{{ forloop }}</p>

{% endfor %}
標籤
{'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 3, 'revcounter0': 2, 'first': True, 'last': False}

{'parentloop': {}, 'counter0': 1, 'counter': 2, 'revcounter': 2, 'revcounter0': 1, 'first': False, 'last': False}

{'parentloop': {}, 'counter0': 2, 'counter': 3, 'revcounter': 1, 'revcounter0': 0, 'first': False, 'last': True}

first
- 標識 for 迴圈是否是第一次
last
- 標識 for 迴圈是否是以後一次
counter0
- 類似索引
counter
- 計數
取值

d = ["你好", "我好", "大家好"]
{% for re in d %}

    <p>{{ re }}</p>

{% endfor %}
你好

我好

大家好

6.8 if語句示例

f = True
{% if f %}
    <p>你好</p>
{% else %}
    <p>我好</p>
{% endif %}
你好

6.9 混用 forloop + if 示例

d = ["你好", "我好", "大家好"]
{% for re in d %}
    {% if forloop.first %}
        <p>第一次迴圈</p>
    {% elif  forloop.last %}
        <p>最後一次迴圈</p>
    {% else %}
        <p>{{ re }}</p>
    {% endif %}
{% empty %}
    <p>for迴圈的物件是空，不支援for迴圈</p>

{% endfor %}
第一次迴圈

我好

最後一次迴圈

7. 模版的繼承

某些頁面的整體大差不差，但是某一些區域性在做變化

7.1 模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  {% block page-css %}
  
  {% endblock %}
</head>
<body>

<h1>這是母板的標題</h1>

{% block page-main %}

{% endblock %}
<h1>母板底部內容</h1>
{% block page-js %}

{% endblock %}
</body>
</html>

注意：我們通常會在母板中定義頁面專用的CSS塊和JS塊，方便子頁面替換。

7.2 繼承母板

在子頁面中在頁面最上方使用下面的語法來繼承母板。

{% extends 'layouts.html' %}

7.3 塊（block）

透過在母板中使用{% block xxx %}來定義"塊"。
在子頁面中透過定義母板中的block名來對應替換母板中相應的內容。

{% block page-main %}
  <p>世情薄</p>
  <p>人情惡</p>
  <p>雨送黃昏花易落</p>
{% endblock %}

css必備知識點
2019-03-06
CSS
必備知識點路由
2024-03-28
路由
Redis 面試必備知識點
2021-05-05
Redis面試
前端必備知識點—SVG
2018-07-12
前端SVG
必備知識點檢視
2024-03-28
DBA七個必備知識點
2008-11-18
必備知識點模型層ORM
2024-03-28
模型ORM
必備知識
2013-08-21
Python入門必備知識點總結
2019-02-28
Python
機器學習之必備知識篇
2019-03-17
機器學習
騰訊 PHP 面試必備知識
2019-05-09
PHP面試
網路基礎必備知識
2019-08-23
OpenStack必備基礎知識
2020-12-10
程式設計必備知識
2017-10-22
程式設計
面試必知的web知識點
2019-07-25
面試Web
Python工程師面試必備25條知識點
2018-01-17
Python工程師面試
Java 基礎知識點（必知必會其一）
2015-03-04
Java
容器雲開發必備知識
2021-02-09
Linux面試題-交換機/路由有哪些必備知識點？
2020-11-26
Linux面試題路由
影像分割必備知識點 | Dice損失理論+程式碼
2020-11-25
初識python必知的6個知識點
2022-04-29
Python
C++必知的幾個知識點
2008-01-03
C++
前端進階必備知識彙總
2019-07-31
前端
Web前端必備-Nginx知識彙總
2019-04-12
Web前端Nginx
安卓開發必備顏色知識
2018-01-09
安卓
[原]JavaScript必備知識系列-開篇
2012-09-12
JavaScript
ccna的必備知識之1(轉)
2007-08-12
安裝Linux之前必備知識
2024-03-24
Linux
前端必須掌握的知識點
2020-11-12
前端
JVM知識點總覽：高階Java工程師面試必備
2018-11-23
JVMJava工程師面試
設計模式必備知識點---六大設計原則
2021-10-19
設計模式
雲原生時代，分散式系統設計必備知識圖譜（內含22個知識點）
2022-12-06
分散式
千萬淘寶店運營必備知識，你必須知道！
2022-11-23
精選Spring Boot三十五道必知必會知識點！
2019-03-13
Spring Boot
Nacos必知必會：這些知識點你一定要掌握！
2023-05-15
Java面試題必備知識之ThreadLocal
2019-07-21
Java面試題thread
機器學習基礎知識梳理，新手必備！（附連結）
2019-04-24
機器學習
Python 面試必備基礎知識-1
2019-06-27
Python面試

必備知識點 模版

模版