前言

　　从深圳回长沙已经快4个月了，除了把车开熟练了外，并没有什么值得一提的，长沙这边要么就是连续下一个月雨，要么就是连续一个月高温暴晒，上班更是没啥子意思，长沙这边的公司和深圳落差挺大的，薪资也是断崖式下跌，至于幸福指数，额，我感觉除了离家近之外，并没有什么其它感觉，同样是每天除了上班就是在上下班的路上，而且人开始变得越来越懒，就想趟.......在长沙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 这样的关系型数据库来说更容易被前端工程师使用和接受。