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样式上并没有做精细的设计。
- 需求 歌曲搜索、歌曲播放、歌曲封面、歌曲评论、播放动画、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：
代码语言：javascript复制<!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：
代码语言：javascript复制/*
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：
代码语言：javascript复制@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;
}
