Django 2入門教程：利用GoormIDE和Bootstrap 4開發(fā)旅游博客

原版書名：《Django 2.1 Tutorial : Build a Travel Blog with GoormIDE and Bootstrap 4 (Tutorial Project)》

作者：Hojun Lee、?Suwon Choi?

出版時間：2018-08

演示地址：https://tutorialdjango-ircmu.run.goorm.io/

源碼地址：https://github.com/wenguonideshou/tutorialdjango

這本書適合誰

這本書的目標(biāo)讀者是想使用django編程的程序員。django是python語言里非常流行的框架。希望這是個提升你的web開發(fā)技能的好機會。

關(guān)于這本書

這本書將會教你使用django開發(fā)簡單旅游博客，并不學(xué)習(xí)django開發(fā)的詳細(xì)細(xì)節(jié)，而是主要關(guān)注于手把手的開發(fā)簡單web項目。

如果你跟著操作，你將學(xué)會開發(fā)django web項目，你可以在上面的源碼地址下載源碼和模板。

本書的前端編程部分使用bootstrap 4。

學(xué)完教程后

學(xué)完本書后，你將學(xué)會排錯，并記錄解決辦法，而且你將能開發(fā)實際的web項目。

如果你對python其他方面感興趣，你可能還想學(xué)習(xí)數(shù)據(jù)分析、數(shù)據(jù)可視化或人工智能。

第一章? ? 在Goorm IDE安裝環(huán)境

1.1 介紹

django是基于python開發(fā)的免費開源的web框架，在Instagram、NASA、Disqus等大公司應(yīng)用廣泛。

框架是利用諸多現(xiàn)成的組件使得開發(fā)web應(yīng)用更快更容易的支持結(jié)構(gòu)。

django在2005年做為免費開源的框架出現(xiàn)，django2.0在2017年12月發(fā)布，目前在韓國還沒有關(guān)于django2.0的書籍。

為了理解網(wǎng)站開發(fā)的全部過程，本書中我們將開發(fā)簡單博客。

如果你想了解django的更多信息，建議參考django官方網(wǎng)站?https://www.djangoproject.com?，官方主頁提供django介紹、下載和支持文檔。

PDF文檔下載地址? https://media.readthedocs.org/pdf/django/2.0.x/django.pdf

1.2 安裝django和環(huán)境配置

下圖描述互聯(lián)網(wǎng)的工作原理，這是你在瀏覽器輸入google.com后互聯(lián)網(wǎng)的運行流程。

我們即將開發(fā)的網(wǎng)站也會是安裝這樣的流程運行。

我們將使用不同的編程語言和框架如HTML、CSS、JavaScript、Python、Bootstrap和django。

1）你在瀏覽器輸入google.com

2）瀏覽器獲取到你輸入的域名

3）瀏覽器從DNS服務(wù)器獲取到域名對應(yīng)的IP 216.58.221.164

4）瀏覽器向Google服務(wù)器發(fā)起首頁請求

5）瀏覽器渲染服務(wù)器返回的響應(yīng)，展現(xiàn)給你

我們將使用GoormIDE的云服務(wù)，操作系統(tǒng)是基于Linux的Ubuntu 14。

過去大家大部分使用圖形化界面環(huán)境比如Windows，因此純黑界面的Linux命令行環(huán)境可能對你來說比較陌生。

Linux系統(tǒng)占有全世界服務(wù)器操作系統(tǒng)至少90%的市場。這就是我們推薦使用Linux系統(tǒng)的原因。

對比下3種不同的云服務(wù)類型

1. SaaS（Software as a Service）：SaaS是軟件的開發(fā)、管理、部署都交給第三方，不需要關(guān)心技術(shù)問題，可以拿來即用，是用戶體驗最好的

2. PaaS（Platform as a Service）：PaaS提供軟件部署平臺，抽象掉了硬件和操作系統(tǒng)細(xì)節(jié)，可以無縫地擴展。開發(fā)者只需要關(guān)注自己的業(yè)務(wù)邏輯，不需要關(guān)注底層

3. IaaS（Infrastructure as a Service）：IaaS是云服務(wù)的最底層，主要提供一些基礎(chǔ)資源，主要是專業(yè)人士使用

   
   

   
   

我相信你選擇本書是因為被python強大的庫、直觀、優(yōu)秀的可擴展性吸引。

