这篇博客其实是以一次公司内的技术分享为基础做的调研和总结归纳，包含了我自己很多不成熟的观点看法。这次分享主要是想向新同事介绍为什么我们选择在项目中大规模使用 GraphQL 而不是更传统更简单的 RESTful API。

GraphQL 是什么

在上一篇有关 GraphQL 的博客里，我简单地说明了 GraphQL 的定义及其大致用途，贴了官网链接就开始介绍我使用 GraphQL 的“更优雅的”方式，对 GraphQL 本身描述得并不多。这里又贴一下英文的定义：A query language for your API

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

划重点，它是一种查询语言和使数据可查询的运行时。作为一种语言，它有自己的语法，能够定义Type, Enum, Input, Fragment, Query, Mutation等元素，熟悉 Typescript 的朋友会对此感到亲切。而在前端开发中需要重点关注的是以下几个部分：

起因

「代码写了不测等于白写」我总是跟身边的朋友这样调侃。然而我们写前端项目时很难在代码层面进行测试，大部分函数都是基于事件响应，接收用户输入的参数，并对页面组件或数据产生一定副作用，Mock 起来很麻烦。所以前端项目的测试往往都是端到端测试，即模拟用户在页面上进行操作，测试路径越离奇越好，因为无法提前预知用户会如何使用，所以最好在测试时可劲儿造。

曾经还会想着用 Cypress 等自动化工具进行端到端测试，例如用代码定义【打开某页面–>拖拽滑动条至页面下方–>点击输入框使之获取焦点–>输入“Hello world”–>按下回车–>等待页面响应–>观察响应是否符合预期】这个过程，但只要遇到元素稍多的页面，编写测试用例的过程就会变得机械呆板。

如果组件足够小，内容够聚焦，那么测一下也不是不可以。因为想在不同的项目中复用同一套富文本编辑组件(体积比较大，且包含机器构建的 JS)，我把它单独提出来作为 NPM 包发布以便各个项目安装使用。这当中编码和测试都遇到了一些问题。

背景

Nginx 读作 engine x，是一个高性能的 HTTP 和反向代理服务器，还能用作邮件代理服务器或是通用的 TCP/UDP 代理服务器。有过后端程序部署经历的同学应该会有所了解，用 Nginx 能够很方便地完成反向代理、服务静态文件、实现负载均衡、接入 HTTPS 协议等任务。

根据官方文档里面写到的，除了提供静态文件服务、反向代理和负载均衡等功能之外，还提供以下包括单不限于若干个方面的支持：

1. FastCGI, uwsgi 之类服务器和反向代理服务器的缓存支持；
2. 以域名/IP 为基础的虚拟服务器、Keep-alive 和流水线链接的支持；
3. 访问日志、错误日志的输出和格式化，带缓存的日志写机制；
4. 3xx-5xx 错误码重定向，根据正则表达式重写 URI (Rewrite)；
5. 基于客户端地址的访问控制和函数调用；
6. HTTP referer 的验证、支持除了 GET 外的几种 HTTP 方法： PUT/DELETE/COPY/MOVE/MKCOL；
7. FLV/MP4 的流播放、响应限流、限制单点的并发连接数和请求数；
8. 等等…（上面只列了我读得懂的）

Nginx 的功能实在太多了，在这里全部列出来不太可能。一直以来我对 Nginx 都停留在“配置是什么，work 就行”的态度。因为这周程序部署时遇到的一点问题，上网搜了好多帖子、博客寻求解决方法那种捉襟见肘、有病乱投医的样子让我觉得很狼狈。借此为契机，决定周末看一下 Nginx 的官方文档。nginx 旧版的官网文档组织混乱，建议移步 Nginx Plus (Nginx 的商业版)官网。Nginx 和 Nginx Plus 的对比放在这里。

关于 GraphQL，它的官网(需要科学上网)是这样介绍的：

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

作为 RESTful API 的竞品，GraphQL 从开源之初就备受关注，一是因为它是由 Facebook 开源的项目，二是它挑战了 RESTful API 的地位，这是很关键的一点。RESTful API 利用 URI 的具体内容和请求方法来区分请求的资源或者方法，其中的资源 URI 容易与路由路径产生混淆和重复；资源数量达到一定的数目之后，如何给资源 URI 起名或许也是一件困难的事情。而 GraphQL 则鼓励开发者将所有需要请求的信息显式的写在请求体当中，精确到具体的字段，不多也不少。

我参与的几个项目都是用 GraphQL 作为 API 的基础，我总结出了一个在前端相对优雅地使用 GraphQL 的方法。这篇博客不讨论 GraphQL 的基本概念，主要介绍这个方法。（为省篇幅，这篇博客里面的代码均不做异常处理）

从本科到现在总共参加过三次微信小程序大赛，前几天刚完成赛区决赛的答辩，心想着以后应该都不想再参加了，于是想记录一下这次的参赛经历。

2018 和 2020

2018 阴差阳错

