React.js+Node.js+MongoDB企業(yè)級全棧開發(fā)實(shí)踐

 
第1章  組件化開發(fā) 1
1.1  什么是組件化開發(fā) 1
1.1.1  多頁應(yīng)用 1
1.1.2  單頁應(yīng)用 2
1.1.3  組件化的概念 3
1.2  為什么要用組件化開發(fā) 3
1.2.1  前后端分離思想 3
1.2.2  組件復(fù)用 4
1.3  計(jì)算機(jī)選購配置系統(tǒng) 4
1.3.1  系統(tǒng)介紹 4
1.3.2  系統(tǒng)UI界面 4
1.3.3  登錄頁面和模塊介紹 6
1.3.4  注冊頁面和模塊介紹 6
1.3.5  內(nèi)容頁面初始界面和模塊介紹 6
1.3.6  產(chǎn)品列表界面和模塊介紹 8
1.4  小結(jié) 9
第2章  三大主流前端框架介紹 10
2.1  React 10
2.2  Vue 11
2.3  Angular 12
2.4  如何選型 13
2.5  小結(jié) 13
第3章  前端環(huán)境的搭建 14
3.1  Node.js的安裝與使用 14
3.2  npm的安裝與使用 15
3.3  nvm的安裝與使用 16
3.4  CLI與create-react-app 17
3.5  小結(jié) 21
第4章  React全家桶介紹 22
4.1  React項(xiàng)目整體架構(gòu) 22
4.2  狀態(tài)管理 25
4.3  路由 26
4.4  集成axios 27
4.5  集成UI框架 28
4.6  小結(jié) 29
第5章  React組件 30
5.1  組件類型 30
5.1.1  class組件 30
5.1.2  function組件 33
5.1.3  Hooks 34
5.2  JSX 40
5.2.1  概念和原理 40
5.2.2  JSX規(guī)則 41
5.3  React組件狀態(tài)管理 48
5.3.1  state 49
5.3.2  props 50
5.3.3  context 53
5.4  React組件的生命周期和執(zhí)行時機(jī) 54
5.4.1  class組件的生命周期函數(shù)和執(zhí)行時機(jī) 54
5.4.2  Hooks API執(zhí)行時機(jī) 55
5.5  事件 59
5.6  小結(jié) 61
第6章  React Redux 62
6.1  React、Redux、React Redux的關(guān)系 62
6.2  Redux和Redux Toolkit 63
6.2.1  Redux中數(shù)據(jù)更新的流程 63
6.2.2  Redux的核心概念 64
6.2.3  Redux Toolkit 65
6.3  React Redux 66
6.3.1  Provider 66
6.3.2  connect 67
6.3.3  Hooks 67
6.4  結(jié)合案例的應(yīng)用場景 68
6.5  小結(jié) 73
第7章  路由 74
7.1  路由原理 74
7.2  路由切換 75
7.2.1  Link 75
7.2.2  HashRouter/BrowserRoute和Route 76
7.2.3  useNavigate 77
7.2.4  useHistory 81
7.3  小結(jié) 82
第8章  webpack 83
8.1  什么是webpack 83
8.2  webpack的作用 86
8.3  webpack的配置 87
8.4  webpack-dev-server 89
8.5  create-react-app中配置proxy代理 90
8.6  小結(jié) 92
第9章  前端項(xiàng)目中常用的工具庫 93
9.1  lodash 93
9.2  classnames 96
9.3  moment 99
9.4  uuid 101
9.5  小結(jié) 101
第10章  使用axios進(jìn)行數(shù)據(jù)交互 102
10.1  axios的基本用法 102
10.2  封裝axios公用組件 103
10.2.1  封裝axios公用方法 103
10.2.2  在組件中調(diào)用封裝好的axios方法 105
10.3  小結(jié) 111
第11章  前端調(diào)試?yán)?112
11.1  Chrome開發(fā)者工具 112
11.2  Redux DevTools 116
11.3  小結(jié) 120
第12章  UI框架 121
12.1  antd組件的基本用法 121
12.2  集成antd 133
12.3  使用示例 134
12.4  小結(jié) 141
第13章  前端存儲 142
13.1  sessionStorage 142
13.2  localStorage 146
13.3  cookie 147
13.4  IndexDB 149
13.5  LevelDB 151
13.6  小結(jié) 154
第14章  中間件 155
14.1  什么是中間件 155
14.2  項(xiàng)目中常用的中間件 156
14.2.1  applyMiddleware 156
14.2.2  redux-thunk 157
14.3  小結(jié) 158
第15章  高階組件 159
15.1  高階函數(shù)和高階組件 159
15.2  高階組件的作用 165
15.3  自定義高階組件 165
15.4  小結(jié) 168
第16章  國際化 169
16.1  什么是國際化 169
16.2  react-intl 170
16.3  antd組件國際化 182
16.4  小結(jié) 183
第17章  toggle控制 184
17.1  toggle介紹 184
17.2  toggle函數(shù) 185
17.3  toggle的使用 187
17.4  小結(jié) 189
第18章  前端質(zhì)量管理 190
18.1  代碼檢查工具ESlint 190
18.2  單元測試 193
18.3  常用的測試框架 193
18.3.1  Jest 194
18.3.2  Chai 195
18.3.3  Sinon 195
18.4  小結(jié) 196
第19章  前端工程化管理 197
19.1  Git 197
19.2  GitHub和GitLab 199
19.3  單體倉庫和多倉庫策略的利弊 199
19.4  小結(jié) 200
第20章  與第三方集成 201
20.1  通過iframe標(biāo)簽的集成方式 201
20.2  帶特定token的URL集成方式 203
20.3  微前端的集成方式 203
20.4  小結(jié) 207
第21章  React項(xiàng)目的性能優(yōu)化 208
21.1  組件拆分 208
21.2  函數(shù)功能單一 211
21.3  循環(huán)中的key 212
21.4  shouldComponentUpdate防止組件重復(fù)渲染 213
21.5  PureComponent代替Component 217
21.6  懶加載組件 218
21.7  Gzip壓縮 219
21.8  小結(jié) 220
第22章  服務(wù)器端開發(fā)的準(zhǔn)備 221
22.1  模塊化規(guī)范 221
22.1.1  CommonJS 221
22.1.2  AMD 222
22.1.3  CMD 223
22.1.4  ES 6 223
22.2  HTTP/HTTPS協(xié)議 224
22.3  Content-Type 225
22.4  小結(jié) 226
第23章  Express應(yīng)用框架 227
23.1  Node.js基礎(chǔ) 227
23.2  什么是Express 230
23.3  安裝Express 230
23.4  Express基礎(chǔ) 231
23.4.1  常用方法 231
23.4.2  Express中間件 234
23.4.3  快速編寫Hello World程序 235
23.5  RESTful接口規(guī)范 236
23.6  腳手架express-generator 236
23.6.1  腳手架安裝 236
23.6.2  腳手架項(xiàng)目結(jié)構(gòu) 237
23.7  nodemon 238
23.8  jsonwebtoken 239
23.9  cors 239
23.10  實(shí)現(xiàn)get接口 240
23.11  實(shí)現(xiàn)post接口 241
23.12  小結(jié) 242
第24章  MongoDB的連接和數(shù)據(jù)操作 243
24.1  MongoDB的簡介與安裝 243
24.2  MongoDB的存儲結(jié)構(gòu) 245
24.3  MongoDB的連接 245
24.4  集成MongoDB到Express框架中 248
24.5  小結(jié) 254
第25章  使用Postman測試接口 255
25.1  Postman的下載與安裝 255
25.2  界面導(dǎo)航說明 256
25.3  測試get接口 258
25.4  測試post接口 259
25.5  小結(jié) 261
第26章  項(xiàng)目React前端開發(fā) 262
26.1  項(xiàng)目開發(fā)流程 262
26.2  項(xiàng)目初始化與配置 263
26.3  項(xiàng)目架構(gòu) 264
26.4  項(xiàng)目公共文件 265
26.4.1  編寫項(xiàng)目公用樣式文件 265
26.4.2  增加項(xiàng)目的靜態(tài)文件 265
26.4.3  增加項(xiàng)目的代理文件setupProxy.js 266
26.4.4  編寫request.js 266
26.4.5  編寫constants.js 267
26.4.6  創(chuàng)建空文件占位 269
26.5  項(xiàng)目的入口文件index.js 269
26.6  編寫登錄/注冊頁面 270
26.6.1  容器組件Login 270
26.6.2  表單子組件LoginForm 272
26.7  編寫系統(tǒng)介紹模塊 275
26.8  編寫功能區(qū)模塊 276
26.8.1  容器組件Bar 276
26.8.2  子組件Step1 278
26.8.3  子組件Step2 282
26.8.4  子組件AppIcons 285
26.8.5  子組件AppLists 287
26.8.6  子組件Search 288
26.9  編寫聯(lián)系我們模塊 289
26.10  編寫產(chǎn)品模塊 292
26.10.1  容器組件Products 292
26.10.2  子組件SearchSoftwares 295
26.10.3  子組件ClearAll 296
26.10.4  子組件ProductLists 297
26.10.5  子組件Product 299
26.10.6  子組件CarouselCard 300
26.10.7  子組件CarouselButton 301
26.10.8  子組件Category 302
26.10.9  子組件Stock 302
26.10.10  子組件ProductTable 303
26.10.11  子組件TotalPrice 304
26.10.12  子組件PriceTip 304
26.11  編寫反饋模塊 305
26.11.1  容器組件FeedBack 305
26.11.2  子組件FeedBackModal 306
26.12  編寫內(nèi)容頁面 310
26.13  編寫組件處理國際化 311
26.14  編寫組件樣式 315
26.15  編寫actions.js 316
26.15.1  Login組件的actions 317
26.15.2  Bar組件的actions 318
26.15.3  Product組件的actions 321
26.15.4  FeedBack組件的actions 323
26.15.5  App組件的actions 324
26.15.6  Wrappers組件的actions 325
26.16  編寫selector.js 327
26.16.1  Login組件的selector 327
26.16.2  Bar組件的selector 327
26.16.3  Product組件的selector 328
26.16.4  Wrappers組件的selector 328
26.17  mock數(shù)據(jù) 328
26.18  增加toggle控制 330
26.19  小結(jié) 332
第27章  項(xiàng)目Node后端開發(fā) 333
27.1  開發(fā)環(huán)境的準(zhǔn)備和搭建 333
27.2  編寫公用文件 335
27.3  創(chuàng)建并連接MongoDB數(shù)據(jù)庫，準(zhǔn)備數(shù)據(jù) 337
27.4  定義接口的路由 339
27.5  編寫接口/login 340
27.6  編寫接口/register 342
27.7  編寫接口/featuresToggle 343
27.8  編寫接口/product/getLocales 344
27.9  編寫接口/product/getApplication 345
27.10  編寫接口/product/recommend 346
27.11  編寫接口/product/saveFeedback 347
27.12  小結(jié) 348