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

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

使用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一下,一次鼓励

相关实践学习
简单用户画像分析
本场景主要介绍基于海量日志数据进行简单用户画像分析为背景,如何通过使用DataWorks完成数据采集 、加工数据、配置数据质量监控和数据可视化展现等任务。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps&nbsp;
目录
相关文章
|
1月前
|
监控 数据可视化 安全
Spring Cloud可视化智慧工地大数据云平台源码(人、机、料、法、环五大维度)
智慧工地平台是依托物联网、互联网、AI、可视化建立的大数据管理平台,是一种全新的管理模式,能够实现劳务管理、安全施工、绿色施工的智能化和互联网化。围绕施工现场管理的人、机、料、法、环五大维度,以及施工过程管理的进度、质量、安全三大体系为基础应用,实现全面高效的工程管理需求,满足工地多角色、多视角的有效监管,实现工程建设管理的降本增效,为监管平台提供数据支撑。
40 2
|
2月前
|
SQL Oracle 物联网
助力工业物联网,工业大数据之数仓维度层DWS层构建【十二】
助力工业物联网,工业大数据之数仓维度层DWS层构建【十二】
34 0
|
2月前
|
SQL Oracle 关系型数据库
助力工业物联网,工业大数据之ODS层构建:代码结构及修改【九】
助力工业物联网,工业大数据之ODS层构建:代码结构及修改【九】
30 0
|
22天前
|
Web App开发 JavaScript 前端开发
构建现代Web应用:Vue.js与Node.js的完美结合
在当今快速发展的Web技术领域,选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势,以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要,我们将通过一个实际的项目示例,展示从搭建项目架构到实现具体功能的整个过程,着重介绍了Vue.js在构建用户友好的界面方面的能力,以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文,读者不仅能够理解Vue.js与Node.js各自的特点,还能学习到如何将这两种技术融合应用,以提升Web应用的开发效率和用户体验。
|
26天前
|
存储 数据可视化 JavaScript
基于Echarts构建大数据招聘岗位数据可视化大屏
基于Echarts构建大数据招聘岗位数据可视化大屏
20 0
|
1月前
|
JavaScript 前端开发 小程序
Vue.js:构建用户界面的渐进式框架
Vue.js:构建用户界面的渐进式框架
25 0
|
2月前
|
数据采集 数据可视化 数据挖掘
【大数据实训】基于当当网图书信息的数据分析与可视化(八)
【大数据实训】基于当当网图书信息的数据分析与可视化(八)
37 0
|
2月前
|
数据采集 分布式计算 数据可视化
【大数据实训】基于赶集网租房信息的数据分析与可视化(七)
【大数据实训】基于赶集网租房信息的数据分析与可视化(七)
39 0
|
2月前
|
SQL 存储 分布式计算
助力工业物联网,工业大数据之数仓事实层DWB层构建【十七】
助力工业物联网,工业大数据之数仓事实层DWB层构建【十七】
27 0
助力工业物联网,工业大数据之数仓事实层DWB层构建【十七】
|
2月前
|
数据采集 SQL Oracle
助力工业物联网,工业大数据之DWD层构建:数据抽取分析【十一】
助力工业物联网,工业大数据之DWD层构建:数据抽取分析【十一】
44 0