axios实现查询城市天气功能

最新推荐文章于 2024-03-03 22:31:04 发布

软工不秃头

最新推荐文章于 2024-03-03 22:31:04 发布

阅读量293

点赞数

文章标签：前端服务器 javascript html ajax css3

本文链接：https://blog.csdn.net/weixin_68854196/article/details/131933852

版权

效果图

搭建基本页面结构

html(页面都是后期js渲染出来的，可以先搭建出来方便css修改样式)

<div class="top-box">
                <div class="title">
            <span class="dateShort">07月26日</span>
            <span class="calendar">农历&nbsp;
                <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">
                <ul class="search-list">
                    
                </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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;&lt;3级</span>
                </div>
            </li>
                    </ul>
        
    </div>

css

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: skyblue;
        }
        .top-box {
            width: 1200px;
            display: flex;
            justify-content: space-between;
            margin: 30px auto;
        }
        .dateShort,
        .dateLunar,
        .calendar {
            color: azure;
        }
        .search-box {
            width: 250px;
            display: flex;
            justify-content: space-between;
            color:white;
        }
        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;
        }

搭建好页面基本结构后引入axios(axios需要下载，接口使用的是黑马的接口)

<script src="axios/dist/axios.min.js"></script>

然后书写js

function getWeather(cityCode) {
            axios({
                url:'http://hmajax.itheima.net/api/weather',
                params: {
                    city:cityCode
                }
            }).then(result => {
                // console.log(result);
                const wObj=result.data.data
                // console.log(wObj);
                const dateStr=`
                <div class="title">
            <span class="dateShort">${wObj.dateShort}</span>
            <span class="calendar">农历&nbsp;
                <span class="dateLunar">${wObj.dateLunar}</span>
            </span>
        </div>
        <div class="search-box">
            <div class="location">
                <span class="area">${wObj.area}</span>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索城市" autocomplete="off">
                <ul class="search-list">
                    
                </ul>
            </div>
        </div>
                `
                document.querySelector('.top-box').innerHTML=dateStr
                const todayStr=`
                <div class="tem-box">
            <span class="temp">
                <span class="temperature">${wObj.temperature}</span>
                <span>℃</span>
            </span>
        </div>
        <div class="climate-box">
            <div class="air">
                <span class="psPm25">${wObj.psPm25}</span>
                <span class="psPm25Level">${wObj.psPm25Level}</span>
            </div>
            <ul class="weather-list">
                <li class='first'>
                    <img src=${wObj.weatherImg} alt="" class="weatherImg">
                    <span class="weather">${wObj.weather}</span>
                </li>
                <li class="windDirection">${wObj.windDirection}</li>
                <li class="windPower">${wObj.windPower}</li>
            </ul>
        </div>
                `
                document.querySelector('.weather-box').innerHTML=todayStr
                 
                const tObj=result.data.data.todayWeather
                // console.log(tObj);
                const tWeather=`
                <div class="range-box">
            <span>今天：</span>
            <span class="range">
            <span class="weather">${tObj.weather}</span>
            <span class="temNight">${tObj.temNight}</span>
            <span>-</span>
            <span class="temDay">${tObj.temDay}</span>
            <span>℃</span>
            </span>
        </div>
        <ul class="sun-list">
            <li>
                <span>紫外线</span>
                <span class="ultraviolet">${tObj.ultraviolet}</span>
            </li>
            <li>
                <span>湿度</span>
                <span class="humidity">${tObj.humidity}</span>%
            </li>
            <li>
                <span>日出</span>
                <span class="sunriseTime">${tObj.sunriseTime}</span>
            </li>
            <li>
                <span>日落</span>
                <span class="sunsetTime">${tObj.sunsetTime}</span>
            </li>
        </ul>
                `
                document.querySelector('.today-weather').innerHTML=tWeather

                const dayForecast=result.data.data.dayForecast
                const dayForecastStr=dayForecast.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=${item.weatherImg} 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">&lt;${item.windPower}</span>
                </div>
            </li>
                    `
                }).join('')
                // console.log(dayForecastStr);
                document.querySelector('.week-wrap').innerHTML=dayForecastStr
            })
        }
        getWeather('340100')

        document.querySelector('.top-box').addEventListener('input',(e) => {
            // console.log(e.target.value);
            axios({
                url:'http://hmajax.itheima.net/api/weather/city',
                params:{
                    city:e.target.value
                }
            }).then(result => {
                // console.log(result);
                const liStr=result.data.data.map(item => {
                    return`
                    <li class="item-city" data-code='${item.code}'>${item.name}</li>
                    `
                }).join('')
                // console.log(liStr);
                document.querySelector('.search-list').innerHTML=liStr
            })
        })
        document.querySelector('.top-box').addEventListener('click',(e) => {
            if(e.target.classList.contains('item-city')) {
                const cityCode=e.target.dataset.code
                // console.log(cityCode);
                getWeather(cityCode)
            }
        })

动态创建的标签绑定不了事件可以往上面找父级元素进行绑定，在七天天气模块需要使用map进行遍历操作，记得转为字符串（设置的类名可以与变量名一致方便操作）

好了，这样axios简单实现天气查询功能就完成了。技术粗糙，如有错误，望指出，积极接受改正。