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