github:github.com/pengliheng/…
效果展示:chat.pipk.top/githubRepor…
先拿到github的私人access_token
将token保存在环境变量中。
再post
axios({
url: 'https://chat.pipk.top/graphql', // 你的接口
method: 'post',
// url: `https://api.github.com/graphql`,
// method: 'post',
// headers: {
// 'Authorization': `bearer ${process.env.access_token}`,
// 'Content-Type': 'application/json'
// },
data: {
query: `{
search(query: "${args.name||'pengliheng'}", type: USER, first: 1) {
edges {
node {
... on User {
avatarUrl login bio url createdAt
contributedRepositories(first: 100,orderBy: {field: CREATED_AT, direction: DESC}) {
totalCount
nodes{
nameWithOwner url
}
}
starredRepositories(first:100) {
nodes {
primaryLanguage {
name color
}
}
}
}
}
}
}
}`,
},
}).then(res => resolve(res.data.data))
.catch(err => reject(err))
})复制代码
通过githubV4接口拿到接口数据复制代码
再将数据展示到前台页面
// 通过react 使用方法
// package
import React, { Component } from "react";
import Github from "@pengliheng/github-report";
import '@pengliheng/github-report/lib/index.less';
class Root extends Component {
render() {
return (
<div className="github">
<Github name="yinxin630"/>
</div>
);
}
}
render(
<Root />,
document.getElementById('root'),
);复制代码