0. 基礎

• python版本

python-3.6.4

• 編輯器

pycharm-2018.2.4

• 系統

Windows7-64bit-旗艦版

• 時間

2018/10/19

 

1. 虛擬環境

• 概念

虛擬環境是系統的一個位置，在開發web專案時，需要安裝的所有python庫都必須安裝在該環境中。

• 建立( 通過CMD終端視窗實現 )

1) 開啟CMD終端並切換到專案所在目錄；

2) 執行【python -m venv ll_env】，即通過模組venv建立一個名為ll_env的虛擬環境，此時專案所在目錄中會自動生成“ll_env”目錄；

• 啟用

1) 開啟CMD終端並切換到專案所在目錄；

2) 執行【ll_env\Scripts\activate】；

 

2. Django

• 概念

Django是一套用於幫助開發互動式網站的工具，僅在虛擬環境處於啟用狀態時才可用。

• 安裝

1) 建立並啟用虛擬環境；

2) 執行【pip install Django】；

• 在Django中建立專案

1) 建立並啟用虛擬環境；

2) 執行【django-admin.py startproject 專案名稱 .】，此時專案所在目錄中會自動生成“專案名稱”目錄和“manage.py”檔案，其中“專案名稱”目錄包含__init__.py、settings.py、urls.py和wsgi.py四個檔案，具體的檔案說明如下：

    2.1) manage.py：接受命令並將其交給Django的相關部分去執行。

    2.2) settings.py：指定Django如何與你的系統互動以及如何管理專案。

    2.3) urls.py：告訴Django應建立哪些網頁來響應瀏覽器請求。

    2.4) wsgi.py：幫助Django提供它建立的檔案。

• 建立供Django使用的資料庫

1) 建立並啟用虛擬環境；

2) 執行【python manage.py migrate】，首次在虛擬環境中執行此命令，將會在專案所在目錄中會自動生成“db.sqlite3”檔案，表明此時為專案建立了一個SQLite資料庫；

• 啟動Django伺服器

1) 建立並啟用虛擬環境；

2) 執行【python manage.py runserver】，當在瀏覽器中輸入專案URL請求網頁時，該Django伺服器將進行響應，並生成合適的網頁，將其傳送給瀏覽器。當啟動Django伺服器之後，該CMD視窗不要再進行別的任何操作，就將其作為一個本地伺服器使用即可。

• 在Django中建立應用程式

1) 開啟新的CMD終端並切換到“manage.py”檔案所在目錄；

2) 啟用虛擬環境；

3) 執行【python manage.py startapp 應用程式名稱】，此時專案所在目錄中會自動生成“應用程式名稱”目錄，其中包含__init__.py、apps.py、tests.py、models.py、admin.py和views.py六個檔案，各檔案說明如下：

    3.1) models.py：處理應用程式中使用的資料，包含若干個模型（即，類），模型告訴Django如何處理應用程式中儲存的資料；

    3.2) admin.py：註冊所建立的模型，讓Django通過其管理網站來管理我們的模型；

    3.3) views.py：管理檢視函式，檢視函式接受請求中的資訊，準備好生成網頁所需的資料，再將這些資料傳送給瀏覽器，這通常是定義了網頁是什麼樣的模板實現的；

4) 在Django中將應用程式包含到專案中：在“settings.py”檔案中將“應用程式名稱”新增到“INSTALLED_APPS”元組中；

• 利用Django修改/遷移資料庫（只要修改了“models.py”檔案就需進行此操作）

1) 開啟新的CMD終端並切換到“manage.py”檔案所在目錄；

2) 啟用虛擬環境；

3) 執行【python manage.py makemigrations 應用程式名稱】，此時在“應用程式名稱”目錄中的“migrations”目錄中自動生成一個遷移檔案；

4) 執行【python manage.py migrate】，應用剛才的遷移檔案來修改資料庫；

• Django提供的管理網站（admin site）

1) 開啟新的CMD終端並切換到“manage.py”檔案所在目錄；

2) 啟用虛擬環境；

3) 執行【python manage.py createsuperuser】建立超級使用者，此時Django提示你輸入超級使用者的使用者名稱、郵件地址和密碼；

• 外來鍵

外來鍵是一個資料庫術語，需要在兩項資料之間建立聯絡時，Django使用與每項資訊相關聯的外來鍵。

 

3. 利用Django建立網頁

• 步驟概述

1) 定義URL模式：URL模式描述了URL是如何設計的，讓Django知道如何將瀏覽器請求與網站URL匹配，以確定返回哪個網頁。

