Python Web開發(fā)—Flask實(shí)戰(zhàn)—項(xiàng)目概覽及準(zhǔn)備、頁面設(shè)計(jì)、表單管理、首頁管理、用

時(shí)間：2023-09-28 19:30:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-28 19:30:01 來源：網(wǎng)站運(yùn)營(yíng)

Python Web開發(fā)—Flask實(shí)戰(zhàn)—項(xiàng)目概覽及準(zhǔn)備、頁面設(shè)計(jì)、表單管理、首頁管理、用戶管理、博客管理：介紹了Django實(shí)戰(zhàn)（Python Web開發(fā)—Django實(shí)戰(zhàn)—分類管理、圖書管理、作者管理、出版社管理），F(xiàn)lask建站十分方便快捷，本章將以實(shí)戰(zhàn)形式講解使用Flask框架創(chuàng)建網(wǎng)站的步驟和方法。在編程過程中，當(dāng)遇到解決不了的技術(shù)問題時(shí)，大家都會(huì)到網(wǎng)上查詢一些技術(shù)博客，也有人會(huì)在生活博客上記錄自己的生活。本章將講解Flask實(shí)戰(zhàn)——博客系統(tǒng)。

項(xiàng)目概覽及準(zhǔn)備

? 項(xiàng)目概覽

博客系統(tǒng)是一個(gè)可管理自己博客，也可瀏覽其他人博客的一個(gè)網(wǎng)站系統(tǒng)，主要包括用戶管理、博客管理兩大主要內(nèi)容，本章將圍繞這兩部分內(nèi)容詳細(xì)講解。接下來講解博客項(xiàng)目的內(nèi)容概覽，如圖所示。

以上是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)圖，接下來將詳細(xì)講解目錄結(jié)構(gòu)圖中的內(nèi)容。

? 項(xiàng)目配置

在進(jìn)行項(xiàng)目編寫前，需要對(duì)整個(gè)項(xiàng)目進(jìn)行配置，接下來講解如何配置博客系統(tǒng)項(xiàng)目。

manage.py（項(xiàng)目中）

上述代碼是博客系統(tǒng)的運(yùn)行配置實(shí)現(xiàn)代碼。第1~4行是導(dǎo)入所需模塊。第6行是獲取配置，并將配置名賦值給變量config_name。第8行是創(chuàng)建Flask應(yīng)用示例“app”。第10行是創(chuàng)建使用命令行啟動(dòng)項(xiàng)目的控制對(duì)象并賦值給變量manager。第12行是添加數(shù)據(jù)庫(kù)遷移命令。第14~15行是啟動(dòng)項(xiàng)目。

編寫了上述配置文件之后可以通過命令“python manage.py runserver -r -d”運(yùn)行項(xiàng)目，其中“-r”是“reload”的意思，“-d”是“debug”的意思；運(yùn)行結(jié)果如圖所示。

對(duì)于應(yīng)用也會(huì)有自己的配置信息，包含此應(yīng)用各個(gè)重要內(nèi)容的配置，如：數(shù)據(jù)庫(kù)、開發(fā)環(huán)境、文件上傳、郵件發(fā)送等。

上述代碼是博客系統(tǒng)的應(yīng)用配置實(shí)現(xiàn)代碼。第1行是導(dǎo)入系統(tǒng)模塊。第2行是獲取當(dāng)前文件的基地址，并賦值給變量base_dir。第4~22行是通用配置類。第6行是秘鑰信息配置。第8是啟用自動(dòng)提交數(shù)據(jù)庫(kù)更改。第9行是默認(rèn)情況為True，F(xiàn)lask-SQLAlchemy會(huì)追蹤對(duì)象的修改并且發(fā)送信號(hào)，由于此工作需要額外的內(nèi)存，因此設(shè)置為False禁用。第11~16行是郵件發(fā)送的相關(guān)配置信息。第11~12行是配置郵件發(fā)送服務(wù)器。第13~14行是發(fā)送郵件的用戶名。第15~16行是發(fā)送郵件的郵箱密碼，其中“****”是自己配置的郵箱密碼。第18行是定義文件最大內(nèi)容。第19行是設(shè)置文件上傳地址。第20~22行是額外的初始化操作，不添加內(nèi)容也是有意義的。第24~34行是項(xiàng)目開發(fā)中各環(huán)境的配置類，主要是配置各環(huán)境的數(shù)據(jù)庫(kù)URI。第36~41行是將各環(huán)境配置信息用字典形式標(biāo)注，方便調(diào)用配置。

? 項(xiàng)目所使用擴(kuò)展

由于Flask的各大功能都是依賴擴(kuò)展來實(shí)現(xiàn)的，因此本項(xiàng)目將所有擴(kuò)展以及使用的初始化內(nèi)容單獨(dú)以文件的形式存儲(chǔ)，方便使用和移植。接下來講解本項(xiàng)目所使用到的擴(kuò)展內(nèi)容，以及各擴(kuò)展的對(duì)象創(chuàng)建和初始化。

上述代碼是博客系統(tǒng)使用到的擴(kuò)展內(nèi)容實(shí)現(xiàn)。第2~9行是導(dǎo)入所需模塊。第11~17行是創(chuàng)建各擴(kuò)展類的實(shí)例對(duì)象。第20~26行是初始化各對(duì)象實(shí)例，其中第26行是登錄認(rèn)證初始化。第28行是指定登錄端單為藍(lán)本user的login（藍(lán)本在后續(xù)內(nèi)容中會(huì)詳細(xì)講解）。第29行是設(shè)置需登錄才能執(zhí)行操作的提示信息。第30行是設(shè)置session的保護(hù)級(jí)別。其中有三個(gè)級(jí)別，分別是None：禁用session保護(hù)；basic：基本的保護(hù)，默認(rèn)選項(xiàng)；strong：最嚴(yán)格的保護(hù)，一旦用戶登錄信息改變，立即退出登錄。第32行是將app的config配置注冊(cè)到UploadSet實(shí)例photos。第33行是設(shè)置文件大小。

