iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
3
Modern Web

🍐放學後的網頁開發系列 第 9

[Day9] 柚子放學後的網頁生活 - Django intro

  • 分享至 

  • xImage
  •  

現代網頁模板非常多,以Python為基礎的代表作有Django和Flask
兩者都還滿能快速上手的,Django比Flask還來的heavy,因此多用於大型的Project開發
對熱愛Python的人,一定要好好介紹一下Django才行

Why Django

  1. 開放原始碼的Web應用框架,由Python寫成。
  2. MTV、ORM
  3. 可簡易開發複雜、資料庫驅動的網站
  4. 編碼量小、開發效率高
  5. 可交流資源多,迅速發展中.

MTV

  • M odels - 資料庫結構
  • T emplates - 你將以什麼樣子看到資料(最後呈現)
  • V iews - 決定呈現哪一個資料(背後邏輯運算),交給Templates
    目的:易維護、方便分工(設計/工程)、前後端分離、降低複雜度

ORM

object-relational mapping:用來讓Models和Database溝通,透過操作python類型與物件建立Tables和存取資料

class Teacher(models.Model):
    name = models.CharField(max_length=20)
    yrsold = models.DecimalField(max_digits=3,decimal_places=0)
    skills = models.CharField(max_length=50, blank=True)

Django資料傳輸路徑

  1. USER -> Browser 輸入網址
  2. URLS 解析 -> 給View去決定show哪個資料
  3. Models 去跟 Database 要資料
  4. 回傳給Views -> Template呈現 -> 回到USER眼前

Install Django

在安裝Django時,都會建議用venv(虛擬環境,virtual environment)安裝
雖然我們也可以直接安裝,但使用虛擬環境有許多優點:

  1. 專案可以擁有一個專屬的獨立venv
  2. 不需要 root 權限,就可以安裝新套件。
  3. 方便控管不同version的packages,不用擔心升級卻影響到其他專案
  4. 如果需要多人協作或不同電腦跑同一專案時,venv可以確保環境一致
    那我們就廢話不多說,開始安裝 ! (以下用venv安裝,不用也可以哦)
python -m venv django_venv
django_venv\Scripts\activate

Python 3.4 預先安裝了 pip 這個強大的套件管理工具,我們將使用它來安裝 Django:

pip install "django<1.9"

確保我們安裝的是Django 1.8版本,大家盡量版本一致降低意外發生可能

Start project

我們使用django的內建執行檔start project並name為nuts
(命名可以自己隨便命哦)

django-admin.py startproject nuts

此時會看到在我們的位置多了nuts的資料夾
那我們進去看看

cd nuts
dir /w
  • cd 用來進入資料夾
  • dir 可以看當下資料夾底下有什麼
  • /w 可以看結構

那如果不習慣用cmd的
可以直接到我們開project的資料夾內看
結構如下:

nuts/
├── manage.py
└── nuts
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
  • nuts : 為專案的資料夾名稱,可以自己隨意命名
  • settings.py : 專案設定 / 組態檔案
  • urls.py : 專案URL宣告檔案
  • wsgi.py : WSGI 相容伺服器設定檔案
    WSGI為Web Server Gateway Interface,Python語言定義的網絡服務器和網絡應用程序或框架之間的一種簡單而通用的接口

確定建立成功後 RUN

到manage.py的那層執行

python manage.py runserver

前往localhost:8000

確認本地端Server有成功執行

這網址有什麼意義呢?

IP address : 127.0.0.1 表示為 localhost 本機位址,也就是指向自己電腦
Port : 8000 連接埠通常自訂為8000,那其它拿來做什麼呢?

  1. 系統或公認埠(System or Well Known Ports):0 ~ 1023。Binding 於一些服務,通常明確表明某種服務的協議。Ex:80 => HTTP、21 => FTP。
  2. 使用者或註冊埠(User or Registered ports):1024 ~ 49151。較鬆散地 Binding 。
  3. 通常用於許多其他的也可供為使用者使用。例如:我們在此設定為port 8000,有些系統處理動態埠從port 1024左右開始。
  4. 動態和/或私有埠(Dynamic and/or Private Ports):49152 ~ 65535。通常服務部會分配於這些埠,代表大多時候為閒置埠,導致一些常用木馬和病毒可以乘虛而入。

確認完後我們可以關閉Server

Ctrl+c //結束process回致等待

那接下來我們就要準備進入coding囉
在這之前為了方便編輯(總不能用記事本吧)

文字編輯器

那我這邊推薦幾款文字編輯器

  • 記事本
  • Atom
  • Sublime text
  • Notepad++
  • Visual Studio code

其中我最推薦Atom,外掛套件方便,而且整個樣式很美哈哈
所以在此次Project中會以Atom為Editor
準備好後,我們要進入主題囉~~

建立 Django application

這次我們要建立的小app我們把他命名為classes
(小心不要取成class哦,否則後面會出錯,Ex. from class.view import)
像剛剛開專案一樣這邊是用startapp

python manage.py startapp classes

那現在我們的目錄會長這樣

確認classes的app建立成功後,
我們要讓Django知道要管理classes,所以要調整設定檔settings.py
我們將'classes'放入INSTALLED_APPS的最後面

先到這邊讓我們休息一下
確認剛剛的操作都能了解哦

Take a nap - Review

依照開發順序為

Command Explain
django-admin.py startproject XXX 開啟Project XXX
python manage.py runserver 開啟Server
python manage.py startapp XXX 開啟App XXX

那我們這堂課就先到這邊哦~~
明天告訴大家如何設路由到自己想要的網頁!
ps. 有沒有人發現我的vue就這樣沒了... 因為比較想練Python就換了哈哈哈

下課囉 ~ 請鎖定 柚子放學後的網頁生活


上一篇
[Day8] 柚子放學後的網頁生活 - Vue.js
下一篇
[Day10] 柚子放學後的網頁生活 - View & Urls
系列文
🍐放學後的網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
陳小熊
iT邦新手 4 級 ‧ 2018-10-24 00:14:09

寫得很棒!!歡迎來Django Girls擔任助教~~~~

0

看得我都想寫jango了XD

我要留言

立即登入留言