現(xiàn)在python已成為世界上最流行的編程語言之一。

關(guān)于框架呢？下圖是python官方wiki上關(guān)于python不同框架的描述。

除django外，還有其他流行的框架比如Flask。django是全棧web框架，而Flask是輕量、可擴展的。

從下面的框架中做出選擇，沒有絕對的正確和錯誤，這完全取決于你的項目。

1.2使用IDE配置環(huán)境

下面開始設(shè)置Goorm IDE環(huán)境，注意圖片中的紅框，官網(wǎng)?https://ide.goorm.io?，點擊Sign Up注冊賬號，免費賬號完全夠用，可以創(chuàng)建5個容器。

注冊完成后會自動登錄Dashboard，或者在首頁點擊Dashboard。

在Dashboard頁面有個看起來像設(shè)置電腦的容器，點擊Create a new container，新版goorm需要填寫申請理由然后人工審核通過后才能新建容器，內(nèi)容就填寫學(xué)習(xí)django web開發(fā)。

審核通過后，再次點擊Create a new container，Source from選擇Template，Name欄輸入tutorialdjango，Description欄輸入create a travel blog in django，software stack選擇Python，點擊Create

你將看到容器很快創(chuàng)建完成，并提示是否運行容器，點擊Run進入容器

容器加載過程中通常會有代碼提示或提到名人

下圖是容器成功加載后的界面

①處是文件夾結(jié)構(gòu)，在右上角有個刷新按鈕，如果你新建或更新某些文件/文件夾但是在①看不見，就點擊刷新按鈕

②顯示.txt .html .py等文件的內(nèi)容

③協(xié)作、聊天窗口，我們不會使用到它

④命令行窗口，大部分命令在這里輸入

點擊Project - Running URL and Port，下圖的紅色方框是以后從外部訪問的URL地址

提示：如果你沒設(shè)置域名，在URL處輸入域名，然后設(shè)置PORT為80

首先就是設(shè)計網(wǎng)站界面，本書不包括此步驟，如果想了解詳情請閱讀書籍《Bootstrap Tutorial: Learn how to create Travel Blog using Bootstrap》

我們看下站點結(jié)構(gòu)：

1. 主頁 https://用戶域名.run.Goorm.io

   主頁，網(wǎng)站介紹，Google地圖API，最新發(fā)布

   模板：index.html

2. 博客列表 https://用戶域名.run.Goorm.io/blog/

   點擊blog會跳轉(zhuǎn)到主頁，展現(xiàn)博客列表

   模板：blog.html

3. 文章詳情?https://用戶域名.run.Goorm.io/blog/文章ID

   在列表頁點擊文章后跳轉(zhuǎn)

   模板：contens.html

下面是項目完成后的網(wǎng)站主頁預(yù)覽圖，我們?nèi)我庑陆艘恍┪恼?br />

下面是博客列表頁

下面是文章詳情頁，我們也任意填充了一些內(nèi)容

現(xiàn)在開始開發(fā)，在④命令行窗口按步驟輸入下面的命令

python?--version
#?檢查python版本，是3.6.5
mkdir?mysite
#?創(chuàng)建名為mysite的文件夾
cd?mysite
#?進入mysite目錄
apt-get?install?python-virtualenv
#?安裝虛擬環(huán)境所需要的包
virtualenv?myvenv
#?基于python3.6.5創(chuàng)建虛擬環(huán)境
source?myvenv/bin/activate
#?激活虛擬環(huán)境，注意：每次使用云容器都應(yīng)該運行此命令激活虛擬環(huán)境

現(xiàn)在命令行最前面有(myenv)標(biāo)志，說明已進入虛擬環(huán)境

安裝django，創(chuàng)建項目

pip3?install?django==2.0.6
#?安裝django
django-admin?startproject?tutorialdjango?.
#?在當(dāng)前目錄新建項目
python?manage.py?migrate
#?稍后解釋，簡而言之，在數(shù)據(jù)庫中新建表結(jié)構(gòu)

一定要注意django-admin startproject后面的.

如果你創(chuàng)建的容器名稱不是tutorialdjango，命令修改為django-admin startproject xxx，其中xxx是你的容器名稱