? 數(shù)據(jù)庫(kù)生成

一個(gè)網(wǎng)站系統(tǒng)離不開數(shù)據(jù)庫(kù)，因此數(shù)據(jù)庫(kù)在網(wǎng)站系統(tǒng)中有著特殊的意義，接下來講解博客系統(tǒng)的數(shù)據(jù)庫(kù)生成代碼實(shí)現(xiàn)。

本博客系統(tǒng)主要包含三個(gè)表：用戶表、博客表、用戶與博客的聯(lián)系表。

上述代碼是博客系統(tǒng)的用戶模型實(shí)現(xiàn)代碼。第2行是定義表名。第3~11行是定義字段名及類型。第11行是在另一個(gè)模型中添加一個(gè)反向引用，第一個(gè)參數(shù)是關(guān)聯(lián)的模型名；第二個(gè)參數(shù)是在關(guān)聯(lián)的模型中動(dòng)態(tài)添加字段；第三個(gè)參數(shù)是加載方式，其中值為dynamic表示不加載，但提供記錄的查詢；若使用一對(duì)一，添加參數(shù)uselist并置為Flase。第13~15行是設(shè)置密碼字段保護(hù)，設(shè)置為不可讀。第17~19行是設(shè)置密碼并進(jìn)行加密存儲(chǔ)。第21~22行是驗(yàn)證密碼。第24~28行是生成激活的token。第29~48行是驗(yàn)證token信息，并將激活狀態(tài)更新到相應(yīng)用戶中。第33行是加載token，將字符串的token轉(zhuǎn)換成字典形式并賦值給變量data。第34行是捕獲到錯(cuò)誤的token時(shí)拋出異常。第37行是token過時(shí)時(shí)拋出異常。第40行是根據(jù)id查詢用戶信息，并將用戶信息賦值給變量user。第41~43行是當(dāng)用戶不存在時(shí)的執(zhí)行代碼。第45~48是當(dāng)用戶未激活時(shí)，修改數(shù)據(jù)庫(kù)中用戶激活狀態(tài)。第50~56行是判斷是否收藏指定博客函數(shù)。第58~60行是收藏指定博客函數(shù)。第62~64行是取消收藏博客函數(shù)。第66~68行是登錄認(rèn)證的回調(diào)。

以上是用戶模型的實(shí)現(xiàn)，接下來講解博客模型的實(shí)現(xiàn)。

app/models/posts.py

上述代碼是博客模型實(shí)現(xiàn)代碼。第2行是定義表名。第3~6行是定義各字段及類型。第8行是添加關(guān)聯(lián)user表的外鍵。

在對(duì)用戶和博客模型編寫完成后執(zhí)行數(shù)據(jù)庫(kù)文件遷移，具體如下所示：

在Terminal輸入命令“python manage.py db init”，初始化遷移文件。

執(zhí)行成功之后輸入命令“python manage.py db migrate”，生成遷移文件。

生成遷移文件之后輸入命令“python manage.py db upgrade”，執(zhí)行遷移（更新遷移）。

執(zhí)行后查看數(shù)據(jù)庫(kù)中表信息如圖所示。

在圖中，collections表、posts表、users表是編寫模型代碼實(shí)現(xiàn)的，其余表是執(zhí)行數(shù)據(jù)庫(kù)遷移文件時(shí)自動(dòng)生成的。

注意：本章使用的是SQLite數(shù)據(jù)庫(kù)。

? 藍(lán)本（藍(lán)圖）的使用

藍(lán)本是在一個(gè)應(yīng)用中，跨應(yīng)用制作應(yīng)用組件和支持通用的模式，換一句話說，藍(lán)本定義了可用于單個(gè)應(yīng)用的視圖、模板、靜態(tài)文件等等的集合。一般需要將應(yīng)用組織成不同的組件時(shí)會(huì)使用到藍(lán)本，接下來講解藍(lán)本的使用。

view/__init__.py

上述代碼是博客系統(tǒng)的藍(lán)本配置實(shí)現(xiàn)代碼。第2~6行是定義藍(lán)本，其中（user，‘/user’），前者是藍(lán)本名，后者是URL中的前綴。第8~10行是藍(lán)本注冊(cè)，將藍(lán)本名和前綴進(jìn)行對(duì)應(yīng)注冊(cè)。

藍(lán)本的定義與注冊(cè)實(shí)現(xiàn)之后，就可以在視圖函數(shù)(views/main.py)中使用藍(lán)本了，代碼如下：

使用藍(lán)本配置路由，代碼如下：

頁面設(shè)計(jì)

開發(fā)Web網(wǎng)站其中很大一部分是進(jìn)行頁面設(shè)計(jì)，網(wǎng)站最終是要展示給用戶觀看及使用的，因此頁面設(shè)計(jì)非常重要，接下來介紹博客系統(tǒng)的頁面設(shè)計(jì)（templates文件中）。

? 基頁面

base.html是網(wǎng)站中其他頁面的基頁面，網(wǎng)站中其他頁面都繼承自base.html，接下來詳細(xì)解析base.html中內(nèi)容。

上述代碼是博客系統(tǒng)網(wǎng)站的基頁面，網(wǎng)站的主要界面均繼承自它，因此內(nèi)容比較重要，接下來對(duì)代碼作詳細(xì)解析：第1行是繼承Bootstrap框架的基頁面。第2行是引入Bootstrap框架中的wtf.html文件，并命名為wtf。第4~8行是樣式及靜態(tài)文件的內(nèi)容，其中第6~7行是鏈入圖片1.png。第12~54行是整個(gè)博客系統(tǒng)的導(dǎo)航欄部分。第17~19行是“首頁”的內(nèi)容及鏈接（{{ url_for('main.index') }}）。第20~24行是“我的博客”模塊，鏈接為“{{ url_for('posts.myposts',uid = current_user.id) }}”。第25~49行是用戶信息的相關(guān)管理鏈接。第26行是判斷用戶是否登錄，若登錄則執(zhí)行。第27~44行是內(nèi)容顯示。第27行是“退出”，鏈接為“{{ url_for('user.logout') }}”。第29~44行是用戶信息管理的下拉菜單，顯示為當(dāng)前登錄的用戶名，其中包括“用戶詳情{{ url_for('user.profile') }}”、“修改密碼{{ url_for('user.editpw') }}”、“修改郵箱{{ url_for('user.editemail') }}”、“修改頭像{{ url_for('user.icon') }}”四部分內(nèi)容，若用戶未登錄則執(zhí)行46~48行的內(nèi)容顯示，包括“注冊(cè){{ url_for('user.register') }}”、“登錄{{ url_for('user.login') }}”。第56~67行是博客系統(tǒng)的主體內(nèi)容。第57~65行是循環(huán)遍歷flash中的提示信息。第66行是各頁面需要顯示的內(nèi)容。第70~74行是js等腳本控制語言。

