网络应用（vue结合网络数据开发应用）

axios官网
 axios网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址？key=value&key2=value2).then(funtion(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(funtion(response){},function(err){})

1.获取笑话接口
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num（笑话条数，数字）
响应内容：随机笑话

2.用户注册接口
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username（用户名，字符串）
响应内容：注册成功或失败

<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">

document.querySelector(".get").onclick = function(){
	axios.get(https://autumnfish.cn/api/joke/list?num=3)
	.then(funtion(response){
		console.log(respose);
	},function(err){	
		console.log(err);
	})
	
}

document.querySelector(".post").onclick = function(){
	axios.get(https://autumnfish.cn/api/user/reg,{username:"jack"})
	.then(funtion(response){
		console.log(respose);
	},function(err){	
		console.log(err);
	})
	
}

<div id="app">
	<input type="button" value="获取笑话" @click="getJoke">	
	<p>{{joke}}</p>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue(){
		el:"#app",
		data:{
			joke:"很好笑的笑话"	
		},
		methods:{
			getJoke:function(){
				//console.log(this.joke);
				var that = this;
				axios.get("https://autumnfish.cn/api/user/reg")
				.then(function(respose){	
					console.log(respose.data);	
					that.joke = respose.data;
				},function(err){})	
			}	
		},	
	}
</script>

案例练习-天知道（天气查询应用）
1.回车查询
按下回车v-on .enter
查询数据 axios接口 v-model
渲染数据 v-for数组 that
2.点击查询
点击城市 v-on自定义参数
查询数据 this.方法（）
渲染数据

天气接口
请求地址：https://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数：city
响应内容：天气信息

<div id="app">
	<input v-model = "city" @keyup.enter = "searchWeather" placeolder="请输入查询的天气"><button>搜索</button>
</div>
<div class="hotkey">
	<a href="javascript:;" @click="changeCity('上海')">上海</a>
	<a href="javascript:;" @click="changeCity('广州')">广州</a>
	<a href="javascript:;" @click="changeCity('北京')">北京</a>
	<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
<ul class="weather_list">
	<li v-for="item in weatherList">
		<div><span>{{item.type}}</span></div>
		<div>
			<b>{{item.higt}}</b>
			~
			<b>{{item.low}}</b>
		</div>
		<div><span>{{item.date}}</span></div>
	</li>
</ul>
<div class="video_con" v-show=""isShow>
	<video :src="mvUrl"></video>
	<div class="mask" @click="hide"></div>
</div>

var app = new Vue({
	el:"#app",
	data:{
		city:'',	
		weatherList:[]
	}
	mwthods:{
		searchWeather:function(){
			//保存this
			var that = this;
			//调用接口
			axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
			.then(function(respose){	
				console.log(response.data.data.forecast)
				that.weatherList = response.data.data.forecast
			}).catch(function(err){})	
		},
		changeCitys:function(){
			this.city = city;
			this.searchWeather();
		}	
	}	
})

综合应用–小程序
1歌曲搜索
按下回车 v-on .enter
查询数据 axios 接口 v-model
渲染数据
2歌曲播放
点击播放（v-on自定义参数）
歌曲地址获取歌曲（接口歌曲id）
歌曲地址设置（v-bind)
播放歌曲的本质是添加歌曲的src
3歌曲封面
点击播放
歌曲封面获取(接口歌曲id)
歌曲封面设置
4歌曲评论
点击播放
歌曲评论获取（接口歌曲id）
歌曲评论渲染（v-for）
5播放动画
监听音乐播放（v-on play)
监听音乐暂停（v-on pause）
操纵类名（v-bind 对象）
6mv播放
MV图标显示（v-if）
mv地址获取(v-on mvid)
遮罩层(v-show v-on)
mv地址设置(v-bind)

歌曲搜索接口
请求地址：https://autmnfish.cn/search
请求参数：keywords(查询的关键字)
响应内容：歌曲搜索结果

<div>
	<input v-model="query" @keyup.enter="searchMusic">
	<li v-for="item in musicList"><a href ="javascript:;" @click="playMusic(item.id)"></a><b>{{item.name}}</b></li>
</div>
<div class="center_con">
	<div class="player_con" :class="{playing:isPlaying}">
		<img :src="musicCover"/>
	</div>
	<span v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></i></span>
</d
<div class="comment_list">
	<dl v-for="item in hotComments">	
		<dt><img :src="item.user.avatarUrl"/></dt>
		<dd class="name">{{item.nickname}}</dd>
		<dd>{{item.content}}</dd>
		
	</dl>
</div>
<div calss = "audio_con" >
	<audio ref="audio":src="musicUrl"  @play="play" @pause="pause"></audio>
</div>

var APP= new Vue({
	el:"#player",
	data:{
		query:"",	
		musicList:[],
		musicUrl:"",
		musicCover:"",
		hotComments:[],
		//动画播放状态
		isPlaying:false,
		//遮罩曾的显示状态
		isShow:false,
		mvUrl:"",
	},
	methods:{
	//1.歌曲搜索
	searchMusic:function(){
	var that = this;
		axios.get("https://autmnfish.cn/search?keywords="+this.query)
		.then(function(response){	
				console.log(response.data.result.songs[0].al.picUrl);
				that.musicList = response.data.result.songs[0].al.picUrl;
				 
		},function(err){});
	},
	//2.歌曲播放
	playMusic:function(musicId){
		//console.log(musicId);	
		var that = this;
		//3.获取歌曲地址
		axios.get("https://autumnfinsh.cn/song/url?id="+musicId)
		.then(function(response){
			console.log(response.data.data[0].url);
			that.musicUrl = response.data.data[0].url;
		},funtion(err){})
		//4.歌曲详情获取
		axios.get("https://autumnfinsh.cn/song/detail?ids="+musicId)
		.then(function(response){
			console.log(response.data.songs[0].al.picUrl);
			that.musicDetail = response.data.songs[0].al.picUrl;
		},funtion(err){})
		//歌曲评论获取
		axios.get("https://autumnfinsh.cn/comment/hot?type=0&id=" +musicId)
		.then(function(response){
			console.log(response.data.hotComments);
			that.hotComments = response.data.hotComments;
		},funtion(err){})
		play:function(){
			//console.log("")
			this.isPlaying = true;
			
		},
		pause:function(){
			//console.log("")
			this.isPlaying = false;
			
		}
		//播放mv
		playMv:function(mvid){
		var that = this;
			axios.get("https://autumnfinsh.cn//mv/url?id=" +mvid).then(function(response){
			console.log(response.data.data.url)
			that.isShow = true;
			that.mvUrl = response.data.data.url
	
		},function(err){})
		},
		hide:function(){
			this.isShow = false;	
		}
	}
})