Vue.js+Django高性能全棧論道

目 錄

第一篇 基礎篇

第1章 現代Web應用開發：全新的紀元 ···································································2

1.1 單頁應用概述 ·································2

1.1.1 從此不必刷新瀏覽器 ························2

1.1.2 前端需要深入業務 ···························3

1.1.3 SPA如何工作 ·································4

1.1.4 閑聊MVVM設計模式 ·····················11

1.1.5 與服務器端通信 ·····························12

1.1.6 SPA的優點和缺點 ··························18

1.2 異步與協程 ··································20

1.2.1 程序、進程、線程與協程 ·················20

1.2.2 並發基礎 ······································23

1.2.3 I/O漫聊 ·······································25

1.2.4 反應式模式：epoll與Event Loop ·······26

1.3 HTTP那些事兒·····························27

1.3.1 HTTP 2的重要性 ···························27

1.3.2 大話協議 ······································28

1.3.3 HTTP 2的六板斧 ···························28

1.3.4 下一代的革命：HTTP 3 ···················30

第2章 ECMAScript與Python 3 ············································································31

2.1 JavaScript簡史······························31

2.2 初識ECMAScript 2015 ···················32

2.2.1 ECMAScript與JavaScript的不同 ·······32

2.2.2 ECMAScript 2015有哪些變化 ···········32

2.2.3 不可不知的DOM ···························39

2.2.4 BOM簡介 ····································40

2.3 新一代Python簡述 ························40

2.3.1 經驗之談：為什麽是Python ·············40

2.3.2 新版本的性能改進 ··························41

2.3.3 深究CPython 3.6的垃圾回收與建議 ···43

第3章 ECMAScript 2015 ····················································································47

3.1 搭建運行ECMAScript開發環境 ·······47

3.1.1 包管理工具NPM ···························47

3.1.2 安裝ECMAScript 2015開發環境 ········48

3.1.3 配置JavaScript編輯器 ·····················51

3.2 ECMAScript 2015必知···················54

3.2.1 let和const ····································54

3.2.2 for循環 ·······································55

3.2.3 箭頭函數 ······································57

3.2.4 默認參數 ······································57

3.2.5 參數的擴展—Spread操作符 ···········58

3.2.6 數據結構Map和原生對象················59

第二篇Vue篇

3.2.7 數據結構Set ·································61

3.2.8 迭代器工具 ···································61

3.2.9 詳解生成器 ···································63

3.2.10 面向對象編程 ······························65

3.2.11 面向對象編程進階 ························70

3.2.12 實戰：利用ES 2015開發仿“反恐精英

CS”游戲 ····································74

第4章 Vue.js化繁為簡 ·························································································82

4.1 初見Vue.js ··································82

4.1.1 解決了什麽問題 ·····························82

4.1.2 Vue.js與jQuery的區別 ····················83

4.1.3 揭秘虛擬DOM ······························84

4.2 上手Vue.js ··································86

4.2.1 最簡化安裝 ···································86

4.2.2 分析由Vue.js構建網頁····················87

4.2.3 數據如何渲染 ································91

4.2.4 必須瞭解的生命周期·······················93

4.3 常用模板語法指令 ·························98

4.3.1 v-if/v-else/v-else-if指令 ····················98

4.3.2 v-show指令 ································100

4.3.3 v-for指令 ···································100

4.3.4 v-bind指令·································102

4.3.5 v-on指令 ···································103

4.4 一招學會事件處理器 ·····················104

4.5 不得不懂的計算屬性和偵聽器 ·········105

4.5.1 計算屬性 ····································105

4.5.2 偵聽器 ·······································106

4.6 常用的表單處理 ···························107

4.6.1 v-model指令 ·······························107

4.6.2 省力的修飾符 ······························110

第5章 Vue.js進階 ······························································································111

5.1 深入組件 ····································111

5.1.1 快速入門 ····································111

5.1.2 父組件與子組件間的數據通信 ·········113

5.1.3 不同組件間的數據通信··················117

5.2 掌握狀態管理Vuex ·······················118

