《Node+MongoDB+React 項目實戰開發》已出版

前言

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