注意：本節(jié)接下來的頁面均需要繼承自基頁面，因此頁面均需要在編寫代碼開始時(shí)添加以下代碼：

? 宏文件

博客系統(tǒng)需要將博客展示給用戶觀看，隨著時(shí)間的推移，博客數(shù)量會(huì)隨之增長(zhǎng)，因此頁面顯示需要分頁展示，以達(dá)到清晰美觀的效果。接下來介紹分頁的頁面設(shè)計(jì)，具體如宏文件macro.html代碼。

templates/common/marco.html

上述代碼是博客系統(tǒng)分頁顯示頁面的實(shí)現(xiàn)。第1行是定義宏文件內(nèi)容，包括show_pagination(pagination, endpoint)函數(shù)，其中參數(shù)pagination是分頁對(duì)象，參數(shù)endpoint是端單。第5~12行是上一頁的實(shí)現(xiàn)代碼。第5~6行是判斷分頁是否有上一頁，如果沒有則無法單擊，若有則執(zhí)行下面代碼。第7~11行是當(dāng)分頁有上一頁時(shí)，跳轉(zhuǎn)鏈接為“{{ url_for(endpoint, page=pagination.prev_num, **kwargs) }}”。第14~23行是將所有頁數(shù)顯示在中間。第14行是循環(huán)遍歷pagination對(duì)象中的頁數(shù)。第15~19行是當(dāng)頁數(shù)存在時(shí)執(zhí)行。第16行是判斷pagination對(duì)象的頁碼是否與遍歷的頁碼相同，相同則為觸發(fā)狀態(tài)。第18~19行是顯示中間頁碼，鏈接為“{{ url_for(endpoint, page = pagination.next_num,**kwargs) }}”。第21行是當(dāng)頁數(shù)不存在時(shí)執(zhí)行。第25~33行是下一頁的實(shí)現(xiàn)代碼。第25行是判斷分頁是否還有下一頁，如果沒有則無法單擊，若有則執(zhí)行下面代碼。第26~31行是當(dāng)分頁有下一頁時(shí)，跳轉(zhuǎn)鏈接為“{{ url_for(endpoint, page = pagination.next_num,**kwargs) }}”。

分頁的宏文件到此就編寫完成，當(dāng)文件需要使用分頁時(shí)，直接傳遞不同的分頁對(duì)象即可。

? 首頁

首頁主要是將所有用戶的博客顯示在頁面上，還包含發(fā)表博客，接下來講解首頁的頁面設(shè)計(jì)實(shí)現(xiàn)，具體如index.html文件。

上述代碼是博客系統(tǒng)的首頁頁面的實(shí)現(xiàn)。第1行是繼承基頁面。第2行是從宏文件中引入show_pagination方法。第6~40行是整個(gè)首頁的主體內(nèi)容。第7行是發(fā)表博客的表單顯示。第10~36行是循環(huán)遍歷博客并顯示在頁面中。第15~18行是顯示用戶的頭像。第22~25是顯示用戶名和博客的主體信息。第27~33行是判斷用戶是否收藏的顯示內(nèi)容。第39行是分頁內(nèi)容的顯示，其中“xxx=’yyy’”是測(cè)試，代表可以傳遞其他的參數(shù)。第42~57行是實(shí)現(xiàn)收藏與取消收藏的單擊事件。

首頁的頁面設(shè)計(jì)到此就完成了，主要包括了發(fā)表博客表單、各用戶的博客展示、博客的收藏與取消收藏以及博客分頁顯示功能。

? 用戶信息管理頁面設(shè)計(jì)

用戶信息管理是一個(gè)網(wǎng)站系統(tǒng)最基本的內(nèi)容，因此這部分內(nèi)容的頁面設(shè)計(jì)必不可少。用戶信息管理頁面設(shè)計(jì)主要包括用戶注冊(cè)、用戶登錄、用戶詳情、修改郵箱、修改密碼、修改頭像六部分內(nèi)容。接下來詳細(xì)介紹每一部分頁面設(shè)計(jì)的實(shí)現(xiàn)內(nèi)容。

一個(gè)網(wǎng)站的好壞可以從用戶的訪問量以及用戶的注冊(cè)量來判斷，其中用戶的注冊(cè)量指的是網(wǎng)站的注冊(cè)用戶有多少，接下來講解用戶注冊(cè)頁面實(shí)現(xiàn)。

register.html：

上述代碼是博客系統(tǒng)的用戶注冊(cè)頁面的實(shí)現(xiàn)。第1行是繼承基頁面。第6行是顯示用戶注冊(cè)表單。

在用戶注冊(cè)成功之后，需要提供用戶登錄接口使用戶可以登錄網(wǎng)站管理自己的內(nèi)容，接下來講解用戶登錄頁面實(shí)現(xiàn)。

login.html：

上述代碼是博客系統(tǒng)的用戶登錄頁面的實(shí)現(xiàn)。第1行是繼承基頁面。第6行是顯示用戶登錄表單。

用戶在登錄網(wǎng)站之后可以通過接口來查看自己的個(gè)人信息，并且通過查看信息可以將需要修改的信息通過其他接口進(jìn)行修改，接下來講解用戶詳情頁面實(shí)現(xiàn)。