現(xiàn)在打開左邊面板，修改tutorialdjango目錄的settings.py，第28改行為ALLOW_HOSTS = ['*'] 允許任意用戶訪問，如圖所示

修改后按Ctrl+S保存生效，然后在命令行輸入下面的命令

python?manage.py?runserver?0:80

點擊Project - Running URL and Port

點擊紅框中的域名，瀏覽器會打開如圖所示的頁面

第二章? ? 創(chuàng)建主頁

使用django可以同時創(chuàng)建和組裝多個應(yīng)用，因為我們開發(fā)的是簡單項目，現(xiàn)在我們只新建1個叫main的應(yīng)用，在命令行窗口Ctrl+C停止運行上面的項目，輸入命令:

python?manage.py?startapp?main

在settings.py找到INSTALLED_APPS在最下面添加1行，注冊main應(yīng)用

注意：在'main'后面有個,

在項目下的urls.py添加內(nèi)容視圖函數(shù)和URL的映射

from?main.views?import?index

意思是導(dǎo)入main目錄下的views.py中的index函數(shù)，現(xiàn)在在views.py還沒定義index函數(shù)，所以會報錯，添加一行

path('',?index)

意思是django會重定向任何訪問 http://用戶域名/? 到index函數(shù)，下面將連接index函數(shù)和index.html模板

文件位于 mysite/tutorialdjango/urls.py

現(xiàn)在打開mysite> main> views.py新建index函數(shù)，可以看到 調(diào)用此函數(shù)時它將會返回render渲染main/index.html模板

文件位于?mysite/main/urls.py

新建myiste/main/templates/main/index.html目錄和文件，然后粘貼以下代碼：

<html>
<head>
????<title>Django!</title>
</head>
<body>
????<h2>Test!</h2>
</body>
</html>

啟動web服務(wù)，看看網(wǎng)站發(fā)生了什么變化

python?manage.py?runserver?0:80

在域名后面添加/admin然后回車即可訪問管理后臺，可以在后臺發(fā)布、編輯、刪除文章，還可以管理用戶。

但是現(xiàn)在還不能登錄，因為沒有創(chuàng)建管理員賬號。為了安全考慮，建議在web應(yīng)用中不要對外開放管理后臺。

接下來將展示如何在主頁加載圖片，django不支持HTML和CSS中的相對目錄。

在mysite目錄下新建static文件夾，用來存儲靜態(tài)文件。

上傳圖片

如果在左邊面板沒找到圖片，點擊刷新標(biāo)志即可

如圖所示 在settings.py定義靜態(tài)文件目錄列表，注意在代碼最后有個,

STATICFILES_DIRS?=?(
????os.path.join(BASE_DIR,?'static'),
)

打開index.html輸入下列代碼調(diào)用靜態(tài)文件，{% %}語法意思是調(diào)用模板標(biāo)簽

更多django模板語法請訪問 https://docs.djangoproject.com/en/2.0/ref/templates/builtins/

<html>
<head>
????<title>Django!</title>
</head>
<body>
????<h2>Test!</h2>
????{%?load?staticfiles?%}
????<img?src="{%?static?'bluemountain.jpg'?%}">
</body>
</html>

如果web服務(wù)器沒有運行，在命令行輸入python manage.py runserver 0:80 ，點擊Project - Running URL and Port菜單，點擊域名，可以正常訪問

現(xiàn)在項目結(jié)構(gòu)如下圖所示，紅色方框的文件是剛修改過的文件

django把MVC模式叫做MTV模式，雖然術(shù)語改變，但是本質(zhì)是相同的。下圖演示了django的運行流程。

CRUD分別代表增、查、改、刪

第三章? 創(chuàng)建列表頁

新建包括所有文章的列表頁，首先編輯tutorialdjango/urls.py和tutorialdjango/views.py

from?main.views?import?index,?blog
path('blog/',?blog)

def?blog(request):
????return?render(request,?'main/blog.html')

新建mysite/main/templates/main/blog.html文件，輸入以下代碼

<html>
<head>
????<title>Django!</title>
</head>
<body>
????<h2>Blog?Page!</h2>
</body>
</html>

運行web服務(wù)器，瀏覽器打開?https://用戶域名/blog/?，可以正常訪問

現(xiàn)在為每篇文章新建內(nèi)容，首先需要創(chuàng)建文章模型，包括postname和contens字段，在myiste/main/models.py輸入

