Framework7+Vue.js Spotify播放器 - 实

参考：Framework7+Vue.js Spotify播放器 - 实例详解（1）
回顾一下：

1. 用Template模板初始化
2. 添加 Font Awesome Icon 图标库
3. Framework7 View和Page概念
4. 更新main视图
5. 自定义样式文件CSS
6. 初始化App应用，关联slider和显示的数值

7. 调用Spotify API，处理返回数据

App的主界面已经写好，下面开始处理数据。
Spotify是国外流行的一个歌曲搜索平台，提供API访问。

• 给Button添加一个@click方法，以ajax访问API，然后处理返回数据
• 给搜索框v-model绑定搜索条件
• 通过window.f7.alert，轻松显示提示框（太方便了，就跟原生js alert('abc');一样，一行就实现了！）
• 通过window.Dom7.ajax，轻松实现Ajax访问 -- 开始体会到F7的强大了吧？！
• TODO: ajax访问时，显示旋转的等待图案，你来试一试。（ref: http://framework7.io/docs/modal.html#preloader）

# \spotifyApp\src\main.vue
<template>
  。。。
  <f7-input type="text" placeholder="Search for..." v-model="term" />
  。。。
  <f7-button id="btnSearch" class="button button-big button-fill color-green" @click="onSubmit">Submit</f7-button>
  。。。
</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      sliderVal: 20,
      term: '',
    }
  },
  mounted() {
    window.Dom7(document).on('deviceready', () => {
      console.log("Device is ready!");
    });
  },
  methods: {
    onSubmit() {
      if (this.term.length == 0) {
        window.f7.alert("请输入搜索内容");
      } else {
        var mediaType = "track";
        var url = "https://api.spotify.com/v1/search?q=" + this.term + "&type=" + mediaType + "&limit=" + this.sliderVal;
        window.Dom7.ajax({
          dataType: 'json',
          url: url,
          success: function(resp) {
            window.f7.alert("Number of results " + resp.tracks.items.length);
          },
          error: function(xhr) {
            console.log("Error on ajax call " + xhr);
          }
        });
      }
    }
  }
}
</script>

保存，刷新一下Chrome浏览器，点击“Submit”:

Paste_Image.png

输入一个关键字，再点击“Submit”:

Paste_Image.png

OK，数据顺利取回了，下面，我们创建一个新的Page，来显示返回的数据

8. 新的List Page（搜索结果）

创建新的List.vue文件，用v-for优雅地展示搜索结果数据。

• 子页面里，f7-navbar是在f7-page内部！保证了整体navbar-through的效果
• 使用store.js，在page之间传送数据（大型应用建议用vuex）
• f7-searchbar轻松创建搜索框，对f7-list.searchbar-found里的数据，能够自动实现搜索功能
• f7-list-item.swipeout对于每一条结果，实现左滑、右滑（功能后面实现）
• v-for 请添加 :key="item.id"，不然vue会告警
• Tips: Chrome浏览器模拟手机访问时，有时页面不能刷新，需要关掉Chrome重开。建议Chrome浏览器保持以网页模式访问

# \spotifyApp\src\assets\vue\List.vue
<template>
  <f7-page name="list" id="list">
    <f7-navbar>
      <f7-nav-left back-link="Back" sliding></f7-nav-left>
      <f7-nav-center sliding>Results</f7-nav-center>
      <f7-nav-right>
        <f7-link icon="icon-bars" open-panel=""></f7-link>
      </f7-nav-right>
    </f7-navbar>
      <!-- Search bar -->
      <f7-searchbar cancel-link="Cancel" search-list="#mediaList" placeholder="Search in items" :clear-button="true">
      </f7-searchbar>
      <!-- Will be visible if there is no any results found, defined by "searchbar-not-found" class -->
      <f7-list class="searchbar-not-found">
        <f7-list-item title="Nothing found"></f7-list-item>
      </f7-list>
      <!-- Search-through list -->
      <f7-list class="searchbar-found" media-list id="mediaList">
        <f7-list-item swipeout v-for="(item, index) in searchTracks" :key="item.id" link="#" :media="'![]( + item.album.images[2].url +)'" :title="item.name" :subtitle="item.artists[0].name" :text="item.album.name">
          <f7-swipeout-actions right>
            <f7-swipeout-button>
              <a class="bg-orange favorite" :data-item="index"><i class="icon fa fa-star fa-2x"></i></a>
              <a href="#" class="bg-blue share" :data-item="index"><i class="icon fa fa-share fa-2x"></i></a>
            </f7-swipeout-button>
          </f7-swipeout-actions>
          <f7-swipeout-actions left>
            <f7-swipeout-button>
              <a href="#" class="bg-green preview" :data-item="index"><i class="icon fa fa-play fa-2x"></i></a>
            </f7-swipeout-button>
          </f7-swipeout-actions>
        </f7-list-item>
      </f7-list>
  </f7-page>
</template>
<script>
import store from '../../store.js'
export default {
  name: 'list',
  data() {
    return {
      searchTracks: [],
    }
  },
  mounted() {
    window.Dom7(document).on('deviceready', () => {
      console.log("List Page is ready!");
      this.searchTracks = store.searchTracks;
    });
  }
}
</script>

数据中转文件store.js，保存搜索结果：

# \spotifyApp\src\store.js
const store = {
    searchTracks: [],
};
export default store;

把List.vue加入路由routes.js:

# \spotifyApp\src\routes.js
export default [
  {
    path: '/list/',
    component: require('./assets/vue/List.vue')
  }
]

主页面main.vue，点击Submit后

• 先把返回数据存入store: store.searchTracks = resp.tracks.items;
• 通过F7路由，加载List.vue。路由跳转： window.f7.mainView.router.load()

# \spotifyApp\src\main.vue
  methods: {
    onSubmit() {
      if (this.term.length == 0) {
        window.f7.alert("请输入搜索内容");
      } else {
        var mediaType = "track";
        var url = "https://api.spotify.com/v1/search?q=" + this.term + "&type=" + mediaType + "&limit=" + this.sliderVal;;
        window.Dom7.ajax({
          dataType: 'json',
          url: url,
          success: function(resp) {
            // window.f7.alert("Number of results " + resp.tracks.items.length);
            console.log(resp.tracks.items);
            store.searchTracks = resp.tracks.items;
            window.f7.mainView.router.load({
              url: '/list/',
              context: resp.tracks.items
         });
          },
          error: function(xhr) {
            console.log("Error on ajax call " + xhr);
          }
        });
      }
    }

OK，数据展示页面好了，你应该能看到如下搜索结果图：

Paste_Image.png

而且，不用写一行js代码，你的搜索框就已经工作了：

Paste_Image.png

9. media页面（歌曲详情）

当我们点击搜索结果里某一首歌曲，需要打开歌曲详情页面，并且能够播放

--> 请看详解（3）