React.js + Node.js + MongoDB 企業級全棧開發實踐

目    錄

第1章  組件化開發 1

1.1  什麽是組件化開發 1

1.1.1  多頁應用 1

1.1.2  單頁應用 2

1.1.3  組件化的概念 3

1.2  為什麽要用組件化開發 3

1.2.1  前後端分離思想 3

1.2.2  組件復用 4

1.3  電腦選購配置系統 4

1.3.1  系統介紹 4

1.3.2  系統UI界面 4

1.3.3  登錄頁面和模塊介紹 6

1.3.4  註冊頁面和模塊介紹 6

1.3.5  內容頁面初始界面和模塊介紹 6

1.3.6  產品列表界面和模塊介紹 8

1.4  小結 9

第2章  三大主流前端框架介紹 10

2.1  React 10

2.2  Vue 11

2.3  Angular 12

2.4  如何選型 13

2.5  小結 13

第3章  前端環境的搭建 14

3.1  Node.js的安裝與使用 14

3.2  npm的安裝與使用 15

3.3  nvm的安裝與使用 16

3.4  CLI與create-react-app 17

3.5  小結 21

第4章  React全家桶介紹 22

4.1  React項目整體架構 22

4.2  狀態管理 25

4.3  路由 26

4.4  集成axios 27

4.5  集成UI框架 28

4.6  小結 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規則 41

5.3  React組件狀態管理 48

5.3.1  state 49

5.3.2  props 50

5.3.3  context 53

5.4  React組件的生命周期和執行時機 54

5.4.1  class組件的生命周期函數和執行時機 54

5.4.2  Hooks API執行時機 55

5.5  事件 59

5.6  小結 61

第6章  React Redux 62

6.1  React、Redux、React Redux的關系 62

6.2  Redux和Redux Toolkit 63

6.2.1  Redux中數據更新的流程 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  結合案例的應用場景 68

6.5  小結 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  小結 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  小結 92

第9章  前端項目中常用的工具庫 93

9.1  lodash 93

9.2  classnames 96

9.3  moment 99

9.4  uuid 101

9.5  小結 101

第10章  使用axios進行數據交互 102

10.1  axios的基本用法 102

10.2  封裝axios公用組件 103

10.2.1  封裝axios公用方法 103

10.2.2  在組件中調用封裝好的axios方法 105

10.3  小結 111

第11章  前端調試利器 112

11.1  Chrome開發者工具 112

11.2  Redux DevTools 116

11.3  小結 120

第12章  UI框架 121

12.1  antd組件的基本用法 121

12.2  集成antd 133

12.3  使用示例 134

12.4  小結 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  小結 154

第14章  中間件 155

14.1  什麽是中間件 155

14.2  項目中常用的中間件 156

14.2.1  applyMiddleware 156

14.2.2  redux-thunk 157

14.3  小結 158

第15章  高階組件 159

15.1  高階函數和高階組件 159

15.2  高階組件的作用 165

15.3  自定義高階組件 165

15.4  小結 168

第16章  國際化 169

16.1  什麽是國際化 169

16.2  react-intl 170

16.3  antd組件國際化 182

16.4  小結 183

第17章  toggle控制 184

17.1  toggle介紹 184

17.2  toggle函數 185

17.3  toggle的使用 187

17.4  小結 189

第18章  前端質量管理 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  小結 196

第19章  前端工程化管理 197

19.1  Git 197

19.2  GitHub和GitLab 199

19.3  單體倉庫和多倉庫策略的利弊 199

19.4  小結 200

第20章  與第三方集成 201

20.1  通過iframe標簽的集成方式 201

20.2  帶特定token的URL集成方式 203

20.3  微前端的集成方式 203

20.4  小結 207

第21章  React項目的性能優化 208

21.1  組件拆分 208

21.2  函數功能單一 211

21.3  循環中的key 212

21.4  shouldComponentUpdate防止組件重復渲染 213

21.5  PureComponent代替Component 217

21.6  懶加載組件 218

21.7  Gzip壓縮 219

21.8  小結 220

第22章  服務器端開發的準備 221

22.1  模塊化規範 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協議 224

22.3  Content-Type 225

22.4  小結 226

第23章  Express應用框架 227

23.1  Node.js基礎 227

23.2  什麽是Express 230

23.3  安裝Express 230

23.4  Express基礎 231

23.4.1  常用方法 231

23.4.2  Express中間件 234

23.4.3  快速編寫Hello World程序 235

23.5  RESTful接口規範 236

23.6  腳手架express-generator 236

23.6.1  腳手架安裝 236

23.6.2  腳手架項目結構 237

23.7  nodemon 238

23.8  jsonwebtoken 239

23.9  cors 239

23.10  實現get接口 240

23.11  實現post接口 241

23.12  小結 242

第24章  MongoDB的連接和數據操作 243

24.1  MongoDB的簡介與安裝 243

24.2  MongoDB的存儲結構 245

24.3  MongoDB的連接 245

24.4  集成MongoDB到Express框架中 248

24.5  小結 254

第25章  使用Postman測試接口 255

25.1  Postman的下載與安裝 255

25.2  界面導航說明 256

25.3  測試get接口 258

25.4  測試post接口 259

25.5  小結 261

第26章  項目React前端開發 262

26.1  項目開發流程 262

26.2  項目初始化與配置 263

26.3  項目架構 264

26.4  項目公共文件 265

26.4.1  編寫項目公用樣式文件 265

26.4.2  增加項目的靜態文件 265

26.4.3  增加項目的代理文件setupProxy.js 266

26.4.4  編寫request.js 266

26.4.5  編寫constants.js 267

26.4.6  創建空文件占位 269

26.5  項目的入口文件index.js 269

26.6  編寫登錄/註冊頁面 270

26.6.1  容器組件Login 270

26.6.2  表單子組件LoginForm 272

26.7  編寫系統介紹模塊 275

26.8  編寫功能區模塊 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  編寫聯系我們模塊 289

26.10  編寫產品模塊 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  編寫內容頁面 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數據 328

26.18  增加toggle控制 330

26.19  小結 332

第27章  項目Node後端開發 333

27.1  開發環境的準備和搭建 333

27.2  編寫公用文件 335

27.3  創建並連接MongoDB數據庫，準備數據 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  小結 348