目    录

第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