Django

一個python的後端框架

建電社員 -> 建資社員
常駐於DC~~活網人口~~
音遊好難...大佬教嗎...
競程好難...大佬教嗎...
數學好難...大佬教嗎...

講師 000

Python (DC機器人、網頁後端、機器學習、資料分析、爬蟲、競程)
JavaScript (前端)
C/C++ (競程)
C# (Unity)
Batch
Ruby (寒訓學的東東~~好難用~~)
架過網頁、Minecraft、DC機器人的伺服器
~~Minecraft Function~~
~~Scratch~~

講師 000

Web

網頁

Server

Client

Backend

Frontend

Client

Frontend

在客戶端提出請求後，由伺服器端發送給客戶端的資料，會由瀏覽器讀取後呈現成網頁的介面

簡單來說，就是你在網頁看的到的一切

像是這種

或是這種

又或是這種

那既然網頁呈現的東西前端都有了

那後端要做些什麼呢?

Server

Client

Backend

Frontend

Server

Backend

當客戶端向伺服器端發送請求時

後端會判斷連結到的網址、傳送的資料等等

決定應該向客戶端發送什麼內容

而後端還有一項功能

也就是跟資料庫作互動

能夠存取使用者的各種資料

後端回傳的也不一定是HTML之類的資料

像是各種資料的傳送都可以藉由後端進行

舉個🌰

Discord機器人

其實在各種DC BOT函式庫的的背後

就是跟Discord API做各種交互

Initialization

初始化

pip install django
django-admin startproject {your project name}

# PRESENTING CODE

初始化

pip install django
django-admin startproject {your project name}

# PRESENTING CODE

初始化

C:\DJANGO_EXAMPLE
│  manage.py
│
└─django_example
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

你會得到一個這樣的檔案結構

讓我們來看看內容

# PRESENTING CODE

manage.py

C:\DJANGO_EXAMPLE
│  manage.py ●
│
└─django_example
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

django框架的啟動點

各種指令也都是透過此檔案進行

# PRESENTING CODE

django_example

C:\DJANGO_EXAMPLE
│  manage.py
│
└─django_example ●
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

預設各種伺服器設定

cd {your project name}
python manage.py startapp {your app name}

# PRESENTING CODE

初始化

C:\DJANGO_EXAMPLE
│  manage.py
│
├─app_example
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  │
│  └─migrations
│          __init__.py
│
└─django_example
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

# PRESENTING CODE

migrations

C:\DJANGO_EXAMPLE
│  manage.py
│
├─app_example
│  │  admin.py 
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  │
│  └─migrations ●
│          __init__.py
│
└─django_example 
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

用於管理資料庫與app的互動

# PRESENTING CODE

views.py

C:\DJANGO_EXAMPLE
│  manage.py
│
├─app_example
│  │  admin.py 
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  views.py ●
│  │  __init__.py
│  │
│  └─migrations
│          __init__.py
│
└─django_example
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

用來管理傳給客戶端的前端資訊

# PRESENTING CODE

tests.py

C:\DJANGO_EXAMPLE
│  manage.py
│
├─app_example
│  │  admin.py 
│  │  apps.py
│  │  models.py
│  │  tests.py ●
│  │  views.py
│  │  __init__.py
│  │
│  └─migrations
│          __init__.py
│
└─django_example
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

用來管理測試程式

# PRESENTING CODE

models.py

C:\DJANGO_EXAMPLE
│  manage.py
│
├─app_example
│  │  admin.py
│  │  apps.py 
│  │  models.py ●
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  │
│  └─migrations
│          __init__.py
│
└─django_example
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

存放資料庫物件的設定

# PRESENTING CODE

apps.py

C:\DJANGO_EXAMPLE
│  manage.py
│
├─app_example
│  │  admin.py
│  │  apps.py ●
│  │  models.py
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  │
│  └─migrations
│          __init__.py
│
└─django_example
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

存放給Django的app設定

# PRESENTING CODE

admin.py

C:\DJANGO_EXAMPLE
│  manage.py
│
├─app_example
│  │  admin.py ●
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  │
│  └─migrations
│          __init__.py
│
└─django_example
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

用來註冊給資料庫的model

# PRESENTING CODE

新增APP

#settings.py
INSTALLED_APPS = [
	...
    'app_example.apps.AppExampleConfig'
]

為了讓我們的django大架構知道有這個app

在settings.py中的INSTALLED_APPS

