如何用Python Django創(chuàng)建網(wǎng)站？系列文章02（持續(xù)更新...）

時間：2023-07-11 16:12:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-07-11 16:12:01 來源：網(wǎng)站運(yùn)營

如何用Python Django創(chuàng)建網(wǎng)站？系列文章02（持續(xù)更新...）：第二篇文章主要介紹的是如何借助Django的MTV框架搭建網(wǎng)站（如下圖所示）：

我們可以參考這個順序在PyCharm進(jìn)行代碼的編寫。




假設(shè)之前的準(zhǔn)備工作都做好了，輸入法搞定了，谷歌瀏覽器安裝好了；

還需要安裝python3-pip：

sudo apt-get update

apt-get install python3-pip




python3-pip好了，再安裝虛擬環(huán)境，參考下面的鏈接：

創(chuàng)建虛擬環(huán)境

virtualenv GP1

激活虛擬環(huán)境

source GP1/bin/activate




創(chuàng)建好了虛擬環(huán)境，就可以安裝django，切記要指定版本！

pip3 install django==1.11.7




安裝完畢django之后，開始安裝mysql數(shù)據(jù)庫




也安裝好了，而且連接數(shù)據(jù)庫的驅(qū)動pymysql也配置完成了。我們就可以開始創(chuàng)建項(xiàng)目啦！




cd Projects/Project_Django/GP1

進(jìn)入GP1文件夾之后，路徑看上去是這樣的：

(GP1) psyjt@psyjt-ThinkPad-X1-Carbon-2nd:~/Projects/Project_Django/GP1$

當(dāng)我們看到命令行前面出現(xiàn)虛擬環(huán)境的名字GP1(意思是Good Project 1)的意思，說明虛擬環(huán)境已經(jīng)打開了，更確切的說是已經(jīng)安裝了基于Python3的Django == 1.11.7的虛擬環(huán)境已經(jīng)啟動起來了。




A. 創(chuàng)建項(xiàng)目+應(yīng)用

我們準(zhǔn)備在當(dāng)前的GP1虛擬環(huán)境中開啟一個叫做mBlog的喵星人博客網(wǎng)站項(xiàng)目，并創(chuàng)建一個叫做mainsite（主頁）的app應(yīng)用。

django-admin startproject mBlog

cd mBlog

python3 manage.py startapp mainsite

這個時候就可以啟動PyCharm，然后打開mBlog項(xiàng)目。




B. 設(shè)置項(xiàng)目的解釋器

當(dāng)進(jìn)入到PyCharm環(huán)境中，切記第一步是要（在File菜單的Settings選項(xiàng)里）設(shè)定整個項(xiàng)目的解釋器：

里邊有兩個選項(xiàng)，Project Structure 和 Python Interpreter，我們選擇Python Interpreter，然后在下拉菜單中選擇帶有Python3 + GP1的選項(xiàng)。

點(diǎn)擊Apply，它有一個載入的過程，過一會點(diǎn)OK確認(rèn)。




C. 注冊應(yīng)用mainsite

我們在創(chuàng)建項(xiàng)目之后，緊跟著創(chuàng)建了一個mainsite應(yīng)用app，這個應(yīng)用mBlog項(xiàng)目是不認(rèn)的。為什么不認(rèn)？因?yàn)檫@個應(yīng)用并沒有注冊！

之所以沒有注冊，是因?yàn)閼?yīng)用本身是獨(dú)立于項(xiàng)目存在的，這個可能是django開發(fā)者一開始就設(shè)定好的，這樣做的好處是，方便把某個應(yīng)用從一個項(xiàng)目遷移到另外一個項(xiàng)目中。應(yīng)用和項(xiàng)目解耦合的結(jié)果是，在用命令創(chuàng)建應(yīng)用app時，它是獨(dú)立進(jìn)行的，不會自動化地在項(xiàng)目中注冊。如果你要把創(chuàng)建的應(yīng)用納入到項(xiàng)目中，需要手動注冊一下。

我們要打開mBlog項(xiàng)目同名文件夾mBlog下的settings.py文件，把mainsite應(yīng)用寫入到INSTALLED_APPS里邊：




