记录-一个网页打造自己的天气预报

感恩天地君亲师 發表於 2025-3-7 16:56:00

记录---一个网页打造自己的天气预报

<p> </p>
<h1 data-id="heading-0">🧑‍💻 写在开头</h1>
<p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165146132-636237323.png" alt="" loading="lazy"></p>
<p> </p>
<div>
<div>
<h2 data-id="heading-0">概念解释</h2>
<blockquote>
<p>通过数据接口，简化功能开发。天气数据从哪里来？如果是自己采集，不光要写后端代码，最难的是维护啊，所以必须《天气预报》此类APP特别适合前后端分离的，以下用一个简单的例子快速打通前后端的调用<br>前端使用HTML页面，通过JS的Fetch发起请求，向天气API拿到JSON数据回显到页面上。<br>比较麻烦的是找到免费易用天气API接口。</p>
</blockquote>
<h4 data-id="heading-1"><code>前后端分离</code></h4>
<p>前端负责用户界面展示和交互体验，<br>
后端负责业务逻辑和数据处理。<br>
这里后端直接使用免费的天气API，所以后端可以视为云服务。图上的左半部分。</p>
<ol>
<li>前端:HTML+JS+Fetch请求</li>
<li>后端:云服务API(天气数据接口网站)</li>
<li>数据:JSON格式传输</li>

</ol>
<h4 data-id="heading-2"><code>数据接口</code></h4>
<p>简化理解为一个返回JSON数据的网页。</p>
<h2 data-id="heading-3">项目《天气预报》</h2>
<h3 data-id="heading-4">一、后端云服务API(天气数据接口网站)</h3>
<h4 data-id="heading-5">1. 注册激活帐号(目标得到APPID和APPSecret即可)</h4>
<p>找到免费方便的天气API数据接口网页，这里使用 www.yiketianqi.com/
(非广告只是顺手找到，如果有更方便的欢迎评论区留言)，每天有1000次免费调用</p>

</div>

<br>
</div>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165212688-1488246034.png" alt="" loading="lazy"></p>
<p> </p>
<h4 data-id="heading-6">2. 数据接口文档</h4>
<p>一定要注册帐号，才能看到自己的 <code>APPID</code> 和 <code>APPSecret</code> 文档中 www.yiketianqi.com/index/doc 。直接复制下图（1）就是前端用到的目标数据接口</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165229535-308431744.png" alt="" loading="lazy"></p>
<h4 data-id="heading-7">3.测试天气数据API</h4>
<p>以下URL供前端请求时替换成自己的 <code>APPID</code> 和 <code>APPSecret</code></p>
<blockquote>
<p>gfeljm.tianqiapi.com/api?unescap…</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165253539-1379181932.png" alt="" loading="lazy"></p>
<h3 data-id="heading-8">二、前端 HTML+JS+Fetch请求</h3>
<h4 data-id="heading-9">1. 基础fetch请求页面</h4>
<p>使用<code>fetch</code>方法发起请求，特别注意每一步返回的数据是否为Promise，需要使用async和await消除回调</p>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">const appid = 68621484
const appsecret = `XXXXX`
letURL= `http://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=${appid}&appsecret=${appsecret}`

获取(URL)

async function 获取(URL){
let 响应= await fetch(URL)
let 数据= await 响应.json()

return 数据
}</pre>
</div>
<p>注意这个页面通过浏览器查看网络请求XHR</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165332216-1764437723.png" alt="" loading="lazy"></p>
<p> </p>
<h4 data-id="heading-10">2. 完整静态HTML页面</h4>
<p>制作一个简易的HTML页面，显示出关键数据。更多数据需要参考接口文档。</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165345830-499543381.png" alt="" loading="lazy"></p>
<p> 使用Fetch发起请求，获得数据后，使用<code>innerHTML</code>属性替换掉元素内容。<br>同时使用模版字符串，没有使用任何CSS样式。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fetch请求</title>
</head>
<body>

<div id="A">
</div>

<script>

