Framework7+Vue.js Spotify播放器 - 实例详解（2）

参考：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

保存，刷新一下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

数据中转文件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）