Django 網頁樣板Template
網頁樣板是HTML檔案加上Django樣本語言
由樣板語言可以從程式及資料庫載入資料到網頁
HTML的基本概念
HTML是標記語言，由成對的標籤組成，每個標籤都由角括弧圍起來，
起始標籤可以設定屬性，屬性有數種設定值，結束標籤會有斜線
HTML文件的基本架構
<!DOCTYPE html>
<html>
<head>
網頁資訊 #網頁標題 關鍵字
</head>
<body>
網頁內容 #瀏覽器中顯示的內容 文字圖片聲音影片 JavaScript CSS
</body>
</html>
CSS概念
CSS用來制定網頁外觀的樣式規格
樣式採用盒子模式
最外框表示內容放在頁面上的實際範圍 中間的框框表示內容放置的實際區域border ，border到外框的距離為margin，內容到border的距離為padding。border / margin / padding可以在css設定的屬性
<style> #5j/ 中間為css內容 直接把css寫在HTML裡面 以可以寫外面
body{…}
h1{…}
div{…}
</style>
django樣版語言
<div>{{ current_time}}</div>#current_time變數 (view.py會提供）
相對路徑/encode表示首頁網址加上encode
<a href=’/encode’>link</a>
templates folder如此複雜與settings.py中BASE_DIR設定有關
第一層demo專案資料夾下templates/demo/home.html
(一)
render 將view.py計算的結果帶出到[template樣版檔案]所需的[變數]與[值]
我定義render是一個傳遞功能指定傳遞的網頁與變數 (以下範例)
from datetime import datetime
from django.shortcuts import render #render可以設定樣版檔案並載入對應變數
def now(request);
now=datetime.now
h=str(now.hour)
if len(h)==1;
[tab]h=’0’+h
m=str(now.minute)
if len(m)==1;
[tab]m=’0’+m
s=str(now.second)
if len(s)==1;
[tab]s=’0’+s
now_str=h+’:’+m+’:’+s
return render(request,’demo/home.html’,{‘current_time’:now_str
}) #將return的部分改為render。參數一request為now的預設參數request ，參數二為樣版檔案，由於設定BASE_DIR因此只需要簡單寫demo/home.html，第三個參數為字典，字典的key為樣版語言的變數，value為now()中的變數值
(二)
修改demo/settings.py
將BASE_DIR加入到樣版設定中
TEMPLATES=[{…
‘DIRS’:[os.path.join(BASE_DIR,’templates’)],
…}]
(三)修改encode樣本檔案templates/encode/input.html
encode App的樣版檔案input.html (改由使用者輸入)以及顯示結果的result.html
input.html
<form action=”./result/” method=”post”> #./result/為相對路徑的網址
{% csrf_token %} #django防止CSRF攻擊的簡單方式
<label>請輸入</label><input size=”50" type=”text” name=”oringinal_text”><br /> #original_text 這會對應到view.py裡的程式碼
<input type=”submit” value=”send”>#按下按鈕會送出到action對應action=”./result/”相對路徑的網址，也就是目前網址後面加上result，所以按下送出就會切換到這個網址
</form>
result.html
<div>{{ encoding_text}}</div> #等待view.py給值
<div><a href = “../”>重新輸入</a></div>#回到上一頁的相對路徑
(四)修改views.py
path encode/view.py
from django.shortcuts import render
from .encrypt import Encrypt
from .models import Sentence
def input(request):#用來顯示輸入頁
return render(request,’encode/input.html’,{})
def result(request):
e=Encrypt()
s=Sentence()
s.original_text=request.POST[‘original_text’]#由input.html接收資料，request.POST[‘original_text’]會對應到網頁元素具有相同name屬性的值
e.encoding_text=e.to_Encode(s.original_text)
s.save()＃存入資料庫
return render(request,’encode/result.html’,{‘encoding_text’:s.encoding_text})
(五)修改urls.py
encode/urls.py
from django.urls import path
from . import views
app_name=’encode’
urlpatterns=[
path( ‘ ’,views.input,name=’input’),#views.input
path(‘result/’,views.result,nane=’result’),#views.result
]
urls 管理_當該網址被呼叫的時候，所要執行views裡的函數