5.2.1 初始化Vuex ································118

5.2.2 state、mutation、action ··················119

5.2.3 getter的使用 ·······························125

5.2.4 Vuex輔助函數·····························126

5.2.5 Vuex的經驗之談··························128

5.3 SPA必備：路由···························130

5.3.1 Vue 路由基礎······························130

5.3.2 常規路由匹配 ······························131

5.3.3 路由匹配 ····································135

5.3.4 編程式導航 ·································136

第6章前端工程化Webpack 4及部署 ····································································137

6.1 vue-cli打包編譯 ···························137

6.2 取代CLI，從“零”揭秘Webpack 4 ····138

6.3 基礎配置 ····································141

6.4 配置開發服務器 ···························145

6.5 配置生產的編譯構建環境 ···············148

6.6 基於HTTP 2的Nginx部署 ·············153

第7章 加速Vue.js項目 ·······················································································155

7.1 打包優化與異步Vue.js ··················155

7.1.1 Webpack打包的工作機制 ···············155

7.1.2 惰性加載 ····································156

7.1.3 動態導入 ····································157

7.1.4 異步組件 ····································157

7.1.5 異步路由 ····································159

7.1.6 大型項目中異步Vuex解決方案 ·······159

7.1.7 打包優化中的反模式 ·····················165

7.2 圖片惰性加載的實現原理 ···············167

7.2.1 IntersectionObserver API介紹 ··········167

7.2.2 在Vue.js中如何實現 ·····················168

7.2.3 性能之談 ····································169

7.3 大文本惰性加載實戰 ·····················171

7.3.1 定製組件 ····································172

7.3.2 指令：v-lazyload-text ·····················173

7.3.3 與服務器端對接 ···························173

7.4 優化資源優先級 ···························174

7.5 進擊的性能Web Workers ················176

7.5.1 Web Workers與線程 ······················176

7.5.2 在Vue.js中如何實現 ·····················176

7.5.3 Vue.js多線程實戰 ························178

7.5.4 Web Workers的限制 ······················183

7.6 離線優先Service Worker ················184

7.6.1 編寫Service Worker註冊腳本 ··········188

7.6.2 構建Service Worker ······················191

7.6.3 運行和調試 ·································193

7.6.4 Service Workers與Web Workers的

 區別 ··········································194

7.7 新一代圖片格式WebP ···················194

7.7.1 WebP及其優缺點 ·························194

7.7.2 在Vue.js中如何實現 ·····················195

7.8 Web性能監測利器：Lighthouse ·······196

7.8.1 在開發者工具中運行 ·····················197

7.8.2 在命令行中運行 ···························197

7.8.3 在Chrome擴展程序中運行 ·············198

第三篇 Django篇

第8章 認識Django ····························································································200

8.1 解讀Django架構 ·························200

8.1.1 全新視角的松耦合設計 ··················200

8.1.2 Django“視圖”的正確理解 ············201

8.1.3 Django項目結構實踐 ····················202

8.1.4 創建自己的Django應用程序 ··········205

8.1.5 URLconfs—Django路由 ··············206

8.1.6 快速開發HTTP接口 ·····················207

8.2 正確入手：Django ORM ················209

8.2.1 從社交應用程序中掌握ORM ··········209

8.2.2 模型定義的最佳實踐 ····················213

8.2.3 QuerySets基礎 ····························215

8.2.4 教你手寫Active Record設計模式 ·····217

第9章 理解Django REST Framework ···································································219

9.1 為什麽使用DRF ··························219

9.2 核心速學手冊 ······························220

9.2.1 序列化 ·······································221

9.2.2 DRF的視圖與路由 ·······················222

9.2.3 ModelSerializer源碼揭秘與更多實例····224

9.2.4 認證與權限 ·································231

9.2.5 DRF動態繪製表單的設計模式 ········235

9.3 實戰：用於SPA的無狀態RESTful服務

器端接口·····································239

9.3.1 介紹 ··········································239

9.3.2 JWT用戶認證 ·····························244

9.3.3 分頁 ··········································247

9.3.4 正確返回及錯誤輸出·····················249

