Flask 2 + Vue.js 3 實戰派 — Python Web 開發與運維

第1篇 基礎
=
第1章 走進Flask /2
1.1 瞭解Flask /2
1.1.1 Flask的特點 /2
1.1.2 MVC和MTV模式 /3
1.1.3 Flask的核心庫 /4
1.1.4 Flask的擴展庫 /5
1.2 安裝Flask /6
1.2.1 使用國內鏡像源加速安裝第三方包 /6
1.2.2 安裝Python虛擬環境 /6
1.2.3 通過pip命令安裝Flask /7
1.3 利用PyCharm編輯器進行Flask開發 /8
1.4 【實戰】開發第一個Flask應用 /9
1.4.1 使用PyCharm開發一個Flask程序 /9
1.4.2 初步認識Flask程序 /10
1.5 Flask項目的調試模式 /11
1.6 Flask配置的保存/加載 /12
1.6.1 使用app.config屬性保存配置參數 /13
1.6.2 加載配置文件的兩種方法 /13
1.7 採用Flask-Script擴展庫作為項目的啟動方案 /14
1.7.1 安裝Flask-Script /14
1.7.2 用Flask-Script替代默認的Flask應用對象 /14
1.7.3 Flask-Script常用的功能 /15
1.8 Flask在後端開發中的作用 /17
=
第2章 網站的入口——Flask的路由和視圖 /18
2.1 使用Flask中的路由 /18
2.1.1 使用裝飾器@app.route配置路由 /18
2.1.2 使用app.add_url_rule()方法配置路由 /19
2.1.3 查看路由規則 /20
2.1.4 解析動態路由 /21
2.1.5 使用url_for()函數反向解析路由 /21
2.2 認識視圖函數 /22
2.2.1 什麽是視圖函數 /23
2.2.2 視圖函數的底層原理 /23
2.2.3 視圖處理函數 /30
2.3 認識視圖類 /34
2.3.1 什麽是視圖類 /34
2.3.2 利用視圖類進行功能設計 /35
=
第3章 開發頁面——基於Jinja 2模板 /37
3.1 Flask模板引擎——Jinja 2 /37
3.1.1 模板變量 /37
3.1.2 模板標簽 /39
3.1.3 模板過濾器 /42
3.2 模板的高級用法 /44
3.2.1 模板轉義——保證代碼的安全 /44
3.2.2 【實戰】自定義過濾器 /45
3.2.3 【實戰】自定義全局函數 /46
3.2.4 全局模板變量和局部模板變量 /47
3.3 模板繼承 /48
3.3.1 【實戰】設計母版頁 /48
3.3.2 【實戰】設計內容頁 /49
3.3.3 【實戰】設計組件 /50
3.3.4 宏 /51
3.4 配置模板文件 /53
3.4.1 理解HTML、CSS和JavaScript /53
3.4.2 配置靜態文件 /53
3.5 閃現消息 /55
=
第4章 使用數據庫——基於Flask模型 /58
4.1 認識Flask-SQLAlchemy模塊 /58
4.1.1 Flask-SQLAlchemy模塊的參數配置 /59
4.1.2 鏈接常見數據庫的寫法 /60
4.2 認識Flask模型 /61
4.2.1 定義模型 /61
4.2.2 字段的類型 /62
4.2.3 字段的參數 /63
4.2.4 _ _repr_ _()方法 /65
4.3 使用Flask模型操作數據庫 /65
4.3.1 瞭解ORM /65
4.3.2 創建數據庫表 /66
4.3.3 新增數據 /68
4.3.4 查詢數據 /69
4.3.5 修改數據 /77
4.3.6 刪除數據 /77
4.3.7 執行原生SQL語句 /78
4.3.8 事務處理 /79
4.4 認識和操作Flask模型關系 /81
4.4.1 “一對多”關系 /81
4.4.2 “一對一”關系 /84
4.4.3 “多對多”關系 /86
4.5 數據模型的遷移 /89
4.5.1 實例化Migrate 類 /89
4.5.2 初始化 /90
4.5.3 生成遷移腳本 /90
4.5.4 執行遷移 /91
4.5.5 解決執行遷移過程中的報錯 /91
4.5.6 回退到某次修改 /91
4.5.7 從數據庫表到模型 /92
=
第5章 展現界面——基於Flask表單 /94
5.1 HTML表單 /94
5.1.1 【實戰】用戶登錄 /95
5.1.2 【實戰】使用傳統表單上傳文件 /96
5.2 Flask表單 /97
5.2.1 認識WTForms和Flask-WTF /98
5.2.2 表單驗證 /105
5.2.3 【實戰】使用Form-WTF表單上傳文件 /108
5.2.4 【實戰】使用Flask-Uploads擴展庫上傳文件 /110
5.3 使用AJAX提交表單 /114
5.3.1 基於jQuery技術實現AJAX /114
5.3.2 在AJAX請求中設置令牌（csrf_token） /114
5.3.3 【實戰】使用AJAX實現用戶登錄 /115
=
第6章 用戶認證和權限管理——基於Flask-Login庫 /118
6.1 初識Flask-Login庫 /118
6.1.1 安裝Flask-Login庫 /118
6.1.2 Flask-Login庫的使用流程 /118
6.2 【實戰】利用用戶模型實現用戶身份認證及狀態保持 /120
6.2.1 實例化LoginManager對象 /121
6.2.2 定義用戶模型 /121
6.2.3 註冊用戶 /122
6.2.4 登錄用戶 /122
6.2.5 退出用戶 /123
6.2.6 顯示用戶首頁 /123
6.3 【實戰】開發一個Flask用戶權限管理模塊 /124
6.3.1 建立角色模型、用戶模型和權限模型 /124
6.3.2 建立表單 /126
6.3.3 顯示角色 /127
6.3.4 修改角色 /128
6.3.5 登錄裝飾器 /130
6.3.6 權限裝飾器 /131
=
第7章 Flask後台管理——基於Flask-Admin庫 /133
7.1 使用Flask-Admin庫實現後台管理系統 /133
7.1.1 進入後台管理系統 /134
7.1.2 在後台管理系統中設置導航鏈接並美化頁面 /134
7.2 Flask-Admin庫的進階用法 /136
7.2.1 在Admin後台顯示自定義的模型 /136
7.2.2 漢化界面 /137
7.2.3 顯示中文字段 /138
7.2.4 定製頁面功能 /138
7.2.5 上傳圖片 /140
7.2.6 在列表頁面中顯示圖像 /140
7.2.7 自定義超鏈接 /141
7.2.8 批量處理 /143
7.2.9 顯示“一對多”關系字段 /144
7.2.10 與Flask-Login庫結合使用，實現用戶認證 /145
=
第２篇 項目入門實戰
=
第8章 【實戰】使用Flask + Bootstrap框架開發圖書管理系統後台 /149
8.1 設計分析 /149
8.1.1 需求分析 /149
8.1.2 架構設計 /150
8.1.3 最終效果 /150
8.2 開發圖書管理系統後台 /151
8.2.1 規劃工程目錄 /151
8.2.2 搭建母版頁 /152
8.2.3 開發“出版社管理”模塊 /152
8.2.4 開發“作者管理”模塊 /160
8.2.5 開發“圖書管理”模塊 /163
8.2.6 開發首頁 /171
=
第３篇 項目進階實戰
=
第9章 Flask進階 /175
9.1 請求上下文和應用上下文 /175
9.1.1 請求上下文（request context） /175
9.1.2 應用上下文（application context） /176
9.2 鉤子函數 /178
9.3 認識藍圖 /180
9.4 日誌管理 /181
9.5 信號 /182
9.6 測試 /184
9.6.1 單元自動化測試 /185
9.6.2 接口自動化測試 /185
9.6.3 用戶界面自動化測試 /185
9.6.4 瞭解單元測試框架unittest /186
9.6.5 【實戰】使用unittest進行單元測試 /186
9.6.6 【實戰】使用Flask + unittest
進行接口自動化測試 /188
9.6.7 【實戰】使用Pytest進行單元測試 /190
9.6.8 【實戰】使用Flask + Pytest進行接口自動化測試 /192
9.7 使用Flask-Cache庫實現緩存 /194
9.7.1 安裝Flask-Cache庫 /194
9.7.2 瞭解不同的緩存 /194
9.7.3 Flask-Cache庫的常見用法 /194
9.7.4 用Redis作為緩存的後端存儲 /198
9.8 分佈式任務隊列Celery /201
9.8.1 Celery的組件及其工作原理 /201
9.8.2 安裝Celery /202
9.8.3 【實戰】第一個Celery程序 /202
9.9 使用Flask-Mail庫實現郵件發送 /203
9.9.1 安裝Flask-Mail庫 /203
9.9.2 配置變量 /204
9.9.3 獲取授權碼 /204
9.9.4 郵件發送的示例 /205
9.10 認識工廠函數 /206
9.10.1 為什麽要使用工廠函數 /206
9.10.2 創建一個工廠函數 /206
=
第10章 【實戰】使用Flask + Bootstrap框架開發商城系統後台 /209
10.1 設計分析 /209
10.1.1 需求分析 /209
10.1.2 架構設計 /210
10.1.3 最終效果 /210
10.2 開發商城系統後台 /210
10.2.1 規劃工程目錄 /211
10.2.2 開發商品分類模塊 /214
10.2.3 開發商品信息模塊 /222
10.2.4 使用信號和Flask-Mail發送註冊成功郵件 /229
10.2.5 使用Flask-Cache緩存商品數據 /231
10.2.6 開發首頁 /233
10.2.7 使用Celery定時將首頁生成靜態頁 /236
=
第４篇 前後端分離項目實戰
=
第11章 接口的設計與實現 /242
11.1 前後端分離 /242
11.1.1 瞭解前後端分離 /242
11.1.2 為什麽要前後端分離 /243
11.1.3 如何實施前後端分離 /244
11.1.4 前後端分離的技術棧 /245
11.2 設計符合標準的RESTFul接口 /245
11.3 接口開發——基於Flask-RESTFul框架 /247
11.3.1 安裝Flask-RESTFul /247
11.3.2 快速編寫一個Flask API /247
11.3.3 認識請求 /249
11.3.4 認識響應 /253
11.3.5 使用藍圖 /262
11.4 接口安全機制 /262
11.4.1 基於HTTPTokenAuth實現Token認證 /262
11.4.2 基於Flask-JWT-Extended實現JWT認證 /265
11.4.3 基於後端技術的跨域解決方案 /269
11.5 【實戰】利用Flasgger生成專業的Swagger文檔 /271
11.5.1 安裝及配置Flasgger /271
11.5.2 生成Swagger文檔 /271
11.6 使用Flask-RESTX改進Flask-RESTFul /273
11.7 【實戰】實現圖書管理系統的接口 /275
11.7.1 規劃工程目錄 /275
11.7.2 出版社相關接口 /275
11.8 【實戰】使用Postman測試接口 /279
11.8.1 發起GET請求 /279
11.8.2 發起POST請求 /280
11.8.3 發起PUT請求 /280
11.8.4 發起DELETE請求 /281
=
第12章 快速入門前端開發—— Vue.js 3 + Vite + Pinia /282
12.1 前端開發利器——Vue.js框架 /282
12.1.1 認識Vue.js /282
12.1.2 Vue.js 3的新特性 /282
12.2 搭建開發環境 /283
12.2.1 安裝Node.js /283
12.2.2 使用Vue CLI腳手架創建Vue.js 3項目 /284
12.2.3 使用Vite創建Vue.js 3項目 /287
12.2.4 使用Visual Stdio Code編輯器進行前端代碼開發 /290
12.3 Vue.js 3的組合式API /292
12.3.1 選項式API和組合式API的對比 /292
12.3.2 使用＜script setup lang="ts"＞創建組合式API /294
12.3.3 ref()函數和reactive()函數的區別 /295
12.4 Vue.js的基本操作 /296
12.4.1 用插值實現數據綁定 /296
12.4.2 用class和style設置樣式 /297
12.4.3 用v-for實現列表渲染 /298
12.4.4 用v-on或者@綁定事件 /299
12.4.5 用v-model實現雙向數據綁定 /300
12.4.6 用computed計算屬性監聽數據 /301
12.5 用Axios實現數據交互 /302
12.5.1 認識Axios /302
12.5.2 用Axios發送網絡請求 /302
12.5.3 【案例】實現出版社的增加、刪除、修改和查詢 /305
12.6 用Pinia實現狀態管理 /308
12.6.1 安裝和初始化 /309
12.6.2 store——狀態倉庫，用於存儲和管理應用的狀態 /309
12.6.3 state——store中的狀態數據 /310
12.6.4 getters——store中的計算屬性 /311
12.6.5 actions——store中的方法 /312
12.7 用Vue Router庫實現路由管理 /313
12.7.1 瞭解Vue Router庫 /313
12.7.2 安裝和使用 /313
12.7.3 動態路由 /316
12.7.4 路由嵌套 /317
12.7.5 歷史模式和哈希模式 /319
=
第13章 【實戰】用Vue.js 3 + Vite + Pinia + Flask-RESTFul開發商城系統 /321
13.1 設計分析 /321
13.1.1 需求分析 /321
13.1.2 架構設計 /322
13.2 用Vue.js 3開發商城系統的前臺 /322
13.2.1 核心技術點介紹 /322
13.2.2 公共頁面開發 /329
13.2.3 “商品首頁”模塊開發 /332
13.2.4 “商品列表”模塊開發 /337
13.2.5 “商品詳情”模塊開發 /343
13.2.6 “用戶登錄”模塊開發 /346
13.2.7 “購物車管理”模塊開發 /347
13.2.8 “訂單管理”模塊開發 /350
13.2.9 “個人中心”模塊開發 /352
13.3 開發商城系統的後端接口 /357
13.3.1 規劃工程目錄 /357
13.3.2 會員相關接口 /360
13.3.3 商品相關接口 /367
13.3.4 訂單相關接口 /375
13.3.5 基礎接口——“地址信息”接口 /383
=
第５篇 部署及運維
=
第14章 Flask應用的傳統部署 /389
14.1 部署前的準備工作 /389
14.1.1 準備虛擬機 /389
14.1.2 安裝Python 3.9.13 /389
14.1.3 安裝Python虛擬環境 /390
14.1.4 安裝Flask /391
14.2 使用MySQL數據庫 /392
14.2.1 安裝MySQL數據庫 /392
14.2.2 配置MySQL數據庫 /393
14.2.3 客戶端連接MySQL數據庫 /394
14.2.4 【實戰】生成商城系統的數據庫和表 /395
14.3 使用uWSGI進行部署 /396
14.3.1 WSGI、uwsgi和uWSGI的關系 /396
14.3.2 安裝uwsgi /397
14.3.3 啟動並測試uwsgi /397
14.3.4 詳解配置文件 /398
14.3.5 常用命令 /399
14.3.6 【實戰】部署商城系統後台 /399
14.4 用Gunicorn進行部署 /400
14.4.1 安裝Gunicorn /400
14.4.2 啟動服務並測試 /401
14.4.3 編寫配置文件 /402
14.4.4 【實戰】部署商城系統接口 /403
14.5 用Supervisor管理進程 /404
14.5.1 安裝和配置 /404
14.5.2 瞭解配置文件 /404
14.5.3 常用命令 /405
14.5.4 Web監控界面 /405
14.5.5 【實戰】管理進程 /406
14.6 用Nginx進行代理 /407
14.6.1 正向代理和反向代理 /407
14.6.2 為什麽用了uWSGI還需要用Nginx /408
14.6.3 安裝Nginx /408
14.6.4 瞭解配置文件 /409
14.6.5 【實戰】部署商城系統後台 /411
14.6.6 【實戰】部署商城系統接口 /412
14.6.7 【實戰】部署商城系統前臺 /413
14.6.8 【實戰】利用Nginx負載均衡部署商城系統接口 /413
=
第15章 Flask應用的Docker部署 /416
15.1 介紹Docker /416
15.1.1 瞭解Docker /416
15.1.2 虛擬機和容器的區別 /417
15.1.3 瞭解Docker的鏡像、容器和倉庫 /418
15.2 安裝並啟動Docker /419
15.2.1 安裝Docker /419
15.2.2 啟動Docker /420
15.3 操作Docker鏡像 /421
15.3.1 搜索鏡像 /421
15.3.2 獲取鏡像 /421
15.3.3 查看鏡像 /422
15.3.4 導入/導出鏡像 /423
15.3.5 配置國內鏡像倉庫 /423
15.4 操作Docker容器 /424
15.4.1 啟動容器 /424
15.4.2 進入容器 /426
15.4.3 停止容器 /427
15.4.4 刪除容器 /427
15.4.5 復制容器內的文件 /427
15.4.6 查看容器內的日誌 /428
15.5 【實戰】用Docker部署MySQL /428
15.5.1 拉取鏡像 /428
15.5.2 創建容器 /429
15.5.3 進入MySQL容器 /429
15.6 【實戰】用Docker方式部署Redis /429
15.6.1 拉取Redis /429
15.6.2 創建並啟動Redis容器 /430
15.7 製作自己的鏡像——編寫Dockerfile文件 /431
15.7.1 語法規則 /431
15.7.2 構建Nginx鏡像 /432
15.8 將鏡像推送到私有倉庫Harbor中 /433
15.8.1 搭建Harbor私有倉庫 /433
15.8.2 安裝Docker-Compose /433
15.8.3 安裝Harbor /434
15.8.4 登錄Harbor /435
15.8.5 配置、使用Harbor /436
15.9 【實戰】用Docker部署商城系統的接口 /437
15.9.1 拉取並啟動MySQL容器 /438
15.9.2 創建接口鏡像並啟動容器 /438
15.9.3 拉取並啟動Nginx容器 /440
15.10 【實戰】用Docker Compose部署多個容器 /441
15.10.1 編排容器文件 /442
15.10.2 構建和啟動 /443