D. 修改配置文件

配置文件還有幾處需要修改：

（1）ALLOWED_HOSTS = []，修改成ALLOWED_HOSTS = [“*”]。

（2）LANGUAGE_CODE = 'en-us'，修改成LANGUAGE_CODE = 'zh-hans'。

（3）TIME_ZONE = 'UTC'，修改成TIME_ZONE = 'Asia/Shanghai'。

（4）USE_TZ = True，修改成USE_TZ = False。

（5）手動添加templates文件夾，這個文件夾和應(yīng)用mainsite文件夾是平行的。

這一步具體實(shí)現(xiàn)的方法是，在最左邊上面的mBlog項(xiàng)目文件夾的位置右鍵點(diǎn)擊，選擇新建文件夾Directory，這樣才能保證這個文件夾創(chuàng)建的位置與應(yīng)用mainsite文件夾在同一級目錄中。同時，特別需要強(qiáng)調(diào)的是，這個添加的過程，還要伴隨2個操作：

第1個操作是，在添加了文件夾之后，在PyCharm中要右鍵點(diǎn)擊文件夾templates，如下圖所示：

Mark Directory as --> Template Folder，

這個把templates文件夾標(biāo)記為模版文件夾“Template Folder”的過程，不會改變項(xiàng)目的任何代碼，但是，標(biāo)記了Template Folder會影響之后PyCharm的代碼提示功能。




第2個操作是，修改settings.py文件中55行左右的位置，在TEMPLATES中，找到 'DIRS': []，在這個中括號中添加一段代碼：

os.path.join(BASE_DIR,'templates'),

如下圖所示：

os.path.join是拼接路徑的意思，這里的BASE_DIR就是整個項(xiàng)目文件夾路徑，它和'templates'拼接在一起就組成了模版文件夾路徑。




補(bǔ)充說明：這個截圖，我故意把53行的代碼也包括進(jìn)來，

ROOT_URLCONF = 'mBlog.urls'

它等于指定了整個django項(xiàng)目的入口，它是從mBlog文件夾中的urls.py文件開始的。







（6）在mysql中創(chuàng)建數(shù)據(jù)庫db_mBlog，在PyCharm中連接django項(xiàng)目mBlog和mysql中的數(shù)據(jù)庫db_mBlog，并生成遷移文件。

PyCharm已經(jīng)集成了命令窗口，所以這個時候，只需要點(diǎn)擊整個PyCharm界面的左下角位置三個選項(xiàng)：“TODO”，“Python Console”，和“Terminal”，其中的Terminal選項(xiàng)，就可以打開終端。這個終端和Ubuntu系統(tǒng)終端是一摸一樣的，用它的好處是連切換窗口的操作都省了，非常方便。

我們可以在其中先實(shí)現(xiàn)進(jìn)入mysql數(shù)據(jù)庫的操作：




First::

在mysql環(huán)境下建立一個新的數(shù)據(jù)庫db_mBlog：

mysql> create database db_mBlog charset=utf8;

這里要注意別忘記寫charset=utf8這句話，因?yàn)?，如果沒有這句話，你沒有辦法導(dǎo)入中文。




這個時候可以調(diào)用下面這句命令看看mysql里邊都有哪些數(shù)據(jù)庫：

mysql> show databases;

+--------------------+

| Database |

+--------------------+

| information_schema |

| GP1DjangoTemplate |

| db_mBlog |

| db_psyBlog |

| mysql |

| performance_schema |

| sys |

+--------------------+

7 rows in set (0.01 sec)




Second::

