《Node+MongoDB+React 項目實戰開發》已出版
前言
從深圳回長沙已經快4個月了，除了把車開熟練了外，並沒有什麼值得一提的，（我總感覺像我這樣的左撇子開車有著天生的優勢，因為單手操作方向盤更穩和靈活，而左撇子左手和右腳更靈活，左腳更有利可以控制離合，自動擋車靈活的右腳控制油門和剎車，所以我在深圳4個月拿證，練車過程中總共熄火次數只有2次），長沙這邊要麼就是連續下一個月雨，要麼就是連續一個月高溫暴晒，上班更是沒啥子意思，長沙這邊的公司和深圳落差挺大的，薪資也是斷崖式下跌，至於幸福指數，額，我感覺除了離家近之外，並沒有什麼其它感覺，同樣是每天除了上班就是在上下班的路上，而且人開始變得越來越懶，就想趟…….在長沙4個月寫了40頁書稿，我自己都開始鄙視自己，換做在深圳，第6本書早已完稿~長沙這邊其實絕大多數打工人工資都不高，可是看上去一個個挺有錢似的~額，去年就交稿的書，今年終於上架了，如下是第5本書，書出版得多了之後，有些麻木，再也沒有曾經的那份激動和驚喜了…….水利水電出版社有一點不好的地方，是我的書在他們官網查不到，導致百度百科創建詞條失敗，這是意料之外的，例如百科詞條：鄒瓊俊
上周末挺有意思的是，我把車停高速服務區，小孩一個開門殺，左邊的白色奧迪車門就被颳了一個黑洞，美系車車門太過厚重，慣性很大，我明顯感覺到旁邊車被刮到晃動了一下，然後，我瞄了一眼車上坐了幾個妹子吹著空調聽著歌，我想著先帶娃去上完洗手間再說，憋了許久了，結果回來的時候，那輛白色的奧迪」跑了」，去4S店補漆和鈑金至少得1000+，我又把車開區旁邊加油站加油，前面一輛車竟然沒關油蓋，一腳油門直接開走了，我喊都沒喊住，那麼高的溫度，前車跑回家，怕是路上油就揮發得差不多了…….
圖書地址
京東：//item.jd.com/12872499.html
噹噹：//product.dangdang.com/29260916.html
天貓：//detail.tmall.com/item.htm?spm=a230r.1.14.32.371d2f67MEAC76&id=647332136301&ns=1&abbucket=6
內容簡介
本書以初學者的視角， 從零開始， 採用循序漸進的方式一步步地向讀者介紹如何使用Node、MongoDB、React 及其相關技術來進行Web 應用的開發。通過理論和實踐相結合的方式，讓讀者在學習的過程中能夠感受到開發的樂趣。書中講解的內容都是日常開發中使用頻率較高的知識點，在講解知識點的過程中，也會提供程式碼示例展示相關應用場景。
本書講解的順序依次為Node、MongoDB、React。在講完Node 和Node 第三方包、Node 非同步編程後，緊接著介紹MongoDB 資料庫；在了解了資料庫操作後，就可以將應用數據進行持久化的存儲，再往後介紹art-template 模板引擎，其用於在瀏覽器中展示數據。為了讓讀者可以更加清晰地了解Node 開發Web 應用的過程，在一開始並沒有引入基於Node 的Web 框架。 接下來選取了Node 比較常用的Web 框架Express 進行講解，再通過一個文章管理系統示例項目來講前面學習的知識點。再往後，介紹React 這一前端MVVM 框架及其相應的技術，在熟悉React 後，就可以採用前後端完全分離的方式進行開發了，然後通過一個後台管理系統將前面所學的知識點串聯起來。然後，簡單介紹了Java Script 的超集TypeScript，有興趣的讀者可以嘗試將本書中的所有項目用TypeScript 的方式重寫。
本書適用於電腦專業的老師和學生、前端工程師以及想要學習前端技術的開發者。
圖書目錄
目錄 1
第 1 章 11
◄ Node.js基礎 ► 11
1.1 Node開發概述 11
1.1.1 為什麼要學習Node.js？ 11
1.1.2 什麼是Node.js？ 12
1.1.3 Node.js特點 13
1.1.4 開發工具 13
1.2 Node運行環境搭建 14
1.2.1 Node.js運行環境安裝 14
1.2.2 Node環境安裝失敗解決辦法 16
1.2.3 程式碼有無分號的問題 17
1.3 Node.js快速入門 17
1.3.1 Node.js 的組成 17
1.3.2 Node.js基礎語法 18
1.3.3 Node.js全局對象global 18
第 2 章 20
◄ 模組載入及第三方包 ► 20
2.1 Node.js模組化開發 20
2.1.1 JavaScript開發弊端 20
2.1.2 模組化 21
2.1.3 Node.js中模組化開發規範 21
2.1.4 exports 和 module.exports 的區別 24
2.1.5 require優先從快取載入 24
2.2 系統模組 25
2.2.1 什麼是系統模組 25
2.2.2 系統模組fs文件操作 26
2.2.3 系統模組path 路徑操作 27
2.2.4 相對路徑VS絕對路徑 28
2.3 第三方模組 28
2.3.1 什麼是第三方模組 28
2.3.2 獲取第三方模組 29
2.3.3 第三方模組 nrm 30
2.3.4 第三方模組 nodemon 30
2.3.5 第三方模組 gulp 31
2.3.6 npx 39
2.4 package.json文件 39
2.4.1 node_modules目錄的問題 39
2.4.2 package.json文件的作用 40
2.4.3 項目依賴和開發依賴 41
2.4.4 package.json文件各個選項含義 41
2.4.5 package-lock.json文件的作用 43
2.5 Node.js中模組的載入機制 43
2.5.1 模組查找規則：當模組擁有路徑但沒有後綴時 44
2.5.2 模組查找規則：當模組沒有路徑且沒有後綴時 44
第 3 章 46
◄ HTTP及Node非同步編程 ► 46
3.1 C/S、B/S軟體體系結構分析 46
3.2 伺服器端基礎概念 47
3.2.1 網站的組成 47
3.2.2 網站伺服器 48
3.2.3 IP地址 49
3.2.4 域名 50
3.2.5 埠 51
3.2.6 URL 52
3.2.7 客戶端和伺服器端 52
3.3 創建web伺服器 53
3.4 HTTP協議 54
3.4.1 HTTP協議的概念 54
3.4.2 報文 55
3.4.3 請求報文 56
3.4.4 響應報文 61
3.5 HTTP請求與響應處理 63
3.5.1 請求參數 63
3.5.2 GET請求參數 63
3.5.3 POST請求參數 64
3.5.4 路由 65
3.5.5 靜態資源 67
3.5.6 動態資源 67
3.5.7 客戶端請求方式 69
3.6 Node.js非同步編程 70
3.6.1 同步API, 非同步API 70
3.6.2 同步API, 非同步API的區別 70
3.6.3 回調函數 72
3.6.4 Node.js中的非同步API 73
3.6.5 Promise 75
3.6.6 非同步函數async和await 77
第 4 章 79
◄ MongoDB資料庫 ► 79
4.1 資料庫概述 79
4.1.1 為什麼要使用資料庫 79
4.1.2 什麼是資料庫 79
4.1.3 MongoDB資料庫相關概念 80
4.2 MongoDB資料庫環境搭建 82
4.2.1 MongoDB資料庫下載安裝 82
4.2.2 啟動MongoDB 86
4.3 MongoDB操作 86
4.3.1 MongoDB的Shell操作 86
4.3.2 MongoDB可視化軟體 90
4.3.3 MongoDB導入導出數據 92
4.4 MongoDB索引介紹及資料庫命令操作 94
4.4.1 創建簡單索引 94
4.4.2 唯一索引 96
4.4.3 刪除重複值 96
4.4.4 Hint 96
4.4.5 Expain 97
4.4.6 索引管理 98
4.5 MongoDB備份與恢復 99
4.5.1 MongoDB資料庫備份 99
4.5.2 MongoDB資料庫恢復 100
4.6 Mongoose資料庫連接 101
4.7 Mongoose增刪改查操作 102
4.7.1 創建資料庫 102
4.7.2 創建集合 103
4.7.3 創建文檔 103
4.7.4 查詢文檔 105
4.7.5 刪除文檔 108
4.7.6 更新文檔 109
4.7.7 mongoose驗證 109
4.7.8 集合關聯 111
第 5 章 114
◄ art-template模板引擎 ► 114
5.1 模板引擎的基礎概念 114
5.1.1 模板引擎 114
5.1.2 art-template模板引擎 115
5.2 模板引擎語法 117
5.2.1 輸出 117
5.2.2 原文輸出 117
5.2.3 條件判斷 118
5.2.4 循環 118
5.2.5 子模版 118
5.2.6 模板繼承 118
5.2.7 模板配置 120
5.3 案例-用戶管理 121
5.3.1 案例介紹 121
5.3.1.1 第三方模組 router 122
5.3.1.2 第三方模組 serve-static 123
5.3.2 操作步驟 123
第 6 章 135
◄ Express框架 ► 135
6.1 Express框架簡介 135
6.1.1 Express框架是什麼 135
6.1.2 Express框架特性 135
6.2 中間件 136
6.2.1 什麼是中間件 136
6.2.2 app.use中間件用法 137
6.2.3 中間件應用 138
6.2.4 錯誤處理中間件 139
6.2.5 捕獲異常 141
6.3 Express請求處理 141
6.3.1 構建路由 141
6.3.2 構建模組化路由 142
6.2.3 GET參數的獲取 143
6.2.4 POST參數的獲取 143
6.2.5 Express路由參數 145
6 2.6 靜態資源處理 145
6.4 express-art-template模板引擎 146
6.5 express-session 147
6.5.1 Session 簡單介紹 147
6.5.2 express-session 的使用 147
6.5.3 express-session 的常用參數 148
第 7 章 149
◄ 文章管理系統 ► 149
7.1 項目環境搭建 149
7.1.1 項目介紹 149
7.1.2 項目框架搭建 150
7.2 項目功能實現 157
7.2.1 登錄 158
7.2.1.1 創建登錄頁面 158
7.2.1.2 登錄控制路由 161
7.2.1.3 創建用戶集合，初始化用戶 162
7.2.1.4 實現登錄控制器程式碼 168
7.2.2 文章管理 173
7.2.2.1 文章列表頁 173
7.2.2.2 新增新增/編輯 178
7.2.3 用戶管理 186
7.2.4 網站首頁文章展示 191
7.2.5 文章評論 191
7.2.6 訪問許可權控制 192
7.3 項目源碼和運行 193
7.4 Windows上部署Node應用 194
第 8 章 197
◄ React基礎知識 ► 197
8.1 React介紹 197
8.1.1 React介紹 197
8.1.2 前端三大主流框架 198
8.1.3 React與vue的對比 198
8.1.4 為什麼要學習React 199
8.1.5 React中幾個核心的概念 199
8.1.6 Diff演算法 202
8.2 創建基本的webpack4.x項目 203
8.2.1 使用webpack-dev-server 205
8.2.2 在項目中使用 react 207
8.2.3 JSX 209
8.3 React中創建組件 212
8.3.1 React Developer Tools 調試工具 213
8.3.2 構造函數創建組件 213
8.3.3 class關鍵字來創建組件 215
8.3.4 兩種創建組件方式的對比 216
8.4 設置樣式 217
8.4.1 組件中使用style行內樣式 217
8.4.2 組件中使用css外部樣式 218
8.4.3 使用css樣式衝突 219
8.4.4 css樣式通過modules參數啟用模組化 220
8.5 在項目中啟用模組化並同時使用bootstrap 223
8.6 在react中綁定事件 224
8.7 綁定文本框與state中的值 226
8.8 React組件生命周期 230
8.9 表單 235
8.9.1 表單受控組件 235
8.9.2 非受控組件 236
8.9.3 組件組合 238
8.9.4 使用 PropTypes 進行類型檢查 238
第 9 章 240
◄ React進階 ► 240
9.1 antd UI組件庫 240
9.1.1 antd UI組件庫引入 240
9.1.2 按需載入 242
9.1.2.1 方式一：eject暴露配置 242
9.1.2.2 方式二：react-app-rewired 243
9.2 Fetch 網路請求 244
9.2.1 get請求和post請求 244
9.2.2 跨域 249
9.2.3 封裝http請求 250
9.3 axios 網路請求 251
9.4 路由 254
9.4.1 路由介紹 254
9.4.2 <BrowserRouter>與<HashRouter> 256
9.4.3 <Link> 256
9.4.4 <Switch>和404頁面 258
9.4.5 render和func 259
9.4.6 <NavLink>高亮 261
9.4.7 URL Parameters 262
9.4.8 query string讀取方式 262
9.4.9 <NavLink> to object 264
9.4.10 <Redirect>重定向 264
9.4.11 push和replace 265
9.4.12 withRouter 265
9.4.13 Prompt 266
9.4.14 路由嵌套 267
9.5 React-Redux基礎知識 268
9.5.1 父子組件數據傳遞 269
9.5.2 引入Redux 270
9.5.3 引入React-Redux與mapStateToProps讀取數據 274
9.5.4 dispatch與mapDispatchToProps修改數據 278
9.5.5 bindActionCreators與參數傳遞 279
9.5.6 combineReducers合併reducer 281
9.5.7 Redux Middleware（中間件） 283
9.5.8 非同步中間件redux-thunk 285
9.5.9 非同步中間件redux-saga 289
9.5.10 Redux調試工具Redux DevTools 292
9.6 高階組件 293
9.7 React.Fragment 296
9.8 React Context 298
9.8.1 老版本的context 298
9.8.2 新版本的context 299
第 10 章 302
◄ 後台管理系統 ► 302
10.1 項目介紹 302
10.1.1 項目介紹 302
10.1.2 技術選型 302
10.1.3 準備工作 302
10.1.4 yarn和npm的區別 303
10.2 項目搭建 304
10.2.1 基礎目錄結構構建 304
10.2.2 配置redux 307
10.2.3 準備路由環境 308
10.2.4 搭建主介面 308
10.2.5 構建一級路由 312
10.2.6 構建系統後台首頁 313
10.2.7 配置用戶介面 317
10.2.8 配置課程管理介面 320
10.3 伺服器搭建 322
10.3.1 創建node web 介面伺服器 322
10.3.2 資料庫初始化 324
10.3.3 啟動web伺服器 325
10.3.4 介面測試 325
10.4 後台首頁數據獲取和展示 325
10.4.1 封裝介面請求 325
10.4.2 配置代理 329
10.4.3 配置store 329
10.4.4 主介面介面數據綁定 330
10.5 菜單摺疊和展開 333
10.5.1 配置JieHeader.jsx 333
10.5.2 配置JieSider.jsx 336
10.6 用戶管理 337
10.6.1 用戶列表 337
10.6.2 刪除用戶 345
10.6.3 新增/編輯用戶 347
第 11 章 356
◄ React擴展 ► 356
11.1 React 新特性 356
11.1.1 State Hook 356
11.1.2 Effect Hook 357
11.1.3 useReducer 359
11.2 dva 360
11.2.1 dva介紹與環境搭建 360
11.2.2 dva中引入antd 362
11.2.3 dva路由配置 363
11.2.4 編寫 UI Component 364
11.2.5 dva model創建 365
11.2.6 dva路由跳轉 368
11.2.7 Model非同步請求 369
11.2.8 Mock數據 370
11.2.9 dva中的網路請求 374
11.2.10 dva Model subscriptions 375
11.2.11 redux-actions 376
11.3 UmiJS 377
11.3.1 UmiJS介紹 377
11.3.2 UmiJS快速上手 378
11.3.3 通過腳手架創建項目 381
11.3.4 路由約定與配置 385
11.3.5 插件@umijs/plugin-dva 388
11.3.6 配置之動態載入 391
11.4 TypeScript 395
10.4.1 TypeScript簡介 395
10.4.2 TypeScript和Node開發示例 395
11.5 可能遇到的問題及解決方案 403
11.5.1 Joi.validate is not a function 403
11.5.2 react項目在Google瀏覽器中訪問顯示空白 403
11.5.3『roadhog』不是內部或外部命令，也不是可運行的程式或批處理文件 404
參考文獻 405
出版背景
在業內，如果你懂React，那麼就會被默認為也懂Vue，因為如果你能掌握React，Vue 就更不在話下了。所以，如果要成為一名合格的前端工程師，最好掌握React 和Vue。而Node 是前端工程師晉陞路上必須掌握的技能，如果同時能夠再掌握一門資料庫，就可以獨立完成完整的中小型項目了。本書選擇的資料庫是MongoDB，主要是因為MongoDB 相較於MySQL 或者SQL Server 這樣的關係型資料庫來說更容易被前端工程師使用和接受。
