Python Web開發(fā)—Django實戰(zhàn)—項目概覽及準備、用戶管理、頁面設計

時間：2023-08-31 11:12:01 | 來源：網(wǎng)站運營

時間：2023-08-31 11:12:01 來源：網(wǎng)站運營

Python Web開發(fā)—Django實戰(zhàn)—項目概覽及準備、用戶管理、頁面設計：介紹了Tornado概述與安裝（Python Web開發(fā)—Tornado高并發(fā)處理—Tornado概述與安裝、協(xié)程的使用、Websocket的運用、Tornado的運行和部署、Tornado操作數(shù)據(jù)庫），從本章開始進入Web高級部分，即項目實戰(zhàn)，本章講解Django項目實戰(zhàn)——圖書管理系統(tǒng)，通過從用戶管理、頁面設計、圖書管理、作者信息管理、出版社信息管理以及分類管理六部分內(nèi)容來進行講解。




項目概覽及準備

? 項目概覽及準備

圖書管理系統(tǒng)是通過互聯(lián)網(wǎng)對圖書及相關信息進行管理的一個信息管理系統(tǒng)，項目編寫的目的如下：

減少人力成本和管理費用

提高信息的準確性和信息的安全

改進管理

良好的人機交互界面，操作簡便

圖書管理系統(tǒng)分為用戶管理、圖書管理、作者信息管理、出版社信息管理、分類管理五大模塊，其功能模塊圖如圖所示。

上述內(nèi)容介紹了圖書管理系統(tǒng)的目的及功能，接下來進行數(shù)據(jù)庫設計，本章主要設計了作者（author）、書籍（book）、分類（classify）、出版社（publish）以及書籍與作者的聯(lián)系表（book_author），具體如下所示：

models.py

上述代碼創(chuàng)建了數(shù)據(jù)表及模型類，其中第16~18行是建立各表之間的聯(lián)系，第16行在書籍表中創(chuàng)建外鍵“Publish”，第17行是在數(shù)據(jù)表中創(chuàng)建外鍵“Classify”，第18行創(chuàng)建書籍與作者的聯(lián)系表（書籍與作者多對多關系）。

注意：

用戶表在Django中自動生成，無須手動添加。

設計數(shù)據(jù)庫時確保安裝了MySQL數(shù)據(jù)庫，并安裝了PyMySQL庫。

將數(shù)據(jù)庫相關配置信息修改為MySQL，并設置配置信息，具體如第7章中Django Admin站單管理。

創(chuàng)建外鍵時參數(shù)‘on_delete = models.CASCADE’不可少，此處為Django2.0的更新內(nèi)容，缺少則報錯。

接下來生成遷移文件（python manage.py makemigrations）并執(zhí)行遷移（python manage.py migrate），執(zhí)行成功之后，數(shù)據(jù)庫中表格如圖所示。

在圖中，前5張表格是編寫的模型類生成，其他表格則是Django框架自動生成。

本項目使用了Bootstrap框架來對前端頁面設計布局，并使用了jQuery對頁面效果進行控制，因此在開始項目之前還需保證項目中安裝了Bootstrap框架和jQuery。

用戶管理

用戶管理是管理所有注冊并登錄本系統(tǒng)的用戶信息，對用戶的登錄和退出做到驗證管理，確保安全，最終實現(xiàn)用戶信息的管理（注冊、登錄、刪除、修改）。

? 用戶注冊

用戶登錄/注冊是每個網(wǎng)站必備的功能，本小節(jié)先講解用戶注冊模塊的實現(xiàn)。

1.用戶注冊界面設計

注冊界面應當盡可能簡潔明了，并且要將網(wǎng)站所需的信息都盡可能獲取，本項目主要是設計了用戶名、密碼及郵箱這三個信息來進行注冊，具體代碼參考教材11.2.1節(jié)。

