测试开发之Vue学习笔记-H5实例百度音乐

Vue实例

25. Vue-实例-音乐列表

示例：

src/route.js

CopyimportVuefrom'vue'importVueRouterfrom"vue-router"importIndexfrom"../pages/index"importMusicNavfrom"../pages/MusicNav"importHotMusicfrom"../pages/MusicList/HotMusic"importNewMusicfrom"../pages/MusicList/NewMusic"importKingMusicfrom"../pages/MusicList/KingMusic"Vue.use(VueRouter);

exportdefaultnewVueRouter({
    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

CopyimportVuefrom'vue'importAppfrom'./App'importAxiosfrom'axios'import router from'./router'Vue.prototype.$axios = Axios;  
Vue.prototype.HOST = '/api'Vue.config.productionTip = falsenewVue({
  el: '#app', 
  router,
  components: { App }, 
  template: '<App/>' 
})

src/App.vue

Copy<template><divid="app"><router-view/></div></template><script>exportdefault {
  name: 'App',
  data() {
    return {
     
    }
  },
  components: {
    Index
  }
}
</script><style></style>

注：App.vue中应使用路由的形式引入，如果使用组件的方式引入index.vue会导致显示两次。

src/pages/index.vue

Copy<template><divclass="container"><router-view/></div></template><script>importMusicNavfrom'./MusicNav'exportdefault {
    name: 'index',
    data() {
        return {

        }
    },
    components:{
        MusicNav
    }
}
</script><style></style>

src/pages/MusicNav.vue

Copy<template><divclass="musicnav"><divclass="bars"><router-linkto="/musiclist/hot">热歌榜</router-link><router-linkto="/musiclist/new">新歌榜</router-link><router-linkto="/musiclist/king">King榜</router-link></div><router-view/></div></template><script>exportdefault {
    name: 'musicnav',
    data() {
        return {
        }
    },
}
</script><style>ul.songlist{
        padding: 10px;
    }
    li.song {
        list-style: none;
    }
    li.songdiv.poster {
        clear: both;
        float: left;
        margin-right: 10px;
    }
    li.songimg {
        width: 40px;
        height: 40px;
    }
</style>>

组件：src/components/MusicList.vue

Copy<template><divclass="musiclist"><divclass="panel"><ulclass="songlist"><liclass="song"v-bind:key="index"v-for="(item,index) in song_list"><divclass="poster"><imgv-bind:src="item.pic_small"/></div><divclass="info"><divclass="name">{{ item.title }}</div><divclass="author">{{ item.author }}</div></div></li></ul></div></div></template><script>exportdefault {
    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><stylescoped>ul.songlist{
        padding: 10px;
    }
    li.song {
        list-style: none;
    }
    li.songdiv.poster {
        clear: both;
        float: left;
        margin-right: 10px;
    }
    li.songimg {
        width: 40px;
        height: 40px;
    }
</style>>

src/pages/MusicList/HotMusic.vue

Copy<template>
    <divclass="hot"><MusicListmusictype="1"/></div>
</template>
<script>importMusicListfrom"../../components/MusicList"exportdefault {
    name: 'hot',
    data() {
        return {
        }
    },
    components: {
        MusicList
    }
}
</script><style></style>>

src/pages/MusicList/HotMusic.vue

Copy<template>
    <divclass="new"><MusicListmusictype="11"/></div>
</template>
<script>importMusicListfrom"../../components/MusicList"exportdefault {
    name: 'new',
    data() {
        return {
        }
    },
    components: {
        MusicList
    }
}
</script><style></style>>

src/pages/MusicList/KingMusic.vue

Copy<template>
    <divclass="king"><MusicListmusictype="2"/></div>
</template>
<script>importMusicListfrom"../../components/MusicList"exportdefault {
    name: 'king',
    data() {
        return {
        }
    },
    components: {
        MusicList
    }
}
</script><style></style>>

26. Vue-实例-歌手信息

思路：歌手卡片为一个组件，页面中引用该组件，使用固定数组保存歌手id

（1）src/router/index.js中添加路由

CopyimportVuefrom'vue'importVueRouterfrom"vue-router"importIndexfrom"../pages/index"importMusicNavfrom"../pages/MusicNav"importHotMusicfrom"../pages/MusicList/HotMusic"importNewMusicfrom"../pages/MusicList/NewMusic"importKingMusicfrom"../pages/MusicList/KingMusic"importSingerInfofrom"../pages/Singer/SingerInfo"Vue.use(VueRouter);

exportdefaultnewVueRouter({
    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

Copy<template><divclass="singerlist"><router-linkv-bind:to="{name: 'singer', params: {singerid: singerid}}"tag="div"class="card"><divclass="poster"><imgv-bind:src="singerInfo.avatar_middle"/></div><divclass="info">{{singerInfo.name}}</div></router-link></div></template><script>exportdefault {
    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><stylescoped>div.card {
        float: left;
        margin-left: 8px;
        margin-top: 8px;
    }
    div.cardimg {
        width: 110px;
        height: 110px;
    }
</style>

（3）新建页面src/pages/Singer/SingerInfo.vue

Copy<template><divclass="singerInfo">
        歌手歌曲列表
        <SingerMusic/></div></template><script>importSingerMusicfrom"../../components/SingerMusic"exportdefault {
    name: "singerInfo",
    data(){
        return {}
    },
    components:{
        SingerMusic
    }
}
</script><stylescoped></style>

（4）新建页面src/pages/Singer.vue

Copy<template><divclass="singer"><divclass=""><h2>热门歌单</h2><SingerListv-bind:key="index"v-for="(item, index) in singerList"v-bind:singerid="item"/></div></div></template><script>importSingerListfrom'../components/SingerList'exportdefault {
    name: "singer",
    data(){
        return {
            singerList: ['2517', '1094', '1052', '45561', '1098', '1202']
        }
    },
    components: {
        SingerList,
    }
}
</script><stylescoped></style>

（5）src/pages/index.vue中引入Singer.vue

Copy<template><divclass="container"><MusicNav/><Singer/></div></template><script>importMusicNavfrom'./MusicNav'importSingerfrom'./Singer'exportdefault {
    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

CopyimportVuefrom'vue'importVueRouterfrom"vue-router"importIndexfrom"../pages/index"importMusicNavfrom"../pages/MusicNav"importHotMusicfrom"../pages/MusicList/HotMusic"importNewMusicfrom"../pages/MusicList/NewMusic"importKingMusicfrom"../pages/MusicList/KingMusic"importSingerInfofrom"../pages/Singer/SingerInfo"importMusicPlayfrom"../pages/MusicPlay"Vue.use(VueRouter);

exportdefaultnewVueRouter({
    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

Copy<template><divclass="musicplay"><h2>{{songInfo.songinfo.title}}</h2><div><divclass="author">{{songInfo.songinfo.author}}</div><divclass="company">{{songInfo.songinfo.si_proxycompany}}</div><imgv-bind:src="songInfo.songinfo.pic_premium"/><audiov-bind:src="songInfo.bitrate.file_link"autoplaycontrols></audio></div></div></template><script>exportdefault {
    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><stylescoped>divimg {
        width: 350px;
        height: 350px;
        margin-left: 5px;
    }
    divaudio {
        margin-left: 30px;
    }
</style>

（3）修改src/components/MusicList.vue

Copy<template><divclass="musiclist"><divclass="panel"><ulclass="songlist"><router-linkv-bind:to="{name: 'musicplay', params: {songid: item.song_id}}"tag="li"class="song"v-bind:key="index"v-for="(item,index) in song_list"><divclass="poster"><imgv-bind:src="item.pic_small"/></div><divclass="info"><divclass="name">{{ item.title }}</div><divclass="author">{{ item.author }}</div></div></router-link></ul></div></div></template><script>exportdefault {
    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><stylescoped>ul.songlist{
        padding: 10px;
    }
    li.song {
        list-style: none;
    }
    li.songdiv.poster {
        clear: both;
        float: left;
        margin-right: 10px;
    }
    li.songimg {
        width: 40px;
        height: 40px;
    }
</style>>

（4）修改src/components/SingerMusic.vue

Copy<template><divclass="singermusic"><divclass="panel"><ulclass="songlist"><router-linkv-bind:to="{name: 'musicplay', params: {songid: item.song_id}}"tag="li"class="song"v-bind:key="index"v-for="(item,index) in song_list"><divclass="poster"><imgv-bind:src="item.pic_small"/></div><divclass="info"><divclass="name">{{ item.title }}</div><divclass="author">{{ item.author }}</div></div></router-link></ul></div></div></template><script>exportdefault {
    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><stylescoped>ul.songlist{
        padding: 10px;
    }
    li.song {
        list-style: none;
    }
    li.songdiv.poster {
        clear: both;
        float: left;
        margin-right: 10px;
    }
    li.songimg {
        width: 40px;
        height: 40px;
    }
</style>>

28. Vue-示例-歌曲播放与歌词

iconfont使用

1. 访问iconfont官网，登录并选择图标，在购物车中点击下载代码。

2. 解压下载代码，重命名文件夹为font，放到项目src/asserts目录中

3. 在MuisicPlay.vue 中引入

Copyimport"../assets/font/iconfont.css"

4. 在页面

如有不懂还要咨询下方小卡片，博主也希望和志同道合的测试人员一起学习进步

在适当的年龄，选择适当的岗位，尽量去发挥好自己的优势。

我的自动化测试开发之路，一路走来都离不每个阶段的计划，因为自己喜欢规划和总结，

测试开发视频教程、学习笔记领取传送门！！！