class?Post(models.Model):
????postname?=?models.CharField(max_length=50)
????contents?=?models.TextField()

要在數(shù)據(jù)庫中新建模型對應(yīng)的表結(jié)構(gòu)，按Ctrl+C停止web服務(wù)器，然后輸入下面的遷移命令

python?manage.py?makemigrations?main
python?manage.py?migrate

現(xiàn)在打開main/admin.py導(dǎo)入模型，修改管理后臺界面

from?.models?import?Post
admin.site.register(Post)

現(xiàn)在創(chuàng)建超級管理員賬戶，超級管理員能刪除、編輯、保存文章，還能管理其他用戶。 在命令行窗口輸入

python?manage.py?createsuperuser

為了安全考慮，在命令行輸入密碼的時候是不可見的。

再開啟web服務(wù)器，能看見登錄界面了吧。

輸入創(chuàng)建的超級管理員用戶名和密碼登錄，進入后臺可以試下新建文章

點擊SAVE后，剛才輸入的標(biāo)題并沒有顯示，而是只顯示了Post object(1)。這是因為沒有定義模型的顯示名為postname。

編輯main/models.py輸入

????def?__str__(self):
????????return?self.postname

刷新后臺頁面，現(xiàn)在可以看到剛才發(fā)布的文章標(biāo)題，現(xiàn)在隨便創(chuàng)建一些文章，稍后會刪除。

這里我創(chuàng)建了3篇文章，現(xiàn)在準(zhǔn)備在列表頁展現(xiàn)這些文章，修改main/views.py

from?.models?import?Post
postlist?=?Post.objects.all()
{'postlist':?postlist}

修改blog.html模板在<h2>下面新增代碼

????<table>
????????{%?for?list?in?postlist?%}
????????<tr>
????????????<td>{{list.postname}}</td>
????????????<td>{{list.contents}}</td>
????????</tr>
????????{%?endfor?%}
????</table>

這里使用{}模板標(biāo)簽從數(shù)據(jù)庫獲取所有數(shù)據(jù)

更多關(guān)于Django文檔請訪問 https://docs.djangoproject.com/en/2.0/

模板語言文檔請訪問?https://docs.djangoproject.com/en/2.0/ref/templates/language/

現(xiàn)在使用F12查看網(wǎng)頁源代碼，是看不到模板語言的，因為是在django內(nèi)部渲染成HTML再展現(xiàn)給訪客

第四章? 新建詳情頁

任何時候你返回該項目，都需要運行下面的命令確保運行的是虛擬環(huán)境的python而不是系統(tǒng)自帶的python

在使用虛擬環(huán)境的情況下，命令行最前面有(myvenv)標(biāo)志

root@Goorm:/workspace/container name# cd mysite

root@Goorm:/workspace/container name/mysite# source myvenv/bin/activate

(myvenv)root@Goorm:/workspace/container name/mysite#

如果你在沒有進入虛擬環(huán)境的情況下運行了以下命令，此時最好的解決辦法就是刪除容器并重建容器。

最前面是否有(myvenv)標(biāo)志非常重要，因為他代表的是完全不同的運行環(huán)境！

現(xiàn)在創(chuàng)建詳情頁，展示每一篇文章。修改tutorialdjango/urls.py新增以下代碼

from?main.views?import?index,?blog,?postdetails
path('blog/<int:pk>',?postdetails),

修改main/views.py，新增以下代碼

def?postdetails(request,?pk):
????postlist?=?Post.objects.get(pk=pk)
????return?render(request,?'main/postdetails.html',?{'postlist':?postlist})

如下圖所示，在templates文件夾有3個模板文件，現(xiàn)在這個是最后的模板（在第七章將會使用bootstrap美化模板）

新建templates/main/postdetails.html，輸入

<html>
<head>
????<title>Django!</title>
</head>
<body>
????<h2>Postdetails?Page!</h2>
????<p>{{postlist.postname}}</p>
????<p>{{postlist.contents}}</p>
</body>
</html>

在URL最后添加文章數(shù)字編號，頁面如圖所示

使用onclick事件實現(xiàn) 在博客列表頁點擊文章標(biāo)題或者內(nèi)容進入文章詳情頁，編輯templates/main/blog.html

<tr?onclick="location.href='/blog/{{list.pk}}'">

