...

Vue学习笔记05-H5实例百度音乐

目录#

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-实例-歌曲播放#

icronfont

项目结构梳理

歌曲播放页面

(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使用#

  1. 访问iconfont官网,登录并选择图标,在购物车中点击下载代码。
  2. 解压下载代码,重命名文件夹为font,放到项目src/asserts目录中
  3. 在MuisicPlay.vue 中引入
import "../assets/font/iconfont.css"
  1. 在页面

作者:韩志超

出处:https://www.cnblogs.com/superhin/p/12803723.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

如有问题,请微信联系 superz-han,并发送原文链接。

posted @   韩志超  阅读(395)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现
点击右上角即可分享
微信分享提示
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu