言

大家好，我是小雨！

今天我們要介紹的知識點是 Django 中的 Templates,它也是 MVT 結構中的 T，Templates 可以叫它模板。Templates 究竟用來做什么，通過這一節的介紹，希望大家有一個基本的了解。

一、Templates 模板

在上一節當中，我們在瀏覽器中看到的是 HTTPResponse 返回的字符串，而這一節我們講的 templates 最直接的功能是把前端的 html 頁面顯示出來，這樣用戶就能看到清晰美觀的界面。那么 Django 是如何加載 html 網頁的呢？下面介紹兩種方式：

1.使用 render_to_string 加載 html

我們提前準備好一個 html 頁面index.html，然后為了方便 views 中能成功訪問到這個index.html，需要在settings.py中將templates文件夾的路徑聲明清楚。在 TEMPLATES 列表字典的DIRS屬性下添加一下內容：

os.path.join(BASE_DIR, 'templates')  # 如果缺少os模塊記得導入

render_to_string 的使用方法： 先使用from django.templates.loader import render_to_string導入模塊，然后給 render_to_string 傳入 html 文件后，最后將其以 HttpResponse 的方式返回出去即可。

from django.http import HttpResponse
from django.templates.loader import render_to_string

def index(request):
    html = render_to_string("index.html")
    return HttpResponse(html)

2. 使用 render 加載 html

這里我們需要從django.shortcut導入 render 模塊，一般情況下 Django 會默認導入這個模塊,views 中如果沒有的話就手動導入一下：

from django.shortcut import render

接著 render 中傳入 html 文件，記得添加 request 參數，然后使用 return 返回 render 即可：

def index(request):
    return render(request,'index.html')

最后記得在 urls.py 中將路徑對應的 views.index 添加進來就可以了。

二、模板語言的基本使用

我們要知道 templates 作為 MVT 架構中的 T，不僅僅是加載前端中的頁面，它還包含一種模板語言，能夠在 htmlL 語言中實現邏輯控制（條件選擇、循環），相對于 JavaScript 會更加的靈活。

接下來，我們就以一個簡單的例子來介紹 Django 模板語言的使用。

1.功能需求分析

我們有一個存儲學生信息的Students.csv文件，包含了學號、姓名、性別、手機號碼、出生日期、電子郵箱等信息。

319001,趙一,男,1998/12/27,18706012232,532211428@qq.com,北京市海淀區頤和園路5號,342622199801144314,2019/9/1,計算機,趙一,13655512212
319002,錢二,女,1995/10/25,13459732456,572501101@qq.com,北京市海淀區雙清路30號,342622199709066819,2019/9/1,物聯網,王二,13856909992

這里數據其實有很多條，為了減少篇幅我們就羅列出兩條。

現在需要將這些數據加載到前端的 html 頁面中，通過 tabel 標簽顯示出來。

2. 實現過程

（1）準備

首先用 pycharm 新建一個 Django 項目，為了方便使用直接把 application 和 templates 文件夾都建好。

在 templates 中新建一個 index.html 文件，寫好用于顯示學生信息的標題以及表格框架。

<div id="title">學生信息列表</div>
<div id="table_main">
    <table border="1">
        <thead>
            <tr>
                <th>學號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>出生日期</th>
                <th>手機號碼</th>
                <th>電子郵箱</th>
                <th>家庭地址</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

（2）views 設置

為了讀取 csv 文件，寫一個read_form_file方法，將文件中的信息存儲在 Students 列表中。

def read_from_file(path:str):
    students = []
    try:
        with open(path, mode="r", encoding="UTF-8") as fd:
            # 讀取當前行
            current_line = fd.readline()
            # 判斷當前行是否為空
            while current_line:
                temp_line = current_line.split(",")
                students.append(temp_line)
                current_line = fd.readline()
        return students
    except Exception as e:
        raise e

接下來，我們定義一個 student 方法，用來顯示 html 內容給前端，這里面我們還是使用 render 將獲取的數據傳遞給前端頁面index.html。

注意使用 context 參數，它的值我們設置為一個字典，鍵設置為 DTL 模板語言中要引用的變量，值設置為本地獲取的數據

def student(request):
    students = read_from_file(r"D:\Python\Project\Demo\Student.csv")
    return render(request, "index.html", context={"all_student":students})

（3）DTL 模板語言