上述代碼中第6行是引入Bootstrap中CSS樣式；第7~15行是自定義CSS樣式；第18行是顯示錯誤信息；第19~39行是整個注冊頁面的主要內(nèi)容，包括第22~36行的表單內(nèi)容，其中含有用戶名（username）、密碼（password）和郵箱（email）三部分的內(nèi)容，最后有兩個控制按鈕，分別為注冊（跳轉(zhuǎn)到‘/regist/’）和返回（跳轉(zhuǎn)到‘/login/’）。

2.視圖設計

將注冊模板設計好之后，通過視圖函數(shù)來實現(xiàn)整個頁面的功能。

1）register()函數(shù)

上述代碼是注冊功能的實現(xiàn)。第2~4行判斷請求方法是否為GET，若是，則實例化Regist對象，并賦值給obj，最終將信息傳送并渲染到register.html頁面；第6~10行是若請求方法不是GET，則以POST方式實例化Regist()對象，并最終創(chuàng)建一個新用戶（將數(shù)據(jù)存入數(shù)據(jù)庫中），最后跳轉(zhuǎn)到登錄視圖函數(shù)中。

2）Regist類

上述代碼是注冊頁面中三個信息的驗證以及錯誤提示。

3.配置URL

上述內(nèi)容已經(jīng)將注冊的功能都實現(xiàn)了，接下來配置URL。在項目的url.py文件的urlpatterns列表中加入以下代碼：

4.運行效果

接下來運行項目并在瀏覽器中輸入127.0.0.1:8000/regist查看運行結(jié)果，運行結(jié)果如圖所示。

注意：Django中默認開啟CSRF，本項目將此內(nèi)容注釋（線上項目不建議），在項目中settings.py文件的MIDDLEWARE列表中注釋CSRF功能，具體示例如下：

? 用戶登錄

用戶在網(wǎng)站注冊成功之后，可以通過登錄界面進行登錄，驗證成功之后跳轉(zhuǎn)到網(wǎng)站的主頁面，接下來介紹用戶的登錄功能。

1.用戶登錄界面設計

上述代碼是用戶登錄界面的主體代碼，包括用戶名、密碼、登錄按鈕以及注冊按鈕。第13行是登錄按鈕，直接提交表單；第14~16行是跳轉(zhuǎn)到注冊頁面，并執(zhí)行注冊。

登錄界面除了Bootstrap框架自帶的CSS樣式，還編寫了一些自定義樣式，樣式代碼如下：

2.視圖設計

1）log_in()函數(shù)

上述代碼與注冊中register()函數(shù)類似，其中第7~17行是對用戶登錄信息的判斷；第9行是將用戶輸入并通過Log_in實例驗證過的用戶名和密碼與數(shù)據(jù)庫中數(shù)據(jù)進行比對，比對結(jié)果賦值給‘user’；第11行若用戶存在，則直接登錄成功并跳轉(zhuǎn)到網(wǎng)站首頁；第15行是用戶不存在，重新渲染登錄界面，第17行是Log_in實例未通過驗證，重新渲染登錄界面。

2）Log_in類

上述代碼主要是對登錄的信息進行設置并驗證，與注冊中Regist類類似，此處不再贅述。

3.配置URL

在項目的url.py文件的urlpatterns列表中加入以下代碼：

4.運行效果

完成功能及頁面的設計以后，運行項目并在瀏覽器中輸入127.0.0.1:8000/login/查看效果，運行結(jié)果如圖所示。

? 修改密碼

用戶注冊網(wǎng)站后，可以根據(jù)需要修改登錄賬號的密碼，接下來講解修改密碼功能。

1.修改密碼頁面設計

上述代碼是修改密碼的主體代碼，主要包括原始密碼和新密碼兩個輸入框以及確定和返回兩個按鈕。

2.視圖設計

修改密碼頁面設計完成之后就是實現(xiàn)修改密碼功能并修改數(shù)據(jù)庫，主要的視圖函數(shù)是set_password()函數(shù)，代碼如下