有了db_mBlog之后，我們就可以把它納入到django項(xiàng)目mBlog中，這個連接的過程需要在settings.py中修改數(shù)據(jù)庫連接部分的代碼，與此同時手動連接mysql數(shù)據(jù)庫db_mBlog。我們先來看修改代碼的位置，它在79行位置（大概，可能不同的項(xiàng)目不一樣），這一行開頭寫著“DATABASES = {”。

它原來的內(nèi)容是：

'default': {

'ENGINE': 'django.db.backends.sqlite3',

'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),

}

要修改成：

'default': {

'ENGINE': 'django.db.backends.mysql',

'NAME': 'db_mBlog',

'USER': 'root',

'PASSWORD': 'Psycho0810',

'HOST':'localhost',

'PORT':'3306',

}




Third::

手動連接，點(diǎn)擊右側(cè)豎著的那兩個選項(xiàng)中的"Database"，然后點(diǎn)擊“+”號-->選擇Data Sources這個選項(xiàng)中的MySQL：

這個時候會彈出一個界面：

小心，這是個坑，因?yàn)橐话闳诉M(jìn)入這個界面，想當(dāng)然地會認(rèn)為是從第一個編輯框Name開始填寫，錯了?。?！

你只需要填寫User + Password + Database就可以，它會自動把信息合并了顯示在Name對著的編輯框中，如下圖所示：

這時候你點(diǎn)擊一下“Test Connection”按鈕，它如果顯示打勾，說明連接數(shù)據(jù)庫成功了。




Fourth::

在項(xiàng)目mBlog的初始化文件__init__.py中，添加運(yùn)行pymysql驅(qū)動的代碼：

import pymysql

pymysql.install_as_MySQLdb()







E. 引入Hello主頁的簡單項(xiàng)目

一般整個項(xiàng)目的框架搭建完后，都是會拿一個最簡單的“Hello, World!”試著運(yùn)行一次，向互聯(lián)網(wǎng)世界宣告“我來啦！”，以及測試一下Django環(huán)境是不是搭建好了（不需要引入模版Template和與數(shù)據(jù)庫交互的模型Models）。




進(jìn)來的url請求，發(fā)給了項(xiàng)目文件夾mBlog中的urls.py來處理，我們來截個圖：

注意添加的這句話：

url(r'^hello/', views.hello),

這句話的意思是，如果你的url的路徑位置是hello，那么，就會觸發(fā)mainsite的views.py文件中的hello回調(diào)函數(shù)。

注意??：這里的views一開始輸入的時候，是有一個紅色的下劃波浪線提醒，說明這個文件里邊是沒有views這個變量或者參數(shù)的，它在哪里？它其實(shí)是隸屬于mainsite應(yīng)用的，所以，重點(diǎn)來了，在PyCharm開發(fā)者工具中，我們要把光標(biāo)放在views的位置，然后按下 Alt + Enter 組合快捷鍵，就可以跳出提示，讓你添加模塊。這個時候我們選擇mainsite中的views就可以了，就會出現(xiàn)上圖中urlpatterns前面的代碼：

from mainsite import views

這個時候，views下的紅色波浪線就消失來；然后，你把光標(biāo)放在hello這個單詞上，按Alt + Enter，就會瞬間切換到 mainsite應(yīng)用的views.py文件下，截圖看一下里邊的代碼：

這個是一個函數(shù)，寫著

def hello(request): return none把none這個單詞改成HttpResponse之后，也會出現(xiàn)紅色下劃波浪線，我們需要用Alt + Enter從django.http模塊中引入HttpResponse這個函數(shù)（from django.http import HttpResponse），在HttpResponse函數(shù)中輸入“Hello, World!”這個簡單項(xiàng)目就算完成了。




迫不及待運(yùn)行數(shù)據(jù)庫遷移：

python3 manage.py makemigrations

python3 manage.py migrate

和運(yùn)行服務(wù)器的語句

python3 manage.py runserver

看看效果：

成功啦！這個成功說明很多問題，我們最好這個時候慶祝一下，來來來，Give me five！




F. 引入包括完整MTV流程的項(xiàng)目

借助Python + Django框架創(chuàng)建網(wǎng)站，主要關(guān)注的是模型（Model）、模板(Template)和視圖（Views）三者如何搭配。因此，Django 也被稱為 MTV 框架：

M 代表模型（Model），即數(shù)據(jù)存取層。 該層處理與數(shù)據(jù)相關(guān)的所有事務(wù)： 如何存取、如何驗(yàn)證有效性、包含哪些行為以及數(shù)據(jù)之間的關(guān)系等。

