Django3 - 開啟Django Hello World

一、開啟Django Hello World

????????要學習Django首先需要了解Django的操作指令，了解了每個指令的作用，才能在MyDjango項目里編寫Hello World網頁，然后通過該網頁我們可以簡單了解Django的開發過程。

1.1 Django的操作指令

????????無論是創建項目還是創建項目應用，都需要使用相關的指令才能得以實現，這些指令都是Django內置的操作指令。在PyCharm的Terminal中輸入指令python manage.py help并按回車鍵，即可看到相關的指令信息，如圖所示。

????????Django的操作指令共有30條，每條指令的說明如表所示。

1.2 開啟Hello World之旅

????????首先在templates文件夾里新建index.html文件，該文件是Django的模板文件，如果MyDjango項目是在命令提示符窗口下創建的，就需要在MyDjango項目的路徑下自行創建templates文件夾，如圖所示。

????????接著打開MyDjango文件夾的配置文件settings.py，找到配置屬性INSTALLED_APPS和TEMPLATES，分別將項目應用index和模板文件夾templates添加到相應的配置屬性，其配置如下所示：

????????Django所有的功能都必須在配置文件settings.py中設置，否則項目在運行的時候無法生成相應的功能。最后在項目的urls.py（MyDjango文件夾的urls.py）?、views.py（項目應用index的views.py文件）和index.html（templates文件夾的index.html）文件里編寫相應的代碼，即可實現簡單的Hello World網頁，代碼如下：

????????在上述代碼里可以簡單映射出用戶訪問網頁的過程，說明如下：

????????當用戶在瀏覽器訪問網址的時候，該網址在項目所設置的路由（urls.py文件）里找到相應的路由信息。

????????然后從路由信息里找到對應的視圖函數（views.py文件）?，由視圖函數處理用戶請求。

????????視圖函數將處理結果傳遞到模板文件（index.html文件）?，由模板文件生成網頁內容，并在瀏覽器里展現。