新增剛剛產生的app config

URL Route

URL 路由

#views.py
from django.shortcuts import render
from django.http import HttpResponse


def index(request):
    return HttpResponse("hi")

新增一個index函式

在被調用時回傳一個http回應

內容為一個"hi"

#urls.py
from django.urls import path
from app_example import views

urlpatterns = [
    path('', views.index, name="index")
]

將剛剛的函式註冊到""的URL

也就是網址後面不加任何東西的URL

在使用者連結到該URL執行views.index函式

python manage.py runserver

網站啟動!!!

在終端機輸入以下指令

接著進入127.0.0.1:8000

(你的電腦)

你應該會看到一個"hi"

那就代表成功了!!

網站啟動!!!

但是只給使用者一個"hi"顯然沒什麼意義

讓我們來加入前端

網站啟動!!!

但是只給使用者一個"hi"顯然沒什麼意義

讓我們來加入前端

C:.
│  db.sqlite3
│  manage.py
│
├─app_example
│  │
│  ├─...
│  │
│  ├─static
│  │  ├─css
│  │  │  └style.css
│  │  │
│  │  └─js
│  │     └index.js
│  │
│  └─templates
│  	  └────home.html
└─django_example
    │
    └─...

在app資料夾中新增以下檔案與資料夾

* tempates - home.html

* static

* css - style.css

* js - index.js

<html lang="tw">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--fonts-->
        <link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>

        <!--css-->
        {% load static %}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="{% static 'css/style.css' %}" rel="stylesheet">
    </head>
    <body>
        <h1>hello world!!!</h1>
        <h1>{{ week }}</h1>

        <!--scripts-->
        <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <script src="{% static 'js/index.js' %}" type="module"></script>
        
        <noscript>sorry, your device doesn't support javascript.</noscript>
    </body>
</html>

這邊可以注意到使用了神奇的語法

{%load static%}表示載入static資料夾的內容

而{%static path%}則可以從載入的資料夾中載入檔案位置

往home.html隨便塞點東西

這裡使用{{variable_name}}來載入從後端傳入的變數

<html lang="tw">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--fonts-->
        <link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>

        <!--css-->
        {% load static %}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="{% static 'css/style.css' %}" rel="stylesheet">
    </head>
    <body>
      
        <h1>{{ week }}</h1>

        <!--scripts-->
        <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <script src="{% static 'js/index.js' %}" type="module"></script>
        
        <noscript>sorry, your device doesn't support javascript.</noscript>
    </body>
</html>

隨便塞點東西進去style.css&index.js

目的只是測試能否成功使用css&js

body {
    font-family: Noto-Sans, JhengHei;
    background-color: rgb(224, 250, 255);
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

h1 {
    text-align: center;
    font-size: 10dvw;
    font-weight: bold;
}

$(function() {
    console.log("hi");
});

網站啟動!!!

#views.py
from django.shortcuts import render
from django.http import HttpResponse


def index(request):
    return HttpResponse("hi")

def home(request):
    context = {
        "week": "000"
    }
    return render(request, "home.html", context=context)

新增一個回傳home.html的view函式

並且在context放入一個變數

這些變數能被{{variable_name}}}載入

網站啟動!!!

#urls.py
from django.urls import path
from app_example import views

urlpatterns = [
    path('', views.index, name="index"),
    path('home', views.home, name="home")
]

別忘了這邊也要註冊url

網站啟動!!!

python manage.py runserver

完成之後跟剛剛一樣輸入它

讓server跑起來

之後進入/home

沒意外的話能看到剛剛寫的

html、css、傳入參數(context)都被成功讀取

若是失敗可以檢查看看是不是有哪個步驟沒做到

js同樣測試一下是否成功運行

若是輸出剛剛寫在js中的文字則代表運行成功

重新導向

Redirect

#urls.py
...
path('haha', views.rickroll, name="rickroll")

#views.py
from django.shortcuts import render, redirect
...
def rickroll(request):
    return redirect("https://www.youtube.com/watch?v=dQw4w9WgXcQ")

熟悉的新增view&url

成功後進入/haha就會被rickroll

URL 調度

URL dispatcher

#urls.py
...
path('userid/<int:id>', views.userid, name="userid")

#views.py
from django.shortcuts import render, redirect
...
def userid(request, id):
    return HttpResponse(f"your id is {id}")

又是熟悉的新增view&url

