实现网易云项目播放上一首，下一首切换功能

1.先找上一曲和下一曲的按钮，给他添加单击事件

1,-1当前接收到的信息

  <svg class="icon" aria-hidden="true" @click="goplay(-1)">
                <use xlink:href="#icon-shangyishoushangyige"></use>
            </svg>

 

2.在methos里有这个goplay,接收的参数

methods:{
            goplay(num) {
                console.log(num);
            }

 

3.获取当前歌曲的下标和当前歌曲的播放列表

引入mapState

 import {mapState} from 'vuex'

 

4.在computed接收状态管理库(从srore中接收状态管理数据 playlist播放歌曲列表 与获取当前歌曲的下标)

computed:{
            ...mapState(['playlist','playCurrentIndex'])
        },

 

5.切换之后要播放的歌曲下标加边界判断,commit触发，把我们算好的下标传进去

 

 methods:{
            goplay(num) {
                let index=this.playCurrentIndex+num;
                console.log(index);
                if(index<0){
                    index=this.playlist.length-1;
                }else if(index==this.playlist.length){
                    index=0
                }
                this.$store.commit('setPlayIndex',index)
​
            }
        }

 

二.实现当用户搜索一个内容时，显示搜索出的内容

1.在view中新建Search.vue,在router/index下创建路由

{
    path: '/search',
    name: 'search',
    component: () => import(/* webpackChunkName: "about" */ '../views/Search.vue')
  },

2.在 topNav.vue 中给搜索图标添加点击连接,跳转到Search搜索页面，搜索按钮实现点击事件

        <div class="topRight" @click="$router.push('/search')">

3.创建小组件（搜索页面内容头部）

4.在Scaech引入组件searchTop并注册使用

实现点击回车时搜索

1、封装搜索歌曲的api /search?keywords=${keywords}

//搜索
export function searchMusic(keywords) {
    return axios(`${baseUrl}/search?keywords=${keywords}`)
}

 

2、给input添加键盘按下事件 @keydown.enter="abc"

<input type="text" v-model="searchKeyword" placeholder="hhh" @keydown.enter="searchSong">

 

3、编写abc函数，发送ajax请求，传递参数searchKeyword

methods: {
    async searchSong() {
        //回车绑定事件
        console.log('用户要搜索' + this.searchKeyword)
        let res=await searchMusic(this.searchKeyword)
        console.log(res)
        this.searchSongs=res.data.result.songs
    }
},

引入

import {searchMusic} from "@/api/index.js";

后台接收并搜索:

data 中设置接收搜索到的歌曲列表 searchSongs

data() {
    return {
        searchKeyword: "", //用户输入需要搜索的内容
        searchSongs: []    //接收搜索到的歌曲列表
    }
}

将接口内容放到搜索到的歌曲列表 searchSongs 中

async mounted() {
    let res = await searchMusic();
    //console.log(res)
    this.searchSongs = res.data.result.songs
    //console.log(res.data.result.songs)
}

template中配置 循环

<div class="list" v-for="(item,i) in searchSongs" :key="i">
    <div class="playItem">
        <div class="left">
            <div class="index">{{i+1}}</div>
            <div class="content">
                <div class="title">{{item.name}}</div>
                <div class="anther">
                    <div class="num">{{item.album.name}}</div>
                </div>
            </div>
        </div>