前言
從深圳回長沙已經快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 這樣的關係型數據庫來說更容易被前端工程師使用和接受。