成功後進入/userid/隨便一個數字

URL 調度

URL dispatcher

之後就會看到網址列的數字顯示在網站上了!

Database

資料庫

如果我們要儲存用戶的資料呢?

這種時候就要用到資料庫這個庫東東

Structured Query Language

結構化查詢語言

如果我們要儲存用戶的資料呢?

這種時候就要用到資料庫這個庫東東

資料庫有以下2種:

NoSQL：儲存以key-value的形式，就像是一個大型字典物件

SQL：儲存以各種模型的形式，你可以自行設定每個模型內的值有哪些

Structured Query Language

結構化查詢語言

如果我們要儲存用戶的資料呢?

這種時候就要用到資料庫這個庫東東

資料庫有以下2種:

NoSQL：儲存以key-value的形式，就像是一個大型字典物件

SQL：儲存以各種模型的形式，你可以自行設定每個模型內的值有哪些

以下教學著重在較複雜的SQL資料庫

Structured Query Language

結構化查詢語言

#models.py
from django.db import models
from django.urls import reverse

# Create your models here.
class User(models.Model):
    name = models.CharField(max_length=20)
    isgay = models.BooleanField(default=True)
    
    def get_absolute_url(self):
        return reverse("user", kwargs={"name": self.name, "isgay": self.isgay})
    
    def __str__(self) -> str:
        return self.name

新增一個User模型

裡面可以設定儲存的資訊與類別

#admin.py
from django.contrib import admin
from .models import User

# Register your models here.
admin.register(User)

記得一樣要註冊

#admin.py
from django.contrib import admin
from .models import User

# Register your models here.
admin.register(User)

記得一樣要註冊

python manage.py makemigrations
python manage.py migrate

這次不只要註冊還要建立資料庫

#views.py
from django.shortcuts import render, redirect
...
def new_user(request, name):
    user = User(
        name=name,
        isgay=random.choice([0, 1])
        )
    user.save()
    return HttpResponse(User.objects.all())

def delete_all_user(request):
    User.objects.all().delete()
    return HttpResponse(User.objects.all())
  
def find_user(request, name):
    return HttpResponse(User.objects.filter(name=name))

簡單的分別寫了建立、刪除、查詢的的函式

#urls.py
...
path('new_user/<str:name>', views.new_user, name="new_user"),
path('delete_all_user', views.delete_all_user, name="delete_all_user"),
path('find_user/<str:name>', views.find_user, name="find_user")

這邊可以看到就算把伺服器重開還是可以保有上一次的資訊，除非進入/delete_user

因為資料被儲存在了預設的db.sqlite3檔案中

這邊可以看到就算把伺服器重開還是可以保有上一次的資訊

因為資料被儲存在了預設的db.sqlite3檔案中

可以藉由修改settings.py的DATABASE變數來更換資料庫

另外查詢的部分可以看到進入剛剛有新增的"000"可以找到結果

反之查詢不存在的"路人乙"則沒有結果

以上就是資料庫的基礎運用

他可以被用在各種資訊的儲存與查詢

例如用戶、貼文、線上簡報儲存或是遊戲資料等等

想了解更多可以點擊進入

官方文檔

Login System

登入系統

由於教學只有15分鐘

因此這邊應該來不及講

以後如果我成為寒訓講師之類的有用到簡報再補完

~~最後備註：我是flask派的~~

Instant Messaging

即時通訊

Django

講師 000

講師 000

目錄

Web

Initialization

URL Route

Database

Login System

Instant Messaging

目錄

Web

Initialization

URL Route

Database

Web

Server

Client

Backend

Frontend

Client

Frontend

簡單來說，就是你在網頁看的到的一切

像是這種

或是這種

又或是這種

Server

Client

Backend

Frontend

Server

Backend

Discord機器人

Initialization

初始化

初始化

manage.py

django_example

初始化

migrations

views.py

tests.py

models.py

apps.py

admin.py

新增APP

URL Route

網站 啟動!!!

網站 啟動!!!

網站 啟動!!!

網站 啟動!!!

網站 啟動!!!

網站 啟動!!!

重新導向

Redirect

URL 調度

URL dispatcher

URL 調度

URL dispatcher

Database

Structured Query Language

Structured Query Language

Structured Query Language

Login System

Instant Messaging

網站啟動!!!

網站啟動!!!

網站啟動!!!

網站啟動!!!

網站啟動!!!

網站啟動!!!