This case introduces
element-ui,axios,,vueprovincial and municipal jscitys
Gaode map development document
el-ui official
website has many interfaces for the data obtained by Gaode weather. In this case, only four days of data are obtained. If there is any change, the interface can be modified in axios, but It may be necessary to add the operations allowed by the backend request header data
renderings
the code
<!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>