前言
從深圳回長沙已經快4個月了，除了把車開熟練了外，並沒有啥成長和進步，（我總感覺像我這樣的左撇子開車有著天生的優勢，因為單手操作方向盤更穩和靈活，而左撇子左手和右腳更靈活，左腳更有力氣可以踩住離合，自動擋車靈活的右腳控制油門和剎車，所以我在深圳4個月拿證，練車過程中總共熄火次數只有2次），長沙這邊要麼就是連續下一個月雨，要麼就是連續一個月高溫暴曬，上班更是沒啥子意思，長沙這邊的公司和深圳落差挺大的，薪資也是斷崖式下跌，至於幸福指數，額，我感覺除了離家近之外，並沒有什麼其它感覺，同樣是每天除了上班就是在上下班的路上，而且人開始變得越來越懶，就想趟.......在長沙4個月寫了40頁書稿，我自己都開始鄙視自己，換做在深圳，第6本書早已完稿~長沙這邊其實絕大多數打工人工資都不高，可是看上去一個個挺有錢似的~額，去年就交稿的書，今年終於上架了，如下是第5本書，書出版得多了之後，有些麻木，再也沒有曾經的那份激動和喜悅了.......水利水電出版社有一點不好的地方，是我的書在他們官網查不到，導致百度百科建立詞條失敗，這是意料之外的，例如百科詞條：鄒瓊俊
上週末挺有意思的是，我把車停高速服務區，小孩一個開門殺，左邊的白色奧迪車門就被颳了一個黑洞，美系車車門太過厚重，慣性很大，我明顯感覺到旁邊車被刮到晃動了一下，然後，我瞄了一眼車上坐了幾個妹子吹著空調聽著歌，我想著先帶娃去上完洗手間再說，憋了許久了，結果回來的時候，那輛白色的奧迪”跑了”，去4S店補漆和鈑金至少得1000+，我又把車開旁邊加油站加油，前面一輛車竟然沒關油蓋，一腳油門直接開走了，我喊都沒喊住，那麼高的溫度，前車跑回家，怕是路上油就揮發得差不多了.......
圖書地址
京東：https://item.jd.com/12872499.html
噹噹：http://product.dangdang.com/29260916.html
天貓：https://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專案在谷歌瀏覽器中訪問顯示空白 403
11.5.3‘roadhog’不是內部或外部命令，也不是可執行的程式或批處理檔案 404
參考文獻 405
出版背景
在業內，如果你懂React，那麼就會被預設為也懂Vue，因為如果你能掌握React，Vue 就更不在話下了。所以，如果要成為一名合格的前端工程師，最好掌握React 和Vue。而Node 是前端工程師晉升路上必須掌握的技能，如果同時能夠再掌握一門資料庫，就可以獨立完成完整的中小型專案了。本書選擇的資料庫是MongoDB，主要是因為MongoDB 相較於MySQL 或者SQL Server 這樣的關係型資料庫來說更容易被前端工程師使用和接受。
額外福利：進微信群，不定期送書！