目录

第一篇 技术栈 1

第1章 Node.js 3

1.1 安装 Node.js 3

1.2 使用 npm 4

1.3 package.json 文件 4

1.3.1 必填字段 5

1.3.2 依赖项 5

1.3.3 开发依赖项 6

1.4 package-lock.json 文件 6

1.5 创建项目 8

1.5.1 初始化新模块或项目 8

1.5.2 安装依赖项 9

1.5.3 安装开发依赖项 10

1.5.4 审核 package.json 文件 10

1.5.5 清理 node_modules 文件夹 11

1.5.6 更新所有程序包 11

1.5.7 删除依赖项 12

1.5.8 安装依赖项 12

1.5.9 使用 npx 执行一次性脚本 12

1.6 练习 1：构建一个 "Hello World" 的 Express.js 服务器 13

1.6.1 设置 14

1.6.2 编写服务器代码 14

1.7 总结 15

第2章 现代JavaScript 16

2.1 ES.Next 模块 16

2.1.1 使用命名导出和默认导出 17

2.1.2 导入模块 18

2.2 声明变量 18

2.2.1 变量提升 19

2.2.2 作用域内的变量 20

2.2.3 常量类数据 21

2.3 箭头函数 22

2.3.1 编写箭头函数 22

2.3.2 理解词法作用域 22

2.3.3 探索实际应用案例 23

2.4 创建字符串 24

2.5 异步脚本 26

2.5.1 避免传统回调 26

2.5.2 使用 Promise 27

2.5.3 简化异步脚本 28

2.6 遍历数组 29

2.7 分散数组和对象 29

2.8 练习 2：使用现代 JavaScript 扩展 Express.js 30

2.8.1 编辑 package.json 文件 30

2.8.2 编写带有异步代码的 ES.Next 模块 31

2.8.3 添加模块到服务器 32

2.9 总结 33

第3章 TypeScript 35

3.1 TypeScript 的优势 35

3.2 设置 TypeScript 38

3.2.1 Node.js 中的安装 38

3.2.2 tsconfig.json 文件 39

3.2.3 TypeScript 的动态反馈 40

3.3 类型注解 40

3.3.1 声明变量 40

3.3.2 声明返回值 41

3.3.3 声明函数参数 41

3.4 内置类型 42

3.4.1 JavaScript 基本类型 42

3.4.2 联合类型 43

3.4.3 数组类型 43

3.4.4 对象类型 44

3.4.5 元组类型 44

3.4.6 any 类型 45

3.4.7 void 类型 46

3.5 自定义类型和接口 46

3.5.1 定义自定义类型 46

3.5.2 定义接口 47

3.5.3 使用类型声明文件 48

3.6 练习 3：使用 TypeScript 扩展 Express.js 49

3.6.1 设置 49

3.6.2 创建 tsconfig.json 文件 49

3.6.3 定义自定义类型 50

3.6.4 给 routes.ts 文件添加类型注解 51

3.6.5 给 index.ts 文件添加类型注解 52

3.6.6 编译并运行代码 53

3.7 总结 54

第4章 React 55

4.1 React 的作用 55

4.2 配置 React 57

4.3 JavaScript 语法扩展 57

4.3.1 JSX 表达式示例 58

4.3.2 ReactDOM 包 59

4.4 将代码组织成组件 59

4.4.1 编写类组件 61

4.4.2 使用钩子实现功能的复用 63

4.5 使用内置钩子 64

4.5.1 使用 useState 管理内部状态 64

4.5.2 使用 useEffect 钩子管理组件的外部交互 65

4.5.3 使用 useContext 和 Context Providers 共享全局数据 65

4.6 练习 4：为 Express.js 服务器创建一个响应式用户界面 66

4.6.1 将 React 添加到服务器中 67

4.6.2 为静态 HTML 文件创建端点 68

4.6.3 运行服务器 69

4.7 总结 70

第5章 Next.js 71

5.1 配置 Next.js 71

5.1.1 项目结构 72

5.1.2 开发脚本 74

5.2 路由应用 74

5.2.1 简单页面路由 75

5.2.2 嵌套路由 75

5.2.3 API 路由 77

5.2.4 动态 URL 79

5.3 应用样式 81

5.3.1 全局样式 81

5.3.2 组件样式 81

5.4 内置 Next.js 组件 82

5.4.1 next/head 组件 83

5.4.2 next/link 组件 83

5.4.3 next/image 组件 84

5.5 预渲染和发布 86

5.5.1 服务器端渲染 87

5.5.2 静态站点生成 88

5.5.3 增量静态再生 90

5.5.4 客户端渲染 91

5.5.5 静态 HTML 导出 92

5.6 练习 5：将 Express.js 和 React 重构为 Next.js 93

5.6.1 存储自定义接口和类型 93

5.6.2 创建 API 路由 94

5.6.3 创建页面路由 94

5.6.4 运行应用 94

5.7 总结 94

第6章 REST 和GraphQL API 96

6.1 REST API 96

6.1.1 URL 97

6.1.2 规范 98

6.1.3 状态和认证 100

6.1.4 HTTP 方法 101

6.2 使用 REST 102

6.2.1 读取数据 102

6.2.2 更新数据 103

6.3 GraphQL API 104

6.3.1 模式 104

6.3.2 解析器 106

6.4 比较 GraphQL 与 REST 109

6.4.1 过度获取 109

6.4.2 获取不足 110

6.5 练习 6：将 GraphQL API 添加到 Next.js 111

6.5.1 创建模式 112

6.5.2 添加数据 112

6.5.3 实现解析器 113

6.5.4 创建 API 路由 114

6.5.5 使用 Apollo 沙盒 115

6.6 总结 117