profile.html：

上述代碼是博客系統(tǒng)的用戶詳情顯示頁面的實(shí)現(xiàn)。第1行是繼承基頁面。第4~21行是顯示用戶信息的主要內(nèi)容。第8~10行是判斷用戶頭像img_url是否存在，存在則顯示用戶頭像。第14~15行是以只讀的形式顯示用戶名。第19~20行是以只讀的形式顯示用戶的郵箱。

用戶在查看信息之后發(fā)現(xiàn)郵箱不是自己常用郵箱，可以通過接口將郵箱進(jìn)行修改，只是郵箱修改以后需要再次激活用戶，接下來講解修改郵箱頁面實(shí)現(xiàn)。

editemail.html：

上述代碼是博客系統(tǒng)的用戶修改郵箱頁面的實(shí)現(xiàn)。第1行是繼承基頁面。第6行是顯示修改郵箱表單。

如果說用戶名是登錄網(wǎng)站的通行證，那密碼就是登錄網(wǎng)站最重要的憑證。網(wǎng)絡(luò)安全問題一直存在整個(gè)互聯(lián)網(wǎng)上，因此對(duì)于密碼這樣重要的憑證需要時(shí)刻保證它的安全，其中一個(gè)辦法就是定時(shí)修改密碼，接下來講解修改密碼頁面實(shí)現(xiàn)。

editpw.html：

上述代碼是博客系統(tǒng)的用戶密碼修改頁面的實(shí)現(xiàn)。第1行是繼承基頁面。第6行是顯示修改密碼表單。

對(duì)于新一代的年輕人，信息更新迭代速度太快，用戶對(duì)于個(gè)人頭像的喜好也會(huì)隨之改變，因此需要提供隨時(shí)更改頭像的接口，接下來講解修改頭像頁面實(shí)現(xiàn)。

icon.html：

上述代碼是博客系統(tǒng)的用戶修改頭像頁面的實(shí)現(xiàn)。第1行是繼承基頁面。第6~8行是判斷用戶的頭像img_url是否存在，存在則顯示頭像。第9行是顯示修改頭像表單。

? 博客管理頁面設(shè)計(jì)

博客管理是管理用戶自己的博客，可以顯示自己的博客以及刪除自己的博客。接下來講解“我的博客”頁面實(shí)現(xiàn)。

上述代碼是博客系統(tǒng)“我的博客”頁面實(shí)現(xiàn)。第1行是繼承基頁面。第2行是從宏文件中引入show_pagination方法。第6~42行是整個(gè)頁面的主體內(nèi)容。第7~37行是循環(huán)遍歷用戶的博客并顯示在頁面中。第8行是判斷博客的用戶id是否與當(dāng)前用戶id相同，相同則執(zhí)行下面代碼。第12~16行是顯示用戶頭像。第19~22是顯示用戶名和博客的主體信息。第23~27行是判斷用戶是否收藏的顯示內(nèi)容。第29~33行是刪除本博客，鏈接為{{ url_for('posts.delpost',pid=p.id,uid=p.uid) }}。第40~41行是分頁內(nèi)容的顯示，其中“uid=current_user.id”是將參數(shù)uid傳遞給分頁函數(shù)。第44~60行是實(shí)現(xiàn)收藏與取消收藏的單擊事件。

至此博客管理的頁面設(shè)計(jì)已經(jīng)完成，主要包括了顯示博客內(nèi)容、刪除博客功能。

? 發(fā)送郵件頁面設(shè)計(jì)

此博客系統(tǒng)設(shè)計(jì)了郵件激活功能，其中在注冊(cè)時(shí)需要填寫郵箱地址，通過后臺(tái)發(fā)送郵件給用戶，用戶單擊鏈接完成激活。接下來講解發(fā)送郵件的頁面及內(nèi)容。

activate.html

HTML文件在郵件中不好顯示，因此需要再編寫一個(gè)文本文件來顯示郵件內(nèi)容，接下來講解文本文件內(nèi)容。

上述代碼是博客系統(tǒng)的郵件激活內(nèi)容的HTML代碼。第1行是引語，“Hello”與變量“{{username}}”。第2~4行是郵件激活鏈接內(nèi)容，鏈接為“{{ url_for('user.activate', token=token, _external=True) }}”鏈接中包含了“token”，而其中的參數(shù)“_external”設(shè)置為True表示可以從外部訪問網(wǎng)站。

HTML文件在郵件中不好顯示，因此需要再編寫一個(gè)文本文件來顯示郵件內(nèi)容，接下來講解文本文件內(nèi)容。

activate.txt

上述代碼是編寫在“activate.txt”文件中，與“activate.html”文件只相差HTML標(biāo)簽，其他內(nèi)容相同，此處不再贅述。

? 錯(cuò)誤展示頁面設(shè)計(jì)

網(wǎng)站在瀏覽器中運(yùn)行時(shí)，出現(xiàn)錯(cuò)誤會(huì)有相應(yīng)的錯(cuò)誤展示頁面，即瀏覽器自帶的錯(cuò)誤展示頁面；若對(duì)瀏覽器自帶的錯(cuò)誤展示頁面不滿意，還可以自己編寫相應(yīng)的錯(cuò)誤頁面，接下來講解404錯(cuò)誤頁面實(shí)現(xiàn)。

404.html

上述代碼是博客系統(tǒng)的404錯(cuò)誤頁面的實(shí)現(xiàn)。第1行是繼承基頁面。第4~5行是錯(cuò)誤頁面的主體內(nèi)容。

本博客系統(tǒng)只編寫了404錯(cuò)誤頁面作為參考，大家還可以自定義其他錯(cuò)誤頁面。

表單管理

本系統(tǒng)使用了WTF表單插件來實(shí)現(xiàn)表單的編寫與驗(yàn)證，實(shí)現(xiàn)表單與前端模板文件分離。本節(jié)主要講解表單類的實(shí)現(xiàn)，接下來詳細(xì)講解用戶表單和博客表單兩部分內(nèi)容。

? 用戶表單

