使用vue构建一个可视化大数据平台

03/22 11:04
阅读数 112

使用vue全家桶以及v-charts和datav实现一个github可视化大数据界面展示,没有设计搞的原因,只能忽略设计编写一下界面,

  • 用户只需要登录的时候填写自己github用户名。就可以看到数据展示
  • 在登录的时候,可能会存在登录失败,可能造成的原因是网络不稳定,
  • 最终界面展示效果

 

 

功能实现

-  用户登录以及个人信息展示
-  粉丝数量以及粉丝展示
-  仓库 Stars 详情
-  仓库语言详情

接口数据

在这个项目中所需要用到的接口,其实github提供的接口不值这些,如果想访问更多接口的话,地址传送门:https://developer.github.com/v3查询多有的API接口
请求个人信息接口 https://api.github.com/users/用户名
请求粉丝接口 https://api.github.com/users/用户名/followers
仓库信息 https://api.github.com/users/用户名/repos
这个接口里面包含个人仓库所有信息
包含提交信息 https://api.github.com/users/用户名/events

登录页面设计

在登录页面中,对input做一下校验,不能为空,并封装了一个弹出框,通过弹出框,点击确定触发接口请求数据

 

 

  • 表单严重完之后,点击确定,用户输入完用户名之后,就会跳转到首页
  • 其中userName就是用户要输入的用户名,
  • onLogin () {
          this.$axios
            .get(`https://api.github.com/users/${this.userName}`)
            .then(res => {
              const { data } = res;
              sessionStorage.setItem("userkey", data.login);
              localStorage.setItem("userkey", data.login);
              this.$router.push({
                name: "Home",
                query: { user: data.login }
              });
            });
        }

    登录成功之后,把用户名存储到sessionStorage,方便在首页的时候用到

首页效果

  • 当一进到首页的时候,会有一个加载效果,知道数据加载完成。
  • 从页面当中,把页面分为左中右三个部分
左边数据展示
  • 在左边的内容中展示的主要是自己gitub中开源仓库数量,个人粉丝以及跟随效果
仓库数据展示

 

 

 

  • 在这个有分为上下两部分
  • 在上面可以看到个人仓库点赞数量,以及仓库所需要的语言
  • 仓库Starts中,需要对数据进行处理,后台给我们返回的不是我们想要的格式,需要自己手动处理,按照插件需要的格式进行显示,因为这里我们只需要用到仓库名称点赞量
    getStats () {
          this.$axios.get(`https://api.github.com/users/${this.userName}/repos`).then((res) => {
            let data = res.data;
            // 仓库和仓库star 只有star大于0的时候展示
            for (var i = 0; i < data.length; i++) {
              if (data[i].stargazers_count > 0) {
                this.chartDatas.rows.push({
                  '名称': data[i].name,
                  'star数量': data[i].stargazers_count
                })
              }
            }
        }

    在这个table表格中展示的效果

 

 

 在datav提供的数据格式为

export default {
  header: ['列1', '列2', '列3'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ]
}

需要我们处理成他们那样,从接口中,获取到需要的数据,遍历循环,在接口中需要拿到用户名

getEvents () {
      this.$axios.get(`https://api.github.com/users/${this.userName}/events`).then(res => {
        let { data } = res;
        let dataAry = [];
        if (data) {
          for (let i = 0; i < data.length; i++) {
            let date = data[i].created_at.split('T')[0]
            if (data[i].payload.commits) {
              data[i].payload.commits.forEach(ele => {
                dataAry.push([date, data[i].type, data[i].repo.name, ele.message])
              })
            }
          }
        }

        this.config = {
          header: ['操作时间', '类型', '操作的仓库', '备注'],
          data: dataAry
        }
      })
    }
右边个人数据展示
  • 其实在右边数据展示,没有太多复杂行,从接口读取数据,直接渲染就行了
  •  

    https://api.github.com/users/用户名请求接口就可以拿到了  

  • 通过接口数据userName登录用户名,就可以拿到个人所有粉丝,一开始我就下让展示9个,剩下的需要点击查看更多会把所有的粉丝都列举出来

  • getFans () {
          // 获取粉丝
          this.$axios.get(`https://api.github.com/users/${this.userName}/followers`).then((res) => {
            let { data } = res
            if (data.length > 0) {
              this.fans = data
            }
          })
        },

    最后

    到这里所有的工作都已接近尾声,剩下的就是在优化优化细节,项目已经上传到github源码仓库,需要的可以取github下载,如果感觉可以的话,求Star一下,一次鼓励

另外博客已经全部迁移到https://blog.csdn.net/Govern66这个网址,此博客不在更新了

原文出处:https://www.cnblogs.com/zhoulifeng/p/12544456.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部