在index.html中，表格內容的填充，我們通過 DTL 模板語言來完成。在 HTML 代碼中要插入 DTL 模板語言，需要使用{%語句%}，for 語句還要使用{% endfor %}來結尾，在語句內部調用變量列表中的元素也是直接使用變量名.數字并且需要包裹兩層大括號。這里我們以循環輸出 student 列表中的各個元素為例，其 DTL 模板語言的寫法如下：

 {% for student in all_student %}
    <tr>
    <td>{{ student.0 }}</td>
    <td>{{ student.1 }}</td>
    <td>{{ student.2 }}</td>
    <td>{{ student.3 }}</td>
    <td>{{ student.4 }}</td>
    <td>{{ student.5 }}</td>
    <td>{{ student.6 }}</td>
    </tr>
 {% endfor %}

（4）urls 配置

接下來配置路由，添加 student 路徑

path('student/',app01_views.student),

（5）運行效果

一切準備就緒后，執行python manage.py runserver，在瀏覽器中打開127.0.0.1:8000/student效果如下：

三、加載靜態文件

1. 什么是靜態文件

不能與服務器做動態交互的文件叫靜態文件； 對于 HTML 中的圖片、視頻、css、js 這些都屬于靜態文件。Django 對于這些文件有一套明確的管理機制。 如果我們只遵循 HTML 的規范去加載靜態文件，在 Django 中是顯示不出來的。

2. 如何加載靜態文件

為了解決這個問題，我們首先要確保配置文件 settings.py 中 INSTALLED_APP 下靜態文件模塊有被加載到：

'django.contrib.staticfiles',  # 必須確保安裝靜態模塊

然后使用STATICFILES_DIRS這個全局變量來存儲靜態文件的路徑。

STATICFILES_DIRS = [
    os.path.join(BASE.DIR, 'static'),
]

然后在 html 中開始加上模板語言，如果讓 html 引用靜態文件，那就需要先導入靜態模塊。在 html 語句第一行寫上

{% load static %}

對于要引用靜態圖片的標簽路徑使用{% static "路徑文件名 "%}，如：

<img src="{% static "logo.png"%}">

這樣 Django 就能顯示靜態文件圖片了。

3. 顯示效果

4. 注意事項

一般情況下，static 文件夾我們會放在app目錄下。這時候訪問靜態文件，則需要在STATICFILES_DIRS的 os.path.join 參數中再多添加一個子文件夾名，可以寫成：

STATICFILES_DIRS = [
    os.path.join(BASE.DIR, 'app01','static'),
]

5. 直接訪問靜態文件

在 Django 配置的文件 settings.py 中有一個全局變量STATIC_URL，它定義了一個給外界用戶直接訪問靜態文件的路徑。 上面我們添加在標題中的 logo.png，我們可以在瀏覽器中直接通過127.0.0.1:8000/student/static/logo.png來訪問。

四、加載靜態文件綜合案例

為了更好地鞏固 Django 加載靜態文件的知識，我們做一個小案例。學生信息管理系統的登錄頁面。有顯示圖片 logo，有用戶名和密碼的輸入框，并且有提交按鈕。當點擊按鈕時，會彈出提示表示登錄成功。

這里簡單說明一下：

界面采用了 Bootstrap 框架，登錄按鈕的功能函數用了 jQuery 腳本。關于前端的知識我們這里就不做過多介紹了。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <!--加載外部的CSS文件-->
    <link type="text/css" rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
    <link type="text/css" rel="stylesheet" href="{% static "css/basic.css" %}">
    <!--加載外部的js文件-->
    <script src="{% static "js/jquery.min.js" %}"></script>
    <script src="{% static "js/login.js" %}"></script>
</head>
<body>
    <div class="container">
        <div id = "login">
            <form class="form">
                <h2><img src="{% static "imags/mainlogo.png" %}"></h2>
                <h2>學生信息管理系統登錄</h2>
                <hr>
                <hr>
                <div class="form-group">
                    <label for="user">用戶名:</label>
                    <input type="text" class="form-control" placeholder="請輸入用戶名" id="user">
                </div>
                <div class="form-group">
                    <label for="password">密碼</label>
                    <input type="password" class="form-control" placeholder="請輸入密碼" id="password">
                </div>
                <div class="form-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">請記住我
                        </label>
                    </div>
                </div>
                <button id="submit01" class="form-control">提交</button>
            </form>
        </div>
    </div>
</body>
</html>

將以上 html 文件保存在 templates 中,在 views 中配置好方法，urls 中配置好路由，最后在 settings 中配置好靜態文件路徑，最后啟動 Django 服務器，頁面顯示效果如下：

效果演示：

最后

本節，我們介紹了 Django 中 templates 的知識，Django 加載 HTML 方法、模板的語言的使用，以及加載靜態文件的方法。希望大家多多練習，才能鞏固所學的知識。下一節我們將繼續介紹 Django 中 URL 跳轉的知識！

感謝大家的閱讀！