用戶表單包括用戶注冊(cè)表單、用戶登錄表單、修改頭像表單、修改密碼表單、修改郵箱表單五個(gè)表單內(nèi)容，接下來詳細(xì)講解這五個(gè)表單類的實(shí)現(xiàn)。

1.用戶注冊(cè)表單類

上述代碼是用戶注冊(cè)表單類的實(shí)現(xiàn)。第3~14行是各字段的定義，包括username、password、confirm、email、submit。第17~19行是驗(yàn)證用戶名是否唯一的函數(shù)。第18行是判斷數(shù)據(jù)庫(kù)中是否存在提交的用戶名，存在則執(zhí)行下面代碼。第19行是返回提示錯(cuò)誤“該用戶已存在，請(qǐng)選用其它用戶名”。第21~23行是驗(yàn)證郵箱是否唯一的函數(shù)。第22行是判斷數(shù)據(jù)庫(kù)中是否存在提交的郵箱，存在則執(zhí)行下面代碼。第23行是返回提示錯(cuò)誤“該郵箱已注冊(cè)，請(qǐng)選用其它郵箱地址”。

2.用戶登錄表單類

上述代碼是用戶登錄表單類的實(shí)現(xiàn)。第3~6行是各字段的定義包括username、password、remember、submit，其中DataRequired()表示必填項(xiàng)。

3.修改頭像表單類

上述代碼是修改頭像表單類的實(shí)現(xiàn)。第3~5行是頭像字段的定義，其中FileAllowed()函數(shù)指定允許的文件類型為photos，F(xiàn)ileRequired()表示文件需先選擇。第6行是保存并提交字段定義。

4.修改密碼表單類

上述代碼是修改密碼表單類的實(shí)現(xiàn)。第3~6行是各字段的定義包括passwordold、passwordnew，其中DataRequired()表示必填項(xiàng)。第7行是確定提交字段。

5.修改郵箱表單類

上述代碼是修改郵箱表單類的實(shí)現(xiàn)。第3~4行是新郵箱地址字段的定義。第5行是確定提交字段。

上述內(nèi)容是整個(gè)博客系統(tǒng)的用戶表單類的實(shí)現(xiàn)。

? 博客表單

博客最主要的表單內(nèi)容是發(fā)表博客，接下來詳細(xì)講解發(fā)表博客表單內(nèi)容。

發(fā)表博客表單類

上述代碼是發(fā)表博客表單類的實(shí)現(xiàn)。第2~4行是博客內(nèi)容字段的定義，其中‘placeholder’是當(dāng)沒有填寫內(nèi)容時(shí)輸入框內(nèi)顯示的內(nèi)容。第5行是發(fā)表提交字段。

首頁管理

? 首頁管理

首頁顯示用戶博客，也是用戶進(jìn)入網(wǎng)站時(shí)第一個(gè)瀏覽到的頁面，接下來講解首頁的后臺(tái)視圖實(shí)現(xiàn)。

1.視圖設(shè)計(jì)

main.py

上述代碼是首頁顯示的實(shí)現(xiàn)。第1行是定義藍(lán)本“main”。第3行是配置首頁路由。第5行是創(chuàng)建發(fā)表博客表單對(duì)象“form”。第8~12行是用戶登錄之后發(fā)表博客實(shí)現(xiàn)。第8行是判斷用戶是否登錄。第9~10行是用戶對(duì)象（u）與發(fā)表的博客對(duì)象（p）。第11行是將新發(fā)表的博客對(duì)象添加到數(shù)據(jù)庫(kù)。第12行將URL重定向到藍(lán)本main中的首頁。第14~15行是當(dāng)用戶沒有登錄時(shí)執(zhí)行的代碼。第14行是flash提示信息。第15行是將URL重定向到藍(lán)本user中的注冊(cè)頁面。第17行是讀取頁數(shù)信息。第18~20行是按需求進(jìn)行分頁查詢博客。第21行是將查詢出來的博客信息賦值給變量“posts”。第22~23行是渲染首頁。

2.運(yùn)行結(jié)果

將首頁的相關(guān)操作都完成以后，通過瀏覽器以及URL就可以查看運(yùn)行結(jié)果了。接下來運(yùn)行項(xiàng)目，使用命令“python manage.py runserver -r -d”運(yùn)行，其中“-r”是“reload”的意思，“-d”是“debug”的意思；然后在瀏覽器中輸入http://127.0.0.1:5000/，運(yùn)行結(jié)果如圖所示。

用戶管理

用戶管理是管理所有注冊(cè)和登錄本系統(tǒng)的用戶信息，對(duì)用戶的登入退出進(jìn)行驗(yàn)證管理，以確保安全。

? 用戶注冊(cè)

用戶登錄/注冊(cè)是每個(gè)系統(tǒng)必備的功能，接下來講解用戶注冊(cè)模塊的實(shí)現(xiàn)。

1.視圖設(shè)計(jì)

前端模板和表單完成之后，通過后臺(tái)視圖函數(shù)控制就可以將所有注冊(cè)的功能實(shí)現(xiàn)，接下來講解注冊(cè)模塊的視圖函數(shù)實(shí)現(xiàn)。

上述代碼是用戶注冊(cè)模塊的實(shí)現(xiàn)。第1行是配置函數(shù)register()的路由。第2~15行是整個(gè)注冊(cè)模塊的后臺(tái)實(shí)現(xiàn)代碼。第3行是創(chuàng)建RegisterForm注冊(cè)表單對(duì)象form。第4行判斷表單是否提交，已提交執(zhí)行下面代碼。第5~6行是創(chuàng)建用戶對(duì)象，將提交的form.username.data賦值給username，form.password.data賦值給password，form.email.data賦值給email。第7行是將對(duì)象添加到數(shù)據(jù)庫(kù)。第8行是因?yàn)榧せ钹]箱時(shí)需要包含用戶信息的token，因此手動(dòng)提交用戶對(duì)象。第9行是生成激活郵件的token。第11~12行是調(diào)用send_email()函數(shù)發(fā)送郵件。第13行是flash的提示信息。第14行是重定向到藍(lán)本main中的首頁。第15行是當(dāng)還沒提交注冊(cè)表單時(shí)渲染注冊(cè)頁面。

