前言
之前看过国外一个开发者tipsy用kotlin开发了一个github profile summary，我觉得他的想法非常棒，所以我想着用Node的技术栈来实现一遍。
我的技术栈是Vue和Koa，所以在实现上我就用了它们分别来做前端和后台。
先放张效果图：
项目结构
.
├── LICENSE
├── README.md
├── app.js
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── jsconfig.json
├── now.json
├── package.json
├── server
│ ├── controllers
│ ├── middlewares
│ ├── router
│ └── utils
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.js
│ ├── router
│ └── views
├── static
└── yarn.lock
复制代码基本就是vue-cli生成的项目结构+Koa后端的项目结构，这个就不再赘述。
思路
利用github的api来获取所需要的用户信息，然后通过获取的用户信息来构建用户的github简历。一开始我打算用的也是github的RESTful api。不过马上我就遇到问题：
- github的RESTful api是有分页限制的。也就是比如我无法一次性获取一个用户的点过star的仓库，而需要判断是否有下一页、是否要请求到最后。
- RESTful的api会返回一堆我不需要的数据。而且数据量一大对性能要求会比较高。比如我只想要一个用户的仓库总数，我却需要获取完他所有的仓库我才能知道总数。
- 要发多个RESTful请求才能勉强完成一些功能，代价是耗时巨大。
综上，无法再继续用RESTful api来实现我想要的效果。于是我把目光转移到了GraphQL api上了。相信很多关注前端的朋友们对于这个词并不陌生，但是真正用上的少之又少——毕竟目前还是RESTful api为主的开发模式。
我也一样，一开始看GraphQL api的那些定义、结构什么的，感到非常困难。不过借助Github的GraphQL exploer以及Github GraphQL的官方开发者论坛，总算是大致实现了我想要的功能。
github提供的GraphQL api有一些特别有用的属性比如totalCount，就能计算一些参数的总数，比如上面说到的一个人拥有的仓库总数，而不用一个个仓库都获取才知道总数。
目前来说，GraphQL还不像RESTful那样通过直观的url来查询数据，而是通过用户自定义的graphql语句来实现需要的信息的查询。 比如统计用户Molunerfinn的仓库总数：
{
user(login: "Molunerfinn"){
repositories(affiliations: [OWNER COLLABORATOR] isFork: false){
totalCount
}
}
}
复制代码返回结果：(跟你的graphql结构是一致的)
{
"data": {
"user": {
"repositories": {
"totalCount": 24
}
}
}
}
复制代码所以现在node社区还没有什么特别好的库来像数据库的ORM一样帮我们简化写graphql的步骤。所有的请求都必须自己手写graphql。
项目流程
由于github的api查询数量限制，在有token的情况下一小时是5000次，所以tipsy的github profile summary做了限制，查询某个用户的github profile summary时必须先star这个仓库，才可以查询。因此我也做了一个这个的限制。
所以我在后端Koa处做了检测的接口，用于检测用户是否star，既可以防止恶意刷请求又可以给自己涨一波star岂不美哉~
前端Vue页面这边发起请求后判断返回值，如果是false说明并没有star，所以就不让其跳转的具体的profile页面。
async checkStar () {
this.loading = true
let res = await this.$http.get(`/api/check-status/${this.username}`)
if (res.data.success) {
this.$router.push({
name: 'Profile',
params: {
username: this.username
}
})
localStorage.setItem('github-profile-token', res.data.token)
} else {
this.invalid = true
this.invalidUsername = this.username
this.loading = false
}
}
复制代码如果请求结果正确，会把后端返回的json web token存入localStorage里用于鉴权。
当然，如果用户直接跳转profile页面，也会在路由的钩子里判断token存不存在？如果存在，放行。如果不存在，请求一遍用户是否star，如果star，放行，否则不放行。
其实业务逻辑都很简单，相信做过node前后端的你们能很快理解。为了减轻服务器的负担，后端在通过GraphQL请求完数据后，直接返回前端，利用前端浏览器的算力，来把数据组织出来通过chart.js来渲染出好看的图表：
当然为了方便大家分享和收藏，我也做了分享和保存为图片的功能：
为了能在手机端顺畅浏览，我也做了移动端的响应式适配~
部署
我采用的是now这个平台来部署，它能够部署node的应用，所以我就很开心的把我的应用部署上去啦~它会自动把我Koa暴露出去的端口反代到80端口，所以你可以直接访问https://gh-profile-summary.now.sh这个地址而不用自己来操心端口问题啦！
由于now.sh的免费额度每月只有1G，所以我还是切换到了我自己的服务器上了~
具体的开发经验和踩的坑之后我会发一篇文章来细说~可以关注我的掘金个人主页~
欢迎大家体验：
也可以分享你的github总结给你的朋友们啦~
写文章可以得异步社区的书！爱读书的技术人都在异步社区。我想要读《React Native移动开发实战》，希望你也能够喜欢。参与写作换书活动。