欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue入门(三)——网络/综合应用

程序员文章站 2022-03-03 19:57:31
Vue入门——网络/综合应用一、axios 库二、综合应用——音乐播放器一、axios 库axios官网功能强大的网络请求库。浏览器筛选:xhr: xmlHttpRequest,基于Ajax。axios.get(site?key=value&key2=value2).then(function(response){},function(...

Vue入门(三)——网络/综合应用

一、axios 库

axios官网
功能强大的网络请求库。浏览器筛选:xhr: xmlHttpRequest,基于Ajax

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get(site?key=value&key2=value2).then(function(response){},function(err){})
axios.post(site,{key:value,key2:value2}).then(function(response){},function(err){})
  • 代码使用
    axios回调函数中的this会改变,无法访问到data中的数据,可以将this保存起来供后续操作使用。
    Vue入门(三)——网络/综合应用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	
	<body>
		<div id="app">
			<input type="button" value="get请求" @click="get" class="get" />
			<input type="button" value="post请求" @click="post" class="post" />
			<p>Joke: {{ joke }}</p>
			<p>Register: {{ register }}</p>
		</div>
		
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					joke: "...",
					register: "..."
				},
				methods: {
					get: function(){
						var this_joke = this;
						axios.get("https://autumnfish.cn/api/joke").then(
							function(response){
								this_joke.joke = response.data;
							},
							function(err){
								this_joke.joke = err;
							}
						)
					},
					post: function(){
						var this_register = this;
						axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"}).then(
							function(response){
								this_register.register = response.data;
							},
							function(err){
								this_register.register = err;
							}
						)
					}
				}
			});
		</script>
	</body>
</html>

二、综合应用——音乐播放器

