This is an example paragraph. Anything in the body tag will appear on the page, just like this p tag and its contents.
``` 配置好了template, 就要把這個畫面給選染到view上面啦～ view.py: ```python! from django.shortcuts import render #新加入的function def testPage(request): return render(request, "index.html") ``` 這樣就完成了view function跟template的對應，最後把function配置一個url。 urls.py: ```python! from django.contrib import admin from django.urls import path from app_name import views #記得要import app的view urlpatterns = [ path("admin/", admin.site.urls), path("home", views.testPage) #給剛剛寫好的function設定一個url ] ``` 這時候runserver後，瀏覽器網址輸入localhost:8000/home就可以看到剛剛寫的網頁啦！  所有檔案要被瀏覽器存取，一定都要經過urls.py的分配，這種方法也加強了網頁的安全性。 如果urls內path放空字串，網頁就會被map到localhost:8000。 urls dispatch還有其他進階的用法，詳細看一下官方document： https://docs.djangoproject.com/en/5.0/topics/http/urls/ ### static files Django內的static files(JS, CSS, IMG)也是統一由框架管理，不再透過file system的相對路徑去存取。 在settings.py裡面找到以下設定： ```python! STATIC_URL = "static/" ``` 這段定義每個app內的static資料夾，可以作為static file存取的路徑。我們在App建立一個static 資料夾，裡面放我們要的css檔案(或是任何靜態文件)： ``` app_name ├──templates ├──index.html ├── static ├──index.css ├── admin.py ├── apps.py ├── models.py ├── tests.py └── views.py ``` index.css: ```css p { color: rebeccapurple; } ``` 可以用網址localhost:8000/static/index.css確定是否能存取檔案，若可以則代表static配置正確。  那html中如何引用呢？ 首先要在html的最上面加上: {% load static %} 只要放在static資料夾內的檔案都能用{% static "path_to_file"%}去存取。 ```htmlembedded ```  可以看到我們的網頁已經有吃到CSS檔案啦～ img的src也是用同樣的方法去存取。 ### include template 如果有一些常用的html code可以獨立成一個html檔案，在需要的時候include就好。像是網站的許多頁面都會用相同的navbar和footer，我們可以分別為footer和navbar創建html檔案。 ``` app_name ├──templates ├──index.html ├──navbar.html ├──footer.html ├── static ├──index.css ├── admin.py ├── apps.py ├── models.py ├── tests.py └── views.py ``` 然後在需要的位置include就好： ```htmlembedded! {% include "navbar.html"%}This is an example paragraph. Anything in the body tag will appear on the page, just like this p tag and its contents.
{% include "footer.html"%} ``` 但有些template不只一個App需要，需要跨App也能存取該怎麼辦呢？這時候我們就要定義global template dirctory。 在settings.py裡面找到template的設定，把global template dir放到DIRS選項的位置： ```python! TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", "DIRS": [BASE_DIR / "templates"], #定義global 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", ], }, }, ] ``` BASE_DIR代表的是Project的位置。有趣的是Django setting內的所有路徑都可以直接用 **/** 符號連接，不需要用OS.path.join()。 APP_DIRS 如果改成False，django就不會再從App內找templates資料夾了，只有DIRS裡面的會被當成template檔案。 ***備註*** 我常常網頁會用到一大堆plugin，jquery、boostrap、jspanel....，每次都要複製一大堆link code很麻煩，我就會把這些引用的code做成一個template，每個網頁去include就好。 ### Global static file 剛剛有提到跨App要存取template要設定Global template，同理跨App要存取static也要設定global static dirs。直接在settings.py加入以下設定: ```python! STATICFILES_DIRS = [ BASE_DIR / "static_file", ] ``` 就可以把project file底下的static_file資料內的開放給所有App存取。 ### send data to template Django可以將要用的資料打包成一個dictionary傳給前端。只要在view function return render時把資料放在最後一個參數。 view.py: ```python! def testPage(request): i = [x for x in range(1,10)] #一個0~9的list data = { "data1":"資料1", "data2":"資料2", "list":i, } return render(request, "index.html", data) ``` 前端用{{變數}}: ```htmlembedded! {% load static %}This is an example paragraph. Anything in the body tag will appear on the page, just like this p tag and its contents.
{{list}} ```  如果要取出list內特定index： ```htmlembedded! {{list.3}} ``` ### for tag 或是用for loop tag： ```htmlembedded! {% load static %}This is an example paragraph. Anything in the body tag will appear on the page, just like this p tag and its contents.
{% for item in list%}{{item}}
{% endfor %} ```  ### if tag 當然有for tag也有if else tag： ```htmlembedded! {% if ... %} {% else if ...%} {% else %} {% endif %} ``` 像是宿舍公共空間借用系統的空間選擇欄位，要依據目前選擇的空間改變selected：  ```htmlembedded! ``` 就是使用for tag以及 if tag完成的： ```htmlembedded= ``` 要特別注意的是，對於Django前端的變數還是有資料型態的差別的，所以如果==兩端的資料型態不同，是需要資料型態轉換的！ 基本上都和python語法差不多，只是最後都要加上一個end tag。 還有很多酷酷tag和filter，包括變數資料型態的轉換(stringformat)或是變數的運算(add)，請參考官方文檔： https://docs.djangoproject.com/en/5.0/ref/templates/builtins 備註： MTV這種形式的好處就是前後端做到完全分離，前端code只會有變數跟一些必要的for loop。 ### 什麼？前端可以存取POST? 不只是POST, GET、session、cookie，這些跟request有關的都可以直接在template用變數存取。 不過要確定setting.py內的templates context_processors有沒有這個設定： ```python! "django.template.context_processors.request" ``` 這樣就可以在前端用request.POST.name存取POST的內容！！(session, get, cookie同理) ```htmlembedded! ``` ### url tag **補充**： 還有很重要的tag是url tag, 用法: {% url "site_name" %} 只要給頁面一個別名，就可以用這個tag自動生成去往這個頁面的url。 這東西好用在哪裡呢？以宿服借用系統的navbar為例，點擊navbar上的標題就可以回到主頁。 但是如果用相對路徑，有一些頁面可能../就可以回到主頁，有一些要../../兩次才可以或是更多，如果用絕對路徑domain更改時又要改code，所以我們可以直接給主頁一個url name，在urls.py裡面: ```python! path("", views.home, name="home"), ``` 這樣我們就可以用{% url "home" %}回到主頁： ```htmlembedded= ``` ## 3.資料庫 ### 資料庫設定 Django 原先預設是使用sqllite，不過我自己習慣使用MySQL。 在 settings.py內找到DATABASES的設定，並改成： ```python! DATABASES = { "default": { "ENGINE": "django.db.backends.mysql", "NAME": "databaseName", "USER": "databaseUser", "PASSWORD": "databasePassword", "HOST": "localhost", "PORT": "portNumber", } } ``` 若沒有安裝pymysql package: ```bash! pip install pymysql ``` 最後記得要在project/__init__.py 或是 settings.py的最上面補上以下程式， 這段程式的目的是讓python可以直接透過pymysql package去連結資料庫： ```python! import pymysql pymysql.install_as_MySQLdb() ``` Django不管你連接什麼資料庫，都會轉為ORM，簡單來說就是一個table就會是一個Python class，table內的column就是class的attribute，這些class定義在app的models.py裡面。 **ps:** ***model就沒分local model或是global model了，如果要用到別的app的model, 直接from app import model就好了。*** ```python= class Space(models.Model): id = models.AutoField(primary_key=True) # Field name made lowercase. space_name = models.CharField(max_length=255) # Field name made lowercase. region = models.CharField(max_length=255) link = models.CharField(max_length=255, blank=True, null=True) eng_name = models.CharField(max_length=255) class Meta: managed = True #代表需要Django幫你在資料庫建立這個table db_table = 'Space' #資料庫內table的名字，預設會是django_space class Register(models.Model): signature = models.CharField(max_length=255, primary_key=True, null=False, blank=False) start_time = models.IntegerField() # Field name made lowercase. space = models.ForeignKey(Space, on_delete=models.CASCADE) # Field name made lowercase. The composite primary key (Space_id, Start_time, Date) found, that is not supported. The first column is selected. date = models.CharField(max_length=20) # Field name made lowercase. usable = models.IntegerField() user_id = models.CharField(max_length=255, blank=True, null=True) user_name = models.CharField(max_length=255, blank=True, null=True) user_phone = models.CharField(max_length=255, blank=True, null=True) user_dormnumber = models.IntegerField(blank=True, null=True) change_pwd = models.CharField(max_length=255, blank=True, null=True) class Meta: managed = True db_table = 'Register' unique_together = ('space', 'start_time', 'date') #這三個欄位合在一起必須唯一 class BlackList(models.Model): stu_id = models.CharField(primary_key=True, max_length=20) expire_time = models.DateField(blank=True, null=True) banned_reason = models.CharField(max_length=20, blank=True, null=True) class Meta: managed = True db_table = 'black_list' ``` 定義或是修改class後輸入指令： ```bash! python manage.py makemigrations python manage.py migrate ``` 這時就會看到我們的資料庫多了許多table:  除了Space, Register, black_list以外，其他都可以不用管，那些是django自己產生的一些紀錄。 ### 常見的資料庫欄位格式 資料欄位Options常用的有:| 選項 | 意義 |
|---|---|
| null | 是否可以為null |
| blank | 是否可以為空白字串 |
| primary_key | 是否為pk |
| default | 欄位預設值 |
| choices | 限定欄位值只能填哪些, 很好用 |
| unique | 欄位值是否唯一 |
| 選項 | 意義 |
|---|---|
| to | 有關係的table |
| on_delete | 連結的資料消失時採去的動作 |
| parent_link | 繼承用的，不重要我也不會用QQ |