一直想尝试着用vue来将 音乐站 的功能实现一遍，因为目前工作开发的项目全部都是前后端分离的模式了，虽然现在只需要安心的把我后台的逻辑实现、数据返回给前端的同事就OK了，但是也不能因为这样就可以不用了解这种"新的" "mvvm框架"呀。终于在上个周末花了一点时间来了解一下vue的工作流，谈谈使用中的一些感受吧。
　　这是上个礼拜完成的事了，部分坑好像也只是在代码中及时注解了一下。。。

使用到的工具：vue-cli、mint-ui、vue-aplayer

线上演示地址
GitHub地址

主要的流程

• 使用vue-cli快速构建我们的工程

  vue init webpack Vue-Project
  ...

• 引入我们我们需要的依赖包

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

• 与后台的交互逻辑实现

  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) => {
        // 响应错误回调
      });

• 打包发布

  npm run build

结论

　　此功能的实现，只是为了让自己熟悉一下vue的交互与一些常用方法的使用，这也仅仅是了解一下而已，功能虽然算是实现了，但博大精深的JS还需要慢慢探究。。。
　　

API的调用说明

　　使用的是酷狗官方源，也就是说你在酷狗客户端搜索到的结果与本功能实现的搜索内容完全一致！别问我是怎么知道的，只能说是在网上找到的，怎么找到的我也是想不起来了。

下载说明

　　使用的是HTML5的 download 属性。

免责说明

　　此功能的实现目的只用于学习交流，不存在任何盈利性质。如无意侵犯了贵司版权请给he.zhizheng@qq.com邮箱地址来信，我会及时处理。

-- END