Home About Me

Building a Vue Music Search, Preview, and Download Feature

2026-08-07

I had wanted for a while to rebuild the basic features of a music site with Vue. Most of the projects I work on now use a front-end/back-end separation model. In day-to-day development, I can usually focus on the back-end logic and return the required data to the front-end team, but that is not a good reason to ignore these “new” MVVM frameworks entirely.

So over the weekend, I spent some time getting familiar with the Vue workflow and tried putting together a small music search feature. The result supports searching, preview playback, and downloading. Some of the issues encountered along the way were only noted directly in the code comments, so this is more of a record of the implementation process and first impressions than a complete tutorial.

Tools used

  • vue-cli
  • mint-ui
  • vue-aplayer

Main implementation flow

The first step was to scaffold the project quickly with vue-cli:

  vue init webpack Vue-Project
  ...

Then the required dependencies were added:

  npm install mint-ui -S
  npm install vue-aplayer --save
  ...

After that came the interaction with the back end. The search request passes in the keyword, page size, page number, and platform, then updates the result count, list data, and pagination-related values after the response returns. A loading indicator is also displayed while the request is in progress, and page scrolling is temporarily disabled during loading:

  this.$http.get('/search-song', {
        params: {keyword: keywords, pagesize: 20, page: '1', platform: 'WebFilter'},
        before: function () {
          // APILIST.stopBodyScroll(true);
          $(document).ready(function () {
            $(document.body).css({
              "overflow-y": "hidden"
            });
          });

          Indicator.open({
            text: '加载中...',
            spinnerType: 'fading-circle'
          });
        }
      }).then((response) => {
        this.total = '共有' + response.data.data.total + '条结果';
        this.total_count = response.data.data.total;
        this.list = response.data.data.lists;
        this.pageSize = response.data.data.pagesize;
        this.page = response.data.data.page;
        Indicator.close();
        $(document).ready(function () {
          $(document.body).css({
            "overflow-y": "auto"
          });
        });
      }, (response) => {
        // 响应错误回调
      });

Finally, the project can be packaged for release with:

  npm run build

Notes on the API

The search data comes from Kugou’s official source. In other words, the results returned by this feature should match what appears when searching in the Kugou client. The interface was found online; there is not much more to say about where it originally came from.

Notes on downloading

The download function is implemented with the HTML5 download attribute.

A few thoughts after trying it

This small feature was mainly built to get more comfortable with Vue’s interaction model and some commonly used methods. The function itself is basically complete, but this is still only an initial step. JavaScript has a lot of depth, and there is still plenty left to explore slowly.

The implementation is intended only for learning and technical exchange, with no commercial purpose. If there are any copyright concerns, they should be handled promptly.

Related Posts