本案例引入
element-ui,axios,vue,省市级连jscitys
高德地图开发文档
el-ui官网
关于高德天气获取的数据有很都多接口 本案例只获取四天的数据 如有变动可在axios修改接口 ，但可能要添加后端请求头数据允许的操作
效果图
代码
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<!-- element-ui js -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 省市级连js -->
<script src="../js/citys.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.con {
display: flex;
flex-wrap: wrap;
}
ul li {
list-style: none;
border: 1px solid rgba(255, 255, 255, .1);
text-align: center;
width: 125.8px;
height: 180px;
cursor: pointer;
}
ul li:hover {
background-color: rgba(0, 0, 0, .1);
}
#app {
background: linear-gradient(rgb(66, 80, 170), rgb(191, 137, 190));
height: 100vh;
overflow: hidden;
}
.box {
width: 895px;
color: #fff;
margin: 30px auto;
border-radius: 3px;
background-color: rgba(0, 0, 0, .1);
}
.box .top>p {
font-size: 18px;
padding: 10px;
}
.week {
display: flex;
text-align: center;
}
.week>span {
flex: 1;
line-height: 57px;
}
img {
width: 35px;
height: 35px;
}
.date {
text-align: start;
}
.search{
padding: 10px;
}
.con li p:last-child {
margin: 15px auto 0;
width: 40px;
background-color: rgb(130, 201, 30);
border-radius: 16px;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="search">
<!--element-ui Cascader 级联选择器 -->
<!-- 配置选项可参考element-ui 参数介绍哦 -->
<el-cascader :options="cityList" v-model="cityValue" ref='cityList' @change="hanlderChange"
:props="areaProps">
</el-cascader>
<el-button type="primary">搜索</el-button>
</div>
<div class="top">
<p>未来 {
{list.length}} 天的天气预报</p>
<div class="week">
<span v-for="(item,index) in weekDay">{
{item}}</span>
</div>
</div>
<ul class="con">
<!-- 前面的空格 -->
<li v-for="(item,index) in weekStart"></li>
<li v-for="(item,index) in list">
<p class="date" v-show="item.date">{
{item.date}}</p>
<!--
多张图片不建议此写法
将图片命名和获取的数据名称一致 然后进行字符串拼接 这样就可以与天气的变化而改变对应的图片
-->
<p><img :src="'./img/'+item.dayweather+'.webp'"></p>
<p>{
{item.nighttemp}}~{
{item.daytemp}}°C</p>
<p>{
{item.dayweather}}</p>
<p>{
{item.daywind}}风{
{item.daypower}}级</p>
<p>良</p>
</li>
<!-- 后面的空格 -->
<li v-for="(item,index) in weekEnd"></li>
</ul>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
list: [],
weekStart: 0,
weekEnd: 0,
weekDay: ["周日", "周一", '周二', "周三", "周四", "周五", "周六"],
// 获取省市级连的数据
cityList: citys.districts[0].districts,
areaProps: {
// 设置 element 级联选择器属性，一一对应于 cityList
value: 'adcode', label: 'name', children: 'districts'
},
cityValue: ['410000', '410100', '410105'],
city: '410105'
}
},
created() {
this.patchList(); // 删除城市列表空的 districts 属性,使其可用于 ElementUI组件
this.getWeather(); //获取城市天气
},
methods: {
patchList() {
//删除城市列表空的 districts 属性
this.cityList.forEach(itemA => {
itemA.districts.forEach(itemB => {
itemB.districts.forEach(itemC => {
delete itemC.districts;
})
})
});
},
getWeather() {
axios
.get("https://restapi.amap.com/v3/weather/weatherInfo?key=87dc0fc2db740ddccf083839be0d3f06&&city=" + this.city + "&&extensions=all")//this.city默认河南郑州
.then(res => {
if (res.data.status) {
this.list = res.data.forecasts[0].casts;
this.list.forEach((item, index) => {
// 日期 截取数据日期后两位显示
// 下标为零的数据是当天的数据 所以显示当天
if (index === 0) {
item.date = "今天";
return;
}
let arr = item.date.split("-");
// 日期 判断数据日期01号是显示月份
if (arr[2] === '01') {
item.date = arr[1] + '-' + arr[2];
} else {
item.date = arr[2];
}
});
// 开头的空格
this.weekStart = Number(res.data.forecasts[0].casts[0].week);
if (this.weekStart === 7) this.weekStart = 0;
//结尾的空格
this.weekEnd = 7 - (res.data.forecasts[0].casts.length + this.weekStart) % 7;
console.log(this.list);
} else {
console.log(res.data.info, res.data.infocode);
}
})
},
hanlderChange(val) {
// 当input框里的值改变时调动此函数
// 讲input框里的数据从新复制给data里的city数据 然后axios再次请求新的城市数据
this.city = this.$refs['cityList'].getCheckedNodes()[0].path[2]; //获取城市 adcode 值
this.getWeather(); //获取城市天气
}
},
})
</script>
</html>