上述代碼中第5行將用戶輸入的原始密碼賦值給oldpwd；第6行將用戶輸入的新密碼賦值給newpwd；第7行將發(fā)起請求的用戶對象賦值給user；第8行進行檢測用戶輸入的舊密碼是否正確，正確則執(zhí)行設置新密碼（第9行），并保存到數(shù)據(jù)庫中（第10行）；第11行跳轉(zhuǎn)到登錄界面，第12~13行是原始密碼錯誤時，跳轉(zhuǎn)到修改密碼界面。

3.配置URL

在項目的url.py文件的urlpatterns列表中加入以下代碼：

4.運行效果

完成功能及頁面的設計以后，運行項目并在瀏覽器中輸入127.0.0.1:8000/set_password/查看效果，運行結(jié)果如圖所示。

當用戶將原始密碼輸入錯誤時，重新跳轉(zhuǎn)修改密碼頁面，原始密碼輸入正確則跳轉(zhuǎn)到登錄界面。

頁面設計

Web網(wǎng)站開發(fā)中很大一部分是進行頁面設計，網(wǎng)站最終是要展示給用戶觀看及使用的，因此頁面設計也是非常重要的，接下來介紹圖書管理系統(tǒng)的頁面設計。

? 基頁面

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

上述代碼是圖書管理系統(tǒng)網(wǎng)站的基頁面，網(wǎng)站的主要界面均繼承自它，因此內(nèi)容比較重要。 第6~8行是引入jQuery以及Bootstrap框架。第9~40行是編寫自定義網(wǎng)站樣式，主要包括body、header類、left類的樣式。第41~43行是為其他頁面編寫或引入CSS樣式內(nèi)容所留下的模板塊。第48~64行是整個網(wǎng)站的頭，即網(wǎng)站的橫向?qū)Ш綑冢渲械?9~50行是圖片標簽，即千鋒LOGO圖片，并添加鏈接到首頁，第51~53行是“圖書管理系統(tǒng)”字樣并添加鏈接到首頁，第54~55行是首頁鏈接，第56~57行是歡迎用戶，第58~60行是注銷登錄，第61~63行是修改密碼。第65~75行是網(wǎng)站左邊欄的內(nèi)容，包括操作、作者、出版社和書籍分類四部分內(nèi)容，分別添加鏈接到首頁、作者頁、出版社頁和書籍分類頁。第76~87行是網(wǎng)站中其他頁面的主體內(nèi)容，其中78~81行是用來顯示名為book_list塊內(nèi)容的，即其他頁面中將要顯示的內(nèi)容塊命名為book_list就可以在此處div標簽中顯示，第84~86行同理。第89~91行是為其他頁面編寫或引入JS內(nèi)容所留下的模板塊。

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

? 首頁

首頁主要是將書籍信息顯示出來。

上述代碼是網(wǎng)站的首頁代碼，將所有書籍信息顯示出來。第6~8行搜索書籍輸入框以及搜索觸發(fā)按鈕。第10~11行是添加書籍按鈕，直接跳轉(zhuǎn)到添加書籍界面。第12~44行是首頁主體顯示內(nèi)容，以表格形式顯示書籍信息，主要包括編號{{ forloop.counter }}、書名{{ book.title }}、價格{{ book.price }}、出版社{{ Website may be available for web development ideas }}、出版時間{{ book.date}}、分類{{ book.classify.category }}、作者{{author.name }}、操作（編輯、刪除）字段，前6個字段以for循環(huán)形式將書籍遍歷顯示在表格中（第24~42行），作者可能有多個，因此使用for循環(huán)遍歷在表格中（第33~35行）。

由于書籍數(shù)量較大，如果將所有書籍都在一個頁面上顯示會導致整個網(wǎng)站的用戶體驗非常差，因此在首頁的設計上添加了分頁顯示的效果，使網(wǎng)站的整體體驗更優(yōu)化。具體如下：