點擊后

在詳情頁新建返回列表頁的按鈕，在postdetails.html添加帶超鏈接的標(biāo)簽<a>

<a?href='/blog/'>List(Go?back)</a>

編輯main/models.py，新增可以上傳圖片的ImageField

mainphoto?=?models.ImageField(blank=True,?null=True)

由于要上傳圖片，所以需要安裝叫Pillow的圖片處理庫

pip3?install?pillow
#?上面修改了模型，所以需要遷移模型到數(shù)據(jù)庫
python?manage.py?makemigrations
python?manage.py?migrate
python?manage.py?runserver?0:80

修改settings.py，設(shè)置上傳文件的保存目錄MEDIA_ROOT和訪客訪問的URL，如果不設(shè)置MEDIA_ROOT，文件將會上傳到mysite目錄下

現(xiàn)在在后臺新建5篇文章，每篇文章上傳1張圖片

最開始上傳名為jeju的圖片，點擊文章查看文件圖片是否上傳成功

點擊圖片文件名，瀏覽器彈出新頁面 報錯提示文件不存在，但是剛剛我們明明已經(jīng)上傳了！

還差一步，在urls.py設(shè)置圖片URL

from?django.conf.urls.static?import?static
from?django.conf?import?settings

urlpatterns?+=?static(settings.MEDIA_URL,?document_root=settings.MEDIA_ROOT)

現(xiàn)在可以刷新頁面可以看到圖片了

修改postdetails.html添加代碼，注意紅框內(nèi)的域名改成你自己的

????{%?if?postlist.mainphoto?%}
????????<img?src='{{postlist.mainphoto.url}}'>
????{%?endif?%}

django官方文檔中相關(guān)說明

現(xiàn)在可以在詳情頁看到圖片了

第五章? 增加評論框和標(biāo)簽

現(xiàn)在增加評論功能，我準(zhǔn)備使用叫Disqus的插件。

也可以使用pip3 install django-disqus安裝該擴展，但我打算使用另一種方式安裝。

打開 https://disqus.com/?點擊Get Started

輸入用戶名、郵箱等注冊

注冊成功后先去郵箱收件箱 查收驗證郵件，驗證郵箱，然后點擊I want to install Disqus on my site

輸入網(wǎng)站名稱、網(wǎng)站類型、語言，點擊Create Site

選擇套餐，當(dāng)然是Basic啦。點擊Subscribe Now

現(xiàn)在選擇平臺，點擊最后的I don't see my platform listed, install manually with Universal Code

復(fù)制①里面的代碼，點擊Configure

點擊Complete Setup

編輯postdetails.html在</body>標(biāo)簽前粘貼代碼

刷新詳情頁，可以在頁面最下面看到評論框

修改模型增加發(fā)布時間字段、編輯時間字段

????publishDate?=?models.DateTimeField(blank=True,?null=True)
????modifiedDate?=?models.DateTimeField(blank=True,?null=True)

遷移模型

python?manage.py?makemigrations
python?manage.py?migrate

在后臺可以看到新增的字段

修改所有文章，并修改blog.html模板，增加下面這行

<td>{{list.modifiedDate}}</td>

添加過編輯時間字段的文章都能在網(wǎng)頁上顯示編輯時間

安裝django-taggit為文章添加標(biāo)簽，還可以利用標(biāo)簽來查找具有相同標(biāo)簽的文章

pip3?install?django-taggit

修改models.py添加tag字段

from?taggit.managers?import?TaggableManager
tag?=?TaggableManager(blank=True)

編輯settings.py，在INSTALLED_APPS添加'taggit',

遷移模型

python?manage.py?makemigrations
python?manage.py?migrate

在后臺確認(rèn)文章編輯界面底部是否有標(biāo)簽選項，把旅行過的國家作為標(biāo)簽

輸入標(biāo)簽，點擊SAVE保存

修改postdetails.html添加以下代碼

<p>{{postlist.tag.names}}</p>

在詳情頁可以看到Queryset類型的標(biāo)簽

使用for循環(huán)語句可以展現(xiàn)所有的標(biāo)簽，我暫時只使用1個標(biāo)簽所以用{{post.tag.names.0}}

現(xiàn)在標(biāo)簽是字符串類型了

第六章? 使用bootstrap美化模板以及部署