T 代表模板(Template)，即表現(xiàn)層。 該層處理與表現(xiàn)相關(guān)的決定： 如何在頁面或其他類型文檔中進(jìn)行顯示。

V 代表視圖（View），即業(yè)務(wù)邏輯層。 該層包含存取模型及調(diào)取恰當(dāng)模板的相關(guān)邏輯。 你可以把它看作模型與模板之間的橋梁。




在項(xiàng)目開始之前，需求分析必不可少，首先，一定要具體列出這個項(xiàng)目要實(shí)現(xiàn)的目標(biāo)（要滿足用戶什么需求？或者要解決什么問題？）

我們這次的項(xiàng)目是想做個心理學(xué)博客，幫助用戶了解心理學(xué)的九大分支（如下圖所示）。

在了解了項(xiàng)目的需求之后，我們要開啟MTV工作中的第一部分Model的工作，也就是設(shè)計數(shù)據(jù)庫中的表格，以提供數(shù)據(jù)信息，展示在網(wǎng)頁中。

點(diǎn)開mainsite應(yīng)用中的models.py文件，輸入下面這段代碼：

from django.db import models# Create your models here.class School(models.Model): title = models.CharField(max_length=200) slug = models.CharField(max_length=200) intro = models.TextField() def __unicode__(self): return self.title


在Django中，設(shè)計表格和定義一個類本質(zhì)上是一碼事。點(diǎn)擊下方的終端，輸入：

python3 manage.py makemigrations

python3 manage.py migrate

就可以在數(shù)據(jù)庫db_mBlog中添加新定義的表格，系統(tǒng)會自動將這個表格命名成mainsite_school。

注意：這個時候數(shù)據(jù)庫中的這張新建的表格里什么內(nèi)容都沒有。我們需要用一種機(jī)制向數(shù)據(jù)庫里添加內(nèi)容。這件事情，是可以通過PyCharm來手動操作完成的，這樣做在本地的開發(fā)環(huán)境是可以的，但是，如果切換到阿里云服務(wù)器上，就沒有辦法手動操作了。因此，我們將任務(wù)的目標(biāo)設(shè)置為“管理員可以手動向配置好的表格中添加內(nèi)容”。




我們接下來要在終端中創(chuàng)建一個超級管理員賬號：

python3 manage.py createsuperuser

User: admin

E-Mail: 10045198@qq.com

Password: ··· ····




最后，就是要引入管理員添加內(nèi)容的功能。

如果想把之前定義好的School類納入admin的管理番位，需要修改應(yīng)用mainsite中的admin.py文件，這個文件中原本的內(nèi)容是：

from django.contrib import admin

# Register your models here.

需要改成：

from django.contrib import admin

# Register your models here.

from mainsite.models import School

admin.site.register(School)




完成以上操作之后，再次打開網(wǎng)站運(yùn)行，通過瀏覽器訪問

http://127.0.0.1:8000/admin

瀏覽器會呈現(xiàn)一個登錄界面，輸入用戶名admin和之前設(shè)定好的密碼：

登錄進(jìn)去瀏覽器的網(wǎng)頁里的內(nèi)容是這樣的：

管理員界面應(yīng)該是Django都設(shè)計好的，通過這種方式就可以手動往數(shù)據(jù)庫的表格中添加內(nèi)容了，就如下圖所示，我們添加了心理學(xué)九大派系的title，slug和intro：

這是在網(wǎng)頁中，我們也可以直接在PyCharm開發(fā)者環(huán)境中通過右側(cè)的數(shù)據(jù)庫連接，打開mainsite_shcool表格，看看所有心理學(xué)派系信息輸入的效果：

就這樣，我們的MTV中的Model部分的工作就完成了。







MTV中的第二部分是設(shè)計模版Template，也就是要規(guī)劃呈現(xiàn)的網(wǎng)頁的樣子。我們要設(shè)計兩個網(wǎng)頁，一個是主頁index.html，呈現(xiàn)所有9個心理學(xué)學(xué)派的title；另外一個是分頁psySchool.html，呈現(xiàn)單個心理學(xué)學(xué)派的title和它的介紹信息。