上述代碼是對書籍信息數(shù)據(jù)實現(xiàn)分頁顯示。第4~9行是判斷整個分類數(shù)據(jù)有沒有上一頁，若有，則“上頁”按鈕跳轉(zhuǎn)到上一頁，若沒有，則不能跳轉(zhuǎn)。第10~13行將書籍的頁數(shù)用for循環(huán)顯示在網(wǎng)站的下方（本頁面設計的是每頁顯示5條，在本章的圖書管理中有詳細講解）。第14~19行是判斷整個分類數(shù)據(jù)有沒有下一頁，若有，則“下頁”按鈕跳轉(zhuǎn)到下一頁，若沒有，則不能跳轉(zhuǎn)。

? 分類管理頁面設計

分類管理是管理書籍的類別添加和顯示的，其中頁面設計主要包括menu_classify.html和menu_classify_edit.html兩個文件，前者是顯示書籍類別信息的頁面，后者是編輯書籍類別信息的頁面。

menu_classify.html

分類顯示頁面主要包括數(shù)據(jù)展示、分頁和添加數(shù)據(jù)三部分內(nèi)容。

上述代碼是書籍類別顯示的代碼，以表格形式展示書籍分類信息，主要包括序號、類別和操作，其中{{ forloop.counter }}是書籍分類的序號，{{ categ.category }}是分類名稱，操作中包含編輯和刪除兩個按鈕。

書籍分類數(shù)據(jù)較多時，也可以考慮進行分頁顯示，因此在書籍分類的信息顯示頁面也采用了分頁顯示，具體代碼與首頁中的分頁實現(xiàn)相同。

注意：以上兩部分代碼（數(shù)據(jù)展示和分頁）是編寫在{{block book_list}}與{{endblock}}塊中的。

圖書管理系統(tǒng)中若有新的書籍分類出現(xiàn)，則需要向數(shù)據(jù)庫中添加新的書籍分類，本系統(tǒng)通過jQuery來實現(xiàn)書籍分類添加功能，具體如下：

上述代碼通過jQuery中的Ajax技術進行數(shù)據(jù)傳送最終實現(xiàn)書籍分類的添加。第3~12行是當id為add_classify的按鈕單擊時觸發(fā)。其中第4行將name=category的值賦給變量$classify。第5~12行通過Ajax技術將變量$classify的值以POST的方式傳送到url為/ul/menu/classify/add/的視圖函數(shù)中，最終通過視圖函數(shù)完成書籍分類信息的添加。

menu_classify_edit.html

當遇到書籍分類消息需要修改時，需要修改頁面來將數(shù)據(jù)進行修改。書籍分類修改代碼如下：

上述代碼實現(xiàn)了書籍分類信息的修改。第2~11行均屬于{{block book_list}}塊中。第2~3行是表單的頭標簽內(nèi)容，通過{{ classify.id }}來控制提交數(shù)據(jù)的修改。第5~7行是書籍分類修改框，其中原始數(shù)據(jù)為{{classify.category }}，修改之后可以單擊‘修改’按鈕（第9行）提交修改之后的表單，交由相關視圖函數(shù)進行數(shù)據(jù)庫修改，當不想修改時可單擊‘取消’按鈕（第10行）進行取消操作。

? 圖書管理頁面設計

圖書管理頁面是顯示書籍的管理信息的，其中頁面設計主要包括addbook.html、editbook.html、query.html三個文件，第一個文件是添加書籍信息的顯示頁面，第二個文件是編輯書籍信息的顯示頁面，第三個是查詢書籍信息的顯示頁面。

addbook.html

添加書籍信息頁面數(shù)據(jù)量比較大，因此使用了表單來實現(xiàn)。

上述代碼實現(xiàn)了添加書籍信息頁面，整個表單包括書名、價格、出版社、出版日期、分類、作者信息。書名（第4~5行）、價格（第8~9行）、出版日期（第21~22行）是在輸入框中手動輸入，頁面設計相對簡單，此處不詳細介紹。第12~18行是出版社信息，采用select標簽（即下拉單選框）設計，使用for循環(huán)將數(shù)據(jù)庫中出版社信息顯示在下拉單選框中。第25~30行是分類信息的設計，設計模式與出版社信息相同。第34~40行是作者信息設計，采用select標簽以及multiple="multiple"屬性進行多行顯示下拉多選框，其他設計模式與出版社信息相同。第42行的‘添加’按鈕將表單信息提交到添加書籍的視圖函數(shù)中進行書籍數(shù)據(jù)處理，并保存到數(shù)據(jù)庫中。若不想添加可以單擊‘取消’按鈕（第43~44行），取消添加。

