github 中國區大佬排名都有誰?每天凌晨1點定時更新給你看 | 【uni-app】【uniCloud】實戰系列 | 猿創營

語言: CN / TW / HK

theme: cyanosis highlight: agate


攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第2天,點選檢視活動詳情

前言

本文主要記錄了我在學習 uni-appuniClound 實戰課程 的過程
並記錄下實現程式碼過程中的遇到的問題、以及對應的解決方法,也記錄下我對此的思考總結
具體的課程是 大帥老師的 付費課程
目前我已經學完,確實非常的不錯
此專案集合已經發布到了線上,大家可以搜尋小程式 魚爸爸 體驗一下
小程式剛上線,主要是把學習東西體現出來;
可能存在很多bug,大家可以反饋給我,謝謝!

系列文章

第一篇:《一個簡易的繪畫板功能?別小看它,知識點可不少!| 【uni-app】【uniCloud】實戰系列 | 猿創營

第二篇:《github 中國區大佬排名都有誰?每天凌晨1點定時更新給你看 | 【uni-app】【uniCloud】實戰系列 | 猿創營》

第三篇:《更多實用小demo,邁向獨立程式設計師的起點 | 【uni-app】【uniCloud】實戰系列 | 猿創營》

前置知識點

效果展示

github.gif

線上小程式體驗

魚爸爸-小程式.jpg

分析功能

簡單獲取gitHub中國區排名,每日定時更新!總共的功能主要如下:

點選gitHub排名頁面,就能看到中國區的排名的大佬

這個demo的重點其實是 如何 定時定點爬取 資料,存到資料庫

更加重要的一點是,因為gitHub的伺服器在國外,很多時候請求不穩定,該如何解決

具體實現步驟

前端頁面

前端頁面就是通過uniClound的介面獲取 資料庫中的資料,比較簡單,直接上程式碼了

html <uni-list> <uni-list-item v-for="(item,index) in rankList" :key="index" :title="getTitle(item)" :note="getNote(item)" :thumb="item.avatar_url" thumb-size="lg"></uni-list-item> </uni-list> uni.showLoading({title: '正在載入...'}); uniCloud.callFunction({ name:'getranks', // 雲函式的介面 success:(res) => { console.log(res) this.rankList = res.result }, complete:()=>{ uni.hideLoading() } }) 服務端介面 js // 獲取中國區的排名 'use strict'; exports.main = async (event, context) => { //event為客戶端上傳的引數 console.log('event : ', event) let db = uniCloud.database() let dbRes = await db.collection('githubrank').orderBy("createtime","asc").get() //返回資料給客戶端 let res = []; if(dbRes.data && dbRes.data.length >0){ let index = dbRes.data.length -1 console.log('index ----',index) let list = dbRes.data[index].rank_list res = list } return res };

gitHubAction 定時任務

思路

為什麼此處要用到 Action定時任務,其實直接 uniClound也有定時任務,也是能實現的

主要原因是 gitHub的伺服器在國外,所以如果用 雲函式直接呼叫的話,那麼效果會很不好,可能會超時

所以此處採取的策略是

gitHubAction 定時任務來爬取資料,然後再呼叫 我們的雲函式,存入資料庫中

畢竟 gitHub上無法直接儲存到 我們自己的 uniClound的伺服器上

注意事項

  • 在實際執行的過程中,發現 gitHub的使用者介面,應該做了一些優化,本來嘗試獲取 很多的,後來發現連續請求多了之後,就會 返回 403,所以最後經過 試驗,暫時先獲取了 50個

    • 解決方法:就是 每次呼叫之間 做一個 時間間隔,規避連續呼叫
  • gitHubAction的定時任務的時間,是有時區的,需要轉換一下

  • 要學會 檢視 Action的日誌,因為一般不會一次性就 調式成功
  • Action可以手動執行

image.png

程式碼如下

``` js const axios = require("axios"); const posturl = 'https://6838db08-e31b-4d5e-a03f-28789e1de7a7.bspapp.com/github' async function searchGithubUser(page){ let res // TODO per_page 太大了,會被 403,github 應該做了限制 // 5 可以;8 就不行了 try { res = await axios.get("https://api.github.com/search/users",{ headers:{ "Authorization":'Token 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',//前面生成的PAT "Accept":"application/vnd.github.v3+json"//搜尋介面必寫 }, params:{ q:"location:China",//用於查詢的關鍵字配置,不區分大小寫 sort:"followers",//followers按關注者數量排列,repositories按倉庫數量排列 order:"desc",//遞增、遞減 per_page:5,//每頁記錄條數,最多100 page:page//當前請求頁數 } }) } catch (error) { console.log('error ===',error) } console.log('res ====',res)

//取出items用於遍歷 const items = res.data.items; //定義一個承載當前頁最終資料的變數 let pageDatas = [];

//遍歷當前頁的記錄,每一條都去查詢一下使用者詳情 for(let i = 0;i<items.length;i++){ let item = items[i]; //請求查詢使用者詳情的介面 let res = await axios.get(item.url);

//將重新組織後的資料新增到當前頁最終資料中
pageDatas.push({
  login:item.login,
  avatar_url:item.avatar_url,
  name:res.data.name,
  followers:res.data.followers
})

}

return pageDatas; } async function searchAll(){ let finalData=[]; for(let i = 1;i<=10;i++){ let pageData = await searchGithubUser(i); finalData=finalData.concat(pageData); } console.log(finalData);

//利用axios發起post請求
await axios.post(posturl,{
  rank_list:finalData
});

}

searchAll(); ```

雲函式實現定時任務

思路

首先,不借助 gitHubAction的情況下,uniClound雲函式也是一樣完全能實現

此處,我們雲函式的任務 主要是 接收資料 存進資料庫中,比較簡單

注意事項

  • 由於這是 提供給外部介面呼叫的,所以需要將雲函式 URL
  • 資料庫資料一覽

image.png

程式碼如下

js exports.main = async (event, context) => { const db = uniCloud.database(); //如果event.body不為空,則代表有POST資料 if(event.body){ //將Body中的JSON字串解析成物件 const data = JSON.parse(event.body); try{ //存入資料庫 await db.collection('githubrank').add({ record_date:Date.now(),//記錄的時間 rank_list:data.rank_list//前1000名使用者資料 }); }catch(err){} return; } };

總結

功能真的是很簡單,但是 如果沒有 大帥老師的課程指導,可能中間任何一個細節都可以能卡住

demo雖小,但是它打開了一扇窗

比如利用 gitHubAction 能實現的東西,想象力太大了,線上部署等

因為之前我也用過 giteeaction 去動態部署自己網頁,每次 push都會部署一次,每次push就會呼叫一下我的 Node介面,接口裡面 再呼叫一下 伺服器的一個 Shell指令碼,來自動拉去程式碼,並執行 Nginx

最後推薦下大帥老師,確實很厲害,乾貨多多;

*公眾號*裡搜 大帥老猿,在他這裡可以學到很多東西