2) 編寫檢視函式：每個URL都被對映到特定的檢視，檢視函式獲取並處理網頁所需的資料。檢視函式通常呼叫一個模板，後者生成瀏覽器能夠理解的網頁。

3) 編寫html模板：負責生成瀏覽器能夠理解的網頁，模板定義了網頁的結構，模板指定了網頁是什麼樣的，而每當網頁被請求時，Django將填入相關的資料。模板讓你能夠訪問檢視提供的任何資料。

• html模板規則

1) 標籤【<p>...</p>】標識段落，其中標籤<p>指出了段落的開頭位置，而標籤</p>指出了段落的結束位置；

2) 連結標籤【<a href="{% url 'URL模式' 該URL模式對應的檢視函式的實參 %}">文字</a>】生成一個URL，該URL與“URL模式”匹配，即為“文字”生成一個到“URL模式”的連結；

3) 塊標籤【{% block 塊名 %}...{% endblock 塊名 %}】；

4) 繼承標籤【{% extends "父模板路徑" %}】；

5) 專案列表標籤【<ul>...</ul>】，表示一個專案列表；

6) 專案列表項標籤【<li>...</li>】，表示一個專案列表項，在標籤對<ul></ul>內部，位於標籤<li>和</li>之間的內容都是一個專案列表項；

7) for迴圈的模板標籤：

        {% for item in list %} 
                     do something with each item 
                   {% endfor %}

8) if條件的模板標籤：

        {% if 條件 %} 
                      do something if conditional is satisfied
                   {% endif %}

9) 標籤【{% empty %}】，告訴Django在專案列表為空時該怎麼辦；

10) HTML表單標籤【<表單變數名 action="{% url 'URL模式' 該URL模式對應的檢視函式的實參 %}" method='post'>...</表單變數名>】，其中實參action告訴伺服器將提交的表單資料傳送到“URL模式”，實參method讓瀏覽器以POST請求的方式提交資料；

11) 標籤【{% csrf_token %}】防止攻擊者利用表單來獲得對伺服器未經授權的訪問；

12) 按鈕標籤【<button name="按鈕型別">按鈕名字</button>】為表單建立一個按鈕；

13) 隱藏的表單標籤【<input type="hidden" name="next" value="{% url 'URL模式' 該URL模式對應的檢視函式的實參 %}" />】，告訴Django接下來跳轉到哪個網頁；

14) 表單的errors屬性：【表單變數名.errors】；

15) 在模板中列印變數：【{{ 變數}}】；

16) 模板變數：【表單變數名.as_p】，修飾符as_p讓Django以段落格式渲染所有表單元素，這是一種整潔地顯示錶單的簡單方式；

17) 模板變數：【user】，每個模板都可使用變數user，這個變數有一個is_authenticated屬性，如果使用者已登入，該屬性將為True，否則為False；

• 利用Django建立基於表單的網頁

1) 概述：凡是讓使用者輸入並提交資訊的頁面都是表單，那怕它看起來不像表單。

2) 建立方式：ModelForm；

3) 包含的表單元素：

    3.1) model：告訴Django根據哪個模型建立表單；

    3.2) fields：告訴Django表單中包含的欄位；

    3.3) labels：告訴Django表單中所包含欄位的標籤；

    3.4) widgets：告訴Django表單中所包含欄位的部件(如：單行文字框、多行文字區域或下拉選單等)；

• Django提供的裝飾器@login_required

該裝飾器保證對於某些頁面，只允許已登入的使用者訪問它們。

 

4. 利用Bootstrap庫設定網頁樣式

• Bootstrap庫概述

這是一組工具，用於為Web應用程式設定樣式，Bootstrap基本上就是一個大型的樣式設定工具集，它還提供了大量的模板，可將它們應用於專案以建立獨特的總體風格，通過django-bootstrap3庫將Bootstrap繼承到專案中。

• 安裝django-bootstrap3

1) 開啟新的CMD終端並切換到“manage.py”檔案所在目錄；

2) 啟用虛擬環境；

3) 執行【pip install django-bootstrap3】；

4) 在“settings.py”檔案中將“bootstrap3”新增到“INSTALLED_APPS”元組中，注意，要放在該元組中包含的新建“應用程式名稱”前面；

• html模板規則：( HTML檔案分為兩個主要部分：頭部head和主體body )

1) 標籤【{% load bootstrap3 %}】載入了django-bootstrap3中的模板標籤集；

2) 標籤【<!DOCTYPE html>...</html>】宣告為編寫html文件；

