使用gitee API封装一个gitee仓库状态展示组件

JYeontu
1,202 阅读4分钟

我正在参加「掘金·启航计划」

说在前面

🎈不知道有没有同学做过自己的线上网页版简历，或者是搭建过自己的个人博客？做过自己的线上网页版简历，或者是搭建过个人博客中又有多少人会将自己的开源项目仓库的数据信息贴到简历或者博客中？我想有些同学可能会是手动去更新仓库的相关数据信息，所以这里给那些不知道gitee API的同学介绍一下（当然可能也有很多同学都知道，这里只针对部分不知道这个API的同学,介绍一下简单的使用，知道并使用过这个API的同学们可以划走了🤣）。

效果展示

image.png

如上图，我们仿了gitee上项目的展示，在组件中我们可以知道仓库的作者、简介、标签、主要语言及watch，star，fork的数据，手动修改数据的话我们需要对数据进行一个实时手动更新，通过API的话可以保持获取到的数据都是最新的，这样的数据才是最准确的。

文档地址

组件库：jyeontu.xyz/jvuewheel/#…

gitee API：gitee.com/api/v5/swag…

组件封装

主要是利用了 gitee.com/api/v5/repo… 这个API来获取指定仓库的信息，所需参数如下：

ParameterValueDescriptionTypeData Type
access_token用户授权码querystring
owner*仓库所属空间地址(企业、组织或个人的地址path)pathstring
repo*仓库路径(path)pathstring

相应内容如下：

image.png

这里我引入了vue-resource来进行简单的发起请求：

html

<div class="j-gitee-repo-info">
    <div class="j-gitee-repo-info-name">
        <i class="iconfont icon-xiangqing"></i>
        <a
            class="popular-project-title"
            :href="repoInfo.html_url"
            target="_blank"
            >{{ repoInfo.name }}</a
        >
    </div>
    <div class="j-gitee-repo-author">
        <span v-if="repoInfo.owner"
            >owner：{{ repoInfo.owner.name }}</span
        >
    </div>
    <div class="j-gitee-repo-info-desc">
        {{ repoInfo.description }}
    </div>
    <div class="j-gitee-repo-info-tags">
        <a
            v-for="item in repoInfo.project_labels"
            :key="'label-' + item.id"
        >
            <span class="project-label-item">{{ item.name }}</span>
        </a>
    </div>
    <div class="j-gitee-repo-info-nums">
        <div class="j-gitee-repo-info-lang">
            <i class="iconfont icon-code"></i
            ><span>{{ repoInfo.language }}</span>
        </div>
        <div class="float-right">
            <div class="j-gitee-repo-info-forks float-right">
                <i class="iconfont icon-fork"></i>
                <span>{{ repoInfo.forks_count }}</span>
            </div>
            <div class="j-gitee-repo-info-stars float-right">
                <i class="iconfont icon-star1"></i>
                <span>{{ repoInfo.stargazers_count }}</span>
            </div>
            <div class="j-gitee-repo-info-watchers float-right">
                <i class="iconfont icon-watch"></i>
                <span> {{ repoInfo.watchers_count }}</span>
            </div>
        </div>
    </div>
</div>

javascript

owner为仓库的作者，repo为仓库名称。

getRepo() {
    this.$http
        .get(this.api.getRepo + this.owner + "/" + this.repo)
        .then(res => {
            this.repoInfo = res.body;
        });
}

css

.j-gitee-repo-info {
    margin: 0.5em !important;
    padding: 1em;
    width: calc(50% - 1em) !important;
    border: 1px solid #dce3e8;
    -webkit-box-shadow: none;
    box-shadow: none;
    .j-gitee-repo-info-name {
        font-weight: bold;
        font-size: 1.28571429em;
        margin-top: -0.21425em;
        line-height: 1.28571429em;
        .popular-project-title {
            font-size: 16px;
            word-break: break-all;
            vertical-align: middle;
            margin-left: 6px;
            color: #005980;
            transition: color 0.1s ease;
        }
    }
    .j-gitee-repo-info-desc {
        min-height: 30px;
        color: #40485b;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .j-gitee-repo-author {
        span {
            height: 20px;
            line-height: 16px;
            padding: 2px 8px;
            font-size: 14px;
            font-weight: 400;
            border-radius: 4px;
            background: skyblue;
            color: #6a6a6a;
        }
    }
    .j-gitee-repo-info-tags {
        margin-top: 4px;
        .project-label-item {
            height: 20px;
            line-height: 16px;
            padding: 2px 8px;
            font-size: 12px;
            font-weight: 400;
            border-radius: 4px;
            background: #f2f4f6;
            color: #6a6a6a;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 4px;
        }
    }
    .j-gitee-repo-info-nums {
        padding-top: 16px;
        border: none !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .j-gitee-repo-info-lang {
            float: left;
        }
        .float-right {
            float: right;
        }
    }
}

组件使用

这里我将这个组件打包进了自己的一个组件库，并将其发布到了npm上，有需要的同学也可以直接引入该组件进行使用。
引入教程可以看这里：jyeontu.xyz/jvuewheel/#…
引入后即可直接使用。

<template>
    <div class="content">
        <j-gitee-info-tag
            v-for="(item, index) in repoList"
            :key="'repo-' + index"
            :repo="item.repo"
            :owner="item.owner"
        ></j-gitee-info-tag>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                repoList: [
                {
                    owner: "zheng_yongtao",
                    repo: "jyeontu-component-warehouse"
                },
                {
                    owner: "zheng_yongtao",
                    repo: "me-and-my-doodle"
                },
                {
                    owner: "peng_zhihui",
                    repo: "HelloWord-Keyboard"
                }]
            }
        }
    }
<\/script>

源码地址

组件库已开源，想要查看完整源码的可以到 gitee 查看，自己也整理了相关的文档对其进行了简单介绍，具体如下：

组件文档

jvuewheel: jyeontu.xyz/jvuewheel/#…

Gitee源码

Gitee源码：gitee.com/zheng_yongt…

觉得有帮助的同学可以帮忙给我点个star，感激不尽~~~
有什么想法或者改良可以给我提个pr，十分欢迎~~~
有什么问题都可以在评论告诉我~~~

往期精彩

面试官：不使用canvas怎么实现一个刮刮卡效果?

vue封装一个3D轮播图组件

vue实现一个鼠标滑动预览视频封面组件（精灵图版本）

node封装一个图片拼接插件

基于inquirer封装一个控制台文件选择器

node封装一个控制台进度条插件

密码太多不知道怎么记录？不如自己写个密码箱小程序

微信小程序实现一个手势图案锁组件

vue封装一个弹幕组件

为了学（mo）习（yu），我竟开发了这样一个插件

程序员的浪漫之——情侣日常小程序

vue简单实现词云图组件

说在后面

🎉这里是JYeontu，喜欢算法，GDCPC打过卡；热爱羽毛球，大运会打过酱油。毕业一年，两年前端开发经验，目前担任H5前端开发，算法业余爱好者,有空会刷刷算法题，平时喜欢打打羽毛球🏸 ，也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。

avatar
文章
阅读
粉丝