使用Vue.js构建Web应用程序

const base = 'https://api.spotify.com/v1/search?q='

export const fetchByType = (query, type, offset = 0, limit = 10) => {
  return fetch(base + query + '&type=' + type + '&offset=' + offset + '&limit=' + limit)
    .then(res => {
      return res.json()
    })
}
<p class="indent">

import {mapActions, mapGetters, mapState} from 'vuex'
import actions from '../store/actionTypes'
export default {
  name: 'pager',
  computed: {
    ...mapState([
      'page'
    ]),
    ...mapGetters([
      'disableNextPage',
      'disablePreviousPage'
    ])
  },
  methods: {
    ...mapActions([
      actions.NEXT_PAGE,
      actions.PREVIOUS_PAGE
    ])
  },
  render (h) {
    return (
      <div class='pager'>
        <div class='btn-group right-spacing'>
          <button on-click={this.PREVIOUS_PAGE} disabled={this.disablePreviousPage}
            class='right-spacing'>
            <i class='fa fa-chevron-left' />
          </button>
          <span class='right-spacing'>{this.page}</span>
          <button on-click={this.NEXT_PAGE} disabled={this.disableNextPage}>
            <i class='fa fa-chevron-right' />
          </button>
        </div>
      </div>
    )
  }
}


<style scoped>
button[disabled] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.65;
}
.pager {
  background: #303030;
  padding: 0.25em 0;
  width: 100%;
  z-index: 1;
}
.right-spacing {
  margin-right: 0.25em;
}
</style>
<p class="indent">

import {mapActions, mapGetters, mapState} from 'vuex'
import actions from '../store/actionTypes'
export default {
  name: 'pager',
  computed: {
    ...mapState([
      'page'
    ]),
    ...mapGetters([
      'disableNextPage',
      'disablePreviousPage'
    ])
  },
  methods: {
    ...mapActions([
      actions.NEXT_PAGE,
      actions.PREVIOUS_PAGE
    ])
  },
  render (h) {
    return (
      <div class='pager'>
        <div class='btn-group right-spacing'>
          <button on-click={this.PREVIOUS_PAGE} disabled={this.disablePreviousPage}
            class='right-spacing'>
            <i class='fa fa-chevron-left' />
          </button>
          <span class='right-spacing'>{this.page}</span>
          <button on-click={this.NEXT_PAGE} disabled={this.disableNextPage}>
            <i class='fa fa-chevron-right' />
          </button>
        </div>
      </div>
    )
  }
}


<style scoped>
button[disabled] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.65;
}
.pager {
  background: #303030;
  padding: 0.25em 0;
  width: 100%;
  z-index: 1;
}
.right-spacing {
  margin-right: 0.25em;
}
</style>
<p class="indent">

import Vue from 'vue'
import VueRouter from 'vue-router'
import SearchResults from '../components/SearchResults'
import ResultDetail from '../components/ResultDetail'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'hash',
  base: __dirname,
  routes: [
    {
      path: '/:type/detail/:id',
      component: ResultDetail
    },
    {
      path: '/:type/:query?',
      component: SearchResults
    },
    {
      path: '*',
      redirect: '/Artist/'
    }
  ]
})

<p class="indent">

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'

/* eslint-disable no-new */
new Vue({
  el: 'app',
  router,
  render: h => h(App)
})
view raw
<p class="indent">

<template lang="pug">
  divapp
    search-box
    router-view
</template>


import SearchBox from './components/SearchBox'
export default {
  name: 'app',
  components: {
    SearchBox
  }
}


<style>
body {
  padding-top: 4em;
  padding-bottom: 2em;
  scroll-behavior: smooth;
}
</style>

<p class="indent">

li(v-for='type in searchTypes')
  router-link(:to="'/' + type + '/' + query") {{ type }}
<p class="indent">

searchByType () {
    this.$router.push('/' + this.activeType + '/' + encodeURI(this.query) || '')
  }
<p class="indent">

<template lang="pug">
  div.container
    ul.list-group
      li.list-group-item(v-for='result in searchResults' @click='goToDetail(result)')
        div.media
          div.media-left
            img.media-object(v-if='result.imageUrl', : height='64px' width='64px')
          div.media-body
            h4.media-heading {{ result.name }}
            p {{ resultInfo(result) }}
    button.btn.btn-default.center-block(v-if='hasMoreResults' @click='loadMoreResults()')
      span Show more results
</template>


import {fetchByType} from '../api'
const UP = 'UP'

// TODO: Add busy status and indicator.
export default {
  name: 'search-results',
  created () {
    this.routeChanged()
  },
  data () {
    return {
      hasMoreResults: false,
      searchResults: [],
      type: null,
      query: null,
      offset: 0
    }
  },
  methods: {
    routeChanged () {
      // reset query params
      this.type = this.$route.params.type
      this.query = this.$route.params.query
      this.offset = 0
      if (!this.query) {
        this.searchResults = []
        return
      }
      fetchByType(this.query, this.type)
        .then(res => {
          this.hasMoreResults = res.length >= 10
          this.searchResults = res
          this.handleScroll(UP)
        })
    },
    loadMoreResults () {
      this.offset += 10
      fetchByType(this.query, this.type, this.offset)
        .then(res => {
          this.hasMoreResults = res.length >= 10
          this.searchResults = [
            ...this.searchResults,
            ...res
          ]
        })
    },
    goToDetail (result) {
      switch (this.type) {
        case 'Artist':
        case 'Album':
          this.$router.push('/' + this.type + '/detail/' + result.id)
          break
        case 'Track':
          this.$router.push('/' + this.type + '/detail/' + result.album.id)
          break
        default:
          return
      }
    },
    handleScroll (direction) {
      this.$nextTick(() => {
        switch (direction) {
          case UP:
            window.scrollTo(0, 0)
            break
          default:
            window.scrollTo(0, document.body.scrollHeight)
        }
      })
    },
    resultInfo (result) {
      switch (this.type) {
        case 'Artist':
          return result.genres ? result.genres.join(', ') : null
        case 'Album':
          return result.artists ? result.artists[0].name : null
        case 'Track':
          return result.album && result.artists
            ? result.album.name + ' by ' + result.artists[0].name
            : null
        default: null
      }
    }
  },
  watch: {
    '$route': 'routeChanged'
  }
}


<style scoped>
li {
  cursor: pointer;
}
</style>

<p class="indent">