这里只是简单的入门一下Vue的使用,在CSS样式上并没有做精细的设计。
Vue入门(三)——网络/综合应用

  1. 需求
    歌曲搜索、歌曲播放、歌曲封面、歌曲评论、播放动画、MV播放。

  2. 歌曲搜索
    按下回车(v-on,enter)
    查询数据(axios,接口https://autumnfish.cn/search?keywords,v-model)
    数据渲染(v-for,数组,this保存)

  3. 歌曲播放
    点击播放(v-on,自定义参数)
    歌曲地址获取(接口https://autumnfish.cn/song/url,歌曲id)
    歌曲地址设置(v-bind)

  4. 歌曲封面
    点击播放(增加逻辑)
    歌曲封面获取(接口https://autumnfish.cn/song/detail,歌曲id)
    歌曲封面设置(v-bind)

  5. 歌曲评论
    点击播放(增加逻辑)
    歌曲评论获取(接口https://autumnfish.cn/comment/hot?type=0,歌曲id)
    歌曲封面设置(v-for)

  6. 播放动画
    监听音乐播放(v-on play)
    监听音乐暂停(v-on pause)
    操纵类名(v-bind 对象)

  7. MV播放
    MV图标显示(v-if)
    MV地址获取(接口https://autumnfish.cn/mv/url,mvid)
    遮罩层(v-show,v-on)
    MV地址设置(v-bind)

  • 代码示例
    项目结构:
    Vue入门(三)——网络/综合应用
    index.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Music Player</title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/myVue.css">
	</head>
	
	<body>
		<div id="musicplayerapp">
			<!-- 播放器主体 -->
			<div class="play_wrap" id="player">
				<!-- 搜索部分 -->
				<div class="serach_bar">
					<input type="text" v-model="query" @keyup.enter="searchMusic" autocomplete="off" />
					<input type="button" @click="searchMusic()" value="搜索" />
				</div>
				
				<!-- 显示列表 -->
				<div class="center_con">
					<!-- 搜索歌曲列表 -->
					<div class="song_wrapper">
						<ul class="song_list">
								<li v-for="item in musicList">
								<a href="javascript:;" @click="playMusic(item.id)">Play</a>
								<b>{{ item.name }}</b>
								<span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i>MV</i></span>
							</li>
						</ul>
						<img src="" class="swith_btn" alt="" />
					</div>
					
					<!-- 歌曲信息容器 -->
					<div class="player_con" :class="{playing:isPlaying}">
						<!-- TODO:添加图片 -->
						<img src="" class="play_bar" />
						<img src="" class="disc autoRotate" />
						<!-- TODO: 大小调整 -->
						<img :src="musicCover" class="cover autoRotate" />
					</div>
					
					<!-- 评论容器 -->
<!-- 					<div class="comment_wrapper">
						<h5 class="title">热门留言</h5>
						<div class="comment_list">
							<dl v-for="item in hotComments">
								<dt><img :src="item.user.avatarUrl" alt="" /></dt>
								<dd class="name">{{ item.user.nickname }}</dd>
								<dd class="detail">{{ item.content }}</dd>
							</dl>
						</div>
					</div>
				</div> -->
				
				<!-- 播放歌曲 -->
				<div class="audio_con">
					<audio id="my_audio" ref="audio" :src="musicUrl" @play="play" @pause="pause" controls autoplay loop class="myaudio"></audio>
				</div>
				
				<!-- 播放MV -->
				<div v-show="isShowMV" style="display: none;">
					<video class="video_con" :src="mvUrl" controls="controls"></video>
					<div class="mask" @click="hide"></div>
				</div>
			</div>
		</div>
		
		<script src="./js/main.js"></script>
	</body>
</html>


main.js:

/*
	1.歌曲搜索接口
		请求地址:https://autumnfish.cn/search
		请求方法:get
		请求参数:keywords
		相应内容:歌曲搜索结果

	2.歌曲地址获取接口
		请求地址:https://autumnfish.cn/song/url
		请求方法:get
		请求参数:id
		相应内容:歌曲地址结果
		
	3.歌曲详情获取接口
		请求地址:https://autumnfish.cn/song/detail
		请求方法:get
		请求参数:ids
		相应内容:歌曲详情结果
		
	4.热门评论获取
		请求地址:https://autumnfish.cn/comment/hot?type=0
		请求方法:get
		请求参数:id
		相应内容:歌曲热门评论结果
		
	5.MV地址获取
		请求地址:https://autumnfish.cn/mv/url
		请求方法:get
		请求参数:id
		相应内容:MV地址结果
*/

var vm = new Vue({
	el: "#player",
	data: {
		query: "",
		musicList: [],
		musicUrl: "",
		musicCover: "",
		hotComments: [],
		isPlaying: false,
		isShowMV: false,
		mvUrl: ""
	},
	methods: {
		
		// 歌曲搜索
		searchMusic: function(){
			var this_search = this;
			axios.get("https://autumnfish.cn/search?keywords="+this_search.query)
			.then(function(response){
				this_search.musicList = response.data.result.songs;
			},
			function(err){
				console.log(err);
				alert("Search error!");
			})
		},
		
		// 歌曲播放
		playMusic: function(musicId){
			var this_get = this;
			this_get.isShowMV = false;
			
			// 获取歌曲地址
			axios.get("https://autumnfish.cn/song/url?id=" + musicId)
			.then(function(response){
				this_get.musicUrl = response.data.data[0].url;
			},
			function(err){
				console.log(err);
				alert("Get music ID error!");
			});
			
			// 获取歌曲详情
			axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
			.then(function(response){
				this_get.musicCover=response.data.songs[0].al.picUrl;
			},
			function(err){
				console.log(err);
				alert("Get music detail error!");
			});
			
			// 获取歌曲评论
			axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
			.then(function(response){
				this_get.hotComments = response.data.hotComments;
			},
			function(err){
				console.log(err);
				alert("Get music comments error!");
			});
		},
		
		play: function(){
			this.isPlaying = true;
		},
		pause: function(){
			this.isPlaying = false;
		},
		
		// 播放MV
		playMV: function(mvId){
			var this_mv = this;
			var audio = document.getElementById("my_audio");
			audio.pause();
			
			axios.get("https://autumnfish.cn/mv/url?id=" + mvId)
			.then(function(response){
				this_mv.isShowMV = true;
				this_mv.mvUrl = response.data.data.url;
			},
			function(err){
				console.log(err);
				alert("Get mv ID error!");
			});
		},
		
		hide: function(){
			this.isShowMV = false;
		}
	}
})

myVue.css:

@charset "utf-8";
.play_wrap {
  width: 1020px;
  margin: 0 auto;
  border-radius: 30px;
  border: 1px solid #999999;
  background-color: #F5F5F5;
}

.serach_bar {
  width: 100%;
  height: 75px;
  z-index: 999;
  position: relative;
  background-color: #9CA6A9;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.player_con {

}

.audio_con {
  height: 80px;
  background-color: #cccccc;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.mask {
  position: fixed;
  width: 1020px;
  height: 750px;
  left: 0;
  top: -102px;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.8);
}

.video_con {
  position: fixed;
  width: 600px;
  height: 600px;
  left: 350px;
  margin-top: -400px;
  top: 50%;
  z-index: 20;
}

本文地址:https://blog.csdn.net/Papaya_shun/article/details/107363332

相关标签: vue