react可视化大屏左上

时间：北京时间2024年6月23日 黄帝纪年第4721年 青龙年

今日任务计划：

实现左上角布局，实现天气数据渲染

现在我们来实现一下这个 iconfont 图标 

先登录iconfont图标官网 : iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/?spm=a313x.manage_type_myprojects.i3.d4d0a486a.2f9e3a81JwjBez

搜索进入，选择喜欢的图标进行 添加入库 

储存以后我们点击添加至项目

下载到本地后解压

解压到新的一个文件夹中保存到我们的项目当中

保存到我们储存的文件夹，只需要保存相应的文件就可以，其余的可以删掉

在使用前，我们要先引入图标然后才可以使用，我们在 index.js 中引入：

接下来我们就可以使用图标了

注意！！！这里的iconfont图标文件夹名称必须为 iconfont 不然我们所使用的 iconfont 图标会出不来 亲测！！！

完了以后我们的 iconfont 图标就可以显示在页面上了

经过排版实现下方的效果：

接下来我们开始调用天气的api拿到数据并渲染到页面上

我们的解题思路：

1、封装axios拦截器

2、调取天气api拿到相对应的数据

3、渲染到页面上

一、封装axios

拦截器 | Axios中文文档 | Axios中文网在请求或响应被 then 或 catch 处理前拦截它们。https://www.axios-http.cn/docs/interceptors在app文件夹中创建 封装axios文件夹 ：

先下载相应的axios包：npm i axios

复制相应的代码到我们的文件当中

二、获取天气api拿到我们想要的数据

未来七日天气接口API 气象台未来一周天气预报api更友好的全球化天气预报API接口, 价格更低更好用。http://www.tianqiapi.com/index/doc?version=v91进入天气网址先注册，注册完后才可以使用。

注意！！！每一次注册只能使用3000次的机会那么如果到时我们获取到数据只要我们刷新一次页面他就会获取一次数据，获取一次就会浪费一次机会，长时间不使用此网站他会自动注销我们的账号所以到时我们要重新注册。

注册完毕后我们开始获取天气的api拿到我们需要的数据

在封装axios的下面创建一个专门存放数据api调用接口的文件

然后我们找到版本我个人喜欢使用v91接口

注意！！！这里的请求方式可以选择不写因为它默认的请求方式就是为get，如果是别的请求方式是必须要写的！这里为什么我写是因为想让大家看清除这里的请求方式，如果是别的请求方式我们把get改成我们想要的请求方式即可

在前端页面获取数据

首先获取到我们刚才写的后端数据名称"hjjc"(这里我的名称叫做hjjc)

控制台打印看是否能拿到想要的数据

找到后我们把它放到我们前端数据上

我们还需要定义一个方法和数据

接下来就是把我们获取到的数据渲染到我们的前端页面上

重点判断今天的天气还是明天的天气！！！

我们根据下标来判断是今天还是明天，今天为下标0明天为下标1以此类推，那么我们可以用三元运算符来实现今天的天气和明天的天气，如果我下标为0那么我显示今天的天气，如果我下标为1那么显示明天的天气以此类推

最后我们展示一下效果：

日拱一卒无有尽,功不唐捐终入海！

每天进步一点点，今天的你有比昨天更努力吗？

---