Vue(axios与Vue结合、天气查询案例)
程序员文章站
2022-03-05 09:28:23
...
Vueday3
网络应用
Vue结合网络数据开发应用
axios(网络需求库)
导入包:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?查询字符串).then(function(response){},function(err){}) //地址即文档提供的接口地址
//字符串格式:key=value&key1=value1
axios.post(地址,参数对象).then(function(response){},function(err){})
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容，或错误信息
- 文档地址:https://github.com/axios/axios
axios + Vue
- axios回调函数中的this已经改变，无法访问到data数据
- 把this保存起来，回调函数中直接使用保存的this即可
- 和本地应用最大的区别就是改变了数据来源
案例1：天知道天气查询
接口:
地址:http://wthrcdn.etouch.cn/weather_mini
请求方式:get
请求参数:city(查询的城市名)
响应内容:天气信息
- 回车查询
- 按下回车(v-on .enter)
- 查询数据(axios 接口 v-model)
- 渲染数据(v-for 数组 that)
应用的逻辑代码建议和页面分离，使用单独的JS文件编写
axios回调函数中this指向变了，需要额外的保存一份
服务器返回的数据比较复杂时，获取的时候需要注意层级结构
- 点击查询
- 点击城市(v-on 自定义参数)
- 查询数据
- 渲染数据
自定义参数可以让代码的复用性更高
methods中定义的方法内部，可以通过this关键字点出其他的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天气查询</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main h2 {
padding-bottom: 30px;
}
#main {
width: 600px;
margin: 50px auto;
text-align: center;
}
#city {
float: left;
width: 450px;
height: 40px;
padding-left: 20px;
font-size: 16px;
border: 1px solid dodgerblue;
}
#city:focus {
outline: none;
}
#search {
width: 100%;
height: 40px;
position: relative;
}
#search span {
float: right;
width: 150px;
height: 40px;
line-height: 40px;
color: aliceblue;
background-color: dodgerblue;
cursor: default;
}
.sicity {
width: 100%;
height: 40px;
color: rgb(134, 134, 134);
}
.sicity a {
display: block;
list-style: none;
float: left;
width: 50px;
cursor: pointer;
}
.week {
width: 800px;
height: 200px;
margin: 20px auto;
color: rgb(134, 134, 134);
font-family: "微软雅黑";
}
.week li {
float: left;
list-style: none;
text-align: center;
width: 160px;
border-right: 1px solid #ccc;
}
.week li p {
color: coral;
line-height: 40px;
font-size: 14px;
}
.week li:last-of-type {
border-right: 0px;
}
.week li span {
font-weight: 600;
color: coral;
}
.week div {
margin-top: 20px;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div id="main">
<!--标题-->
<h2>天气查询</h2>
<!--搜索框-->
<div id="search">
<input type="text" v-model='city' @keyup.enter="searchWeather" id='city'>
<span @click="searchWeather">搜索</span>
</div>
<div class="sicity">
<a @click="changeCity('上海')">上海</a>
<a @click="changeCity('北京')">北京</a>
<a @click="changeCity('广州')">广州</a>
<a @click="changeCity('深圳')">深圳</a>
</div>
</div>
<div class="week">
<li v-for="item in weaherList">
<span v-cloak>{{item.type}}</span>
<p v-cloak>{{item.low}}~{{item.high}}</p>
<div v-cloak>{{item.date}}</div>
</li>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
city: '',
weaherList: [],
},
methods: {
searchWeather: function () {
//console.log('天气查询');测试挂载成功
//console.log(this.city);
//调用接口
//保存this，因为回调函数this已经改变了所以要保存它
var that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
.then(function (response) {
that.weaherList = response.data.data.forecast
})
.catch(function (err) { })
},
changeCity: function (city) {
this.city = city;
this.searchWeather();
}
}
})
//自定义参数可以让代码的复用性更高
//methods中定义的方法内部，可以通过this关键字点出其他的方法
</script>
</body>
</html>
上一篇： [迁移]opengl学习从头开始（笔记14 二次曲面）
下一篇： WebSocket 协议升级