editbook.html

本系統(tǒng)還提供了書籍信息修改功能，因此需要書籍信息編輯的頁面，接下來介紹編輯書籍信息頁面設計。

上述代碼實現(xiàn)了書籍信息修改頁面，包含的內(nèi)容與添加書籍信息頁面內(nèi)容類似，所不同的是，書籍信息修改頁面通過觸發(fā)編輯的書籍id即{{ book_obj.id }}將該書籍的信息顯示在相應的字段信息上，如第4~6行的書名value={{ book_obj.title }}以及第14~24行的出版社，通過for語句與if語句來判斷需修改的書籍中出版社id與表單中出版社中的id是否匹配，匹配則下拉單選框中值等于出版社名稱，即{{ publish.name }}；其他信息與之相同，此處不再贅述。修改完成之后通過單擊第58行中‘修改’按鈕提交表單到相應的視圖函數(shù)，完成修改，并將修改之后的信息保存到數(shù)據(jù)庫中，若不想修改可以單擊‘取消’按鈕（第59行），取消添加。

query.html

當需要在圖書館查找書籍時，因為書籍太多，如果沒有相關索引，很難找到需要的書籍，因此本系統(tǒng)提供了書籍的查詢功能，查詢到的書籍在query.html頁面中顯示。Website may be available for web development ideas當需要在圖書館查找書籍時，因為書籍太多，如果沒有相關索引，很難找到需要的書籍，因此本系統(tǒng)提供了書籍的查詢功能，查詢到的書籍在query.html頁面中顯示。

上述代碼實現(xiàn)了查找到的書籍顯示頁面。第4~36行是使用for循環(huán)將查詢到的書籍數(shù)據(jù)依次顯示在表格中，最終顯示在頁面中。第5~35行是表格中顯示的信息，包括表頭以及數(shù)據(jù)信息。第6~15行是表格中表頭信息，包括編號、書名、價格、出版社、出版時間、分類、作者和操作八個字段。第16~32行是顯示書籍信息的，包括編號{{ forloop.counter }}、書名{{ book.title }}、價格{{ book.price }}、出版社{{ Website may be available for web development ideas }}、出版時間{{ book.date}}、分類{{ book.classify.category }}、作者{{author.name }}和操作（編輯和刪除），第24~26行是將作者一一顯示（書籍作者可能有多個）。第33~34行是顯示查詢失敗信息（書籍信息不存在）。

? 作者管理頁面設計

在閱讀書籍時，大部分的讀者都會以作者為標準來判斷書籍是否符合自己，或者書籍是否值得閱讀，因此本系統(tǒng)將作者信息進行單獨管理，添加了作者管理頁面；其中頁面設計主要包括兩個文件：menu_author.html和menu_author_edit.html；前者是作者信息的顯示頁面，后者是作者信息修改頁面。

menu_author.html

作者信息顯示頁面主要包括數(shù)據(jù)顯示、分頁和添加作者三部分內(nèi)容組成。

注意：以上兩部分代碼（數(shù)據(jù)顯示和分頁）是編寫在{{block book_list}}與{{endblock}}塊中的。

作者信息添加完成以后是由Ajax技術傳送到后臺視圖進行處理的，具體如下：

上述代碼通過jQuery中的Ajax技術進行數(shù)據(jù)傳送最終實現(xiàn)作者信息的添加。第3~16行是當id為add_author的按鈕單擊時觸發(fā)。第4~7行將name=name的值賦給變量$name，name=sex的值賦值給變量$sex，name=age的值賦值給變量$age，name=university 的值賦值給變量$university。第8~16行通過Ajax技術將變量$name、$sex、$age、$university的值以POST的方式傳送到url為/ul/menu/ author /add/的視圖函數(shù)中，最終通過視圖函數(shù)完成作者信息的添加。

