Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent
Clone or download
Latest commit 851fe36 Nov 5, 2017
Permalink
Failed to load latest commit information.
build use sass Feb 26, 2017
config Fix iss#6 Apr 12, 2017
screenshot Update README fix screenshot Aug 11, 2017
src Update List.vue Aug 24, 2017
static Add search page adjustment pages view Apr 3, 2017
.babelrc init project Feb 25, 2017
.editorconfig init project Feb 25, 2017
.eslintignore init project Feb 25, 2017
.eslintrc.js init project Feb 25, 2017
.gitignore Remove dist/ Aug 24, 2017
.travis.yml Update README May 30, 2017
LICENSE Update LICENSE Aug 24, 2017
README.md Update README Aug 24, 2017
index.html Fix referrer policy #20 Nov 5, 2017
package.json Use tschaub/gh-pages Aug 24, 2017

README.md


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

  • Aug 24, 2017:
    • Merged PR #19
    • Remove dist/, use tschaub/gh-pages
  • Aug 11, 2017:
    • Add dir /screenshot.
    • Update README fix screenshot
  • June 24, 2017:
    • Update vue-scroll-behavior fix scroll behavior
  • May 28, 2017:
    • Using superagent

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

Thanks

License

MIT Copyright (c) 2017 Jeneser