本书以初学者的视角， 从零开始， 采用循序渐进的方式一步步地向读者介绍如何使用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 这样的关系型数据库来说更容易被前端工程师使用和接受。
- React项目实战：react-redux-router基本原理
React相关 React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架. JSX 本质上来讲,JSX 只是为React.createElement(component, props, .. ...
- python操作三大主流数据库(10)python操作mongodb数据库④mongodb新闻项目实战
python操作mongodb数据库④mongodb新闻项目实战 参考文档:http://flask-mongoengine.readthedocs.io/en/latest/ 目录: [root@n ...
- Laravel 中使用 swoole 项目实战开发案例二 (后端主动分场景给界面推送消息)
推荐阅读:Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信) 需求分析 我们假设有一个需求,我在后端点击按钮 1,首页弹出 “后端触发了按钮 1”.后端点了 ...
- 《ASP.NET Core应用开发入门教程》与《ASP.NET Core 应用开发项目实战》正式出版
“全书之写印,实系初稿.有时公私琐务猬集,每写一句,三搁其笔:有时兴会淋漓,走笔疾书,絮絮不休:有时意趣萧索,执笔木坐,草草而止.每写一段,自助覆阅,辄摇其首,觉有大不妥者,即贴补重书,故剪刀浆糊乃不 ...
- asp.net core react 项目实战(一)
asp.net-core-react asp.net core react 简介 开发依赖环境 .NET Core SDK (reflecting any global.json): Version: ...
- GraphQL搭配MongoDB入门项目实战
什么是GraphQL GraphQL 是一种面向 API 的查询语言.在互联网早期,需求都以 Web 为主,那时候数据和业务需求都不复杂,所以用 RestAPI 的方式完全可以满足需求.但是随着互联网 ...
- react 项目实战（九）登录与身份认证
SPA的鉴权方式和传统的web应用不同:由于页面的渲染不再依赖服务端,与服务端的交互都通过接口来完成,而REASTful风格的接口提倡无状态(state less),通常不使用cookie和sessi ...
- react 项目实战（七）用户编辑与删除
添加操作列 编辑与删除功能都是针对已存在的某一个用户执行的操作,所以在用户列表中需要再加一个“操作”列来展现[编辑]与[删除]这两个按钮. 修改/src/pages/UserList.js文件,添加方 ...
- react 项目实战（十）引入AntDesign组件库
本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm ...
随机推荐
- 小目标增强（Augmentation for small object)
小物体检测的增强 摘要:在近些年来,目标检测已经有了长足的进步.尽管有很大改进,但是在小目标和大目标检测性能方面还是有巨大的差距.我们在具有挑战性的数据集MS-COCO上分析了目前性能最好的模型Mas ...
- CyclicBarrier 原理（秒懂）
疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 面试必备 + 面试必备 [博客园总入口 ] 疯狂创客圈 经典图书 : <Sprin ...
- 你应该这样去开发接口：Java多线程并行计算
所谓的高并发除了在架构上的高屋建瓴,还得需要开发人员在具体业务开发中注重自己的每一行代码.每一个细节,面子有的同时,更重要的还是要有里子. 面对性能,我们一定要有自己的工匠精神,不可以对任何一行代码妥 ...
- react中 props，state，render函数的关系
1.当组件的 state 或者 props 发生改变的时候,自己的render函数就会重新执行. 2. 当父组件的render函数执行时,其所有子组件的render函数都会重新执行.
- .Net Core 常用开发工具（IDE和运行时、Visual Studio插件、Visual Studio Code插件）
IDE和运行时 组件名 描述 可选版本 推荐版本 Visual Studio Community 社区免费版 For Visual Studio 2017 For Visual Studio 2019 ...
- flutter中ListView的详细讲解
1.ListView的简单介绍 ListView是最常用的可以滚动组件之一, 它可以沿一个方向进行线性排列所有的子组件. 下面是ListView的属性值介绍: scrollDirection:列表的滚 ...
- 9、zabbix监控
9.1.监控: 1.初级(凡人): (1)识别监控的对象: (2)理解监控的对象: (3)细分监控对象的指标: (4)确定告警的基准线: 2.预中级(飞仙): (1)工具化和监控分离: (2)监控对象 ...
- tomcat shutdown后，进程还存在linux系统中的解决办法
基本原理为启动tomcat时记录启动tomcat的进程id(pid),关闭时强制杀死该进程 第一步 :vim修改tomcat下bin/catalina.sh文件,添加点东西,主要是记录tomcat的p ...
- Ubuntu创建图标
起因 安装一些软件时,总是没有图标,导致无法固定到docky栏,所以极为不方便,所以需要自己创建图标. 操作 以创建微信图标为例 [Desktop Entry] Name=Wecaht #名字 Com ...
- 使用 redis 减少 秒杀库存 超卖思路 （转）
由于数据库查询的及插入的操作 耗费的实际时间要耗费比redis 要多, 导致 多人查询时库存有,但是实际插入数据库时却超卖 redis 会有效的减少相关的延时,对于并发量相对较少的 可以一用 1 ...