9.3.5 單元測試 ····································250

9.3.6 性能檢測 ····································252

第10章 Django生產部署的藝術 ··········································································253

10.1 準備 ········································253

10.1.1 剪裁Django·······························253

10.1.2 生產/測試開發環境隔離 ··············255

10.1.3 日誌 ········································258

10.2 部署 ········································259

10.2.1 WSGI介紹 ································260

10.2.2 uWSGI基礎 ······························261

10.2.3 uWSGI加速與KSM技術內存

抗泄 ········································263

10.2.4 深入理解uWSGI啟動的機制 ·········266

10.2.5 結合Nginx與輕量化測試wrk ········268

10.3 換台“發動機”—PyPy 3 ···········270

10.3.1 Stackless的無堆棧與PyPy 3

新特性 ·····································271

10.3.2 PyPy 3 + uWSGI + Django 2生產實戰

心得 ········································274

第11章終極優化Django ···················································································280

11.1 WSGI與Django ·························280

11.1.1 WSGI內存管理與OOM現象 ········280

11.1.2 一種內存預熱的方式：重構WSGI···282

11.2 QuerySets優化與設計模式 ············286

11.2.1 QuerySets深度優化·····················287

11.2.2 解讀Django 2最新QuerySets

源碼 ········································291

11.2.3 設計“單例模型”減少數據庫

連接 ········································295

11.2.4 有限狀態機在Django模型中的

實踐 ········································297

11.3 Django REST Framework優化指南 ···303

11.3.1 適當簡化DRF ····························303

11.3.2 Varnish每秒進擊45K並發 ············305

11.3.3 DRF 3.10.3版本的高性能揭秘 ·······306

11.4 第二代Django Channels ················308

11.4.1 Asyncio基礎 ······························308

11.4.2 Asyncio高並發實踐 ·····················310

11.4.3 再談Asyncio與Gevent ················312

11.4.4 Asyncio與Django ·······················313

11.4.5 理解Django Channels ···················313

11.5 Django 3的異步驅動····················314

第四篇 綜合案例篇

第12章 打造企業級分佈式應用服務 ·····································································318

12.1 功能與需求介紹 ·························318

12.2 系統架構設計及環境說明 ·············319

12.3 構建前端頁面 ····························320

12.3.1 用戶交互設計 ····························321

12.3.2 Vue.js開發環境搭建 ····················321

12.3.3 構建頁面佈局 ····························323

12.3.4 創建Vue.js路由 ·························327

12.3.5 前端組件開發及通信 ···················328

12.3.6 表單驗證 ··································337

12.4 客戶端Agent技術 ······················339

12.4.1 守護進程與後台程序 ···················339

12.4.2 編寫Agent框架 ·························340

12.4.3 實現aiohttp異步Web服務 ···········344

12.4.4 開發HTTP接口 ·························345

12.4.5 Agent嵌入異步Web服務 ·············346

12.4.6 asyncio.gather的妙用 ···················348

12.5 gRPC服務 ································350

12.5.1 編寫ProtoBuf生成原型文件 ··········350

12.5.2 服務器端開發 ····························352

12.5.3 Agent的gRPC客戶端開發 ············353

12.5.4 Asyncio異步gRPC ······················355

12.6 Django應用服務器 ······················357

12.6.1 搭建Django項目腳手架 ···············357

12.6.2 REST接口 ································358

12.6.3 前、後端接口交互 ······················359

12.7 Django Channels實戰 ···················361

12.7.1 架構機制 ··································361

12.7.2 安裝與Channels路由配置 ·············362

12.7.3 開發Consumer ···························364

12.7.4 gRPC與Django Channels的融合 ····365

12.7.5 Web應用編程接口：WebSocket API ···366

12.7.6 Channels部署方式及集群 ·············368

12.8 更多的討論 ·······························369

12.8.1 gRPC負載均衡與性能測試實踐 ·····369

12.8.2 服務註冊與發現 ·························371

12.8.3 Agent性能 ································372

12.8.4 Django與MongoDB ····················372

後記···················································································································373