Vue项目——手把手教你做出音乐播放器

进入VueMusic—安装所需的东西 cnpm install
之后 启动这个项目 npm start


App.vue 设置默认样式

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-family:Arial, "微软雅黑";}
img{border:none;max-width:100%;vertical-align:middle;}
body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style:none;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%;}
input,textarea{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;}
table{border-collapse:collapse;}
input,select,textarea{outline:none;border:none;background:none;}
a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());}
a:link,a:active{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{color:#f00;text-decoration:none;}
a{text-decoration:none;-webkit-touch-callout:none;}
em,i{font-style:normal;}
li,ol{list-style:none;}
html{font-size:16px;}
.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
.fl{float:left;}
.fr{float:right;}
body{ margin:0 auto;max-width:640px; min-width:320px;color:#555;background:#f1f1f1;height:100%;}
a{color: #222;text-decoration: none}
.router-link-active{color: red !important;}

</style>

index.js里引入各路由和配置各路由

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Home from "@/pages/home"
import Artists from "@/pages/artists"
import ListCate from "@/pages/listcate"
import Ucenter from "@/pages/ucenter"
import Search from "@/pages/search"
import HotList from "@/pages/musiclist/hot_list"
import KingList from "@/pages/musiclist/king_list"
import NewsList from "@/pages/musiclist/news_list"
import MoreList from "@/pages/morelist"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      redirect:"/home",
      component: Index,
      children:[
        {
          path:"home",
          component:Home,
          redirect:"/home/hot",
          children:[
            {
              path:"hot",
              component:HotList
            },
            {
              path:"king",
              component:KingList
            },
            {
              path:"news",
              component:NewsList
            }
          ]
        },
        {
          path:"artists",
          component:Artists
        },
        {
          path:"listcate",
          component:ListCate
        },
        {
          path:"ucenter",
          component:Ucenter
        },
        {
          path:"search",
          component:Search
        },
        {
          path:"more",
          name:"MoreList",
          component:MoreList
        }
      ]
    }
  ]
})

index.vue设置点击事件router-link to，并设置样式

<template lang="html">
  <div class="index">
    <ul>
      <li>
         <router-link to="/home">
           <img src="../assets/logo-ea5.png" alt="">
         </router-link>
      </li>
      <li>
        <router-link to="/artists">
          歌手
        </router-link>
      </li>
      <li>
        <router-link to="/listcate">
          榜单
        </router-link>
      </li>
      <li>
        <router-link to="/ucenter">
          我的
        </router-link>
      </li>
      <li>
        <router-link to="/search">
          搜索
        </router-link>
      </li>
    </ul>
    <router-view />
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>

.index img{
  width: 26px;
  height: 26px;
}

.index ul{
  display: flex;
  height: 50px;
  line-height: 50px;
  background: #f9f9f9;
}

.index ul li {
  flex: 1;
  text-align: center;
}

.index ul li a{
  font-size: 16px;
  color: #999;
}

</style>

去组件中components创建一个新的组件–今日推荐

在home.vue里引入组件

import TodayRecommend from "../components/Today_Recommend"
import NewsMusic from "../components/News_Music"
import SwiperBanner from "../components/Swiper_Banner"
import MusicListNav from "./musiclist/music_listnav"

百度音乐api接口

解决跨域问题
config–index.js

 proxyTable: {
      "/baidu_music_api": {
            target: "http://tingapi.ting.baidu.com",
            changeOrigin: true,
            pathRewrite: {
                '^/baidu_music_api': ''
            }
       }
    },

在主入口文件src–main.js需要加上：

Vue.prototype.HOST = "/baidu_music_api"

安装axios
cnpm install --save axios

npm start 重新启动

获取网络请求数据

Today_Recommend.vue

<template lang="html">
  <div class="mod-albums">
    <div class="hd log url">
        <h2>{{title}}</h2>
        <router-link :to="{ name:'MoreList',params:{musictype:this.type,title:title}}" tag="div">
          更多
        </router-link>
    </div>
    <div class="container">
        <div class="gallery">
            <div class="scroller">
                <div class="card url" v-for="(item,index) in todayRecommend" :key="index">
                    <div class="album">
                        <img :src="item.pic_big" :alt="item.title">
                        <div class="name">{{ item.title }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

完成新歌速递，和今日推荐差不多，稍作修改

<template lang="html">
  <div class="mod-albums">
    <div class="hd log url">
        <h2>新歌速递</h2>
        <div>
          更多
        </div>
    </div>
    <div class="container">
        <div class="gallery">
            <div class="scroller">
                <div class="card url" v-for="(item,index) in newsMusic" :key="index">
                    <div class="album">
                        <img :src="item.pic_big" :alt="item.title">
                        <div class="name">{{ item.title }}</div>
                        <div class="author">{{ item.artist_name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"newsMusic",
  data(){
    return{
      newsMusic:[]
    }
  },
  mounted(){
    var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=3&offset=0";
    this.$axios.get(url)
    .then(res => {
      this.newsMusic = res.data.song_list
    })
    .catch(error => {
      console.log(error);
    })
  }
}
</script>

<style scoped>

.mod-albums {
    background-color: #fff;
    padding: 10px 17px;
    margin-top: 10px;
}

.hd {
    display: flex;
    margin: 14px 0 18px 0;
}

.hd h2 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0;
    padding: 0;
    font-size: 20px;
}

.hd div {
    width: 64px;
    font-size: 12px;
    text-align: right;
}

.mod-albums .gallery {
    overflow: hidden;
    margin: 0 -5px;
}

 .mod-albums .gallery .card {
    width: 33.3%;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px 10px;
}

.mod-albums .gallery .card .album {
  position: relative;
}

.mod-albums .gallery .card img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
}

.mod-albums .gallery .card .name {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
    line-height: 14px;
    max-height: 28px;
    margin-bottom: 2px;
}

.mod-albums .gallery .card .author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999;
    font-size: 12px;
    line-height: 12px;
}


</style>

轮播图的数据，接口中没有

安装轮播图 cnpm install --save vue-awesome-swiper

创建一个新组件：Swiper_Banner.vue

使用局部引入

<template lang="html">
  <div class="banner">
    <swiper :options="swiperOption">
      <swiper-slide>
        <img src="../assets/img/b1.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/img/b2.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/img/b3.jpg" alt="">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  data(){
    return{
      swiperOption:{
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay:true
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style scoped>

.banner{
  padding: 10px;
}

</style>

轮播图官方
查询使用方法
api文档–分页器

在home.vue引入组件

音乐榜单（多级路由的嵌套，公共组件的实现和传递参数）
创建音乐列表文件夹musiclist，存放3个榜单页面
在music_listnav.vue中写三个组件的导航
在路由index.js引入这三个页面的路由
并重定向 热歌榜，默认加载第一个

在home.vue写上router-view

创建公共组件Music_List.vue

mounted做网络请求

keep-alive缓存

更多 数据适配
更多点击后是一个页面，所以在新建一个页面
在index.js引入路由