使用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一下，一次鼓勵

另外博客已經全部遷移到https://blog.csdn.net/Govern66這個網址，此博客不在更新了