menu_author_edit.html

本系統(tǒng)還對作者信息提供了修改功能，接下來講解作者信息修改頁面設計。

上述代碼實現(xiàn)了作者信息修改頁面。第2行是通過作者id{{ author_obj.id }}來將表單數(shù)據(jù)以POST的方式提交給作者信息修改的相關視圖函數(shù)。第4~23行是顯示作者信息的表單代碼，其中包括姓名、性別、年齡、畢業(yè)院校等信息，其中輸入框中的原始值value均是id為{{ author_obj.id }}的作者對應信息，分別是姓名{{author_obj.name }}、性別{{author_obj.sex}}、年齡{{author-_obj.age }}、畢業(yè)院校{{author_obj.university }}。第24行是提交修改表單信息。第25行是取消修改按鈕。

? 出版社管理頁面設計

出版社管理頁面主要包括出版社信息展示和出版社信息修改兩部分內(nèi)容，其中頁面設計包括menu_publish.html和menu_publish_edit.html兩個文件，前者是出版社信息顯示頁面設計，后者是出版社信息修改頁面設計。

menu_publish.html

出版社信息顯示頁面主要包含出版社信息展示、分頁顯示和添加出版社三部分內(nèi)容。接下來講解出版社信息展示部分內(nèi)容。

上述代碼實現(xiàn)了出版社信息展示頁面。第1~2行是返回按鈕，當查看出版社信息之后不做任何操作或者完成操作之后可以單擊返回按鈕。第3~6行是添加出版社按鈕，單擊添加出版社按鈕之后觸發(fā)添加界面。第7~38行是添加出版社信息界面，包括出版社名、出版社地址以及按鈕（確定或取消）三部分內(nèi)容，填寫相關信息單擊確定按鈕，則由Ajax技術傳送數(shù)據(jù)到后臺視圖函數(shù)。第39~57行是顯示出版社信息的表格代碼，包括表頭和表身信息。第40~45行是表頭信息，主要包括序號、出版社名、出版社地址和操作四個字段信息。第46~56行是出版社具體信息，主要使用for循環(huán)將出版社信息依次顯示在表格中，包括序號{{ forloop.counter }}、出版社名{{ publish.name }}、出版社地址{{ publish.addr }}和操作（編輯、刪除）。

分頁部分的內(nèi)容與首頁中分頁相同，此處不再贅述。

注意：以上兩部分代碼（數(shù)據(jù)顯示和分頁）是編寫在{{block book_list}}與{{endblock}}塊中的。

添加出版社信息之后通過Ajax技術傳送給后臺，接下來講解添加出版社信息的處理，代碼如下：

上述代碼通過jQuery中的Ajax技術進行數(shù)據(jù)傳送，最終實現(xiàn)出版社信息的添加。第3~13行是當id為add_ publish的按鈕單擊時觸發(fā)。第4~5行將name=name的值賦給變量$name，name=addr的值賦值給變量$addr。第6~13行通過Ajax技術將變量$name、$addr的值以POST的方式傳送到url為/ul/menu/ publish /add/的視圖函數(shù)中，最終通過視圖函數(shù)完成出版社信息的添加。

menu_publish_edit.html

本系統(tǒng)還對出版社信息提供了修改功能，因此設計了出版社信息修改頁面，接下來講解出版社信息修改頁面設計，代碼如下：

上述代碼實現(xiàn)了出版社信息修改頁面。第2行是通過出版社id{{ publish.id }}來將表單數(shù)據(jù)以POST的方式提交給出版社信息修改的相關視圖函數(shù)。第4~15行是顯示出版社信息的表單代碼，其中包括出版社名稱、出版社地址等信息，其中各輸入框中的原始值value均是id為{{ publish.id }}的出版社的對應信息，分別是出版社名稱{{publish.name }}、出版社地址{{publish.addr}}。第13行是提交修改表單信息。第14行是取消修改按鈕。