iced-tea / douban

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

Douban

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
• Complete register login logic ......

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Libraries

• Vuex : Centralized State Management for Vue.js
• Vue-router : The official router for Vue.js
• vue-resource : The HTTP client for Vue.js
• vue-infinite-loading : An infinite scroll plugin for Vue.js 1.0 & Vue.js 2.0.
• normalize.css : A collection of HTML element and attribute style-normalizations

API

Douban Api V2

• 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=

Mock Douban Backend

• User Basic URI : https://douban.herokuapp.com/user/
• Register
  • Path: /user
  • method: POST
• Login
  • Path: /user/:id
  • method: GET

For detailed explanation, checkout the Douban Api V2 and Douban Backend

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
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── avatar.png
│   │   ├── book_zw.jpg
│   │   ├── camera.svg
│   │   ├── douban-app-logo.png
│   │   ├── pen.svg
│   │   ├── promotion_bg.jpg
│   │   └── user_normal.jpg
│   ├── components
│   │   ├── Banner.vue
│   │   ├── Card.vue
│   │   ├── DownloadApp.vue
│   │   ├── Group.vue
│   │   ├── HeaderBar.vue
│   │   ├── List.vue
│   │   ├── Rating.vue
│   │   ├── Scroller.vue
│   │   ├── Marking.vue
│   │   ├── SubNav.vue
│   │   ├── Tags.vue
│   │   ├── Types.vue
│   │   └── UserBar.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   ├── index.js
│   │   └── modules
│   │       ├── activities.js
│   │       ├── book.js
│   │       ├── group.js
│   │       ├── movie.js
│   │       ├── search.js
│   │       ├── subject.js
│   │       └── user.js
│   └── views
│       ├── BookView.vue
│       ├── DetailView.vue
│       ├── GroupView.vue
│       ├── HomeView.vue
│       ├── LoginView.vue
│       ├── MovieView.vue
│       ├── PagesView.vue
│       ├── RegisterView.vue
│       ├── SearchView.vue
│       ├── StatusView.vue
│       ├── SubjectView.vue
│       └── TalionView.vue
└── static
    └── logo.png

License

MIT Copyright (c) 2017 Jeneser