WS是構建現代靜態網站最簡單的方法。通過我們的混合對等CDN，您可以在IPFS上享受安全和分散的存儲，并加快網站加載速度。

通過使用DWS，您可以將數據固定在我們的IPFS服務器上，并將自己的域輕松鏈接到該數據。此外，DWS提供了網站模板和CMS，可幫助管理網站內容。我們還計劃發布無服務器服務，包括表格，電子商務和身份驗證。

WHY

為什么我們選擇IPFS作為靜態網站的主要存儲？

星際文件系統（IPFS）是用于在分布式文件系統中存儲和共享數據的協議和對等網絡。IPFS使用內容尋址來唯一標識連接所有計算設備的全局命名空間中的每個文件。（來自維基百科）

IPFS不是區塊鏈網絡，其中數據基于共識算法是不可變的，但是IPFS上存儲的數據使用唯一標識（CID）進行哈希處理。由于當更改一部分數據時將更改此唯一的CID，因此IPFS上的數據被認為是不可變的。如果連接了我們的服務器并且更改了Web內容，則原始數據不會受到影響。我們有一堆IPFS服務器，可以確保數據始終可用。

靜態網站意味著網站后面沒有類似PHP的腳本服務器和數據庫系統，而只是純HTML，CSS和Javascript。這也意味著攻擊腳本服務器和數據庫不會影響靜態網站的內容。修改靜態網站的唯一方法是直接更改磁盤上導致不同CID的內容。

域配置為與存儲網站內容的CID鏈接。每當域指向的CID不變時，網站內容也不變。域配置的方式使網站內容不變并且絕對安全。

跨多個國家/地區有數千個IPFS服務器，因此很難執行DDoS。我們積極改變網關以實現高性能。IPFS服務器的IP地址對黑客是隱藏的，因此很難進行DDoS攻擊。請注意，我們不僅使用自己的IPFS服務器，還將用戶的數據固定在其他IPFS提供程序上。

為什么現代靜態網站將成為內容管理的未來？

互聯網始于僅使用HTML，CSS和Javascript（我們稱為靜態網站）的簡單網站。然后，趨勢是使用服務器端編程語言（例如Perl，Java servlet，PHP，Ruby和Python）可以方便地更新網站內容。但是，我們又回過頭來只使用靜態網頁。

使用靜態網頁的首要原因是加載速度快，這對于用戶體驗和網站在搜索引擎上的排名非常重要。對于使用服務器端編程語言的網站，將需要一些時間來呈現網頁并從數據庫中獲取數據。如果網站是靜態的，它將立即返回給客戶。

第二個原因是維護和擴展服務器端服務器的成本較高。當使用靜態網頁和第三方提供的無服務器功能（例如CMS，身份驗證，電子商務和表格）時，這種方法比較便宜。對于無服務器服務，您僅在用戶在線時付費。此外，無服務器服務始終很好地支持可伸縮性。

HOW

一、DWS如何幫助在IPFS上部署現代靜態網站

DWS幫助您將網站內容上傳到IPFS，并將這些內容固定在我們的IPFS服務器上。您可以將自己的域指向我們的IPFS網關。下圖說明了該流程，詳細信息可以在DWS Docs中找到。

二、DWS上的部署流程

為了快速構建網站，DWS提供了靜態網站模板和CMS，可幫助輕松更新網站內容。

三、DWS上的網站模板

我們相信DWS會改變我們以靜態方式管理網站內容的方式以及以分散協議在Internet上存儲這些數據的方式。

對于不知道如何編程的非IT人員，如何快速免費創建個人網站或博客。建立網站的階段將包括以下步驟：網站設計，選擇域名，在網站上放置內容，優化SEO，提高網站速度。建立引人注目的高速網站的成本通常并不便宜。以及如何快速更新Web內容。

DWS服務提供了一種解決方案，可以優化構建具有基本功能的免費網站的所有步驟。

DO

創建免費的個人網站和博客的步驟如下：

1.訪問DWS網站：https：//dws.datochain.com

2.注冊并登錄DWS系統

3.查找符合目的的網站模板

4.選擇預覽以查看網站模板，然后選擇部署以安裝

5.部署時，選擇網站名稱（不帶標記）

6.出現成功消息時，切換到主頁以查看“部署”狀態。如果安裝成功，系統將發送電子郵件通知。單擊以轉到網站設置頁面。部署時間約為5到10分鐘。

7.點擊進入設置界面后

8.選擇“設置”以設置標題，描述和徽標

9.選擇“轉到CMS頁面”以編輯內容

10.部署后的網站將位于子域地址（例如：https : //namhuong.datochain.com）。您可以根據“域名”部分中的說明將您的域指向上述地址。

還想了解更多關于DWS的消息，請繼續關注我們吧！