[Day 18] Django（2）

第 12 屆 iThome 鐵人賽

DAY 18

Modern Web

用 Python 玩 PDF，結合Django 變成一個網頁系統系列第 18 篇

12th鐵人賽

Frank

2020-10-01 22:18:36

1321 瀏覽

分享至

今天來用頁面，把HttpResponse 改成用html
在app目錄底下新增templates 資料夾，一定要這個名稱，新增main 資料夾，新增main.html

路徑：
templates/main/main.html

專案結構

<projectName>/
----manage.py
----<projectName>/
--------__init__.py
--------settings.py
...
----main/
--------admin.py
--------apps.py
--------models.py
--------views.py
--------templates/main/main.html
----venv/
----lib/
--------pdfWeather.py

main/main.html 程式碼

<html>
<head>

</head>
<body>
Hello world
</body>
</html>

改成 render main/main.html

main/views.py 程式碼

def main(request):
    return render(request, 'main/main.html')

就會看到有更新了 Hello world

改個頁面，傳所有區的名稱到前端範本（templates），用範本變數，在前台跑迴圈，用checkbox，可以複選
context就是傳到前端的範本變數是dict的格式

main/views.py 程式碼

def main(request):
    districtList = [
        "北投區", "松山區", "士林區", "內湖區", "中山區", "中正區",
        "信義區", "大安區", "文山區", "南港區", "大同區", "萬華區",
    ]
    context = {"districtList": districtList}
    return render(request, 'main/main.html', context)

加上 checkbox：核取方塊和label
main/main.html

...
<form>
    {% for district in districtList %}
        <div>
            <input type="checkbox" id="chk_{{ district }}" name="checkboxDistrict" value="{{ district }}">
            <label for="chk_{{ district }}">{{ district }}</label>
        </div>
    {% endfor %}
    <input type="submit" value="產生未來鄉鎮天氣預報PDF">
</form>
...

結果