Vue学习笔记05-H5实例百度音乐
目录#
- Vue学习笔记01-Vue基础
- Vue学习笔记02-Vue组件
- Vue学习笔记03-Axios
- Vue学习笔记04-Vue路由
- Vue学习笔记05-H5实例百度音乐
- Vue学习笔记06-Vuex
- Vue学习笔记07-Web商城实例
Vue实例#
25. Vue-实例-音乐列表#
示例:
src/route.js
import Vue from 'vue'
import VueRouter from "vue-router"
import Index from "../pages/index"
import MusicNav from "../pages/MusicNav"
import HotMusic from "../pages/MusicList/HotMusic"
import NewMusic from "../pages/MusicList/NewMusic"
import KingMusic from "../pages/MusicList/KingMusic"
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{ path: '/', name: 'Index', component: Index, redirect: 'HotMusic',
children: [
{ path: 'hot', name: 'HotMusic', component: HotMusic},
{ path: 'new', name: 'NewMusic', component: NewMusic},
{ path: 'king', name: 'KingMusic', component: KingMusic},
]},
]
});
src/main.js
import Vue from 'vue'
import App from './App'
import Axios from 'axios'
import router from './router'
Vue.prototype.$axios = Axios;
Vue.prototype.HOST = '/api'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
src/App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
components: {
Index
}
}
</script>
<style>
</style>
注:App.vue中应使用路由的形式引入,如果使用组件的方式引入index.vue会导致显示两次。
src/pages/index.vue
<template>
<div class="container">
<router-view/>
</div>
</template>
<script>
import MusicNav from './MusicNav'
export default {
name: 'index',
data() {
return {
}
},
components:{
MusicNav
}
}
</script>
<style>
</style>
src/pages/MusicNav.vue
<template>
<div class="musicnav">
<div class="bars">
<router-link to="/musiclist/hot">热歌榜</router-link>
<router-link to="/musiclist/new">新歌榜</router-link>
<router-link to="/musiclist/king">King榜</router-link>
</div>
<router-view/>
</div>
</template>
<script>
export default {
name: 'musicnav',
data() {
return {
}
},
}
</script>
<style>
ul.songlist{
padding: 10px;
}
li.song {
list-style: none;
}
li.song div.poster {
clear: both;
float: left;
margin-right: 10px;
}
li.song img {
width: 40px;
height: 40px;
}
</style>>
组件:src/components/MusicList.vue
<template>
<div class="musiclist">
<div class="panel">
<ul class="songlist">
<li class="song" v-bind:key="index" v-for="(item,index) in song_list">
<div class="poster"><img v-bind:src="item.pic_small"/></div>
<div class="info"><div class="name">{{ item.title }}</div><div class="author">{{ item.author }}</div></div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'musiclist',
props: {
musictype: { type: String, default: "1"},
},
data() {
return {
song_list: []
}
},
created() {
var url = this.HOST + '/v1/restserver/ting';
this.$axios.get(url+'?method=baidu.ting.billboard.billList&type='+this.musictype+'&size=10&offset=0')
.then(res=>{this.song_list=res.data.song_list})
.catch(error=>{console.log(error)})
}
}
</script>
<style scoped>
ul.songlist{
padding: 10px;
}
li.song {
list-style: none;
}
li.song div.poster {
clear: both;
float: left;
margin-right: 10px;
}
li.song img {
width: 40px;
height: 40px;
}
</style>>
src/pages/MusicList/HotMusic.vue
<template>
<div class="hot">
<MusicList musictype="1"/>
</div>
</template>
<script>
import MusicList from "../../components/MusicList"
export default {
name: 'hot',
data() {
return {
}
},
components: {
MusicList
}
}
</script>
<style>
</style>>
src/pages/MusicList/HotMusic.vue
<template>
<div class="new">
<MusicList musictype="11"/>
</div>
</template>
<script>
import MusicList from "../../components/MusicList"
export default {
name: 'new',
data() {
return {
}
},
components: {
MusicList
}
}
</script>
<style>
</style>>
src/pages/MusicList/KingMusic.vue
<template>
<div class="king">
<MusicList musictype="2"/>
</div>
</template>
<script>
import MusicList from "../../components/MusicList"
export default {
name: 'king',
data() {
return {
}
},
components: {
MusicList
}
}
</script>
<style>
</style>>
26. Vue-实例-歌手信息#
思路:歌手卡片为一个组件,页面中引用该组件,使用固定数组保存歌手id
(1)src/router/index.js中添加路由
import Vue from 'vue'
import VueRouter from "vue-router"
import Index from "../pages/index"
import MusicNav from "../pages/MusicNav"
import HotMusic from "../pages/MusicList/HotMusic"
import NewMusic from "../pages/MusicList/NewMusic"
import KingMusic from "../pages/MusicList/KingMusic"
import SingerInfo from "../pages/Singer/SingerInfo"
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{ path: '/', name: 'Index', component: Index, redirect: '/hot',
children: [
{ path: 'hot', name: 'HotMusic', component: HotMusic},
{ path: 'new', name: 'NewMusic', component: NewMusic},
{ path: 'king', name: 'KingMusic', component: KingMusic},
]},
{ path: '/singer/:singerid', name: 'singer', component: SingerInfo},
]
});
(2)创建组件src/components/SingerList.vue
<template>
<div class="singerlist">
<router-link v-bind:to="{name: 'singer', params: {singerid: singerid}}" tag="div" class="card">
<div class="poster"><img v-bind:src="singerInfo.avatar_middle"/></div>
<div class="info">{{singerInfo.name}}</div>
</router-link>
</div>
</template>
<script>
export default {
name: "singerlist",
props: {
singerid: {type: String, default: "2517"}
},
data(){
return {
singerInfo: {}
}
},
created(){
var url = this.HOST + '/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid=' + this.singerid;
this.$axios.get(url)
.then(res=>{this.singerInfo = res.data;})
.catch(error=>{console.log(error);})
}
}
</script>
<style scoped>
div.card {
float: left;
margin-left: 8px;
margin-top: 8px;
}
div.card img {
width: 110px;
height: 110px;
}
</style>
(3)新建页面src/pages/Singer/SingerInfo.vue
<template>
<div class="singerInfo">
歌手歌曲列表
<SingerMusic/>
</div>
</template>
<script>
import SingerMusic from "../../components/SingerMusic"
export default {
name: "singerInfo",
data(){
return {}
},
components:{
SingerMusic
}
}
</script>
<style scoped>
</style>
(4)新建页面src/pages/Singer.vue
<template>
<div class="singer">
<div class="">
<h2>热门歌单</h2>
<SingerList v-bind:key="index" v-for="(item, index) in singerList" v-bind:singerid="item"/>
</div>
</div>
</template>
<script>
import SingerList from '../components/SingerList'
export default {
name: "singer",
data(){
return {
singerList: ['2517', '1094', '1052', '45561', '1098', '1202']
}
},
components: {
SingerList,
}
}
</script>
<style scoped>
</style>
(5)src/pages/index.vue中引入Singer.vue
<template>
<div class="container">
<MusicNav/>
<Singer/>
</div>
</template>
<script>
import MusicNav from './MusicNav'
import Singer from './Singer'
export default {
name: 'index',
data() {
return {
}
},
components:{
MusicNav, Singer
}
}
</script>
<style>
</style>
27. Vue-实例-歌曲播放#
(1)添加路由{ path: '/musicplay/:songid', name: 'musicplay', component: MusicPlay},
src/route/index.js
import Vue from 'vue'
import VueRouter from "vue-router"
import Index from "../pages/index"
import MusicNav from "../pages/MusicNav"
import HotMusic from "../pages/MusicList/HotMusic"
import NewMusic from "../pages/MusicList/NewMusic"
import KingMusic from "../pages/MusicList/KingMusic"
import SingerInfo from "../pages/Singer/SingerInfo"
import MusicPlay from "../pages/MusicPlay"
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{ path: '/', name: 'Index', component: Index, redirect: '/hot',
children: [
{ path: 'hot', name: 'HotMusic', component: HotMusic},
{ path: 'new', name: 'NewMusic', component: NewMusic},
{ path: 'king', name: 'KingMusic', component: KingMusic},
]},
{ path: '/singer/:singerid', name: 'singer', component: SingerInfo},
{ path: '/musicplay/:songid', name: 'musicplay', component: MusicPlay},
]
});
(2)新建播放页面src/pages/MusicPlay.vue
<template>
<div class="musicplay">
<h2>{{songInfo.songinfo.title}}</h2>
<div>
<div class="author">{{songInfo.songinfo.author}}</div>
<div class="company">{{songInfo.songinfo.si_proxycompany}}</div>
<img v-bind:src="songInfo.songinfo.pic_premium"/>
<audio v-bind:src="songInfo.bitrate.file_link" autoplay controls>
</audio>
</div>
</div>
</template>
<script>
export default {
name: "musicplay",
data(){
return{
songInfo: {
songinfo: {},
bitrate: [],
},
}
},
created(){
var url = this.HOST + 'v1/restserver/ting?method=baidu.ting.song.play&songid=' + this.$route.params.songid;
this.$axios.get(url)
.then(res=>{this.songInfo=res.data;})
.catch(error=>{console.log(error);})
}
}
</script>
<style scoped>
div img {
width: 350px;
height: 350px;
margin-left: 5px;
}
div audio {
margin-left: 30px;
}
</style>
(3)修改src/components/MusicList.vue
<template>
<div class="musiclist">
<div class="panel">
<ul class="songlist">
<router-link v-bind:to="{name: 'musicplay', params: {songid: item.song_id}}" tag="li" class="song" v-bind:key="index" v-for="(item,index) in song_list">
<div class="poster"><img v-bind:src="item.pic_small"/></div>
<div class="info"><div class="name">{{ item.title }}</div><div class="author">{{ item.author }}</div></div>
</router-link>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'musiclist',
props: {
musictype: { type: String, default: "1"},
},
data() {
return {
song_list: [],
}
},
created() {
var url = this.HOST + '/v1/restserver/ting';
this.$axios.get(url+'?method=baidu.ting.billboard.billList&type='+this.musictype+'&size=5&offset=0')
.then(res=>{this.song_list=res.data.song_list})
.catch(error=>{console.log(error)})
}
}
</script>
<style scoped>
ul.songlist{
padding: 10px;
}
li.song {
list-style: none;
}
li.song div.poster {
clear: both;
float: left;
margin-right: 10px;
}
li.song img {
width: 40px;
height: 40px;
}
</style>>
(4)修改src/components/SingerMusic.vue
<template>
<div class="singermusic">
<div class="panel">
<ul class="songlist">
<router-link v-bind:to="{name: 'musicplay', params: {songid: item.song_id}}" tag="li" class="song" v-bind:key="index" v-for="(item,index) in song_list">
<div class="poster"><img v-bind:src="item.pic_small"/></div>
<div class="info"><div class="name">{{ item.title }}</div><div class="author">{{ item.author }}</div></div>
</router-link>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'singermusic',
props: {
singerid: { type: String, default: "2517"},
},
data() {
return {
song_list: []
}
},
mounted() {
var url = this.HOST + '/v1/restserver/ting';
this.$axios.get(url+'?method=baidu.ting.artist.getSongList&tinguid='+this.$route.params.singerid+'&limits=6&use_cluster=1&order=2')
.then(res=>{this.song_list=res.data.songlist})
.catch(error=>{console.log(error)})
}
}
</script>
<style scoped>
ul.songlist{
padding: 10px;
}
li.song {
list-style: none;
}
li.song div.poster {
clear: both;
float: left;
margin-right: 10px;
}
li.song img {
width: 40px;
height: 40px;
}
</style>>
28. Vue-示例-歌曲播放与歌词#
iconfont使用#
- 访问iconfont官网,登录并选择图标,在购物车中点击下载代码。
- 解压下载代码,重命名文件夹为font,放到项目src/asserts目录中
- 在MuisicPlay.vue
中引入
import "../assets/font/iconfont.css"
- 在页面中使用
<i class="iconfont icon-shouye big left"></i> <i class="iconfont icon-sousuo right"></i> <i class="iconfont icon-shoucang left"></i> <i class="iconfont icon-xiazai right"></i>
29. Vue-实例-搜索发现
30. Vue-实例-上拉加载
31. Vue-实例-加载等待
32. Vue-实例-加载等待
作者:韩志超
出处:https://www.cnblogs.com/superhin/p/12803723.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
如有问题,请微信联系 superz-han,并发送原文链接。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现