用 Django 建立網站起手式(上)

× 1.6k 字

第一次認識 Django 這個 Python 的框架套件，學習起來比 Flask 相對來説複雜一點點，但是一旦熟悉和看懂 Django 處理路徑和資料整理歸納的邏輯，在維護操作上其實非常貼心，剛好這次專案決定要用 Django 整合前端製作網站，首先除了要把基本 CRUD 熟練之外，也要注意在打包專案時必要的環境設定和前端處理方法，學習一個全端工程師應該要有的技術，我覺得，要懂得合才懂得分，所以比起先熟悉前後端分離開發，還不如直接從整合開始學習。

起手式

安裝好 Django 之後，新建專案名稱資料夾，在專案資料夾內用以下指令建立 Django 環境：

1
$ django-admin startproject core

這時會產生一個名為 core 的管理資料夾和 manage.py 檔案。

虛擬環境

我喜歡用 Poetry 這個套件來建立虛擬環境和管理 Python 套件，而且必須注意的是我們在本機用 Django 建立專案資料夾後，也必須在建立好的虛擬環境中安裝 Django 和其他這個專案需要的其他套件。

1
2
3
4
$ poetry init -n
$ poetry shell
$ poetry add django
$ poetry add 其他需要的套件

開啟本地端網頁預覽

1
$ python manage.py runserver

輸入以上指令就可以開啟本地端預覽頁面，雖然目前我們還沒有建立網頁，但是會顯示 Django 預設的網頁畫面。

專案首頁的建立

網頁結構設定

首先找到 core 資料夾裡的 settings.py 檔案打開，找到 TEMPLATES 標籤，加入以下：

1
'DIRS': [BASE_DIR / 'templates'],

BASE_DIR 代表目前專案的目錄，這個設定是在指示要渲染的網頁檔案目錄，所以接下來所有的 html 檔案，都會放在 templates 資料夾裡，所以在專案資料夾下，還要建立名稱 templates 資料夾，templates 裡可以再建立 home(首頁) 、 layouts(樣版) 和 shared(共用) 資料夾。

html 網頁

我們現在的目的是建立首頁，所以進到 templates/home 資料夾中，首先建立 home.html 檔案，代表專案網站的大門口，接下來建立的任何子目錄的入口連結都會放在這個 home.html 裡。

全站的入口頁面結構: core/urls.py

在 core 資料夾中，找到 urls.py 檔案，開始設定全站的入口路徑結構，include 模組代表只要在這個子目錄名稱的網址路徑下都可以吃到。

1
2
3
4
5
6
7
8
9
from django.contrib import admin # 預設後台模組
from django.urls import path, include

urlpatterns = [
    path('', include('pages.urls')),
    path('子目錄/', include('子目錄.urls'))
    # 其他子目錄以此類推
    path('admin/', admin.site.urls) # 預設後台連結
]

在專案資料夾下建立 home 資料夾

如題，首頁也是網站頁面的模組之一，在 home 資料夾新增 urls.py、views.py和__init__.py後，就可以處理首頁的結構，在 home/urls.py 中，就可以專門處理從首頁連出的頁面。

1
2
3
4
5
6
7
8
from django.urls import path
from . import views

urlpatterns = [
    path("", views.home, name="root"),
    path("about", views.about_us, name="about"),
]

全站的 layout

layout 就是專門放樣版檔案的資料夾，與 Flask 一樣，建立專門處理網站樣版的 base.html，挖洞填洞的方法是用類似 Jinja2 的寫法。

全站的 shared

而放在 shared 資料夾裡的 html，則是負責存放製作網站共用的區塊，例如：navbar、footer 等，並在樣版 base.html 中用 {% include "檔案路徑" %} 載入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}網站名稱{% endblock %}</title>
  </head>
  <body>
      {% include "shared/navbar.html" %}
      <main>
        {% block content %}{% endblock %}
        {% include "shared/footer.html" %}
      </main>
  </body>
</html>

路徑命名

所有的路徑都可以設定專屬名稱，若有變動，也不用批次手動修改，有以下兩種寫法：

  • 在指定資料夾的 urls.py 裡，在 path 後面加上 name="名稱"，連結路徑時就可以把直接以名稱代替路徑： 
    1
    2
    3
    urlpatterns = [
      path('', views.home, name="home")
    ]
    1
    <a href="{% url 'home' %}">內容內容</a>
  • 或者，在指定資料夾的 urls.py 裡，設定前一目錄的名稱： 
    1
    2
    3
    4
    5
    6
    7
    8
    from django.urls import path
    from . import views

    app_name = 'entrance'  # <------------

    urlpatterns = [
      path('', views.home, name='home')
    ]
    但是不要忘記要去 settings.py 註冊新的 app： 
    1
    2
    3
     INSTALLED_APPS = [
    'entrance'
     ]
    就可以回 html 寫路徑： 
    1
    <a href="{% url 'entrance:home' %}">內容內容</a>

static 資料夾

在專案資料夾裡建立 static 資料夾，專門存放網站的靜態檔案，例如：CSS、JS 或 圖片檔。
但必須要先去 settings.py 設定：

1
2
STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / "static"]

程式渲染

views.py 檔案是每個子目錄資料夾必備檔案，它專門處理渲染路徑和程式的 Python 函式：

1
2
3
4
from django.shortcuts import render

def home(req):
    return render(req, '子目錄/home.html')

當我們要在 views.py 中寫 Python 程式時，寫法如下：

1
2
3
4
5
6
def home(req):
    from random import sample

    lottery_numbers = sorted(sample(range(1, 50), 6))
    return render(req, '子目錄/home.html', {"l_n": lottery_numbers})
    # 要傳入的寫法應是一個字典

然後在 html 上就可以寫：

1
2
3
4
5
6
7
8
<!-- 樣版載入 -->
{% extends "pages/layouts/base.html" %}

{% block content %}
  <h1>首頁</h1>
  <!-- 渲染在這裡，用雙大括號關住 key 的變數 -->
  {{ l_n }}
{% endblock %}

小結

Django 起手式首先介紹了：

  • 環境設定
  • 專案資料夾的設定
  • urls.py 路徑管理的作用與寫法
  • views.py Python 程式的作用與寫法
  • templates 資料夾的用途
    • layouts 資料夾的用途
    • shared 資料夾的用途
  • static 資料夾的用途
  • 路徑的命名方法

在下篇，則會介紹子目錄的設定、前端環境的建立和 model 資料庫的連結與處理～

Tags:
dark
sans