内容简介

JavaScript 是目前非常流行的一门语言，通过借助 Node.js 运行于浏览器之外，赋予了 JavaScript 强大的生命力。本书主要讲授了如何基于 JavaScript 技术栈，与阿里巴巴企业级 Node.js 框架 Egg.js 开发一个简易版 Dribble 应用产品。

并讲解了如何从一个技术人的角度去看待独立产品开发的流程，哪些科学的方法我们是可以值得一试，以及有哪些好用的工具，包括设计、开发、调优、运维等方面的一些经验。本书都将带你一一实践，得出真知。

为了方便读者学习，所有代码都将放到 Github 上面，大家可以自行下载查阅。

https://github.com/MiYogurt/nodejs_shizhan

写作思路

从一个技术人的角度出发，如何利用自身技术人的优势？基于 JavaScript 语言，使用阿里巴巴的企业级 Node.js 开源框架Egg.js完成后端开发。前端则使用 Vue.js 构建交互页面，并完成服务端渲染，解决 SEO 顾虑，达成前后端分离。并落地实践 DevOps 与容器化应用，达到快速迭代产品、无痛的横向扩展的目的。

适合初、中级有意向往全栈发展的前端开发工程师，同时对希望制作一个自己的产品相关技术人员也有所帮助。

目录如下，一共8章，全文 38w 字左右，具体多少页，编辑老师说 350 页起步。还在修订，最迟8月份。

• 为什么是 JavaScript 语言？

  • 低成本

    • 非常流行

    • 运用范围广

• 为什么 Node.js 经常被说不适合大型应用？

  • 应用的组成

    • 应用的种类

    • 应用服务的过程

      • Request 请求过程

        • Response 返回过程

    • 应用的瓶颈

    • 分布式应用

    • 多进程的 Node.js

• 安装 Node.js

  • Windows

    • Mac

      • 方式一

        • 方式二

    • Linux

    • 更改 npm 源地址为淘宝源

    • 如何更新 npm

• 什么样的产品才是好产品？

  • 痛点

    • 痒点

    • 卖点

    • 答案

    • 怎样去做一个产品？

      • 产品是否值得去做？

        • 如何调研？

        • 计划与规划

        • 提炼需求

        • 设计

        • 开发

        • 上线

        • 阶段性产出

• 分析与调研

  • SWOT

    • 调研

• 制定计划

  • 制定计划的好处

    • 什么是甘特图？

    • 画甘特图

    • 小结