可以把bootstrap看成花最少的精力快速獲得想要的結(jié)果的包羅萬象的前端web框架。

不管是超大屏幕還是手機端，bootstrap都為用戶體驗量身定制，也叫響應(yīng)式設(shè)計。

bootstrap自帶HTML、CSS、表單、按鈕、表格、導(dǎo)航欄。

bootstrap3中能用的標(biāo)簽大部分在bootstrap4也能使用，但是4相較于3變化也不小，所以你需要了解下新版本的bootstrap。

可以在 https://www.w3schools.com/bootstrap4? 找到bootstrap4的入門教程。

更多信息請訪問官方網(wǎng)站 https://getbootstrap.com/docs/4.1/content/reboot/??

可以在 https://getbootstrap.com/?下載bootstrap4（在本書中不需要下載）

bootstrap默認(rèn)模板使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)），CDN的好處是無需下載文件，在全球訪問速度都很不錯

如果想使用最新版本的CDN，在Google搜索"bootstrap cdn"然后訪問 https://www.bootstrapcdn.com?獲取，最新版本是4

在001.html的<body></body>標(biāo)簽內(nèi)有調(diào)用CDN的<script></script>標(biāo)簽，下圖中的紅框是模板中用來填充內(nèi)容的代碼

利用bootstrap的網(wǎng)格系統(tǒng)可以快速方便的建立響應(yīng)式布局，整個頁面的一行中可以有最多12列，如果不想使用全部12列 可以把列合并為更寬的列。

如下圖所示，在<body></body>標(biāo)簽之間輸入代碼后，保存為002.html并用瀏覽器打開

紅框代表在一行中定義的網(wǎng)格，每4小列分組為1個中型列，所以能看到3列

003.html把.col-md-4類和.col-md-6類的網(wǎng)格進行對比，效果一目了然

在官方網(wǎng)站可以看到，列也可以拆分

如果想在網(wǎng)格系統(tǒng)中使用所有的12列占滿屏幕，使用.container-fluid類。

還可以把.no-gutters類添加到.row類，以消除列之間的外邊距和內(nèi)邊距。

下面是官方網(wǎng)站對網(wǎng)格系統(tǒng)的描述，nestable意思是可以分割列。常用的是md類。

如果使用了偏移列，列的位置將會浮動，有許多方法設(shè)置外邊距，不過常用的是偏移列和彈性盒子對列排序。下圖的003.html只使用了偏移列。

現(xiàn)在解壓templates.zip后，可以看到index.html，blog.html和blogdetails.html。

用瀏覽器打開index.html可以看到含有標(biāo)記的地圖。

每篇文章都需要坐標(biāo)以在地圖上做標(biāo)記。

下圖index001.html里的LatLng指的是緯度和精度。

在模型中添加經(jīng)緯度字段

????Lat?=?models.FloatField(null=True)
????Lng?=?models.FloatField(null=True)

官方文檔提供blank和null的解釋和區(qū)別：https://docs.djangoproject.com/en/2.0/ref/models/fields/#django.db.models.FloatField

遷移模型，重新運行web服務(wù)器

python?manage.py?makemigrations
python?manage.py?migrate
python?manage.py?runserver?0:80

可以在后臺文章編輯頁面看到地理坐標(biāo)類型的經(jīng)緯度字段。

如果忘記了后臺用戶名密碼，可以在命令行執(zhí)行python manage.py changepassword admin修改admin用戶的密碼。

給每篇文章填充經(jīng)緯度數(shù)據(jù)

bluemountain?照片，經(jīng)緯度(-33.3493206,149.7360613)

jejucityhall 照片，經(jīng)緯度(33.499597,126.5290653)

perth 照片，經(jīng)緯度(-32.0388312,115.4010747)

sydney 照片，經(jīng)緯度(-33.8567844,151.213108)

tasmania 照片，經(jīng)緯度(-42.200633, 146.643736)

然后從lorem ipsum網(wǎng)站生成虛假內(nèi)容然后從本地templates/img文件夾上傳照片。

lorem ipsum網(wǎng)站：https://lipsum.com/

現(xiàn)在刪除其他數(shù)據(jù)，只留下下面5條。

編輯views.py在index函數(shù)里添加以下代碼，才能在首頁使用postlist變量

postlist?=?Post.objects.all()