第7章 MongoDB 和Mongoose 118

7.1 应用如何使用数据库和对象关系映射器 118

7.2 关系型和非关系型数据库 119

7.3 设置 MongoDB 和 Mongoose 120

7.4 定义 Mongoose 模型 120

7.4.1 接口 121

7.4.2 模式 121

7.4.3 模型 122

7.4.4 数据库连接中间件 123

7.5 查询数据库 124

7.5.1 创建文档 124

7.5.2 读取文档 125

7.5.3 更新文档 125

7.5.4 删除文档 126

7.6 创建端到端查询 127

7.7 练习 7：将 GraphQL API 连接到数据库 129

7.7.1 连接到数据库 129

7.7.2 向 GraphQL 解析器添加服务 130

7.8 总结 131

第8章 使用Jest 框架进行测试 132

8.1 测试驱动开发和单元测试 132

8.2 使用 Jest 133

8.3 创建测试示例模块 134

8.4 测试用例的结构 134

8.4.1 准备 135

8.4.2 执行 136

8.4.3 断言 136

8.5 使用 TDD 138

8.5.1 重构代码 139

8.5.2 评估测试覆盖率 141

8.6 用仿真、存根和模拟替换依赖项 142

8.6.1 创建有依赖项的模块 143

8.6.2 创建测试替身文件夹 144

8.6.3 使用存根 145

8.6.4 使用仿真 146

8.6.5 使用模拟 146

8.7 其他类型的测试 147

8.7.1 功能测试 148

8.7.2 集成测试 148

8.7.3 端到端测试 148

8.7.4 快照测试 149

8.8 练习 8：为天气应用添加测试用例 149

8.8.1 使用 spies 测试中间件 150

8.8.2 创建模拟来测试服务 152

8.8.3 对 REST API 进行端到端测试 156

8.8.4 用快照测试评估用户界面 157

8.8.5 第一版 158

8.8.6 第二版 160

8.9 总结 161

第9章 OAuth 授权 162

9.1 OAuth 工作原理 162

9.1.1 认证与授权 162

9.1.2 OAuth 的作用 163

9.1.3 授权类型 164

9.1.4 Bearer 令牌 164

9.2 授权码流程 166

9.3 创建 JWT 令牌 167

9.3.1 头部 167

9.3.2 负载 168

9.3.3 签名 170

9.4 练习9：访问受保护的资源 172

9.4.1 设置客户端 173

9.4.2 登录以获取授权许可 174

9.4.3 使用授权许可获取访问令牌 175

9.4.4 使用访问令牌获取受保护的资源 176

9.5 总结 177

第10章 使用Docker 进行容器化 178

10.1 容器化架构 178

10.2 安装 Docker 179

10.3 创建 Docker 容器 179

10.3.1 编写 Dockerfile 180

10.3.2 构建 Docker 镜像 180

10.3.3 从 Docker 容器提供应用服务 181

10.3.4 定位暴露的 Docker 端口 182

10.3.5 与容器交互 183

10.4 使用 Docker Compose 创建微服务 183

10.4.1 编写 docker-compose.yml 文件 184

10.4.2 运行容器 185

10.4.3 重新运行测试 186

10.4.4 与 Docker Compose 进行交互 187

10.5 总结 188

第二篇 全栈应用 189

第11章 设置Docker 环境 191

11.1 Food Finder 应用 191

11.2 使用 Docker 构建本地环境 192

11.2.1 后端容器 192

11.2.2 前端容器 195

11.3 总结 199

第12章 构建中间件 200

12.1 配置 Next.js 使用绝对路径导入 200

12.2 连接 Mongoose 数据库 201

12.2.1 编写数据库连接代码 201

12.2.2 修复 TypeScript 警告 203

12.3 Mongoose 模型 204

12.3.1 创建模式 204

12.3.2 创建位置模型 206

12.4 模型的服务 207

12.4.1 创建位置服务的自定义类型 208

12.4.2 创建位置服务 208

12.4.3 测试服务 211

12.5 总结 212

第13章 构建GraphQL API 213

13.1 设置 213

13.2 模式 214

13.2.1 自定义类型和指令 214

13.2.2 查询模式 214

13.2.3 变更模式 215

13.3 将类型定义合并到最终模式 215

13.4 GraphQL 解析器 216

13.5 为 Next.js 添加 API 端点 218

13.6 总结 220

第14章 构建前端界面 221

14.1 用户界面概览 221

14.2 起始页面 222

14.2.1 列表项 222

14.2.2 位置列表 224

14.2.3 页面 225

14.3 全局布局组件 228

14.3.1 标志组件 228

14.3.2 页眉组件 230

14.3.3 布局组件 231

14.4 位置详情页面 233

14.4.1 组件 234

14.4.2 页面 235

14.5 总结 237

第15章 添加OAuth 认证 238

15.1 使用 next-oauth 添加 OAuth 238

15.1.1 创建 GitHub OAuth 应用 238

15.1.2 添加客户端凭证 239

15.1.3 安装 next-auth 239

15.1.4 创建认证回调 240

15.1.5 在页面和组件间共享会话 242

15.2 通用按钮组件 243

15.3 AuthElement 组件 246

15.4 将 AuthElement 组件添加到页眉 248

15.5 愿望清单 Next.js 页面 251

15.6 将按钮添加到位置详情组件 253

15.7 保护 GraphQL 变更 256

15.8 总结 261

第16章 在Docker 中运行自动化测试 262

16.1 将 Jest 添加到项目中 262

16.2 设置 Docker 263

16.3 为页眉元素编写快照测试 265

16.4 总结 266

附录A TypeScript 编译器选项 267

附录B Next.js 应用目录 269

附录C 通用匹配器 295