vue基础篇 03 网络应用

最新推荐文章于 2022-04-28 11:16:27 发布

LeyoBiang

最新推荐文章于 2022-04-28 11:16:27 发布

阅读量108

点赞数

分类专栏：前端 vue 文章标签： vue js javascript css vue.js

本文链接：https://blog.csdn.net/qilie_32/article/details/114375279

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

03 网络应用

axios基本应用

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中对1回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息

相关文档：https://github.com/axios/axios

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios基本应用</title>
	</head>
	<body>
		<input type="button" value="get请求" class="get"/>
		<input type="button" value="post请求" class="post"/>
		
		<div class="getMessage"></div>
		<div class="postMessage"></div>
		
		<!-- axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
			var getMessage=document.querySelector(".getMessage");
			var postMessage=document.querySelector(".postMessage");
			document.querySelector(".get").onclick = function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=3")
				.then(
					function(response){
						getMessage.innerText=response.data.jokes.join("\n");
					},
					function(error){
						getMessage.innerText="出错啦！\n"+error;
					}
				)
			}
			document.querySelector(".post").onclick = function(){
				axios.post("https://autumnfish.cn/api/user/reg",{username:'biang'})
				.then(
					function(response){
						getMessage.innerText=response.data;
						console.log(response);
					},
					function(error){
						getMessage.innerText="出错啦！\n"+error;
					}
				)
			}
		</script>
	</body>
</html>

axios+vue

axios回调函数中的this已经改变，无法访问到data中的数据
把this保存起来，回调函数中的直接使用保存的this即可

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios加vue</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="get请求" @click="getJoke()"/>
			<div>{{joke}}</div>
		</div>
		<!-- axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					joke:"我笑了"
				},
				methods:{
					getJoke:function(){
						var that=this;
						axios.get("https://autumnfish.cn/api/joke/list?num=3")
						.then(
							function(response){
								that.joke=response.data.jokes.join("\n");
							},
							function(error){
								that.joke="出错啦！\n"+error;
							}
						)
					}
				}
			});
		</script>
	</body>
</html>

axios基本使用、axios+vue实战演练

天知道

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天知道</title>
		<style type="text/css">
			*{
				text-align: center;
				padding: 0px;
				margin:0px;
			}
			li{
				list-style: none;
			}
			.w{
				margin: 0 auto;
				width: 600px;
				
			}
			.main_content ul{
				display: inline-block;
			}
			.main_content ul li{
				float: left;
				padding-right: 10px;
			}
			.weather ul li{
				float: left;
				width: 108px;
				border: 1px solid gray;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header class="w">
				<h1>天知道</h1>
			</header>
			<section class="w content">
				<div class="main_content">
					<!-- 搜索区 -->
					<div>
						<input type="text" v-model="inputValue" 
						@focus="inputFuncus()" 
						@blur="inputBlur()" 
						@keyup.enter="getWeather(inputValue)"/>
						<input type="button" value="查询" @click="getWeather(inputValue)"/>
					</div>
					<!-- 快捷搜索区 -->
					<ul>
						<li v-for="item in citys"><a href="#" @click="getWeather(item)">{{item}}<a></li>
					</ul>
					<!-- 天气区 -->
					<div class="weather">
						<h1>
							{{city}}
						</h1>
						<ul>
							<li v-for="item in weathers">
								<h2>{{item.type}}</h2>
								<p>{{item.low+'~'+item.high}}</p>
								<span>{{item.date}}<span>
							</li>
						</ul>
					</div>
				</div>
			</section>
		</div>
		<!-- axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					inputValue:'请输入城市',
					citys:['北京','上海','广州'],
					city:'',
					weathers:[]
				},
				methods:{
					getWeather:function(cityName){
						var that=this;
						axios.get('https://wthrcdn.etouch.cn/weather_mini?city='+cityName)
						.then(
							function(response){
								if(response.data.desc=="OK"){//找到了
									that.weathers=[];
									that.city=cityName;
									var tempList=response.data.data.forecast;
									for(var i=0;i<tempList.length;i++){
										that.weathers.push(tempList[i]);
									}
								}else{
									that.inputValue='天气查询失败';
								}
								
							},
							function(error){
								console.log('失败');
								console.log(error);
							}
						)
					},
					inputFuncus:function(){
						if(this.inputValue=='请输入城市'){
							this.inputValue='';
						}
					},
					inputBlur:function(){
						if(this.inputValue==''){
							this.inputValue='请输入城市';
						}
					}
				}
			});
		</script>
	</body>
</html>