2019年10月27日 星期日

[ Django ] 在MTV架構下的視圖與模版

Django採用MTV的架構來設計網站,主要是讓程式變得更有結構,MTV三個重要元素分述如下:

模型(Model):處理商業邏輯以及資料庫存取。
模版或樣版(Template):使用模版變數,建構前台UI的介面,讓後台能將資料傳到模版變數。
視圖(View):讀取資料庫中的資料,運算後再寫入資料庫,並依照使用者需求呼叫相對應的模版,並傳送運算後的變數到模版中。



參考資料:https://mropengate.blogspot.com/2015/08/mvcdjangomtv.html

以下範例是參考:碁峰,Python架站特訓班Django最強實戰

範例:取得現在時刻

1.建立now虛擬環境

2.安裝Django

3.建立nowproj專案

4. 建立nowapp應用程式

5.編輯首頁路徑,呼叫gettime函式

6. 安裝nowapp以及設定模版目錄

7.編輯首頁HTML檔,並建立templates目錄,儲存index.html

8.編輯視圖中的get_time函式

9. 執行產生資料庫表單各種初始化

10.啟動網站

11.查看結果


2019年10月20日 星期日

[ Django 教學 ] 建立Model資料表到樣版程式的設計

1.建立student虛擬環境

2.安裝Django

3.建立students專案

4-1.切換目錄


4-2建立studentapp應用程式

5.移植資料庫

6.啟動網站

7.打開網站

8.在settings.py輸入已安裝APP,studentapp

9-1.建立學生資料庫

9-2.將資料表加入後台

10.建立超級使用者

11.再度啟動

12.進入管理模式
127.0.0.1:8000/admin

13.輸入帳號和密碼

14.點選Student的Add鍵,建立一筆資料

15.輸入第一筆資料

16.發生錯誤,沒有studentapp_student資料表

17.重新遷移資料表


 18.已建立第一筆資料

19.再建一筆資料

20.在views.py中建立listone函式

21.在urls.py中加入一個path

22.建立listone.html的樣版程式,並在students目前下建立templates目錄

23.在settings.py中建立templates目錄的路徑

24.重新啟動網站

25.設計能顯示所有資料的listall函式

26.又多出一條path

27.執行結果

28. 建立基礎樣版base.html

29.建立延伸基礎樣版的首頁樣版index.html

31.增加首頁的path

32.加入呼叫首頁的視域程式

33.啟動網站

34.測試

2019年10月16日 星期三

[ Django 教學 ] 在樣版程式中放入圖片

HTML教學:HTML 基礎

本篇文章有兩個學習重點:

  1. 如何使用IMG標籤
  2. 圖片檔案在Django的MTV架構下,放在static目錄

本篇文章是承接上一篇文章-在Django中把變數傳到樣版的教學。

1.首先在網路在下載南開的圖片,網址:http://pre.nkut.edu.tw/files/archive/340_dc473239.jpg
2.建立static\images目錄並把下載圖檔存放在static\images目錄下,並更名為nankai.jpg
3.修改在templates目錄下的index.html檔案
3.1 加入{% load staticfiles %}
3.2 加入img標籤

4.執行結果
127.0.0.1:8000/南開科技大學

2019年10月14日 星期一

[ Django 教學 ] 在Django中把變數傳到樣版

請參考前一篇文章-"再探Django,第一個樣版"

1.輸入現在時刻的HTML程式。

2.加入取得現在時刻的程式

3.測試

[ Django 教學 ] 再探Django,第一個樣版

請先參考前一篇文章:"初探Django,Hello APP"
1.當您已經建立虛擬環境,再開啟cmd時,可以輸入
workon first
來啟動虛擬環境。


2.利用文字編輯器,本範例是使用IDLE,開啟新檔,輸入下列程式,儲存在firstproject/templates/index.html。

3.開啟myapp/views.py, 修改sayhello2程式碼,其中locals()是指把區域變數用參數方式,傳給render()函式。

4.修改urls.py


5.切換目錄以及啟動網站。
cd firstproject
python manage.py runserver

6.開啟網站

7.輸入使用者測試網站