3) 標籤【<html lang="en">】宣告為使用英語編寫；

4) 頭部標籤【<head>...</head>】；

5) 標題欄標籤【<title>文字</title>】；

6) 標籤【{% bootstrap_css %}】讓Django包含所有的Bootstrap樣式檔案；

7) 標籤【{% bootstrap_javascript %}】啟用可能在頁面中使用的所有互動式行為，如可摺疊的導航欄等；

8) 主體標籤【<body>...</body>】，HTML檔案的主體包含使用者將在頁面上看到的內容；

9) 標籤【<!-- Static navbar -->】，Bootstrap提供的模板Static top navbar提供了簡單的頂部導航條、頁面標題和用於放置頁面內容的容器；

10) 標籤【<nav class="navbar navbar-default navbar-static-top">...</nav>】，<nav>元素表示頁面的導航連結部分，對於這個元素內的所有內容，都將根據選擇器（selector）navbar、navbar-default和navbar-static-top定義的Bootstrap樣式規則來設定樣式，選擇器決定了特定樣式規則將應用於頁面上的哪些元素；

11) 標籤【<div class="container">...</div>】，<div>起始標籤，其class屬性為container，div是網頁的一部分，可用於任何目的，並可通過邊框、元素周圍的空間（外邊距）、內容和邊框之間的間距（內邊距）、背景色和其他樣式規則來設定其樣式；

12) 標籤【<div class="navbar-header">...</div>】，<div>起始標籤，其class屬性值navbar-header將一系列樣式應用於這個塊；

13) 標籤【<button type="按鈕型別" class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#navbar"  aria-expanded="false" aria-controls="navbar">  </button>】，該按鈕將在瀏覽器視窗太窄、無法水平顯示整個導航欄時顯示出來，如果使用者單擊這個按鈕，將出現一個下拉選單，其中包含所有的導航元素，在使用者縮小瀏覽器視窗或在螢幕較小的移動裝置上顯示網站時，collapse會使導航欄摺疊起來；

14) 標籤【<a class="navbar-brand" href="{% url 'URL模式' 該URL模式對應的檢視函式的實參 %}"> 文字</a>】，在導航欄的最左邊顯示“文字”，併為“文字”生成一個到“URL模式”的連結；

15) 標籤【<div id="navbar" class="navbar-collapse collapse">...</div><!--/.nav-collapse -->】定義一組讓使用者能夠在網站中導航的連結；

16) 標籤【<ul class="nav navbar-nav">...</ul>】，定義導航欄；

17) 標籤【<ul class="nav navbar-nav navbar-right">...</ul>】，定義導航欄；

18) 標籤【<div class="container">...</div> <!-- /container -->】，<div>起始標籤，其class屬性值container將一系列樣式應用於這個塊；

19) 標籤【<div class="page-header">...</div>】,<div>起始標籤，其class屬性值page-header將一系列樣式應用於這個塊；

20) 標籤【<div class='jumbotron'>...</div>】,<div>起始標籤，其class屬性值jumbotron將一系列樣式應用於這個塊，jumbotron是一個Bootstrap元素，是一個大框，相比於頁面的其他部分顯得鶴立雞群，你想在其中包含什麼東西都可以；

21) 標籤【<h數字序號>...</h數字序號>】，標識block中的標題號，即類似於word中的第幾級標題的概念；

22) 表單標籤【<表單變數名 method="post" action="{% url 'URL模式' 該URL模式對應的檢視函式的實參 %}" class="form">...</表單變數名>】，新增了屬性class="form"；

23) 標籤【{% bootstrap_form 表單變數名 %}】，將Bootstrap樣式規則應用於各個表單元素並顯示錶單；

24) 標籤【{% buttons %}...{% endbuttons %}】，將Bootstrap樣式應用於按鈕；

25) 標籤【<button name="按鈕型別" class="btn btn-primary">按鈕名字</button>】為表單建立一個按鈕；

26) 標籤【<div class="panel panel-default">...</div> <!-- panel -->】，<div>起始標籤，其class屬性值panel panel-default將一系列樣式應用於這個塊，這是一個皮膚式div元素；

27) 標籤【<div class="panel-heading">...</div>】,<div>起始標籤，其class屬性值panel-heading將一系列樣式應用於這個塊，這是一個皮膚式標題；

28) 標籤【<div class="panel-body">...</div>】，<div>起始標籤，其class屬性值panel-body將一系列樣式應用於這個塊，這是一個皮膚主體；

29) 標籤【<small>...</small>】，縮小標籤；