????????啟動MyDjango項目，并在瀏覽器上訪問路由地址(http://127.0.0.1:8000)即可看到Hello World網頁，如圖所示。

????????注意：由于Django默認配置的數據庫是SQLite，因此在啟動MyDjango項目之后，在MyDjango的目錄里自動新建db.sqlite3文件。

二、調試Django項目

????????在開發網站的過程中，為了確保功能可以正常運行及驗證是否實現開發需求，開發人員需要對已實現的功能進行調試。Django的調試方式分為PyCharm斷點調試和調試異常。

2.1 PyCharm斷點調試

????????我們知道，PyCharm調試Django開發的項目，PyCharm的版本必須為專業版，而社區版是不具備Web開發功能的。使用PyCharm啟動Django的時候，可以發現PyCharm上帶有爬蟲的按鈕，該按鈕用于開啟Django的Debug調試模式。

????????單擊調試按鈕（帶有爬蟲的按鈕）?，即可開啟調試模式，在PyCharm的正下方可以看到相關的調試信息，如圖所示。

????????從圖的調試界面可以看到有多個操作按鈕，常用的調試按鈕的功能說明以表格的形式表示，如表所示。

????????我們通過簡單的示例來講述如何使用PyCharm的調試模式。以MyDjango項目為例，在index文件夾的views.py文件里，視圖函數index添加變量value并且在返回值return處設置斷點。

????????設置斷點是在圖的方框里單擊一下即可出現紅色的圓點，該圓點代表斷點設置，當項目開啟調試模式并運行到斷點所在的代碼位置，程序就會暫停運行。開啟MyDjango項目的調試模式并在瀏覽器上訪問127.0.0.1:8000，在PyCharm正下方的調試界面里可以看到相關的代碼信息，如圖所示。

????????調試界面Debugger的Frames是當前斷點的程序所依賴的程序文件，單擊某個文件，Variables就會顯示當前文件的程序所生成的對象信息。單擊按鈕，PyCharm就會自動往下執行程序，直到下一個斷點才暫停程序；單擊按鈕，PyCharm只會執行當前暫停位置的下一步代碼，這樣可以清晰地看到每行代碼的執行情況。這兩個按鈕是斷點調試最為常用的，它們能讓開發者清晰地了解代碼的執行情況和運行邏輯。

????????如果程序在運行過程中出現異常或者代碼中設有輸出功能（如print）?，這些信息就可以在PyCharm正下方調試界面的Console里查看，如圖所示。

????????啟動項目的時候，從圖的運行信息看到“System check identified no issues (0silenced)”信息，該信息表示Django對項目里所有的代碼語法進行檢測，如果代碼語法存在錯誤，在啟動的過程中就會報出相關的異常信息。圖中的“This is test!”是視圖函數index的“print(value)”代碼輸出結果；"GET / HTTP/1.1"200代表瀏覽器成功訪問127.0.0.1:8000，其中200代表HTTP的狀態碼。

????????注意：斷點調試無法在模板文件（templates的index.html）設置斷點，因此無法對模板文件進行調試，只能通過PyChram調試界面Console或瀏覽器開發者工具進行調試。

2.2 調試異常

????????PyCharm的調試模式無法調試模板文件，而模板文件需要使用Django的模板語法，若想調試模板文件，則最有效的方法是查看PyCharm或瀏覽器提示的異常信息。調試異常需要根據項目運行時所產生的異常信息進行分析，使用瀏覽器訪問路由地址的時候，如果出現異常信息，就可以直接查看異常信息找出錯誤位置。比如在templates的模板文件index.html里添加錯誤的代碼，如下所示：

????????當運行MyDjango項目并在瀏覽器訪問127.0.0.1:8000的時候，PyCharm正下方的調試界面Console就會出現異常信息，從異常信息中可以找到具體的異常位置。除了在PyCharm正下方的調試界面Console查看異常信息外，還可以在瀏覽器上分析異常信息，比如模板文件index.html的錯誤語法，Django還能標記出錯位置，便于開發者調試和跟蹤。

????????還有一種常見的情況是網頁能正常顯示，但網頁內容出現部分缺失。對于這種情況，只能使用瀏覽器的開發者工具對網頁進行分析處理。以templates的模板文件index.html為例，對其添加正確的代碼，但在網頁里出現內容缺失。

????????再次啟動MyDjango項目并在瀏覽器訪問127.0.0.1:8000的時候，瀏覽器能正常訪問網頁，但無法顯示{{ value }}的內容，打開瀏覽器的開發者工具看到，{{ value }}的內容是不存在的。

????????此外，瀏覽器的開發者工具對于調試AJAX和CSS樣式非常有用。通過生成的網頁內容進行分析來反向檢測代碼的合理性是常見的手段之一，這是通過校驗結果與開發需求是否一致的方法來調試項目功能的。

三、HTML、CSS和JavaScript

????????網站開發可以分為前端開發和后端開發，前端開發是指網頁設計，我們在瀏覽器看到網站的圖片、文字、音樂視頻等內容排版都是由前端開發人員實現的；后端開發是為前端開發提供實際的數據內容和業務邏輯，比如提供文字內容、圖片和音樂視頻的路徑地址等信息。

????????前端開發人員必須掌握HTML、CSS和JavaScript的基礎語言，這些基礎語言上延伸了許多前端框架，比如jQuery、Bootstrap、Vue、React和AngularJS等。后端開發人員必須掌握一種或多種后端開發語言、數據庫應用原理、Web服務器應用原理和基礎運維技術，目前較為熱門的后端開發語言分別有Java、PHP、Python和GO語言；數據庫為MySQL、MSSQL、Oracle和Redis等。

????????盡管明確劃分了網站開發的職責，在實際工作中，特別是一些中小企業，他們也要求后端開發人員必須掌握前端開發技術，但無須精通前端開發，只要掌握基本的應用開發即可，比如調整網站布局或編寫簡單的JavaScript腳本。我們除了學習使用Django開發網站，還需要掌握前端的基礎知識。

3.1 HTML

????????HTML是超文本標記語言，標準通用標記語言下的一個應用。?“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標記語言的結構包括“頭”部分(Head)和“主體”部分(Body)，其中“頭”部分提供關于網頁的信息，?“主體”部分提供網頁的具體內容。下面來看一個簡單的HTML文檔的結構：

????????一個完整的網頁必定以<html></html>為開頭和結尾，整個HTML可分為兩部分：

????????(1)<head></head>，主要是對網頁的描述、圖片和JavaScript的引用。<head>元素包含所有的頭部標簽元素。在<head>元素中可以插入腳本(scripts)、樣式文件(CSS)及各種meta信息。該區域可添加的元素標簽有<title>、<style>、<meta>、<link>、<script>、<noscript>和<base>。

????????(2)<body></body>是網頁信息的主要載體。該標簽下還可以包含很多類別的標簽，不同的標簽有不同的作用，標簽以<>開頭，以</>結尾，<>和</>之間的內容是標簽的值和屬性，每個標簽之間可以是相互獨立的，也可以是嵌套、層層遞進的關系。

????????根據這兩個組成部分就能很容易地分析整個網頁的布局。其中，<body></body>是整個HTML的重點部分，通過示例講述如何分析<body></body>：

????????上述例子分析如下：

????????(1)<h1>和<div>是兩個不相關的標簽，兩個標簽是相互獨立的。

????????(2)<div>和<p>是嵌套關系，<p>的上一級標簽是<div>。

????????(3)<h1>和<p>這兩個標簽是毫無關系的。

????????(4)<h2>標簽包含一個<p>標簽，<p>標簽再包含一個<a>標簽，一個標簽可以包含多個標簽在其中。

????????除上述示例的標簽之外，大部分標簽都可以在<body></body>中添加，常用的標簽如表所示。

3.2 CSS

????????HTML代碼是保存在后綴名為.html的文件，而CSS樣式是保存在后綴名為.css的文件，然后在HTML代碼中調用CSS樣式文件。由于HTML代碼中會存在多個不同的元素，并且每個元素的網頁布局各不相同，因此需要使用CSS選擇器定位每個HTML元素，然后再編寫相應的CSS樣式。

????????CSS選擇器劃分了多種類型，同一個HTML元素可以使用不同的CSS選擇器進行定位，實際開發中最常用的CSS選擇器分別為：類別選擇器、標簽選擇器、ID選擇器、通用選擇器和群組選擇器，我們將簡單講述如何使用這些CSS選擇器實現HTML元素的網頁布局。

????????打開index.html文件，在該文件中定義網頁元素，詳細代碼如下：

????????上述代碼中使用link標簽引入同一路徑的index.css文件，link標簽是在HTML代碼中引入CSS文件，使CSS文件的樣式代碼能在HTML代碼中生效。然后設置了5個不同類型的HTML標簽，分別為<h3>、<div>、<p>、<input>和<button>，其中<div>設置了class屬性，<input>和<button>設置了id屬性。

????????使用類別選擇器、標簽選擇器、ID選擇器、通用選擇器和群組選擇器分別對這些HTML標簽進行樣式設置。

????????上述代碼中，我們依次使用通用選擇器、標簽選擇器、類別選擇器、ID選擇器和群組選擇器設置index.html的網頁布局，從代碼中可以歸納總結CSS選擇器的語法格式，如下所示。

XXX {
attribute:value;
attribute:value;
}

????????CSS選擇器的語法說明如下：

????????(1)XXX代表CSS選擇器的類型。

????????(2)在CSS選擇器后面使用空格并添加中括號{}，在中括號{}里面編寫具體的樣式設置。

????????(3)樣式設置以attribute:value表示，attribute代表樣式名稱，value代表該樣式設置的數值。多個樣式之間使用分號“;”隔開。

????????(4)如果要對樣式添加注釋，可以使用“/**/”添加說明。我們回看index.css文件，該文件的樣式代碼說明如下：

(1)通用選擇器：它以符號“*”表示，這是設置整個網頁所有元素的樣式，用于網頁的整體布局。上述代碼是將整個網頁的字體大小設為30px。

(2)標簽選擇器：它以標簽名表示，如果網頁中有多個相同的標簽，那么標簽選擇器的樣式設置都會作用在這些標簽上。上述代碼是將所有h3標簽的字體顏色設為藍色。

(3)類別選擇器：它以.xxx表示，其中xxx代表標簽屬性class的屬性值，這是開發中常用的樣式設置之一。使用類別選擇器，必須在HTML的標簽中設置class屬性，在class屬性的屬性值前面加上實心點“.”即可作為類別選擇器。上述代碼是將class="content"的標簽放置網頁居中位置。

(4)ID選擇器：它以#xxx表示，其中xxx代表標簽屬性id的屬性值，這也是開發中常用的樣式設置之一。使用ID選擇器，必須在HTML的標簽中設置id屬性，在id屬性的屬性值前面加上井號“#”即可作為ID選擇器。上述代碼是將id=" message"的標簽設置寬度為500px。

(5)群組選擇器：它是將多個CSS選擇器組合成一個群組，并由這個群組對這些標簽進行統一的樣式設置，每個CSS選擇器之間使用逗號隔開。上述代碼是分別將id="submit"的標簽和p標簽的字體顏色設為紅色。

????????CSS樣式也可以直接在HTML文件里編寫，但在企業開發中，一般都采用HTML和CSS代碼分離，這樣便于維護和管理，而且利于開發者閱讀。

3.3 JavaScript

????????JavaScript（簡稱“JS”?）是一種具有函數優先的輕量級、解釋型的編程語言。它是因為開發Web頁面的腳本語言而出名的，但是也被用到了很多非瀏覽器環境中，JavaScript基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式和聲明式的編程風格。簡單來說，JavaScript是能被瀏覽器解釋并執行的一種編程語言。

????????JavaScript可以在HTML文件里編寫，但在企業開發中也是采用HTML和JavaScript代碼分離。

????????首先打開index.html文件，在HTML代碼中引入JS文件，并為button標簽添加事件觸發，詳細代碼如下：

????????從上述代碼看到，script標簽是在HTML代碼中引入JS文件，使得JS文件的JavaScript代碼能在HTML代碼中生效。button標簽添加了onclick屬性，該屬性是JS的事件觸發，當用戶單擊“提交”按鈕的時候，瀏覽器將會觸發事件onclick所綁定的函數getInfo()。JavaScript除了事件觸發onclick之外，還提供了其他的事件觸發，如表所示。

????????看index.html的button標簽，由于該標簽的事件觸發onclick綁定了函數getInfo()，因此下一步在index.js里定義函數getInfo()，函數代碼如下：????????上述代碼的document.getElementById是獲取id="message"的標簽（即input標簽）的屬性value的屬性值，JavaScript的document對象簡稱為DOM對象，它可以定位某個HTML標簽并進行操作，從而實現網頁的動態效果。document對象定義了7個對象方法，每個對象方法的詳細說明如表所示。

????????在實際開發中，我們經常使用getElementById、getElementsByName和getElementsByTagName方法來定位HTML標簽，然后再對已定位的HTML標簽進行操作。

四、小結

????????網站是指在因特網上根據一定的規則，使用HTML等工具制作并用于展示特定內容相關網頁的集合。在早期，域名、空間服務器與程序是網站的基本組成部分，隨著科技的不斷進步，網站的組成也日趨復雜，目前多數網站由域名、空間服務器、DNS域名解析、網站程序和數據庫等組成。

????????網站開發流程如下：

????????(1)需求分析：當拿到一個項目時，必須進行需求分析，清楚知道網站的類型、具體功能、業務邏輯以及網站的風格，此外還要確定域名、網站空間或者服務器以及網站備案等。

????????(2)規劃靜態內容：重新確定需求分析，并根據用戶需求規劃出網站的內容板塊草圖。

????????(3)設計階段：根據網站草圖，由美工制作成效果圖。就好比建房子一樣，首先畫出效果圖，然后才開始建房子，網站開發也是如此。

????????(4)程序開發階段：根據草圖劃分頁面結構和設計，前端和后臺可以同時進行。前端根據美工效果負責制作靜態頁面；后臺根據頁面結構和設計，設計數據庫數據結構和開發網站后臺。

????????(5)測試和上線：在本地搭建服務器，測試網站是否存在Bug。若無問題，則可以將網站打包，使用FTP上傳至網站空間或者服務器。

????????(6)維護推廣：在網站上線之后，根據實際情況完善網站的不足，定期修復和升級，保障網站運營順暢，然后對網站進行推廣宣傳等。

????????Django采用MTV的框架模式，即模型(Model)、模板(Template)和視圖(Views)，三者之間各自負責不同的職責。

????????模型：數據存取層，處理與數據相關的所有事務，例如如何存取、如何驗證有效性、包含哪些行為以及數據之間的關系等。

????????模板：表現層，處理與表現相關的決定，例如如何在頁面或其他類型的文檔中進行顯示。

????????視圖：業務邏輯層，存取模型及調取恰當模板的相關邏輯，模型與模板的橋梁。

????????建議使用pip命令安裝Django，安裝的方法如下：

# 方法一
pip install Django
# 方法二
pip install D:\Django-3.1.4-py3-none-any.whl

????????兩種不同的安裝方法都是使用pip執行的，唯一的不同之處在于前者在安裝過程中會從互聯網下載安裝包，而后者直接對本地已下載的安裝包進行解壓安裝。Django安裝完成后，在Python交互解釋器模式校驗安裝是否成功：

>>> import django
>>> django.__version__

????????Django的目錄結構以及含義如下：

????????manage.py：命令行工具，內置多種方式與項目進行交互。在命令提示符窗口下，將路徑切換到MyDjango項目并輸入python manage.py help，可以查看該工具的指令信息。

????????__init__.py：初始化文件，一般情況下無須修改。

????????asgi.py：開啟一個ASGI服務，ASGI是異步網關協議接口。

????????settings.py：項目的配置文件，項目的所有功能都需要從該文件里進行配置。

????????urls.py：項目的路由設置，設置網站的具體網址內容。

????????wsgi.py：全稱為Python Web Server Gateway Interface，即Python服務器網關接口，是Python應用與Web服務器之間的接口，用于Django項目在服務器上的部署和上線，一般不需要修改。

????????migrations：用于生成數據遷移文件，通過數據遷移文件可自動在數據庫里生成相應的數據表。

????????__init__.py：index文件夾的初始化文件。

????????admin.py：用于設置當前App的后臺管理功能。

????????apps.py：當前App的配置信息，在Django 1.9版本后自動生成，一般情況下無須修改。

????????models.py：定義數據庫的映射類，每個類可以關聯一張數據表，實現數據持久化，即MTV里面的模型(Model)。

????????tests.py：自動化測試的模塊，用于實現單元測試。

????????views.py：視圖文件，處理功能的業務邏輯，即MTV里面的視圖(Views)。

?--------------------------------------

沒有自由的秩序和沒有秩序的自由，同樣具有破壞性。