Vue 기술 공유: NetEase Cloud API를 사용하여 MV 플레이어의 전역 검색 기능을 구현하는 방법

Vue 기술 공유: NetEase Cloud API를 사용하여 MV 플레이어의 전역 검색 기능을 구현하는 방법

현대 음악 시대에 MV(뮤직 비디오)의 중요성이 점점 더 주목받고 있습니다. 사용자로서 우리는 하나의 플랫폼에서 자신이 좋아하는 MV를 종합적으로 검색하고 재생할 수 있기를 바랍니다. 이 기사에서는 Vue 프레임워크와 NetEase Cloud API를 사용하여 간단한 MV 플레이어의 전역 검색 기능을 구현하는 방법을 소개합니다.

1. 준비
   우선 시작하기 전에 몇 가지 도구와 리소스를 준비해야 합니다. 먼저 Vue 프로젝트를 빠르게 구축하기 위한 도구인 Vue CLI를 설치해야 합니다. 다음 명령을 사용하여 전역적으로 설치할 수 있습니다:

npm install -g @vue/cli

그런 다음 새 Vue 프로젝트를 만들어야 합니다. 다음 명령을 사용하여 명령줄에서 생성할 수 있습니다.

vue create mv-player

생성이 완료된 후 프로젝트 디렉터리에 들어가 몇 가지 필요한 종속성을 설치합니다.

cd mv-player
npm install axios

프로젝트에는 MV 플레이어를 표시하기 위한 구성 요소도 필요합니다. . 널리 사용되는 Vue UI 프레임워크인 Element UI를 사용하여 인터페이스를 빠르게 구축할 수 있습니다. 요소 UI 설치:

vue add element

2. NetEase Cloud API의 개발자 계정 및 키 받기
   NetEase Cloud API를 사용하기 전에 개발자 계정을 신청하고 개발자 키를 받아야 합니다. NetEase Cloud 공식 웹사이트에 등록하고 신청하세요. 응용 프로그램이 완료되면 다음과 유사한 정보를 얻을 수 있습니다.

API地址：http://api.music.163.com
开发者账号：your_account@example.com
开发者密钥：your_developer_key

3. 전역 검색 구성 요소 만들기
   다음으로 사용자 입력을 받고 검색을 위해 NetEase Cloud API에 요청을 보내는 전역 검색 구성 요소를 만들어야 합니다. . src 디렉터리에 구성 요소 폴더를 만들고 그 안에 SearchBar.vue 파일을 만듭니다. 이 파일에서는 전역 검색 논리를 구현할 수 있습니다.

먼저 HTTP 요청을 보내기 위해 axios를 도입해야 합니다. 컴포넌트의 스크립트 섹션에 다음 코드를 추가합니다.

import axios from 'axios'

export default {
  name: 'SearchBar',
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      axios.get('http://api.music.163.com/search', {
        params: {
          keywords: this.keyword
        }
      })
      .then(response => {
        // 处理搜索结果
      })
      .catch(error => {
        console.error(error)
      })
    }
  }
}

위 코드에서는 사용자가 입력한 키워드를 저장하기 위해 데이터 속성을 정의했습니다. 검색 방법에서는 axios를 사용하여 NetEase Cloud API의 검색 인터페이스에 GET 요청을 보내고 키워드를 매개변수로 전달합니다. then 콜백에서는 API가 반환한 검색 결과를 처리할 수 있습니다.

다음으로 구성 요소 템플릿에 텍스트 입력 상자와 검색 버튼을 추가해야 합니다. 템플릿 섹션에 다음 코드를 추가합니다.

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键字" />
    <button @click="search">搜索</button>
  </div>
</template>

위 코드에서는 v-model 지시문을 사용하여 사용자가 입력한 키워드를 구성 요소의 data 속성과 바인딩합니다. 사용자가 검색 버튼을 클릭하면 검색 메서드가 호출됩니다.

마지막으로 구성 요소의 스타일에 몇 가지 기본 스타일을 추가합니다. Element UI에서 제공하는 스타일을 사용하여 구성 요소를 빠르게 미화할 수 있습니다. 스타일 섹션에 다음 코드를 추가합니다.

