Python 做一個(gè)屬于自己的web網(wǎng)站「上」
“閱讀本文大概需要15分鐘”
你好，我是悅創(chuàng)。今天我們來(lái)看看自動(dòng)化辦公系列中的做一個(gè)自己的網(wǎng)站。這篇主要添加了 BootStrap ，如果你對(duì) Python 的網(wǎng)站開發(fā)，可以看這篇文章：一文搞定 Django 入門，那如果后來(lái)想部署，就看這篇文章：一文搞定 Django 入門，歡迎轉(zhuǎn)發(fā)文章出去哈，這也是我的動(dòng)力。
本篇文章分為上下篇，后面還有自動(dòng)化 word、ppt 等教程，估計(jì)還會(huì)有錄成視頻給你們。那就看未來(lái)小伙伴的轉(zhuǎn)發(fā)和支持了。贊賞肯定開心，不贊賞也可以轉(zhuǎn)發(fā)。加油吧！
目錄
1、掌握前端技術(shù)開發(fā)精髓
2、Django 的安裝和基礎(chǔ)使用
3、理解 MTV 模型
4、制作首頁(yè)
1、掌握前端技術(shù)開發(fā)精髓
網(wǎng)頁(yè)內(nèi)容，由三部分組成，分別是 html、css 和 javascript 。
html 是網(wǎng)頁(yè)面部分 css 是美化網(wǎng)頁(yè)的操作 javascript 是讓網(wǎng)頁(yè)可以交互起來(lái)
前端內(nèi)容，html 是必須的，css 可以交給前端框架，js 也可以交給框架。
所以這里主要介紹 html 部分和認(rèn)識(shí)一個(gè)前端框架。html 是一種標(biāo)記語(yǔ)言，結(jié)構(gòu)是這樣的的 內(nèi)容 ，一個(gè)尖括號(hào)的起始標(biāo)簽，一個(gè)尖括號(hào)帶 / 的結(jié)束標(biāo)簽。并且這種成對(duì)的標(biāo)簽，是可以嵌套的。
HTML 基礎(chǔ)
以上是 html 語(yǔ)法規(guī)則，下面來(lái)認(rèn)識(shí)下基礎(chǔ) html 結(jié)構(gòu)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
</head>
<body>
AI悅創(chuàng)，內(nèi)容。
</body>
</html>
代碼解釋：
頂部第一行是申明，現(xiàn)在的 HTML 已經(jīng)到了第五代。 然后 html 標(biāo)簽是開始，所有內(nèi)容全部放在 html 標(biāo)簽里面。 html 內(nèi)部只有 head 和 body 標(biāo)簽兩個(gè)，也叫作網(wǎng)頁(yè)的頭和身體部分頭部用于存放網(wǎng)頁(yè)的說(shuō)明，例如 title、meta 等標(biāo)簽身體部分放網(wǎng)頁(yè)內(nèi)容，就是你在瀏覽器中看到的內(nèi)容 title 是特定的標(biāo)簽，就是這個(gè)網(wǎng)頁(yè)的名字，展示在瀏覽器的標(biāo)簽頁(yè)部分的信息
用瀏覽器打開，可以得到如下效果：
BootStrap 是什么
以上是 html 的基礎(chǔ)結(jié)構(gòu)，接下來(lái)了解下前端框架，這里要介紹的是 Bootstrap 。
Bootstrap 是非常著名的前端框架之一，也是最早的前端框架。
一個(gè)小疑問：為什么會(huì)有前端框架的出現(xiàn)？
做網(wǎng)站，費(fèi)時(shí)費(fèi)力，網(wǎng)站難的是后臺(tái)的服務(wù)搭建，這部分是用戶看不到的，用戶看到的地方是網(wǎng)頁(yè)內(nèi)容。及時(shí)你的后臺(tái)在強(qiáng)大，前端效果不好看，用戶也會(huì)覺得你這個(gè)站很low。但并不是所有的人都懂如何美化網(wǎng)頁(yè)，所有一個(gè)現(xiàn)成的前端框架就非常有必要的。使用前端框架，可以快速的實(shí)現(xiàn)你要的內(nèi)容，并且配合上具體的使用文檔，及時(shí)沒有網(wǎng)頁(yè)開發(fā)經(jīng)驗(yàn)，也可以按照說(shuō)明，快速的完成一個(gè)還算美觀的前端頁(yè)面。
關(guān)于 Bootstrap 的官方中文文檔，官方鏈接：Bootstrap官方中文： https://v3.bootcss.com/
學(xué)習(xí) Bootstrap
中文文檔介紹很詳細(xì)，看著就可以制作屬于你自己的網(wǎng)頁(yè)了。下面給出兩個(gè)網(wǎng)頁(yè)，一個(gè)是文章列表頁(yè)，另一個(gè)是文章的詳情頁(yè)，源碼文件夾中都有，如下截圖【左側(cè)效果，右側(cè)源碼】：
這兩個(gè)網(wǎng)頁(yè)都是使用的 Bootstrap 框架做的，使用方式都是使用 cdn 鏈接的方式載入，比較快。
源碼獲取：
https://github.com/AndersonHJB/Play-with-office-automation/tree/main/專屬的Web自動(dòng)化處理/1.掌握前端網(wǎng)頁(yè)精髓內(nèi)容
如果獲取失敗，加我微信獲取。
【選詞填空】小練習(xí)
前端技術(shù)，主要是________ 、________和 ________。
________是前端框架。
[ ] JavaScript [ ] Django [ ] CSS [ ] HTML [ ] Bootstrap [ ] Python
2、Django 的安裝和基礎(chǔ)使用
Python 做 web 開發(fā)，非常的方便和快捷，這個(gè)優(yōu)勢(shì)，得益于 Python 的兩個(gè)框架，一個(gè) Flask ，一個(gè) Django 。
Flask 小，微框架，只含有核心組件，其他的內(nèi)容，都需要找?guī)旎蛘咦孕虚_發(fā)，適用進(jìn)階學(xué)習(xí)，以及高手使用，完全按著自己的思路，來(lái)使用 flask 搭建網(wǎng)站。
Django 大而全，開發(fā)迅速，組件完整，可以快速的搭建一個(gè)站起來(lái)，但是必須要安裝Django的思路來(lái)搭建，所以適合新手學(xué)習(xí)。
Django 與 Flask 個(gè)人觀點(diǎn)：django 和 flask 是兩種完全不同風(fēng)格的框架。django 是大而全， 就是 django 盡量幫你做好所有功能。
比如自動(dòng)化的后臺(tái)管理系統(tǒng)。這些可以讓你盡快熟悉 web 開發(fā)中需要用的知識(shí)點(diǎn)。 flask 一個(gè)屬于小強(qiáng)調(diào)開發(fā)靈活性的框架。就是盡量什么都不幫你做，自己去寫或者集成第三方。 這些可以讓你慢慢的理解原理。從學(xué)習(xí)成本和開發(fā)成本上來(lái)講 django 初期成本高一些，但是隨著系統(tǒng)變大學(xué)習(xí)成本和開發(fā)成本會(huì)越來(lái)越小。
flask 則事隨著系統(tǒng)的變大學(xué)習(xí)成本和開發(fā)成本會(huì)上升，因?yàn)槟銜?huì)發(fā)現(xiàn)你需要集成不少第三方庫(kù)和第三方框架進(jìn)入系統(tǒng)。這些會(huì)增加學(xué)習(xí)成本。
學(xué)習(xí) restfulapi 的話，看個(gè)人熟悉的框架，因?yàn)?django 的生態(tài)比較豐富，所以 django rest framework 功能會(huì)相對(duì)完善些。如果個(gè)人熟悉 flask 也可以從 flask 入手。
接下來(lái)我們學(xué)習(xí) Django 框架的安裝和使用。首先是框架的安裝，安裝命令：
pip install django
目前 django 已經(jīng)出到了 3 版本，django3 的目標(biāo)是接入異步，就目前源碼來(lái)看，并不是非常好用。
項(xiàng)目新建
新建 Python 虛擬環(huán)境
在桌面新建項(xiàng)目文件夾，比如名為 website 在命令行里利用 cd 命令進(jìn)入到 website 文件夾 輸入
python3 -m venv djangoenv
在 website 文件夾內(nèi)會(huì)出現(xiàn)一個(gè) djangoenv 文件夾 Windows 用戶繼續(xù)輸入
djangoenv\Scripts\activate
Mac 用戶繼續(xù)輸入
source djangoenv/bin/activate
命令行開頭會(huì)出現(xiàn)( djangoenv )字樣，如圖：
在命令行里輸入 安裝好之后，使用命令提示符或者終端，就可以使用 django-admin 命令，來(lái)創(chuàng)建項(xiàng)目，如下效果圖：
pip install django
Mac 在虛擬環(huán)境之中，直接輸入 python 就是 python3 的版本。
安裝 Django 并新建項(xiàng)目
安裝完成輸入：
django-admin startproject first .
# django-admin.py startproject first
項(xiàng)目新建成功，下面用你順手的編輯器打開，這里推薦 pycharm、vscode、sublime，都可以。
其中 my_blog 是 Django 網(wǎng)站項(xiàng)目名稱，根據(jù)自己需求更改
注意：不要取 django 或者test之類容易產(chǎn)生沖突的名稱
然后就會(huì)在 website 文件夾中出現(xiàn) my_blog 文件夾
里面內(nèi)容如圖
初始化生成文件用途
| 文件名稱 | 用途 |
|---|---|
| manage.py | 一個(gè)在命令行中可以調(diào)用的網(wǎng)站管理工具 |
| 在 my_blog 文件夾里： | |
| init.py | 告訴 Python 這個(gè)文件夾是一個(gè)模塊 |
| settings.py | my_blog 項(xiàng)目的一些配置 |
| urls.py | 網(wǎng)站內(nèi)的各個(gè)網(wǎng)址聲明 |
| wsgi.py | web 服務(wù)器與 Django 項(xiàng)目的接口 |
檢測(cè) Django 項(xiàng)目是否安裝成功
在命令行里輸入，輸入 的時(shí)候要進(jìn)入項(xiàng)目文件夾，里面要有 manage.py 這個(gè)文件。
python3 manage.py runserver
在瀏覽器中輸入網(wǎng)址：127.0.0.1:8000
使用編輯器打開項(xiàng)目文件夾，我這里用的是 Pycharm，如下圖：
左側(cè)是文件目錄結(jié)構(gòu)，下方是終端，打開方式：右側(cè)上方是代碼展示和編輯部分，目前沒選擇文件。
項(xiàng)目創(chuàng)建好了，還需要來(lái)創(chuàng)建 app 應(yīng)用。
新建和注冊(cè) app
項(xiàng)目對(duì)應(yīng)站，應(yīng)用對(duì)應(yīng)站的很多功能功能，所以 app 應(yīng)用可以創(chuàng)建很多個(gè)。如下圖：
Ps：注意，先不要填 blog 這個(gè) app，等你運(yùn)行完下面的命令再填。
創(chuàng)建 app 的命令是：
python manage.py startapp blog
最后的 blog 是 app 名稱。
創(chuàng)建好之后，打開 first 目錄中的 settings.py ，找到 INSTALLED_APPS ，將 app 名稱，也就是 blog 放進(jìn)去。到此，代碼就全部準(zhǔn)備好了，接下來(lái)是啟動(dòng)。
項(xiàng)目啟動(dòng)測(cè)試
啟動(dòng)命令是：
python manage.py runserver
如下效果圖：
出現(xiàn)了 127.0.0.1:8000 就說(shuō)明啟動(dòng)成功了，此時(shí)可以訪問了，且終端下方，無(wú)法輸入內(nèi)容，也就是網(wǎng)站運(yùn)行中。
下面是訪問網(wǎng)站頁(yè)面的效果圖：
說(shuō)明：截圖中，Django 版本是3.1.7，與 Django 2.2，雖然不同，但是沒什么差別，都是基礎(chǔ)內(nèi)容的學(xué)習(xí)。
Django 大版本之后有語(yǔ)法差別，小版本之間沒什么差別，都是一些細(xì)節(jié)上的優(yōu)化和改動(dòng)，所以你安裝了django3，就可以正常的學(xué)習(xí)本課程。
【選詞填空】小練習(xí)
1、如果指定版本安裝 django 版本 2.2 庫(kù)，命令是：
2、新建 demo 項(xiàng)目，命令是：
3、新建 app，app 名是 demos，命令是：
4、啟動(dòng) demo 項(xiàng)目，命令是：
[ ] python manage.py startapp demos [ ] python manage.py runserver [ ] django-admin startproject demo [ ] pip install django==2.2
3、理解 MTV 模型
MTV介紹
要掌握 Django，必須了解 Django 的 MTV 模型，這是非常重要的內(nèi)容，不管是 Django1 還是 2 以及后面正在更新的 3 系列，MTV 模型是永遠(yuǎn)不會(huì)變的。
先來(lái)解釋下 MTV 模型的意思，MTV 是三層關(guān)系，分別是：
M：「Model」 模型，數(shù)據(jù)管理 T：「Template」 模板，網(wǎng)頁(yè)展示 V：「View」 視圖，邏輯控制
這三者是 Django 的網(wǎng)頁(yè)的運(yùn)行機(jī)制，下面單獨(dú)介紹下 MTV 每個(gè)模板的功能。
Model 模型介紹
Model 模型，是負(fù)責(zé)管理數(shù)據(jù)的。
每個(gè)網(wǎng)站都需要有數(shù)據(jù)庫(kù)用于存儲(chǔ)網(wǎng)站數(shù)據(jù)，網(wǎng)站需要展示數(shù)據(jù)時(shí)，也需要從數(shù)據(jù)庫(kù)查詢并讀取數(shù)據(jù)。
Django 內(nèi)置了 ORM 實(shí)現(xiàn)框架，支持多種數(shù)據(jù)庫(kù)，默認(rèn)的數(shù)據(jù)庫(kù)是 Sqlite，當(dāng)然也支持 Mysql 等關(guān)系型數(shù)據(jù)庫(kù)。
Template 介紹
Template 模板，指的就是網(wǎng)頁(yè)模板。
真實(shí)給用戶看的內(nèi)容，都是數(shù)據(jù)+網(wǎng)頁(yè)模板的結(jié)合。數(shù)據(jù)從數(shù)據(jù)庫(kù)中查詢出來(lái)，并渲染到模板中，得到單個(gè)的網(wǎng)頁(yè)，再把網(wǎng)頁(yè)返回給用戶查看，這就是網(wǎng)頁(yè)的渲染流程。
那模板長(zhǎng)什么樣子？上節(jié)課程最好的靜態(tài)網(wǎng)頁(yè)，放到 django 項(xiàng)目的特定文件夾中，就是我們的模板，再簡(jiǎn)單的稍作修改，就得到了可以渲染數(shù)據(jù)的模板。
View 視圖介紹
前面介紹了各種操作，例如查詢并讀取數(shù)據(jù)、數(shù)據(jù)渲染到網(wǎng)頁(yè)，雖然有介紹，但并未介紹如何寫，怎么寫，寫在哪。
這些邏輯代碼，都是要寫在 view 視圖中的。View 視圖，就是對(duì)應(yīng)的邏輯代碼存放的位置。
網(wǎng)站是要接收用戶的請(qǐng)求，并返回給對(duì)應(yīng)的響應(yīng)，而 django 接受到的請(qǐng)求，發(fā)給指定的視圖函數(shù)，視圖函數(shù)做設(shè)定好的操作，再返回響應(yīng)給用戶，這樣就完成了一次請(qǐng)求和響應(yīng)操作。
圖片展示
以上就是 MTV 模型的介紹，當(dāng)然這里介紹的內(nèi)容不難，只是對(duì)于模式的介紹，代碼上具體的細(xì)節(jié)，還有很多，后面會(huì)逐一介紹。
下面看一個(gè)圖，介紹 MTV 三者管理的模塊，如下：
介紹到此結(jié)束，后面會(huì)具體上手寫代碼，完成一個(gè)功能簡(jiǎn)單的文章網(wǎng)站。
【選詞填空】練習(xí)
MTV，分別對(duì)應(yīng)的三個(gè)單詞是________ 、________ 、________ 。
[ ] Model [ ] View [ ] Template
4、制作首頁(yè)
放入靜態(tài)文件
django 項(xiàng)目準(zhǔn)備好了，靜態(tài)網(wǎng)頁(yè)也準(zhǔn)備好了，本文學(xué)習(xí)如何將網(wǎng)頁(yè)接入到項(xiàng)目中。
第一步，在 blog 應(yīng)用的目錄下，創(chuàng)建一個(gè)名為 templates 的目錄，注意不要寫錯(cuò)。
這個(gè) templates 目錄，就是存放模板的目錄，名稱不能錯(cuò)，因?yàn)檫@是 django 默認(rèn)讀取的目錄。然后將兩個(gè) html 文件放進(jìn)來(lái)。
寫一個(gè)函數(shù)
要完成網(wǎng)站首頁(yè)，就必須定義首頁(yè)的視圖函數(shù)，這個(gè)函數(shù)放在 blog 目錄下的 views.py 文件中。
打開了 views.py 文件，新建一個(gè) index 函數(shù)，參數(shù)是 request，如下代碼：
def index(request):
return render(request, 'index.html')
這個(gè)就是視圖函數(shù)的定義，代碼解釋：
第一行的 index 是函數(shù)名，request 是參數(shù)，必須要，因?yàn)楹瘮?shù)在被調(diào)用時(shí)，請(qǐng)求會(huì)被傳入，request 就是對(duì)應(yīng)的參數(shù)。 第二行 return，這個(gè)是返回，函數(shù)必須有返回 render 是 django 內(nèi)置的渲染函數(shù)，這里放入了兩個(gè)值第一個(gè)是 request，默認(rèn)的，需要加；第二個(gè)值是 index.html ，這個(gè)是放在 templates 目錄中的首頁(yè) render() 函數(shù)的結(jié)果是一個(gè) Response 響應(yīng)，每個(gè)視圖函數(shù)都必須返回一個(gè)響應(yīng)。
以上是函數(shù)的介紹部分，那這個(gè)函數(shù)也就是簡(jiǎn)單的返回了一個(gè)載入 index.html 的響應(yīng)。如下圖：
準(zhǔn)備URL
函數(shù)有了，那就給他分配一個(gè) url，url 就是瀏覽器中訪問的地址。
url 的配置，在 first 目錄下的 urls.py 文件中，這里有一個(gè) admin ，是默認(rèn)的 django 后臺(tái)配置，后面我們會(huì)用到這個(gè)。
既然是綁定首頁(yè)，所以 url 的地址，應(yīng)該是主域名，那在綁定的時(shí)候，代碼如下：
視圖函數(shù)綁定 url ，首先是從 blog.views 中導(dǎo)入 index 函數(shù)，然后在 urlpatterns 中進(jìn)行設(shè)置就行。
啟動(dòng)服務(wù)
代碼已經(jīng)準(zhǔn)備完畢，現(xiàn)在來(lái)啟動(dòng)項(xiàng)目。打開命令行，輸入命令：
python manage.py runserver
截圖和效果圖如下：
如果你要綁定到 index 路徑上，只需要修改一下 urls.py 中的內(nèi)容就可以。
通常首頁(yè)，是空 url 的默認(rèn)路徑，或者有 index 的 url 地址，都是可以的。
【多選題】小練習(xí)
制作網(wǎng)站首頁(yè)，有哪些步驟？
[ ] 準(zhǔn)備網(wǎng)頁(yè)，放進(jìn) teamplates [ ] Model 和數(shù)據(jù)庫(kù)映射 [ ] 寫一條規(guī)則，將 url 和函數(shù)進(jìn)行綁定 [ ] 寫一個(gè)函數(shù)，返回具體的 html 文件 [ ] 寫一個(gè) Model
