界面主页引入各个组件

<template>
  <div class="home">
    <top-nav></top-nav>
    <swiper-com></swiper-com>
    <icon-List></icon-List>
    <music-list></music-list>

  </div>
</template>

首先是topNav顶部导航栏组件
效果图：

其中使用$router.push给我的和搜索绑定了页面路由跳转

<template>
    <div class="topNav">
      <div class="topLeft">
        <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-31liebiao"></use>
        </svg>
      </div>
      <div class="topCenter">
        <span class="navBtn" @click="$router.push('/me')">我的</span>
        <span class="navBtn active">发现</span>
        <span class="navBtn">云村</span>
        <span class="navBtn">视频</span>
      </div>
      <div class="topRight">
        <svg class="icon search" aria-hidden="true" @click="$router.push('/searchview')">
        <use xlink:href="#icon-sousuo"></use>
        </svg>
      </div>
    </div>
</template>

样式：

.topNav{
    width: 7.5rem;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 0.2rem;
    .icon{
        width: 0.5rem;
        height: 0.5rem;
    }
    .search{
        width: 0.45rem;
        height: 0.45rem;
    }
    .topCenter{
        width: 4.5rem;
        display: flex;
        justify-content: space-around;
        .active{
            font-weight: 900;
        }
    }
}
</style>

接下来是轮播图的实现。

一般来说js实现轮播图的原理是设置定时器实现轮播，为了方便使用swiper插件

在script中指定预设图片

    data:function(){
        return{
        imgs:[
        {pic: require('../assets/img/swiper1.jpg')},
        {pic: require('../assets/img/swiper2.jpg')},
        {pic: require('../assets/img/swiper3.png')},
    ]}

实际运行时，轮播图需要从后台网易云音乐api获取。使用axios来进行异步请求。在api/index.js中

import axios from 'axios';

let baseUrl = 'http://music.cpengx.cn'
// let baseUrl = 'http://localhost:8080'
// const baseUrl = axios.create({
//     baseURL: 'http://localhost:8080',
//     timeout: 5000,
//     withCredentials:true
// })


// 获取轮播图的api,type:资源类型,对应以下类型,默认为 0 即PC
// 1: android;2: iphone;3: ipad
export function getBanner(type=0){
    return axios.get(`${baseUrl}/banner?type=${type}`)
}


// 获取推荐歌单,可选参数 : limit: 取出数量 , 默认为 10 
export function getMusicList(limit=10){
    return axios.get(`${baseUrl}/personalized?limit=${limit}`)
}
// 获取歌单的详情
export function getPlaylistDetail(id){
    return axios.get(`${baseUrl}/playlist/detail?id=${id}`)
}
// 获取歌词
export function getLyric(id){
    return axios.get(`${baseUrl}/lyric?id=${id}`)
}

// 搜索歌曲
export function searchMusic(keyword){
    return axios.get(`${baseUrl}/search?keywords=${keyword}`)
}

// 手机登录
export function phoneLogin(phone,password){
    console.log();
    return axios.get(`${baseUrl}/login/cellphone?phone=${phone}&password=${password}`)
}

// 获取用户的详情
export function userDetail(uid){
    return axios.get(`${baseUrl}/user/detail?uid=${uid}`)
}

export default {
    getBanner,getMusicList,getPlaylistDetail,getLyric,searchMusic,phoneLogin,
    userDetail
}

通过getBanner获取到网易云实时轮播图数据并赋值给imgs数组

  let res = await getBanner(1);
  this.imgs = res.data.banners;