• 需求分析

  • 用户故事例子

    *   [小 A 的故事](#toc_45)
    
        *   [小 B 的故事](#toc_46)
    
        *   [小 C 的故事](#toc_47)
    

    • 需求到功能

    • 功能到界面

• 分析页面元素

  • 取色

    • 页首

    • 页尾

    • 首页

    • 登陆页面

    • 忘记密码页面

    • 注册页面

    • 个人中心页面

    • 博客列表页

    • 播客 FM 列表页

    • 画廊详情页

    • 博客详情页

    • 播客 FM 详情页

    • 博客编辑页

    • 画廊编辑页

    • 团队相关页面

    • 总结

• 设计公共区域

  • 获取 Sketch

    • Sketch 界面

      • 顶栏

        • 左边栏

        • 右边栏

    • 设计页首

      • 创建背景

        • 打开网格

        • 添加 logo

        • 插入文字

        • 创建组件模板

    • 设计页脚

      • 背景

        • Logo 与社会化链接

        • 友情链接与关于

        • 活动与统计

        • 最终效果

• 设计首页

  • 做一些调整

    • 安装图标字体包

    • 设计筛选

    • 设计画廊容器

      • 快速图片技巧

        • 模板组件的插入

        • 快速排列

• 设计登陆相关页

  • 设计登陆页

    • 注册页

    • 忘记密码页

• 设计个人中心相关页

  • 我的画廊

    • 我的邀请码

    • 我的团队

• 顶部导航链接相关页

  • 博客列表页

    • 博客详情页

    • FM 列表页

    • FM 详情页

    • 团队列表页

    • 团队详情页

    • 画廊详情页

    • 小节

• 设计数据库与数据关系

  • 确认表

    *   [User 表](#toc_113)
    
        *   [Invitation 表](#toc_114)
    
        *   [Image 表](#toc_115)
    
        *   [ImageComment 表](#toc_116)
    
        *   [Post 表](#toc_117)
    
        *   [PostComment 表](#toc_118)
    
        *   [Category 表](#toc_119)
    
        *   [Tag 表](#toc_120)
    
        *   [TagInfo](#toc_121)
    
        *   [FM 表](#toc_122)
    
        *   [Team 表](#toc_123)
    
        *   [TeamStatus 表](#toc_124)
    
        *   [Order 表](#toc_125)
    

    • 小结

• 异步基础

  • 什么是异步

    • 回调实现异步

    • 事件实现异步

    • 观察者模式实现异步

    • Promise 异步

    • async/await 大杀器

    • 小结

• koa.js 基础

  • Koa.js 中间件核心代码

    • Koa.js 插件

      • 使用中间件

        • 创建一个中间件

    • 小结

• Egg.js 基础

  • 实现 egg-core

    • 实现 egg-init

      • 使用 egg-init

        • egg-init 的原理

    • 实现 egg-cluster

• Egg.js 插件

  • egg-socket.io

    *   [如何使用](#toc_149)
    
        *   [最小运行实例](#toc_150)
    

    • 原理解读

      • 目录约定

        • 添加建立连接中间件

        • 添加发包中间件

        • 中间件初始化

        • 命名空间与事件名称（路由）

        • 添加一些帮助方法

• 制作一个 Egg.js 插件

  • • 初始化项目

      *   [声明默认配置](#toc_160)
      
      *   [创建中间件](#toc_161)
      
      *   [建立视图](#toc_162)
      
      *   [插入中间件](#toc_163)
      
      *   [手动测试](#toc_164)
      

• 安装相关组件

  • 初始化

    • 准备数据库配置

    • Sequelize API

    • User 表

    • Invitation 表

    • Image 表

    • ImageComment 表

    • Post 表

    • PostComment 表

    • Category 表

    • Tag 表

    • TagInfo 表

    • FM 表

    • Team 表

    • TeamStatus 表

    • Order 表

    • 查看migration 状态

    • 代码写错了怎么办

    • 进行同步到数据库

    • 添加一些用户数据

• 发布一个插件

  • 创建 flash 插件

    *   [初始化项目](#toc_188)
    
        *   [安装依赖](#toc_189)
    
        *   [修改插件名字与依赖](#toc_190)
    
        *   [修改测试里面的逻辑](#toc_191)
    
            *   [安装依赖](#toc_192)
    
                *   [开启插件](#toc_193)
    
                *   [修改 controller/home.js](#toc_194)
    
                *   [修改 router.js](#toc_195)
    
        *   [小小的测试一下](#toc_196)
    
        *   [创建 app/middleware/flash.js](#toc_197)
    
        *   [把这个中间件插入到 session 之后](#toc_198)
    
        *   [查看代码测试覆盖率](#toc_199)
    
        *   [更新 README.md](#toc_200)
    
        *   [提交到仓库](#toc_201)
    
        *   [发布到 npmjs](#toc_202)
    
        *   [上传测试覆盖率](#toc_203)
    
        *   [测试 CI 是否成功](#toc_204)
    

    • 使用 egg-msg-flash

    • 使用 egg-y-validator

• 规范化

  • 添加新的 scripts 支持 ESLint 自修复

    • 添加插件支持

      • 安装

        • 如何解决错误

    • prettier 格式化工具

      • 安装依赖

        • VSCode 的配置

        • 创建 .prettierrc

    • 同步代码编辑器配置

• 第一个 JSON 请求

  • 给全局添加一些方法

    *   [添加代码](#toc_219)
    
        *   [函数柯里化](#toc_220)
    
        *   [check 函数](#toc_221)
    
        *   [函数组合](#toc_222)
    
        *   [添加方法](#toc_223)
    
        *   [装载辅助方法](#toc_224)
    

    • 全局化一些东西

      • 创建 BaseContrller

        • 测试一下 use

    • 自动路由

      • 新建 app/api.js

        • 新建 app/utils.js

        • 新建 app/contrller/user.js

    • 创建 PostMan 测试

      • 安装 PostMan

        • 解决 CSRF 问题

• 注册服务

  • Invitation 模型

    *   [安装依赖](#toc_237)
    
        *   [添加逻辑](#toc_238)
    

    • 注释

      • 安装插件

        • 查找 TODO

        • 方法注释

    • User 模型

      • 安装依赖

        • 添加逻辑

    • 修改控制器

    • 添加验证逻辑

    • 帮助方法

    • User 服务

    • PostMan 测试

• 登陆服务

  • 安装依赖

    • 添加环境变量判断

    • 开启插件

    • 自动函数

    • 路由

    • 添加 passport 逻辑

    • 添加本地验证逻辑

    • 表单验证逻辑

    • 验证

• 邮件与调试

  • 理解发送邮件的原理

    • 安装邮件插件

    • 环境与调试

      • 添加全局方法

        • 修改之前的调试方式

    • 全局调试

    • VSCode 全局调试

    • 发送验证邮件

      • 安装依赖

        • 为 VSCode 添加 nunjucks 代码片段

        • 安装 redis

    • 添加逻辑

      • service

        • 扩展

        • 控制器

        • 验证

        • 添加视图

        • 路由

        • 兼容方案

    • 验证

      • 注册用户

        • 找回密码功能

• 构建 RESTful API

  • 什么是 RESTful API

    • 创建 RESTContrller 基础类便于继承

      • 创建 app/controller/rest.js

        • app/controller/image.js

        • 注册路由

    • 测试 Images RESTful API

      • POST 创建

        • DELETE 删除

        • GET 列表

        • GET 单个数据

        • PUT 修改

    • 构建后台的 REST 路由

      • 构建简单的 HTTP 验证

        • 构建 http auth 的路由

        • 构建控制器

          • app/controller/all.js

            • app/controller/admin.js

    • 测试后台路由

    • 关于验证

      • 小小的测试一下

• 安全的开放 API

  • 了解 OAuth 2.0

    • 授权码登录的流程

    • 实现数据结构表

      • 生成 Client Model

        • 修改 Client Model

        • 生成 Authorization Model

        • 修改 Authorization Model

        • 创建 Access

        • 修改 Access 模型

        • 创建 Refresh

        • 修改 Refresh 模型

        • 创建表

    • 安装插件

      • 开启插件

        • 配置插件

        • 创建实现接口

• 实现 OAuth 接口

  • 实现授权码官方文档所要求接口

    *   [实现 getAuthorizationCode](#toc_324)
    
            *   [官方实现的版本](#toc_325)
    
                *   [我们实现的版本](#toc_326)
    
        *   [实现 getClient](#toc_327)
    
            *   [官方实现的版本](#toc_328)
    
                *   [我们实现的版本](#toc_329)
    
        *   [实现 saveToken](#toc_330)
    
            *   [官方实现的版本](#toc_331)
    
                *   [我们实现的版本](#toc_332)
    
        *   [实现 saveAuthorizationCode](#toc_333)
    
            *   [官方实现的版本](#toc_334)
    
                *   [我们实现的版本](#toc_335)
    
        *   [实现 revokeAuthorizationCode](#toc_336)
    
            *   [官方实现的版本](#toc_337)
    
                *   [我们实现的版本](#toc_338)
    
        *   [实现 validateScope](#toc_339)
    
            *   [官方实现的版本](#toc_340)
    
                *   [我们实现的版本](#toc_341)
    
        *   [实现 verifyScope](#toc_342)
    
            *   [官方实现的版本](#toc_343)
    
                *   [我们实现的版本](#toc_344)
    

    • 实现刷新验证码接口

      • 实现 getRefreshToken

        *   [官方实现的版本](#toc_347)
        
            *   [我们实现的版本](#toc_348)
        

        • 实现 revokeToken

          • 官方实现的版本

            • 我们实现的版本

        • 实现用户认证

          • 官方实现的版本

            • 我们实现的版本

    • 实现 authenticate 所需接口

      • 实现 getAccessToken

        *   [官方实现的版本](#toc_357)
        
            *   [我们实现的版本](#toc_358)
        

• 完善 OAuth 与测试

  • 发放 Token

    *   [暂时关闭 jwt](#toc_361)
    
        *   [添加路由](#toc_362)
    
        *   [修改 home 控制器](#toc_363)
    
        *   [添加视图](#toc_364)
    
        *   [添加数据](#toc_365)
    

    • 新建客户端项目

    • 测试 OAuth

      • 访问 localhost:7002

        • 自动跳转

        • PostMan 测试所保护的接口

        • 添加 scope

• 支付宝支付

  • 什么是非对称加密

    • 注册支付宝

    • 生成非对称秘钥

    • 实现

      • 添加配置

        • 扩展 context

        • 创建 Pay 控制器

    • 添加路由

    • 内网穿透

    • 测试

      • 访问支付页面

• 社会化登陆

  • 创建记录表

    • 修改 migration

    • model

    • 同步到数据库表中

    • 安装插件

    • 配置路由

    • 添加逻辑

    • 测试

    • 开启 jwt

• 开始后端

  • 安装 VSCode 插件

    *   [如何打开调试？](#toc_396)
    

    • 获取脚手架

    • 安装依赖

    • 修改代码

      • 添加主题样式

    • 跨域请求

      • 什么是跨域。

        • 怎样解决跨域呢？

          • JSONP

            • CORS

    • 修改后端代码支持跨域

      • 安装 egg-cors

        • 添加 jsonp 支持

        • 添加计算表数据的 api

        • 修改前端的代码

        • 启动前端的服务

        • 添加一下获取后端表结构的路由

    • 在前端添加存储

      • 修改 client/api.js

        • 修改 store/index.js

        • 修改 views/home.vue

• 模型列表

  • 修改后台查询接口

    • 修改 .eslintrc.json

    • 添加帮助方法

    • 在入口添加载入数据逻辑

    • 修改样式

    • 创建视图工厂

      • 创建视图模板

    • 添加获取数据方法

    • 在首页添加一些链接

    • 删除原有的样式

    • 测试一下页面

• 添加数据

  • jsx 语法

    • 安装依赖

    • 初始化插件

    • 创建显示名字映射

    • 新建 VForm 组件

    • 测试

• 修改逻辑

  • 添加图标

    • 添加 API 接口

    • 修改视图

    • 修改静态框逻辑

    • 测试

      • 修改

        • 删除

    • 构建

      • 开始构建

        • 配置后台

    • 小结

• 搭建前端开发环境

  • 开始

    *   [安装依赖](#toc_450)
    
        *   [删除缓存](#toc_451)
    

    • 创建 Header 头部

      • 安装样式依赖

        • 创建文件

        • 添加移动端效果

        • 实现生命周期函数钩子？

    • 将变量提取出来

    • 添加路径重写

• AppFooter 组件

  • 做一些配置

    • 创建 src/components/layouts/AppFooter.vue

      • 添加图标文件

        • 第一栏

        • 第二列

        • 第三列

        • 第四列

    • 网络识别信息

    • 修改一下全局样式

    • 查看页面

    • 提升一下编译速度

• 首页

  • 配置

    • 安装依赖

    • 创建 src/views/index.vue

    • 异步加载

    • 新建 api 目录

    • 开启插件

    • 新建数据存储器

    • 为什么需要数据存储器 store ?

    • 修改 index.vue

    • 效果

      • 在移动端的效果

        • 没有更多的效果

        • 多列模式

        • 大图模式

• 替换成为真实数据

  • 完成后端 Image API

    *   [添加控制器](#toc_488)
    
        *   [注册路由](#toc_489)
    
        *   [用 PostMan 测试一下](#toc_490)
    

    • 修改首页的代码

      • 页面逻辑

        • 添加样式

        • 添加模板

    • 添加 API 逻辑

      • 新建 api/v1/common.ts

        • 混合

        • 修改 store/index

    • 效果

      • 桌面端

        • 移动端

• 图片详情页

  • 创建路由

    • 安装依赖

    • 创建视图

      • 添加样式

        • 添加逻辑

        • 添加模板

        • 组件样式

    • 添加插件

      • 修改 src/app.sass

        • 修改 src/plugin.ts

        • Hack DOM

    • 创建评论组件

      • 新建模板

        • 新建 AppComment.vue

          • 添加模板

            • 添加逻辑

    • 测试

      • 默认情况

        • 点击评论数

        • 显示评论框

    • 关于服务端访问 DOM

      • 把访问 DOM 的逻辑放在 mounted 或 beforeMount 里面去

        • 尽量尝试使用源码 vue 组件

        • 使用指令

        • vue-quill-editor/src/ssr.js 是否真正的运行在服务端

• 注册页面

  • 注册路由

    • 新建 signup.vue 页面

      • 添加模板

        • 添加样式

        • 添加 API

        • 添加逻辑

    • 增强错误提示

• 登陆页面

  • 安装依赖

    • 添加路由

    • 页面

      • 模板

        • 样式

        • 页面逻辑

    • 载入用户 token

    • 添加发送请求 API

    • 添加全局状态

    • 修改菜单栏

      • 模板

        • 退出逻辑

        • 映射全局状态

    • 社会化登陆

      • 启动内网穿透

        • 更新网址

        • 修改视图的链接

        • 修改后端 jwt

        • 修改重定向地址

          • 配置 frontURL

            • 修改 app/passport/github.js

    • 测试

      • Github 登陆

        • 普通登陆

        • 输入错误的情况

        • 输入正确的情况

    • 升级方案

      • 方案一

        • 方案二

• 完善详情与评论

  • 安装依赖

    • 添加全局 filter

    • 添加后端逻辑

      • 添加 API

        • 创建 comment 控制器

        • 为 image 控制器添加 show 方法

    • 添加 SPA API 方法

    • 修改 store 存储

    • 修改首页视图

    • 修改详情视图

      • 模板

        • 逻辑

    • 修改评论组件

      • 模板

        • 逻辑

    • 测试

      • 详情评论

        • 画廊功能

        • 提交评论

        • at 功能

• 个人中心

  • 解决一些 Bug

    • 重构一些代码

      • 视图名称

        • 用户信息盒子组件

        • 图片组件

        • 图片 DOM 组件

    • 个人中心首页

      • 新建 views/me.vue

        • 创建 views/me 文件夹

          • left-menu.vue

            • index.vue

    • 个人中心邀请码页

      • 新建 view/me/invitation.vue

    • 添加路由

    • 完善 API

      • 修改 api/v1/client/index.ts

        • 修改后端 api

          • 先在 app/api.js 里面添加路由

            • 修改 app/controller/image.js

            • 新建 app/controller/invitation.js

    • 测试一下

      • 个人中心首页

        • 个人中心邀请码页

• 创建图片

  • 创建又拍云存储

    *   [安装 SDK](#toc_613)
    
        *   [后端配置](#toc_614)
    

    • 添加后端 api

      • 创建路由

        • 添加控制器

        • 如何存储图片？

    • 前端界面

      • 添加前端 API

        • 添加路由

        • 创建页面

          • 添加样式

            • 添加模板

            • 添加逻辑

    • 测试

      • 将图片拖入选项框中

        • 删除图片

        • 点击上传图片按钮

        • 查看服务里面是否上传完成

        • 提交数据

• 团队

  • 功能是如何工作的？

    • 数据库

      • 给 Team 添加 lock 字段

        *   [命令](#toc_636)
        
            *   [up 方法](#toc_637)
        
            *   [down 方法](#toc_638)
        

        • 角色表

          • 命令

            • Migration

            • Model

        • 权限表

          • 命令

            • Migration

            • Model

        • 用户角色关联表

          • 命令

            • Migration

            • Model

        • 角色权限关联表

          • 命令

            • Migration

            • Model

        • 修正 Team 的关联关系

    • 后端

      • 添加后端路由

        • 添加 Team 控制器

        • 团队动态

        • 检测团队是否过期

        • 修改支付成功重定向地址

    • 前端

      • 添加前端 API

        • 添加路由

        • 导入页面

        • 路由配置

        • 团队页

        • 创建页

    • 测试

      • 创建团队

        • 添加成员

• 认识 Docker

  • 解决了什么问题？

    *   [频繁搭建环境](#toc_674)
    
        *   [环境不一致](#toc_675)
    
        *   [二次虚拟化](#toc_676)
    

    • 使用 Docker 的流程

    • 安装 Docker

    • 使用加速器

    • 下载一个基础镜像

    • hello world

• 手动构建镜像

  • Docker 架构

    • 学习使用命令行

      • 查看已有的镜像

        • 下载镜像

        • 删除镜像

        • 运行镜像

        • 查看所有容器

        • 将修改好的容器提交为镜像

        • 登陆镜像中心

        • 创建镜像副本

        • 推送镜像

        • 如何搭建私有的镜像

        • 删除一个容器

        • 停止运行一个容器

        • 重启并重新接管 shell

        • 让运行的容器再开一个 shell

    • 总结

• 编写 Dockerfile 文件

  • 如何从 Dockerfile 构建镜像

    • FROM 指令

    • RUN 命令

    • CMD 与 ENTRYPOINT 命令

    • VOLUME 指令

    • COPY 与 ADD

    • EXPORT

    • WORKDIR

    • 运行一个 Server 实例

• Docker Compose

  • 安装 docker-compose

    *   [pip 安装](#toc_712)
    
        *   [手动下载](#toc_713)
    

    • 命令行接口

      • build

        • up

        • logs

        • down

        • ps

        • stop

        • start

        • restart

        • exec

    • egg.js 简单实例

      • 先初始化项目

        • 安装依赖

        • 创建 Dockerfile

        • 创建 docker-compose.yml

        • 构建镜像

        • 启动

        • 测试一下

    • 增加服务

      • 安装依赖

        • 开启依赖

        • 修改 docker-compose.yml

        • 启动

        • 确认数据是否持久化

        • 数据库迁移

        • 清空

• 集群

  • Docker 集群

    • 集群初始化

      • 初始化主节点

        • 连接主节点

        • 在集群里面部署应用

        • 查看运行的应用

        • 删除应用

    • docker-compose.yml

    • 实例

      • 添加代码

        • 添加配置

        • 初始化节点

        • 构建镜像

        • 运行

        • 查看服务

        • 访问 web

• 持续部署

  • 部署主机免密码登陆

    • 客户端钩子

      • 搭建项目环境

        • 初始化仓库

    • 使用服务端钩子部署

      • 初始化服务器仓库

        • 初始化本地仓库

    • 使用 shipit

      • 安装依赖

    • 使用 ansible 部署

      • 安装

        • 搭建环境

        • 运行命令执行脚本

        • pm2 错误

• 持续集成

  • 创建 Docker 镜像服务

    • 创建仓库

    • 修改

    • 本地测试一下

    • 让腾讯云帮我们构建

    • 创建工作流水线

    • 部署

• kubernetes 集群

  • 简单使用

    • 如何创建应用？

    • 命令行管理

      • 下载 kompose

        • 转换文件

        • 创建集群

        • 安装管理工具

        • 尝试 Kompose

    • 通过 UI 创建应用

    • 添加持续集成

    • 固定 IP

    • 部署前端