Vue(axios与Vue结合、天气查询案例)

最新推荐文章于 2022-04-03 23:54:35 发布

退堂鼓职业选手

最新推荐文章于 2022-04-03 23:54:35 发布

阅读量326

点赞数

分类专栏： B站学习记录文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_45886797/article/details/119514028

版权

B站学习记录专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vueday3

文章目录

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>

退堂鼓职业选手

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue(axios与Vue结合、天气查询案例)

Vueday3文章目录Vueday3网络应用axios(网络需求库)axios + Vue==案例1==：天知道天气查询网络应用Vue结合网络数据开发应用axios(网络需求库)导入包:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios.get(地址?查询字符串).then(function(response){},function(err){}) //地址即文档提供的接口地址/
复制链接

扫一扫

专栏目录