Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + vue-resource

Preview







.

Live Demo

Features

  • Vue + vue-router + vuex + vue-resource working together
  • Vuex divide store into modules
  • Modern JavaScript syntax with ES6
  • vue-cli webpack template
  • Single-file Vue Components
  • API request seperated
  • Real remote API and some mock data
  • eslint linter integration
  • Hot-reload in development
  • Css with Sass
  • No third party CSS framework
  • Complex and different style view logic
  • Infinite loading list
  • Complete search logic
  • Custom components like List, Rating, Tags …
  • Authentication with JSON Web Tokens developing
  • Complete login logic developing ……

Libraries

API

  • Basic URI : https://api.douban.com/V2/
  • Online activities
  • Activities list : /event/list? loc=108288&count=&start=
  • Single activitie info : /event/id
  • Movie
  • In theaters : /movie/in_theaters? count=
  • Coming soon : /movie/coming_soon? count=
  • Top 250 : /movie/top250? count=
  • Single movie info : /movie/subject/id
  • Book
  • Search some books : /book/search? q=&count=
  • Single book info : /book/id
  • Search
  • Search books : /book/search? q=
  • Search movie : /movie/search? q=
  • Search music : /music/search? q=
  • Login
  • In development

For detailed explanation, checkout the douban api

File Structure

. ├ ─ ─ build │ ├ ─ ─ build. Js │ ├ ─ ─ check - versions. Js │ ├ ─ ─ dev - client. Js │ ├ ─ ─ dev - server. Js │ ├ ─ ─ utils. Js │ ├ ─ ─ Vue - loader. Conf. Js │ ├ ─ ─ webpack. Base. Conf., js │ ├ ─ ─ webpack. Dev. Conf., js │ └ ─ ─ webpack. Prod. Conf., js ├ ─ ─ the config │ ├ ─ ─ Dev. Env. Js │ ├ ─ ─ index. The js │ └ ─ ─ the prod. The env. Js ├ ─ ─ index. The HTML ├ ─ ─ LICENSE ├ ─ ─ package. The json ├ ─ ─ the README. Md ├ ─ ─ the SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ assets │ │ ├ ─ ─ book_zw. JPG │ │ ├ ─ ─ douban - App - logo. PNG │ │ └ ─ ─ promotion_bg. JPG │ ├ ─ ─ components │ │ ├ ─ ─ Banner. Vue │ │ ├ ─ ─ Card. The vue │ │ ├ ─ ─ DownloadApp. Vue │ │ ├ ─ ─ Group. The vue │ │ ├ ─ ─ HeaderBar. Vue │ │ ├ ─ ─ the List. The vue │ │ ├ ─ ─ Rating. Vue │ │ ├ ─ ─ Scroller. Vue │ │ ├ ─ ─ SubjectMark. Vue │ │ ├ ─ ─ SubNav. Vue │ │ ├ ─ ─ Tags. The vue │ │ └ ─ ─ Types. The vue │ ├ ─ ─ Main. Js │ ├ ─ ─ the router │ │ └ ─ ─ index. The js │ ├ ─ ─ store │ │ ├ ─ ─ index. The js │ │ └ ─ ─ modules │ │ ├ ─ ─ activities. Js │ │ ├ ─ ─ book. Js │ │ ├ ─ ─ group. Js │ │ ├ ─ ─ movie. Js │ │ ├ ─ ─ search. Js │ │ └ ─ ─ subject. Js │ └ ─ ─ views │ ├ ─ ─ BookView. Vue │ ├ ─ ─ Detailview.vue │ ├─ GroupView.vue │ ├─ HomeView.vue │ ├─ MovieView.vue │ ├─ SearchView.vue │ ├─ StatusView. Vue │ ├ ─ ─ SubjectView. Vue │ └ ─ ─ TalionView. Vue └ ─ ─ the static └ ─ ─ logo. The PNGCopy the code