2.注冊(cè)模塊運(yùn)行結(jié)果

將注冊(cè)模塊中的內(nèi)容都完成以后，通過瀏覽器以及URL就可以查看運(yùn)行結(jié)果了。接下來運(yùn)行項(xiàng)目，使用命令“python manage.py runserver -r -d”運(yùn)行程序，然后在瀏覽器中輸入http://127.0.0.1:5000/user/register/，運(yùn)行結(jié)果如圖所示。

3.郵件發(fā)送激活實(shí)現(xiàn)

郵件發(fā)送激活包含兩部分內(nèi)容，一部分在user.py文件中，一部分在email.py文件中。接下來詳細(xì)講解郵件發(fā)送與激活的實(shí)現(xiàn)。

user.py

上述代碼是判斷用戶郵箱是否激活的實(shí)現(xiàn)。第2行是配置函數(shù)activate()的路由。第4行是判斷用戶“token”是否激活，激活則執(zhí)行下面代碼。第5行是用戶激活后flash的提示信息。第6行是將URL重定向到藍(lán)本user的登錄頁面。第8~9行是當(dāng)用戶“token”沒被激活時(shí)的執(zhí)行代碼。第8行是用戶激活失敗的flash提示信息。第9行是將URL重定向到藍(lán)本main的首頁頁面。

用戶激活判斷已經(jīng)完成，接下來講解郵件發(fā)送的實(shí)現(xiàn)。

email.py

上述代碼是郵件發(fā)送的實(shí)現(xiàn)。第1~3行是實(shí)現(xiàn)在應(yīng)用上下文中發(fā)送郵件的函數(shù)。第2行是發(fā)送郵件必須在上下文中。第3行是發(fā)送郵件。第5~15行是封裝發(fā)送郵件函數(shù)，需要?jiǎng)?chuàng)建新線程執(zhí)行發(fā)送。第6行是根據(jù)代理對(duì)象current_app找到實(shí)例化的app對(duì)象。第7~8行是郵件的內(nèi)容。第9行是郵件的HTML文件渲染。第10行是郵件的主體內(nèi)容即文本文件。第12行是創(chuàng)建發(fā)送郵件的線程。第14行是啟動(dòng)發(fā)送郵件的線程。第15行是返回線程。

4.最終運(yùn)行結(jié)果

注冊(cè)模塊以及郵件激活內(nèi)容完成以后，可以進(jìn)行注冊(cè)測(cè)試即運(yùn)行整個(gè)注冊(cè)模塊，運(yùn)行程序并在瀏覽器中輸入http://127.0.0.1:5000/user/register/，然后輸入用戶的注冊(cè)信息，如圖所示。

在圖中，單擊【立即注冊(cè)】，顯示結(jié)果如圖所示。

接下來登錄注冊(cè)所填寫的郵箱，單擊最新郵件信息，郵件信息如圖所示。

單擊圖中的【激活】按鈕，顯示結(jié)果如圖所示。

單擊圖中的【繼續(xù)訪問】按鈕，跳轉(zhuǎn)到博客系統(tǒng)的登錄界面，顯示結(jié)果如圖所示。

用戶登錄

? 用戶登錄

在上一節(jié)的內(nèi)容中已經(jīng)將用戶“qianfengjiaoyu”注冊(cè)成功，并成功跳轉(zhuǎn)到登錄界面，然后直接輸入用戶名和密碼提交到后臺(tái)驗(yàn)證，驗(yàn)證成功之后就可以跳轉(zhuǎn)到網(wǎng)站的主頁面。接下來講解用戶的登錄功能。

1.用戶登錄視圖函數(shù)設(shè)計(jì)

上述代碼是用戶登錄的實(shí)現(xiàn)。第2行是配置函數(shù)login ()的路由，并指定參數(shù)“method”的值為[‘GET’，‘POST’]。第4行是創(chuàng)建登錄表單對(duì)象form。第5行是判斷用戶是否提交表單。第6~13行是用戶提交表單之后執(zhí)行的代碼。第6行是以用戶名為基準(zhǔn)查詢用戶數(shù)據(jù)。第7行是判斷是否存在該用戶。第8行是當(dāng)用戶不存在時(shí)flash的提示信息。第9行是判斷密碼是否正確。第10~13行是用戶名與密碼均正確時(shí)執(zhí)行的代碼。第10行是“記住我”功能的實(shí)現(xiàn)。第12~13~行是將 URL重定向到下一頁或藍(lán)本main的首頁。第15行是當(dāng)密碼不正確時(shí)flash的提示信息。第16行是渲染用戶登錄界面。

2.運(yùn)行結(jié)果

將用戶登錄中的內(nèi)容都完成以后，通過瀏覽器以及URL就可以查看運(yùn)行結(jié)果了。接下來運(yùn)行程序，然后在瀏覽器中輸入http://127.0.0.1:5000/user/ login/，并輸入登錄信息之后的運(yùn)行結(jié)果如圖12.12所示。

單擊圖中的【立即登錄】按鈕，顯示頁面如圖所示。

3.用戶退出

用戶登錄之后需要切換賬號(hào)或者退出網(wǎng)站時(shí)，需要提供用戶退出功能，接下來講解用戶退出功能實(shí)現(xiàn)。

上述代碼是用戶退出的實(shí)現(xiàn)。第1行是配置函數(shù)logout()的路由。第3行是調(diào)用系統(tǒng)內(nèi)置的退出函數(shù)。第5行是將URL重定向到藍(lán)本main的首頁。

4.用戶退出運(yùn)行結(jié)果

將用戶退出中的視圖函數(shù)編寫完成之后，運(yùn)行程序并登錄網(wǎng)站，運(yùn)行結(jié)果如圖所示。

單擊圖中的【退出】按鈕，運(yùn)行結(jié)果如圖所示。

? 用戶信息展示