新建html文件的操作，一般是通過PyCharm在templates文件夾圖標(biāo)上右鍵選擇新建.html文件，在彈出的對話框中填寫文件名，用這樣的操作，我們可以手動生成index.html和psySchool.html兩個文件。

對于index.html來說，一個標(biāo)題“貫穿心理學(xué)發(fā)展歷史的九大學(xué)派”，加上9個學(xué)派的title就可以。這需要用到的是<h1> 貫穿心理學(xué)發(fā)展歷史的九大學(xué)派 </h1>，還有一個ul（ul是無序里列表的意思，與ul相對的是ol有序列表），加上9個li（列表項(xiàng)目）。因?yàn)檫@9個title是地址，所以在列表里的每一個項(xiàng)目其實(shí)是一個鏈接。




而對于psySchool.html來說，一個標(biāo)題，一個內(nèi)容和一個返回。這需要用到<h1>{{school.title}}</h1>，這里第一次出現(xiàn)了Django專屬的模版格式，我們管它叫“坑”（一種預(yù)留變量的機(jī)制），它是為以后填入內(nèi)容做準(zhǔn)備的；還有，我們會把介紹文字寫入到正文中{{school.intro}}；以及最后需要專門設(shè)置一個返回地址，從當(dāng)前頁返回到主頁。







MTV中的第三部分是控制Views，無論是這一章的一開始那張MTV的圖片，還是在第（8）的位置上放置的MTV‘圖片，Views都處于中心C位。它負(fù)責(zé)根據(jù)用戶的url請求，來自項(xiàng)目mBlog默認(rèn)的urls.py文件，來觸發(fā)與url對應(yīng)的回調(diào)函數(shù)；然后，在回調(diào)函數(shù)中，調(diào)取.html模版（網(wǎng)頁結(jié)構(gòu)）和models模型（數(shù)據(jù)庫中的數(shù)據(jù)），渲染（填坑）過后，再反饋給用戶。

所以，Views這一步并不是直接在views.py文件中操作，而是從urls.py文件中設(shè)計url正則表達(dá)的語句，主要是指向主頁和分頁，我們一起來看一下效果：

我們設(shè)計了兩個url規(guī)則，一個是主頁規(guī)則，相當(dāng)于除了ip地址或者域名，加上端口之外，其他什么都不需要填寫；另外一個是分頁規(guī)則，相當(dāng)于多了一個路徑/school，并且在這個路徑下又多了一個/slug。在正則表達(dá)里邊，slug字符串，可以用“(/w+)$“來表示。

我們可以把界面切換到views里邊，看看主頁和分頁的回調(diào)函數(shù)的樣子：

主頁的回調(diào)函數(shù)，第一句

template = get_template('index.html')

意思是載入‘index.html’模版。

第二句，

schools = School.objects.all()

意思是獲取所有的School對象的內(nèi)容，賦值給schools。

第三句，

html = template.render(locals())

意思是對模版對象進(jìn)行渲染，locals()代表當(dāng)前函數(shù)局部用到的所有變量集合，這里主要是schools變量，它里邊包含所有從數(shù)據(jù)庫里邊獲取的學(xué)派相關(guān)的信息（title + slug + intro）。

渲染好的網(wǎng)頁，就可以通過HttpResponse函數(shù)進(jìn)行返回，相當(dāng)于推送給瀏覽器供用戶瀏覽。




注意??：因?yàn)榻貓D只能截取屏幕內(nèi)的內(nèi)容的原因，這個地方因?yàn)橛玫搅薙chool類，是有一句from .models import School，感謝本站網(wǎng)友的提醒！??發(fā)大紅包??




我們來看一下主頁和行為注意學(xué)派分頁的效果：

主頁進(jìn)來是這樣的：

點(diǎn)擊行為主義學(xué)派，就進(jìn)入介紹行為主義學(xué)派的分頁：

就這樣，一個完整的MTV的流程就走完了。




當(dāng)我們準(zhǔn)備好了一個Django項(xiàng)目之后，我們就可以把項(xiàng)目部署到阿里云服務(wù)器，看一下最終發(fā)布的效果。