실전 - 간단한 음악 검색 사이트 (3)

실전 - 간단한 음악 검색 사이트 (start) 실전 - 간단한 음악 검색 사이트 (하나) 실전 - 간단한 음악 검색 사이트 (둘)

1. songHeader.vue 코드

액세서리는 아무런 의미가 없고,

    export default {
        name: 'songHeader',
        data() {
            return {
            }
        }
    }

2. searchContent.vue 코드

주요 코드, 좀 길다

    export default {
        props: ['slist'],
        name: 'searchContent',
        data(){
            return {
                songNum: 0, //     
                pageNum: [], //        
                pageSize: 10, //      
                totalPage: 1, //   
                curPage: 1, //    
                showPageList: 0, //       
                songUrl: '',
                idList: [],
            }
        },
        watch: {
            slist(newData){
                this.pageNum = []; //            
                this.songNum = newData.length;
                this.totalPage = Math.ceil(this.songNum / this.pageSize);
                this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
                this.changeList();
                this.getShowPageList(newData, this.curPage)
            },
            curPage(newPage){
                this.getShowPageList(this.slist, newPage)
            }

        },
        methods: {
            changeList(){
                for (var i = 1; i <= this.totalPage; i++) {
                    this.pageNum.push(i)
                }
            },

            getShowPageList(songlist, index){   //                      
                let begin = (index - 1) * this.pageSize;
                let end = index * this.pageSize;
                this.showPageList = songlist.slice(begin, end);
            },

            prevPage(e){
                if(this.curPage != 1){
                    this.curPage --;
                }
            },

            nextPage(e){
                if(this.curPage != this.totalPage){
                    this.curPage ++;
                }
                console.info(this.curPage);
            },

            play_url(e){
                console.info(e.target.attributes.songID.nodeValue);
                var id = e.target.attributes.songID.nodeValue
                this.songUrl = 'https://v1.itooi.cn/netease/url?id=' + id + '&quality=flac'
            },
        },
    }

3. 코드 설명

(1) 노래 데이터 로드

props: ['slist'] 여기peops는 아버지 구성 요소에서 노래 데이터를 받아서 v-for로 순환 가져올 수 있는 클래스 속성을 정의했다

class="[index%2==0?'이벤트:'''']"css에 이벤트의 양식을 썼는데 짝수 줄 색깔과 홀수 줄 색깔이 다르고 화면이 보기 좋다

(2) 페이지 나누기 기능

여기에 반나절이 걸려서 해결했습니다. 사고방식도 어렵지 않았습니다. 노래 총수songNum, 한 페이지에 페이지 Size: 10개의 데이터를 정의했습니다. 그러면 총 페이지 수는 totalPage=songNum/페이지 Size

getshowPageList 방법으로 현재 보여야 할 데이터를 얻을 수 있으며 원리도 어렵지 않습니다. 슬라이스 함수를 사용하여 그룹을 슬라이스하면 됩니다

prevPage 방법은 클릭할 때 이전 페이지의 데이터를 보여줍니다

nextPage 방법은 클릭할 때 다음 페이지를 보여줍니다

changeList 방법 페이지 번호를 그룹으로 변환하여 v-for로 가져올 수 있음

페이지를 나누는 사고방식은 어렵지 않은 것 같지만 제가 아주 오랜 시간을 들여서 했습니다. 데이터를 불러올 때 페이지를 나누어야 하기 때문입니다. 물론 크리에이티드나 mounted 방법에서 위의 페이지를 나누는 함수(dom 조작과 관련하여 mounted 방법에 넣는 것이 가장 좋다)를 호출했습니다. 처음에 검색을 눌렀을 때 페이지를 나누는 것이 확실했지만 한 번 더 클릭하면 실행되지 않았고 데이터도 새로 고침되지 않았습니다.데이터는 아버지 구성 요소에서 전송된 것으로 검색 이벤트를 클릭해도 본 구성 요소에서 이루어지지 않기 때문에 노래 데이터가 바뀔 때 현재 구성 요소는 알지 못한다. 이 문제를 해결하기 위해watch 방법으로 데이터의 변동을 감시하고 두 개의'hidden'속성의 input 탭 v-model로 노래 목록 데이터slist를 연결한다. 이 데이터가 변동할 때 모든 페이지와 관련된 방법도 한 번 실행한다.서브어셈블리의 데이터도 아버지 어셈블리의 데이터와 함께 새로 고쳐집니다.

(3) 재생

html5 원생 오디오 라벨을 직접 인용하고 controls 속성 디스플레이 재생 컨트롤을 설정했으며 autoplay 속성을 설정하여 준비 상태에서 재생할 수 있도록 했다. 실현 방법은 src 속성을 직접 연결하고 재생 단추를 눌렀을 때 노래 링크를 설정하는 것이다.