本系統(tǒng)提供了用戶信息展示功能，即用戶詳情接口。用戶可以通過用戶詳情接口查看自己的相關(guān)信息，接下來詳細(xì)講解用戶詳情功能的實(shí)現(xiàn)。

1.視圖設(shè)計(jì)

上述代碼是用戶詳情的實(shí)現(xiàn)。第2行是配置函數(shù)profile()的路由。第4行是將當(dāng)前用戶的頭像URL賦值給變量“img_url”。第5行是將當(dāng)前用戶的頭像URL渲染到用戶詳情顯示頁中。

2.運(yùn)行結(jié)果

將用戶詳情中的內(nèi)容都完成以后，通過瀏覽器以及URL就可以查看運(yùn)行結(jié)果了。接下來運(yùn)行程序，然后在瀏覽器中輸入http://127.0.0.1:5000/user/profile/，運(yùn)行結(jié)果如圖所示。

在圖中，用戶名、郵箱信息都是以只讀形式展示的，無法編輯。

? 用戶信息修改

隨著時(shí)間的推移，用戶的信息可能會(huì)發(fā)生變化，因此需要提供用戶信息修改的功能。本系統(tǒng)主要設(shè)計(jì)了三個(gè)方面的用戶信息修改，分別是修改密碼、修改郵箱、修改頭像。接下來詳細(xì)講解這三部分內(nèi)容的實(shí)現(xiàn)。

1.修改密碼

大家在銀行辦理銀行卡后，需要設(shè)置密碼，但當(dāng)設(shè)置好后會(huì)有提示告知：為保證賬戶安全，請(qǐng)每隔一段時(shí)間修改一次密碼。而在網(wǎng)站中也會(huì)出現(xiàn)類似的安全問題，因此接下來講解修改密碼功能實(shí)現(xiàn)。

（1）視圖設(shè)計(jì)

上述代碼是用戶修改密碼的實(shí)現(xiàn)。第2行是配置函數(shù)editpw()的路由。第4行是創(chuàng)建修改密碼的表單對(duì)象。第6行是判斷用戶輸入的原始密碼是否正確，若正確則執(zhí)行第7行代碼。第7行是將提交的新密碼賦值給當(dāng)前用戶的密碼變量“current_user.password”。第8行是將修改之后的密碼更新到數(shù)據(jù)庫(kù)中。第10行是將URL重定向到藍(lán)本user的登錄界面。第12行是用戶輸入的原始密碼錯(cuò)誤時(shí)執(zhí)行的代碼。第13行是渲染修改密碼頁面。

（2）運(yùn)行結(jié)果

將修改密碼中的內(nèi)容都完成以后，通過瀏覽器以及URL可以查看運(yùn)行結(jié)果。接下來運(yùn)行程序，然后在瀏覽器中輸入http://127.0.0.1:5000/user/editpw/，并輸入原始密碼和新密碼，運(yùn)行結(jié)果如圖所示。

單擊圖中的【確定】按鈕，跳轉(zhuǎn)到登錄界面，如圖所示。

2.修改郵箱

當(dāng)用戶常用的郵箱更換時(shí)，本系統(tǒng)也可以提供修改，只需要再次激活即可。接下來講解修改郵箱功能的實(shí)現(xiàn)。

（1）視圖設(shè)計(jì)

上述代碼是用戶修改郵箱的實(shí)現(xiàn)。第2行是配置函數(shù)editemail()的路由。第4行是創(chuàng)建修改郵箱的表單對(duì)象。第6行是生成token并賦值給變量“token”。第7~8行是發(fā)送郵件給新郵箱。第11行是將修改之后的郵箱賦值給當(dāng)前用戶的郵箱變量“current_user.email”。第12行是將當(dāng)前用戶的激活狀態(tài)置為False。第13行是將修改后的郵箱信息更新到數(shù)據(jù)庫(kù)中。第14行是將URL重定向到藍(lán)本main的首頁。第15行是渲染修改郵箱界面。

（2）運(yùn)行結(jié)果

將修改郵箱中的內(nèi)容都完成以后，通過瀏覽器以及URL可以查看運(yùn)行結(jié)果。接下來運(yùn)行程序，然后在瀏覽器中輸入http://127.0.0.1:5000/user/editemail/，并輸入新郵箱，運(yùn)行結(jié)果如圖所示。

單擊圖中的【確定】按鈕，跳轉(zhuǎn)到首頁，顯示結(jié)果如圖所示。

其余運(yùn)行結(jié)果及操作與注冊(cè)時(shí)的郵件激活相同，此處不再贅述。

3.修改頭像

隨著對(duì)新事物的接觸，很多用戶都會(huì)更換自己的頭像來凸顯自己跟隨潮流，因此修改頭像可以說是一個(gè)非常重要且不可缺少的一個(gè)功能。接下來詳細(xì)講解修改頭像功能的實(shí)現(xiàn)。

（1）視圖設(shè)計(jì)

上述代碼是用戶修改頭像的實(shí)現(xiàn)代碼。第2行是配置函數(shù)icon()的路由。第4行是創(chuàng)建修改頭像的表單對(duì)象。第6~7行是生成隨機(jī)頭像名。第6行是將用戶提交的文件名賦值給變量“suffix”。第7行是調(diào)用生成隨機(jī)數(shù)函數(shù)，生成一個(gè)隨機(jī)字符串再加上變量“suffix”的值作為最終的文件名，并賦值給變量“filename”。第8行是保存上傳的文件。第9~10行是拼接上傳的文件路徑。第11~13行是生成上傳頭像的縮略圖并再次保存。第11行打開文件內(nèi)容，并將文件內(nèi)容賦值給變量“img”。第12行是重新定義圖片的大小。第13行是再次保存圖片。第15行是判斷當(dāng)前用戶的頭像是否是默認(rèn)頭像，若不是則執(zhí)行下面代碼。第16~18行是將原來的頭像刪除。第20行是將文件名賦值給當(dāng)前用戶的頭像變量“current_user.icon”。第21行是將文件保存在數(shù)據(jù)庫(kù)中。第24行是將頭像的URL賦值給變量“img_url”第25行是渲染修改頭像頁面。

