前言
从深圳回长沙已经快4个月了，除了把车开熟练了外，并没有什么值得一提的，（我总感觉像我这样的左撇子开车有着天生的优势，因为单手操作方向盘更稳和灵活，而左撇子左手和右脚更灵活，左脚更有利可以控制离合，自动挡车灵活的右脚控制油门和刹车，所以我在深圳4个月拿证，练车过程中总共熄火次数只有2次），长沙这边要么就是连续下一个月雨，要么就是连续一个月高温暴晒，上班更是没啥子意思，长沙这边的公司和深圳落差挺大的，薪资也是断崖式下跌，至于幸福指数，额，我感觉除了离家近之外，并没有什么其它感觉，同样是每天除了上班就是在上下班的路上，而且人开始变得越来越懒，就想趟.......在长沙4个月写了40页书稿，我自己都开始鄙视自己，换做在深圳，第6本书早已完稿~长沙这边其实绝大多数打工人工资都不高，可是看上去一个个挺有钱似的~额，去年就交稿的书，今年终于上架了，如下是第5本书，书出版得多了之后，有些麻木，再也没有曾经的那份激动和惊喜了.......水利水电出版社有一点不好的地方，是我的书在他们官网查不到，导致百度百科创建词条失败，这是意料之外的，例如百科词条：邹琼俊
图书地址
京东：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 这样的关系型数据库来说更容易被前端工程师使用和接受。