<style scoped>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-left: 10px;
  padding: 10px;
  background-color: #409EFF;
  color: #fff;
  border-radius: 4px;
}
</style>

이제 전역 검색 구성 요소 작성이 완료되었습니다.

4. App 컴포넌트에서 전역 검색 컴포넌트를 사용하세요
   다음으로 App 컴포넌트에서 전역 검색 컴포넌트를 사용하여 검색 결과를 표시해야 합니다. src 디렉터리에서 App.vue 파일을 엽니다. 먼저 전역 검색 구성 요소를 소개합니다.

import SearchBar from './components/SearchBar.vue'

그런 다음 구성 요소의 템플릿 부분에 다음 코드를 추가합니다.

<template>
  <div class="app">
    <SearchBar></SearchBar>
    <div v-for="mv in mvs" :key="mv.id">
      <img src="/static/imghwm/default1.png"  data-src="mv.cover"  class="lazy"  : alt="mv cover" />
      <span>{{ mv.name }}</span>
      <span>{{ mv.artist }}</span>
    </div>
  </div>
</template>

위 코드에서는 v-for 명령을 사용하여 mvs 배열을 탐색합니다. 검색 결과를 저장하는 데 사용됩니다. 각 검색 결과에는 MV의 표지, 이름, 아티스트 정보가 표시됩니다.

그런 다음 구성 요소의 스크립트 섹션에 다음 코드를 추가합니다.

export default {
  name: 'App',
  components: {
    SearchBar
  },
  data() {
    return {
      mvs: []
    }
  }
}

위 코드에서는 검색 결과를 저장하기 위한 데이터 속성 mvs를 정의합니다.

다음으로 전역 검색 컴포넌트의 검색 방법에서는 검색 결과를 처리하여 App 컴포넌트의 mvs 속성에 저장할 수 있습니다. 전역 검색 컴포넌트를 수정하는 코드는 다음과 같습니다.

import axios from 'axios'

export default {
  name: 'SearchBar',
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      axios.get('http://api.music.163.com/search', {
        params: {
          keywords: this.keyword
        }
      })
      .then(response => {
        this.$emit('search', response.data.result.mvs)
      })
      .catch(error => {
        console.error(error)
      })
    }
  }
}

위 코드에서는 this.$emit를 통해 검색 결과를 상위 컴포넌트에 전달합니다. App 구성 요소에서는 이 이벤트를 수신하고 검색 결과를 mvs 속성에 저장하는 메서드를 추가합니다. App 구성 요소의 코드를 다음과 같이 수정합니다.

export default {
  name: 'App',
  components: {
    SearchBar
  },
  data() {
    return {
      mvs: []
    }
  },
  methods: {
    handleSearchResult(mvs) {
      this.mvs = mvs
    }
  }
}

마지막으로 전역 검색 구성 요소의 템플릿에서 SearchBar 구성 요소에 대한 검색 이벤트 리스너를 추가하고 상위 구성 요소에서 해당 메서드를 호출합니다. 전역 검색 구성 요소의 코드를 다음과 같이 수정합니다.

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键字" />
    <button @click="search">搜索</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'SearchBar',
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      axios.get('http://api.music.163.com/search', {
        params: {
          keywords: this.keyword
        }
      })
      .then(response =&gt; {
        this.$emit('search', response.data.result.mvs)
      })
      .catch(error =&gt; {
        console.error(error)
      })
    }
  }
}
</script>

이제 MV 플레이어의 전역 검색 기능 구현이 완료되었습니다. 글로벌 검색 컴포넌트에 키워드를 입력하고 검색 버튼을 클릭하면 검색 결과가 표시됩니다.

요약하자면, 이 글에서는 Vue 프레임워크와 NetEase Cloud API를 사용하여 MV 플레이어의 전역 검색 기능을 구현하는 방법을 소개합니다. 전역 검색 구성 요소를 작성하면 쉽게 NetEase Cloud API에 검색 요청을 보내고 검색 결과를 표시할 수 있습니다. 이 글이 Vue 기술을 배우는 데 도움이 되기를 바랍니다.

위 내용은 Vue 기술 공유: NetEase Cloud API를 사용하여 MV 플레이어의 전역 검색 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!