const appid = 68621484
const appsecret = `fZnW1ikK`
letURL= `http://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=${appid}&appsecret=${appsecret}`

main()

async functionmain(){
let data = await 获取(URL)

const listItems = data.hours.map(hour => `
   <li>
         时间：${hour.hours}<br>
         天气状况：${hour.wea}<br>
         天气图标：<img src="images/weather_icons/${hour.wea_img}.png" alt="${hour.wea}"><br>
         温度：${hour.tem}°C<br>
         风向：${hour.win}<br>
         风速：${hour.win_speed}<br>
         能见度：${hour.vis} km<br>
         空气质量：${hour.aqi}<br>
   </li>
`).join('');

A.innerHTML = `

   <h2>城市：${data.city} (${data.cityEn})</h2>
   国家：${data.country} (${data.countryEn})<br>
   日期：${data.date} ${data.week}<br>
   更新时间：${data.update_time}<br>
   天气状况：${data.wea}<br>
   天气图标：<img src="images/weather_icons/${data.wea_img}.png" alt="${data.wea}"><br>
   当前温度：${data.tem}°C<br>
   最高温度：${data.tem1}°C<br>
   最低温度：${data.tem2}°C<br>
   风向：${data.win}<br>
   风速：${data.win_speed} (${data.win_meter})<br>
   湿度：${data.humidity}<br>
   能见度：${data.visibility}<br>
   气压：${data.pressure} hPa<br>
   降雨量：${data.rain_pcpn} mm<br>
   空气质量指数：${data.air}<br>
   PM2.5：${data.air_pm25}<br>
   空气质量等级：${data.air_level}<br>
   空气质量提示：${data.air_tips}
   <ul>
         ${listItems}
   </ul>
`;

console.log(data)
}

async function 获取(URL){
let 响应= await fetch(URL)
let 数据= await 响应.json()

return 数据
}

</script>
</body>
</html></pre>
</div>
<h4 data-id="heading-11">3. 补充CSS样式</h4>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165421954-1015004927.png" alt="" loading="lazy"></p>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">ul{
display: flex;
flex-wrap: wrap;
list-style: none;
}

li{
width: 300px;
background-color: palegreen;
margin: 10px;
padding: 15px;
border-radius: 50%;
text-align: center;
}

span{
padding: 15px;
background-color: orange;
cursor: pointer;
}</pre>
</div>
<h4 data-id="heading-12">4. 补充JS多城市查询</h4>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165458865-906001783.png" alt="" loading="lazy"></p>
<h5 data-id="heading-13">4.1 增加对应的HTML代码</h5>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165521510-1286992073.png" alt="" loading="lazy"></p>
<h5 data-id="heading-14">4.2 增加对应的JS代码</h5>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165537872-705725906.png" alt="" loading="lazy"></p>
<p> </p>
<h3 data-id="heading-15">三、项目图示总结</h3>
<p>使用Fetch和async/await极大的简化了前端代码。后端数据接口就是一个URL地址。整个后端具备云服务的特征，可以视作云服务数据接口，如图所示</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202503/2149129-20250307165556457-1852325682.png" alt="" loading="lazy"></p>
<p> </p>
<div>
<div>
<h3 data-id="heading-16">四、天气接口</h3>
<h4 data-id="heading-17">1.易客云天气API 推荐:⭐⭐⭐⭐⭐</h4>
<p>对新手比较友好。 tianqiapi.com/</p>
<h4 data-id="heading-18">2.高德地图需要注册开发者(推荐:⭐⭐⭐)</h4>
<p>lbs.amap.com/api/webserv…</p>
<h4 data-id="heading-19">3.心知天气(推荐:⭐)</h4>
<p>免费的API数据只有一行，且文档藏得太深难用 www.seniverse.com/</p>
<p>欢迎大家提供更多更好的天气API。</p>
</div>
<div>
<h2>本文转载于：https://juejin.cn/post/7441560184010014735</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></p>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/18758035

頁: [1]

琼殿技术论坛's Archiver

记录---一个网页打造自己的天气预报