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

最后推荐下大帅老师,确实很厉害,干货多多;

*公众号*里搜 大帅老猿,在他这里可以学到很多东西