（2）隨機(jī)數(shù)生成函數(shù)

上述修改頭像功能的實(shí)現(xiàn)，使用了隨機(jī)數(shù)生成函數(shù)，接下來詳細(xì)講解隨機(jī)數(shù)生成函數(shù)的實(shí)現(xiàn)。

上述代碼是用戶修改郵箱的實(shí)現(xiàn)代碼。第3行是引入random模塊。第4行是定義基礎(chǔ)數(shù)據(jù)即隨機(jī)數(shù)從變量“base_str”中隨機(jī)抽取。第5行是將生成的隨機(jī)數(shù)返回。

（3）運(yùn)行結(jié)果

將修改頭像中的內(nèi)容都完成以后，通過瀏覽器以及URL可以查看運(yùn)行結(jié)果。接下來運(yùn)行程序，然后在瀏覽器中輸入http://127.0.0.1:5000/user/ icon/，運(yùn)行結(jié)果如圖所示。

單擊圖中的【瀏覽】按鈕，選擇相應(yīng)頭像，如圖所示。

博客管理

博客系統(tǒng)中主要分為兩部分的內(nèi)容，一部分是用戶管理；另一部分就是博客的管理，本節(jié)主要包括發(fā)表博客、收藏博客、“我的博客”展示、刪除博客四部分內(nèi)容。接下來詳細(xì)講解這四部分內(nèi)容的實(shí)現(xiàn)。

? 發(fā)表博客

博客發(fā)表的功能在首頁管理的視圖函數(shù)中已講解，接下來展示發(fā)表博客的運(yùn)行結(jié)果。登錄后并進(jìn)入網(wǎng)站首頁，并填寫博客內(nèi)容，運(yùn)行結(jié)果如圖所示。

單擊圖中的【發(fā)表】按鈕，顯示結(jié)果如圖所示。

? 收藏博客

大家在博客上看到比較喜歡的博客都會(huì)進(jìn)行收藏，接下來講解博客的收藏功能實(shí)現(xiàn)。

1.視圖設(shè)計(jì)

上述代碼是收藏博客的實(shí)現(xiàn)。第2行是定義函數(shù)collect()的路由。第5行是判斷用戶是否收藏過這個(gè)博客，若收藏過則執(zhí)行第7行代碼。第7行是取消收藏。第10行是收藏博客。第11行是返回結(jié)果“ok”。

2.運(yùn)行結(jié)果

將收藏博客中的內(nèi)容都完成以后，通過瀏覽器可以查看運(yùn)行結(jié)果。接下來運(yùn)行程序，然后進(jìn)入網(wǎng)站首頁并登錄，運(yùn)行結(jié)果如圖所示。

單擊圖中博客對(duì)應(yīng)的【收藏】，顯示結(jié)果如圖所示。

? “我的博客”展示

在登錄網(wǎng)站之后，可通過接口來對(duì)自己發(fā)表的博客進(jìn)行查看并操作，接下來講解“我的博客”展示。

1.視圖設(shè)計(jì)

上述代碼是“我的博客”的實(shí)現(xiàn)。第1行是定義函數(shù)myposts ()的路由。第3行是創(chuàng)建博客表單對(duì)象。第4行是讀取頁數(shù)信息。第5~7行是按需求進(jìn)行分頁查詢博客并賦值給變量“pagination”。第8行將分頁內(nèi)的博客信息賦值給變量“posts”。第9~11行是渲染“我的博客”頁面。

2.運(yùn)行結(jié)果

將“我的博客”展示中的內(nèi)容都完成以后，通過瀏覽器以及URL可以查看運(yùn)行結(jié)果。接下來運(yùn)行程序，然后在瀏覽器中輸入http://127.0.0.1:5000/posts/myposts/7，其中最后數(shù)字“7”是當(dāng)前用戶的id，運(yùn)行結(jié)果如圖所示。

? 刪除博客

博客的內(nèi)容可能會(huì)過時(shí)或者自己不想展示時(shí)，可以將博客刪除，接下來講解刪除博客內(nèi)容。

1.視圖設(shè)計(jì)

上述代碼是刪除博客的實(shí)現(xiàn)。第2行是定義函數(shù)delpost()的路由。第3行是創(chuàng)建博客表單對(duì)象。第4行是通過博客id查找博客然后賦值給變量“p”。第5行是判斷“p”是否存在，存在則執(zhí)行下面代碼。第6行是刪除博客“p”。第7行將URL重定向到('posts.myposts',uid=uid)。第8行是當(dāng)博客不存在的時(shí)候執(zhí)行，返回“無此博客”。

2.運(yùn)行結(jié)果

將刪除博客中的內(nèi)容都完成以后，通過瀏覽器以及URL可以查看運(yùn)行結(jié)果。接下來運(yùn)行程序，然后在瀏覽器中輸入http://127.0.0.1:5000/posts/myposts/7，其中最后數(shù)字“7”是當(dāng)前用戶的id，運(yùn)行結(jié)果如圖所示。

查詢需要?jiǎng)h除的博客，并單擊【刪除】，顯示結(jié)果如圖所示。

單擊【確定】之后，顯示結(jié)果如圖所示。

小結(jié)：Python Web開發(fā)—Flask實(shí)戰(zhàn)—項(xiàng)目概覽及準(zhǔn)備、頁面設(shè)計(jì)、表單管理、首頁管理、用戶管理、博客管理

主要講解使用Flask框架完成博客系統(tǒng)的實(shí)現(xiàn)，其中包括項(xiàng)目概念及準(zhǔn)備、頁面設(shè)計(jì)、表單管理、首頁管理、用戶管理、博客管理六部分內(nèi)容。對(duì)于本章內(nèi)容，大家要跟著項(xiàng)目的內(nèi)容編程，并在編程過程中勤思考，開闊思維，最終達(dá)到獨(dú)立使用Flask框架編寫網(wǎng)站系統(tǒng)。