/douban

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

Primary LanguageVueMIT LicenseMIT


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

Build Status David Codacy Badge Powered Percentage of issues still open Average time to resolve an issue PR license





......
Live Demo

Features

  • Vue + vue-router + vuex + Superagent 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
  • Superagent : Ajax with less suck - (and node.js HTTP client to match)
  • 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
  • vue-scroll-behavior : Completely customize the scroll behavior on route navigation

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

Change log

  • June 24, 2017:
    • Update vue-scroll-behavior fix scroll behavior
  • May 28, 2017:
    • Using superagent

License

MIT Copyright (c) 2017 Jeneser