Vue入门（三）——网络/综合应用

程序员文章站 2022-06-22 19:46:47

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

Vue入门（三）——网络/综合应用

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

一、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保存起来供后续操作使用。

<!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入门（三）——网络/综合应用

需求
歌曲搜索、歌曲播放、歌曲封面、歌曲评论、播放动画、MV播放。
歌曲搜索
按下回车（v-on，enter）
查询数据（axios，接口https://autumnfish.cn/search?keywords，v-model）
数据渲染（v-for，数组，this保存）
歌曲播放
点击播放（v-on，自定义参数）
歌曲地址获取（接口https://autumnfish.cn/song/url，歌曲id）
歌曲地址设置（v-bind）
歌曲封面
点击播放（增加逻辑）
歌曲封面获取（接口https://autumnfish.cn/song/detail，歌曲id）
歌曲封面设置（v-bind）
歌曲评论
点击播放（增加逻辑）
歌曲评论获取（接口https://autumnfish.cn/comment/hot?type=0，歌曲id）
歌曲封面设置（v-for）
播放动画
监听音乐播放（v-on play）
监听音乐暂停（v-on pause）
操纵类名（v-bind 对象）
MV播放
MV图标显示（v-if）
MV地址获取（接口https://autumnfish.cn/mv/url，mvid）
遮罩层（v-show，v-on）
MV地址设置（v-bind）

代码示例
项目结构：

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入门（三）——网络/综合应用

Vue入门（三）——网络/综合应用

一、axios 库

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

网页游戏开发入门教程三(简单程序应用)

浅谈Vue网络请求之interceptors实际应用

详解nodejs 开发企业微信第三方应用入门教程

分分钟学会vue中vuex的应用（入门教程）

区块链入门教程之从比特币到以太访再到智能合约从架构概念到应用实战(DAPP)（四、以太访、web3、智能合约三者之间的关系及智能合约基本讲解）

杭州华为三康技术有限公司简介华为企业应用网络应用交通应用服务器

Vue.js入门学习（三） Class与Style绑定

Vue小案例——奇妙清单（vue指令综合应用）

axios -vue 网络应用，Vue结合网络数据开发应用

vue网络应用：天气查询

Vue入门（三）——网络/综合应用

Vue入门（三）——网络/综合应用

一、axios 库

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

网页游戏开发入门教程三(简单程序应用)

浅谈Vue网络请求之interceptors实际应用

详解nodejs 开发企业微信第三方应用入门教程

分分钟学会vue中vuex的应用（入门教程）

区块链入门教程之从比特币到以太访再到智能合约从架构概念到应用实战(DAPP)（四、以太访、web3、智能合约三者之间的关系及智能合约基本讲解）

杭州华为三康技术有限公司简介 华为企业应用网络应用交通应用服务器

Vue.js入门学习（三） Class与Style绑定

Vue小案例——奇妙清单（vue指令综合应用）

axios -vue 网络应用，Vue结合网络数据开发应用

vue网络应用：天气查询

杭州华为三康技术有限公司简介华为企业应用网络应用交通应用服务器