携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

本文主要记录了我在学习 uni-app 和 uniClound 实战课程的过程
并记录下实现代码过程中的遇到的问题、以及对应的解决方法，也记录下我对此的思考总结
具体的课程是大帅老师的付费课程
目前我已经学完，确实非常的不错
此项目集合已经发布到了线上，大家可以搜索小程序 鱼爸爸 体验一下
小程序刚上线，主要是把学习东西体现出来；
可能存在很多bug,大家可以反馈给我，谢谢!

系列文章

第一篇：《一个简易的绘画板功能？别小看它，知识点可不少！| 【uni-app】【uniCloud】实战系列 | 猿创营》

第二篇：《github 中国区大佬排名都有谁？每天凌晨1点定时更新给你看 | 【uni-app】【uniCloud】实战系列 | 猿创营》

前置知识点

canvas 的基本使用传送门
uni-app 中 canvas 传送门
uniCloud 的基础知识传送门
uniCloud 文件上传传送门
uni-app 传送门通过 uniCloud 调用传送门获取数据库数据
GitHub Actions 入门教程传送门

效果展示

线上小程序体验

鱼爸爸-小程序.jpg

分析功能

简单获取gitHub中国区排名，每日定时更新！总共的功能主要如下：

点击gitHub排名页面，就能看到中国区的排名的大佬

这个demo的重点其实是如何定时定点爬取数据，存到数据库

更加重要的一点是，因为gitHub的服务器在国外，很多时候请求不稳定，该如何解决

具体实现步骤

前端页面

前端页面就是通过uniClound的接口获取数据库中的数据，比较简单，直接上代码了

 <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()
        }
})

服务端接口

// 获取中国区的排名
'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
};

`gitHub` 的 `Action` 定时任务

思路

为什么此处要用到 Action定时任务，其实直接 uniClound也有定时任务，也是能实现的

主要原因是 gitHub的服务器在国外，所以如果用云函数直接调用的话，那么效果会很不好，可能会超时

所以此处采取的策略是

用gitHub的Action 定时任务来爬取数据，然后再调用我们的云函数，存入数据库中

毕竟 gitHub上无法直接存储到我们自己的 uniClound的服务器上

注意事项

在实际运行的过程中，发现 gitHub的用户接口，应该做了一些优化，本来尝试获取很多的，后来发现连续请求多了之后，就会返回 403,所以最后经过试验，暂时先获取了 50个
- 解决方法：就是每次调用之间做一个时间间隔，规避连续调用
gitHub的Action的定时任务的时间，是有时区的，需要转换一下
要学会查看 Action的日志，因为一般不会一次性就调式成功
Action可以手动执行

代码如下

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();

云函数实现定时任务

思路

首先，不借助 gitHub的Action的情况下，uniClound云函数也是一样完全能实现

此处，我们云函数的任务主要是接收数据存进数据库中，比较简单

注意事项

由于这是提供给外部接口调用的，所以需要将云函数 URL话
数据库数据一览

代码如下

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虽小，但是它打开了一扇窗

比如利用 gitHub的Action 能实现的东西，想象力太大了，线上部署等

因为之前我也用过 gitee的action 去动态部署自己网页，每次 push都会部署一次，每次push就会调用一下我的 Node接口，接口里面再调用一下服务器的一个 Shell脚本，来自动拉去代码，并执行 Nginx

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

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

github 中国区大佬排名都有谁？每天凌晨1点定时更新给你看 | 【uni-app】【uniCloud】实战系列 | 猿创营

前言

系列文章

前置知识点

效果展示

分析功能

具体实现步骤

前端页面

gitHub 的 Action 定时任务

思路

注意事项

代码如下

云函数实现定时任务

思路

注意事项

代码如下

总结

`gitHub` 的 `Action` 定时任务