微信小程序从 2017 年正式上线博得广大关注，在第二年 2018 年春季，微信就推出了全国高校微信小程序开发大赛，吸引了很多大学生参加，我就是其中一个。正在读大二的我报名了一位学长组织的 SRT(Student Research Training) 项目，原本的题目是要开发一款在线客服平台。然而当时已经把项目申请里面提到的客服平台提前完成了，于是我们真正做的就变成了小程序。甚至还用这个小程序参加了第一届的微信小程序大赛。

背景

最近一两年写前端项目时一直都有接触 ESLint，很多文档和博客也一直都推荐使用开发者 ESLint，但是一直以来都没有好好地学习过它。最近因为使用 Nuxt 开发时 ESLint 缓存出问题导致浪费了半个小时，我越发觉得有必要深入地了解一下这个前端开发中最常使用的代码风格规范工具了。（不得不说，Nuxt 这个框架真的有点难用。）

ESLint 的用途和初衷

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。维基百科上这样解释的：lint, or a linter, is a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs. 就是说 ESLint 是写 javascript 时用来分析静态代码是否存在语法错误、代码风格错误和可疑结构的工具。

学习 React 的初衷

之前说过想要学习 React，秉持着边学边记录的想法，我随即开启了这篇帖子。

从 Vue 说起

我是一个 Vue 的忠实粉丝，虽然没有全部读过 Vue 的源码，但是对它的基本实现原理和大体的使用方法还是比较熟悉的。我自己思考过，我觉得我喜欢 Vue 大概率是因为我最早接触的前端开发框架就是 Vue。记得是 2018 年参加一项 SRT 的时候，为了开发一款简单的后台管理系统，我开始学习 javascript 以及 Vue。

当时我还是第一次接触脚本语言，对没错，我接触 javascript 比接触 python 更早一些。熟悉了 C/C++ 的继承机制之后，突然要接受 javascript 的原型链继承一时间有点缓不过来。但是后来还是被磨平了棱角，被迫接受了原型这一设计。为了开发 Web 应用通过一位学长的介绍接触到了 Vue 这个框架。我直接惊为天人，还能这样写？因为根据我更早之前的一些浅显的印象，Web 开发是分别要编写 HTML，javascript 和 CSS 三种文件的。现在用 Vue 一个文件就可以生成一个完好的页面，着实非常酷炫。也是在 Vue 这里，我了解到了组件、生命周期、全局状态管理、前端路由等等一些重要的概念，所以先入为主地对 Vue 有强烈好感也正常吧。

在上一篇博客《聊聊微信小程序及其框架》里面立了个调研微信小程序开发框架的 flag ，这篇博客就来填这个坑——我迫不及待地想要掌握一个能够“舒适编写”小程序代码的框架。

我之前提到我最想先要了解的是 WePY 和 uni-app 这两个小程序框架，WePY 是微信官方出品的小程序框架，uni-app 是使用 Vue 开发小程序的最火的小程序框架，但是这两个框架都让我特别失望。

摘要

论文描述的方法简称 RBAC，基于角色的访问控制，是目前非常主流的访问控制方法。用户（User）、角色（Role）和权限（Permission）是论文中最主要的三个概念。角色和用户组这个概念很像，但是用户组仅仅只是一个用户集合，而角色则联系着用户和权限。说到底都是为了让用户获取权限来执行相应的操作，不管是加入角色还是用户组，都只是一个中间态。

RBAC0 是基础模型，是任何系统实现 RBAC 的最低要求。RBAC1 和 RBAC2 都包含了 RBAC0，但是分别加入了不同的特性。RBAC1 加入了角色层级特性，即角色 A 可以通过继承角色 B 获取角色 B 拥有的权限。RBAC2 加入了约束特性，控制用户对 RBAC 中不同资源、组件的权限。而 RBAC3 包括了角色层级和约束。示意图如下所示，其中基础模型 RBAC0 是实线部分。

背景

在毕业设计时捣鼓了一会应用的持续集成(Continuous Integration, CI)和持续部署(~ Deployment, CD)，发现确实可以为自己省下很多力气：

• 不用每次把代码通过 scp 或者 sftp 传到服务器上再 build 运行
• 也不用在本地交叉编译之后再传到服务器上

之前在公司实习时所有的分支合并都会涉及到 CI 和 CD，当时为了让代码编译通过费了很多心思。虽然自己push代码的时候比较费劲，但是确确实实可以给应用的部署和可用性提供保障。

最近在看阮一峰大神的技术博客时偶然看到了Github Actions的入门基本教程，发现 github 把 CI 脚本商品化、组件化放到 Marketplace 里供用户挑选和使用是一个非常不错的思路，让 github 的开源文化更加吸引人了。
我把上面那篇博客看完之后发现其实和 Travis CI 差不多，或者说其实所有的 CI 系统都差不多。抱着接触新事物的热情，我还去看了 github actions 的官方文档，下面对我所了解到的一些信息进行一个汇总。