從index_002.html復(fù)制全部代碼，粘貼到index.html。這2個文件唯一不同的地方如下圖所示。

現(xiàn)在刷新首頁，可以看到坐標(biāo)標(biāo)記，但是照片是裂開的。

接下來用{% %}和{{}}語法把每篇文章的照片放到紅色方框的Infowindow（信息窗口，地圖專用術(shù)語）中。

點擊照片后，跳轉(zhuǎn)到文章詳情頁。

把index_003.html的所有代碼復(fù)制到index.html中，記得把其中的域名改成你自己的域名。

下圖顯示的是2個文件之間的區(qū)別，左邊是index.html右邊是index_003.html。

打開本地的templates/blog.html，修改blog.html的第161到180行的代碼，找到<a href=""></a>然后把紅框位置換成你的自己的域名。

復(fù)制全部代碼，粘貼到云服務(wù)的blog.html。

現(xiàn)在訪問?https://你的域名/blog/? ，點擊每張圖片都會跳轉(zhuǎn)到文章詳情頁。

打開本地的templates/blogdetails.html，修改第147到166行，找到<a href=""></a>標(biāo)簽，把紅框的域名換成你自己的域名。

然后復(fù)制所有代碼，粘貼到云服務(wù)里面的postdetails.html。

現(xiàn)在訪問 https://你的域名/blog/文章ID?，可以看到漂亮的帶評論框的詳情頁。

雖然本書中并沒有用到模板繼承，但是在實際的django web項目開發(fā)中會經(jīng)常用到模板繼承。

一般是新建含有頭部、菜單、底部等的母版，然后在其他所有模板中繼承此模板。

下圖是模板繼承的簡單例子。year_archive.html繼承base.html。

在GoormIDE，Always On（永遠(yuǎn)在線）選項僅供付費用戶。

如果是付費用戶，當(dāng)點擊Always On，容器的綠色在線狀態(tài)將會被點亮，訪客可以在任意時間訪問旅游博客。

負(fù)責(zé)只能在Dashboard點擊Run后容器才能運行，網(wǎng)站才能訪問。

點擊圖片中的紅框地方，查看更多詳細(xì)選項。

部署

點擊Configure進入詳細(xì)配置頁面，點擊+Add添加你自己購買的域名和端口，或者使用GoormIDE贈送的域名也可以。

在Setting下面的Init script處點擊Set，然后輸入容器初始化命令，我經(jīng)常使用下面2行命令：

source?/workspace/容器名稱/mysite/myvenv/bin/activate
python3?/workspace/容器名稱/mysite/manage.py?runserver?0:80

輸入完成后，點擊下面的Stop停止容器，再點擊右上角的Run

現(xiàn)在訪問域名，測試網(wǎng)站完全正常運行。如果正常，說明上面的初始化腳本正常運行。

第七章? 總結(jié)

django是python語言中快速開發(fā)web項目的框架，大部分功能都已經(jīng)自動化，而且官方文檔也很詳盡。

閱讀官方文檔后，不用再考慮其他文檔了。

現(xiàn)在我們使用django創(chuàng)建了簡單的博客。

但是這僅僅使用了django的一小部分功能，如果想使用更多更強大的功能，推薦閱讀官方文檔。

下面是django的結(jié)構(gòu)圖，我畫圖簡單總結(jié)之前我們做的所有步驟。你可以對照檢查下是否有步驟遺漏。

注意：我們沒有使用到表單功能

Django

urls.py

下圖是我們之前所有操作的流程圖。

最開始修改的是urls.py，urls.py根據(jù)特定的URL規(guī)則調(diào)用視圖函數(shù) 。

views.py

在urls.py定義URL規(guī)則后，創(chuàng)建與URL相關(guān)聯(lián)的視圖函數(shù)。視圖函數(shù)包括頁面邏輯。

models.py

模型中的類變量代表數(shù)據(jù)庫中的字段。需要執(zhí)行遷移以保證數(shù)據(jù)庫和模型結(jié)構(gòu)同步。

templates

模板就是簡單的文本文件，可以是任何基于文本的格式（html，csv等），模板展示的是頁面設(shè)計界面。

譯者注：全文到此結(jié)束。作者的模板做的很粗糙，頁面中的很多超鏈接是死鏈。畢竟這只是個入門教程。