AJAX写出属于自己的天气预报
#做完这个项目可以学到什么？
#这个前端项目需要具备什么知识?
1: H5C3的基础代码能力
2:JavaScript的基础语法
3.AJAX的逻辑 （可以在之前的博文中查看）
当你掌握这几门技术就可以完成这个简单小项目啦！项目推荐使用VSCode编译哦
以下是我们要完成项目的效果图
项目文档结构如下：
index.js、index.css都是需要自己创建的
首先，我们需要整套的HTML页面代码和CSS代码，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div class="author">
Jack-Charlie的天气预报
</div>
<link rel="stylesheet" href="index.css">
<div class="top-box">
<div class="title">
<span class="dateShort"></span>
<span class="calendar">
<span class="dateLunar"></span>
</span>
</div>
<div class="search-box">
<div class="location">
<span class="area">海口市</span>
</div>
<div class="search">
<input type="text" placeholder="搜索城市" autocomplete="off" class="search-city">
<ul class="search-list">
<li class="city-item"></li>
</ul>
</div>
</div>
</div>
<div class="weather-box">
<div class="tem-box">
<span class="temp">
<span class="temperature">26</span>
<span>℃</span>
</span>
</div>
<div class="climate-box">
<div class="air">
<span class="psPm25">35</span>
<span class="psPm25Level">优</span>
</div>
<ul class="weather-list">
<li class="first">
<img src="https://hmajax.itheima.net/weather/duoyunline.png" alt="" class="weatherImg">
<span class="weather">多云</span>
</li>
<li class="windDirection">东北风</li>
<li class="windPower">1级</li>
</ul>
</div>
</div>
<div class="today-weather">
<div class="range-box">
<span>今天：</span>
<span class="range">
<span class="weather">小雨</span>
<span class="temNight">25</span>
<span>-</span>
<span class="temDay">32</span>
<span>℃</span>
</span>
</div>
<ul class="sun-list">
<li>
<span>紫外线</span>
<span class="ultraviolet">中等</span>
</li>
<li>
<span>湿度</span>
<span class="humidity">92.0</span>%
</li>
<li>
<span>日出</span>
<span class="sunriseTime">05:22</span>
</li>
<li>
<span>日落</span>
<span class="sunsetTime">19:12</span>
</li>
</ul>
</div>
<div class="week-weather-box">
<div class="title">7日内天气预报</div>
<ul class="week-wrap">
<li class="item">
<div class="date-box">
<span class="dateFormat">今天</span>
<span class="date">07月26日</span>
</div>
<div class="data-second">
<img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
<span class="weather">小雨</span>
</div>
<div class="temp-second">
<span class="temNight">25</span>~
<span class="temDay">32</span>
<span>℃</span>
</div>
<div class="wind">
<span class="windDirection">东风</span>
<span class="windPower"><3-4级</span>
</div>
</li>
<li class="item">
<div class="date-box">
<span class="dateFormat">明天</span>
<span class="date">07月27日</span>
</div>
<div class="data-second">
<img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
<span class="weather">小雨</span>
</div>
<div class="temp-second">
<span class="temNight">25</span>~
<span class="temDay">32</span>
<span>℃</span>
</div>
<div class="wind">
<span class="windDirection">东风</span>
<span class="windPower"><3-4级</span>
</div>
</li>
<li class="item">
<div class="date-box">
<span class="dateFormat">后天</span>
<span class="date">07月28日</span>
</div>
<div class="data-second">
<img src="https://hmajax.itheima.net/weather/leizhenyu.png" alt="" class="Img">
<span class="weather">雷阵雨</span>
</div>
<div class="temp-second">
<span class="temNight">26</span>~
<span class="temDay">31</span>
<span>℃</span>
</div>
<div class="wind">
<span class="windDirection">东风</span>
<span class="windPower"><3-4级</span>
</div>
</li>
<li class="item">
<div class="date-box">
<span class="dateFormat">周六</span>
<span class="date">07月29日</span>
</div>
<div class="data-second">
<img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
<span class="weather">小雨</span>
</div>
<div class="temp-second">
<span class="temNight">25</span>~
<span class="temDay">30</span>
<span>℃</span>
</div>
<div class="wind">
<span class="windDirection">东风</span>
<span class="windPower"><3-4级</span>
</div>
</li>
<li class="item">
<div class="date-box">
<span class="dateFormat">周日</span>
<span class="date">07月30日</span>
</div>
<div class="data-second">
<img src="https://hmajax.itheima.net/weather/zhongyu.png" alt="" class="Img">
<span class="weather">中雨</span>
</div>
<div class="temp-second">
<span class="temNight">25</span>~
<span class="temDay">30</span>
<span>℃</span>
</div>
<div class="wind">
<span class="windDirection">南风</span>
<span class="windPower"><3-4级</span>
</div>
</li>
<li class="item">
<div class="date-box">
<span class="dateFormat">周一</span>
<span class="date">07月31日</span>
</div>
<div class="data-second">
<img src="https://hmajax.itheima.net/weather/zhongyu.png" alt="" class="Img">
<span class="weather">中雨</span>
</div>
<div class="temp-second">
<span class="temNight">25</span>~
<span class="temDay">31</span>
<span>℃</span>
</div>
<div class="wind">
<span class="windDirection">东南风</span>
<span class="windPower"><3-4级</span>
</div>
</li>
<li class="item">
<div class="date-box">
<span class="dateFormat">周二</span>
<span class="date">08月01日</span>
</div>
<div class="data-second">
<img src="https://hmajax.itheima.net/weather/zhenyu.png" alt="" class="Img">
<span class="weather">阵雨</span>
</div>
<div class="temp-second">
<span class="temNight">25</span>~
<span class="temDay">34</span>
<span>℃</span>
</div>
<div class="wind">
<span class="windDirection">东北风</span>
<span class="windPower"><<3级</span>
</div>
</li>
</ul>
</div>
<script src="index.js">
</script>
</html>接下来，让我们对HTML页面进行修饰，CSS代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #246dde;
background-image: url(天气预报.jpg);
background-size: 100%;
}
.top-box {
width: 1200px;
display: flex;
justify-content: space-between;
margin: 30px auto;
}
.dateShort,
.dateLunar,
.calendar {
color: azure;
}
li:focus {
background-color: #f0f0f0; /* 选中时的背景颜色 */
color: #000; /* 选中时的文本颜色 */
outline: none; /* 去除默认的轮廓线 */
}
.search-box {
width: 250px;
display: flex;
justify-content: space-between;
color:white;
}
.author{
font-size: 20px;
color: #fff;
}
input {
width: 180px;
height: 25px;
outline: none;
border: none;
border-radius: 10px;
text-indent: 1em;
}
.area {
cursor: pointer;
}
.weather-box {
width: 500px;
display: flex;
justify-content: space-around;
margin-left:120px;
}
.temp {
font-size: 80px;
color: white;
}
.search-list {
position: absolute;
border-radius: 5px;
}
.climate-box {
width: 150px;
}
.air {
width: 100px;
height: 30px;
color: aliceblue;
border-radius: 15px;
text-align: center;
line-height: 30px;
margin-top: 20px;
background-color: yellowgreen;
}
.weather-list {
display: flex;
justify-content: space-between;
margin-top: 20px;
color: aliceblue;
}
li {
list-style: none;
}
.first {
display: flex;
vertical-align: middle;
}
.weatherImg {
width: 20px;
height: 20px;
}
.today-weather {
width: 700px;
margin-left: 150px;
display: flex;
justify-content: space-around;
color: white;
}
.sun-list {
width: 450px;
margin-left: 20px;
display: flex;
justify-content: space-between;
}
.week-weather-box {
width: 1200px;
height: 400px;
margin: 20px auto;
border-radius: 10px;
background-color: whitesmoke;
}
.title {
width: 150px;
font-size: 20px;
font-weight: 700;
color: black;
position: relative;
top: 10px;
left: 20px;
}
.week-wrap {
height: 250px;
margin: 50px 50px;
text-align: center;
display: flex;
justify-content: space-between;
}
.date-box {
display: flex;
flex-direction: column;
}
.wind {
font-size: 10px;
}
.data-second {
width: 100px;
height: 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.Img {
width: 30px;
height: 30px;
margin-left: 35px;
}
.date {
font-size: 12px;
color: gray;
}
.item {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.search-list {
width: 180px;
background-color: white;
color: black;
margin-top: 5px;
}
.item-city {
cursor: pointer;
}
.item-city:hover {
background-color: skyblue;
}图片素材也可以提供给大家
可以通过index.css 里的background-image进行修改
body:{ background-image:url() }
接下来，就是今天的重点，完成项目的逻辑操作，也就是js代码，让我们先来学习，最后会把源码提供给大家。
在编写了属于自己的myaxios的方法后，我们就可以在代码中测试了
接下来，我们需要实现搜索模块，如下：
那么，在item里我们需要点击后显示当地的天气，这也是最重要的一步。我们需要给item自定义属性值，比如给它添加data-code="${item.code}",这一步也是动态地为每一个item和自己的城市id进行绑定，我们可以遍历查看每一个li的展示效果，效果如下：
最后一步：将获得的数据回显到相应的模块中。
index.js完整代码
// function getWeather(cityCode){
// // 1.1
// myaxios01({
// url:'http://hmajax.itheima.net/api/weather',
// method:'POST',
// params:{
// city:cityCode
// }
// }).then(result=>{
// console.log(result);
// }).catch(error=>{
// console.log(error);
// })
// }
// // 北京市城市编码
// getWeather('110100')
// 获取数据和展示数据的逻辑，一般都会使用很多次，因此可以获取数据展示逻辑
function myaxios01(config){
// 在axios函数调用时，需要集成一个传递查询的功能。params每次调用时不能保证都有。
// 使用URLSearchParams转换查询字符串
return new Promise((resolve,reject)=>{
const xhr = new XMLHttpRequest()
// 1. 做一个判断
if(config.params){
// 当config对象中有params
// 浏览器提供的构造函数
const paramsObj = new URLSearchParams(config.params)
// 定义常量，接受字符串
const queryString = paramsObj.toString()
// 将查询参数字符串拼接在问号后面
config.url+=`?${queryString}`
}
xhr.open(config.method||'GET',config.url)
xhr.addEventListener('loadend',()=>{
if(xhr.status>=200&&xhr.status<300){
resolve(JSON.parse(xhr.response))
}else{
reject(new Error(xhr.response))
}
})
// 判断是否含有请求体
if(config.data){
// 处理数据类型
// 将数据对象转换为JSON字符串
const jsondata= JSON.stringify(config.data)
// 请求体内容标记需要自行进行设置，需要携带额外信息，告诉服务器
// xhr.setRequestHeader('content-type','application/json')
xhr.setRequestHeader('Content-Type','application/json')
xhr.send(jsondata)
// 如果没有请求体数据，正常发送请求
}else{
xhr.send()
}
})
}
document.querySelector('.search-city').addEventListener('input',(e)=>{
// 获取关键字，拿到后端接口
console.log(e.target.value);
myaxios01({
url:'http://hmajax.itheima.net/api/weather/city',
params:{
city:e.target.value
}
}).then(result=>{
console.log(result);
// 定义一组常量，接受返回到的map集合
const cityname = result.data.map(item=>{
return `<li class="city-area" data-code="${item.code}">${item.name}</li>`
}).join('')
console.log(cityname);
document.querySelector('.search-list').innerHTML = cityname
})
})
// 检测搜索列表点击事件，获取城市code值
function getWeather(cityCode){
myaxios01({
url:'http://hmajax.itheima.net/api/weather',
params:{
// 传递查询参数
city:cityCode
}
}).then(result =>{
// 展示数据到页面上
const weaData = result.data
// 将数据嵌入到页面上，将HTML代码复制
//阳历和农历的日期
const dataStr =
`<div class="title">
<span class="dateShort">${result.data.dateShort}</span>
<span class="calendar">农历</span>
<span class="dateLunar">${result.data.dateLunar}</span>
</span>
</div>`
const weatherData =
`<div class="tem-box">
<span class="temp">
<span class="temperature">${weaData.temperature}</span>
<span>℃</span>
</span>
</div>
<div class="climate-box">
<div class="air">
<span class="psPm25">${weaData.psPm25}/span>
<span class="psPm25Level">${weaData.psPm25Level}</span>
</div>
<ul class="weather-list">
<li class="first">
<img src="${weaData.weatherImg}" alt="" class="weatherImg">
<span class="weather">${weaData.weather}</span>
</li>
<li class="windDirection">${weaData.windDirection}</li>
<li class="windPower">${weaData.windPower}</li>
</ul>
</div>`
const towea = weaData.todayWeather
const toweather = `<div class="today-weather">
<div class="range-box">
<span>今天：</span>
<span class="range">
<span class="weather">${towea.weather}</span>
<span class="temNight">${towea.temNight}</span>
<span>-</span>
<span class="temDay">${towea.temDay}</span>
<span>℃</span>
</span>
</div>
<ul class="sun-list">
<li>
<span>紫外线</span>
<span class="ultraviolet">${towea.ultraviolet}</span>
</li>
<li>
<span>湿度</span>
<span class="humidity">${towea.humidity}</span>%
</li>
<li>
<span>日出</span>
<span class="sunriseTime">${towea.sunriseTime}</span>
</li>
<li>
<span>日落</span>
<span class="sunsetTime">${towea.sunsetTime}</span>
</li>
</ul>
</div>`
// 七日天气数据为一个数组，可以遍历数组
// map遍历数组
const sevObj = weaData.dayForecast
// 遍历后每个元素都是天气的小对象
const sevenobj = sevObj.map(item =>{
return `<li class="item">
<div class="date-box">
<span class="dateFormat">${item.dateFormat}</span>
<span class="date">${item.date}</span>
</div>
<div class="data-second">
<img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
<span class="weather">${item.weather}</span>
</div>
<div class="temp-second">
<span class="temNight">${item.temNight}</span>~
<span class="temDay">${item.temDay}</span>
<span>℃</span>
</div>
<div class="wind">
<span class="windDirection">${item.windDirection}</span>
<span class="windPower"><${item.windPower}</span>
</div>
</li>`
// join
}).join('')
document.querySelector('.week-wrap').innerHTML = sevenobj
// 在本地返回大数组，拼接起来接受打印
console.log(sevObj);
document.querySelector('.title').innerHTML= dataStr
document.querySelector('.area').innerHTML= weaData.area
document.querySelector('.weather-box').innerHTML = weatherData
document.querySelector('.today-weather').innerHTML = toweather
console.log(result);
}).catch(error=>{
console.log(error);
})
} //⭐目标三：切换城市天气
// // dataset意为自定义属性，可用于值和值的关联
// // 自定义属性方法：data-******
// ⭐用事件委托绑定li上的点击事件
document.querySelector('.search-list').addEventListener('click', e => {
// ⭐事件处理函数，当事件源为li时
console.log(e.target.dataset.code);
const codes = e.target.dataset.code
getWeather(codes)
// const cityCode = e.target.dataset.code
// console.log(cityCode);
// }
})
到这里，本次的项目就彻底完成了，让我们看一看效果图
这次的分享就到这里啦，快去试试看吧！欢迎点赞收藏哦，有任何不理解的或者问题可以私信我
欢迎大家进行问题的讨论和探究，下次见啦！❤
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
