JS 爬卫星云图

需求：在页面上显示卫星云图动图

问题：

• 成熟的免费的模块很少，大多是商业收费版的
• 高情商:资金不足，低情商：没钱

解决思路：

1. 爬取气象网站的卫星云图展示页http://www.nmc.cn/publish/satellite/FY4A-true-color.htm，获取相应的图片的src
2. src动态绑定，然后类似幻灯片一样播放照片，实现动图

本文参考：获取中国气象台卫星云图-csdn 对原作者的代码进行相应的优化，

• 原作者是根据云图的命名规律获取的图片，具有不确定性，程序员修改图片地址就gg了；这里改用爬虫获取src，不受命名规律的影响

使用工具：vue3+ts+axios+nginx

正文：

 const showFengYunimg = ref<string | undefined>();
   const fengYunimg = ref<Array<string | undefined>>([]);
      // 获取卫星云图
    const getFengYunImg = async () => {
     const httpAxios = axios.create({});
      await httpAxios({
        method: 'get',
        url: '/fengyunPublish/publish/satellite/FY4A-true-color.htm', //fengyunPublish是根据vue的代理设置的
        params: {},
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'text/plain',
        },
      })
        .then((res) => {
          console.log(res);
          fengYunimg.value = [];
          var temp = res.data.match(/data-img="(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?"/gi);//正则表达式匹配网址
          temp.forEach((e: any) => {
          //鸡肋的过滤方法。。。。
            e = e.replace('data-img="', '');
            e = e.replace('"', '');
            e = e.replace('medium/', '');
            fengYunimg.value.push(e);
          });
        
        })
        .catch((err) => {});
        //下面这个循环是借鉴原作者的
      var length = fengYunimg.value.length;
      var i = length;
      function time() {
        if (i <= 0) {
          i = length - 1;
        } else {
          i = i - 1;
        }
        showFengYunimg.value = fengYunimg.value[i];
        setTimeout(time, 1000);
      }
      time();
      }
   onMounted(() => {
      getFengYunImg();
    });

//代理设置如下：
   '/fengyunPublish': {
        target: 'http://www.nmc.cn',
        changeOrigin: true,
        ws: true,
        secure: false,
        rewrite: (pathStr) => pathStr.replace('/fengyunPublish', ''),
      },

//template标签的内容
 <img :src="showFengYunimg" alt="" srcset="" style="width: 100%; height: 100%" />

结束

注意：nginx的配置可以这样写

 location /fengyunPublish{
                 proxy_pass   http://www.nmc.cn/;
         }