All Projects → jeneser → Douban

jeneser / Douban

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

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to Douban

Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (-78.61%)
Mutual labels:  vue-demo, vue-cli, vuex, vue-router, vue2
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (-10.84%)
Mutual labels:  vue-demo, vue-cli, vuex, vue-router, vue2
Vue Admin
基于Vue2、element ui、vue-cli、vuex、vue-router、axios 、echarts后台管理系统demo. 权限管理,用户管理,菜单管理。无限级菜单,下拉树形选择框
Stars: ✭ 1,135 (-51.16%)
Mutual labels:  webpack2, vue-cli, vuex, vue-router, vue2
Vue Qq
🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
Stars: ✭ 861 (-62.95%)
Mutual labels:  webpack2, vuex, vue-router, vue2
Easy Vue
Learn vueJS Easily 👻
Stars: ✭ 896 (-61.45%)
Mutual labels:  vue-demo, webpack2, vuex, vue2
Vue Music
基于vue2.0的网易云音乐播放器,api来自于NeteaseCloudMusicApi,v2.0为最新版本
Stars: ✭ 855 (-63.21%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (-88.98%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vue Wechat
🔥 基于Vue2.0高仿微信App的单页应用
Stars: ✭ 1,832 (-21.17%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Pretty Vendor
[零食商贩] - 基于vue全家桶 + koa2 + sequelize + mysql 搭建的移动商城应用
Stars: ✭ 57 (-97.55%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目,一个PC端页面入口,一个移动端页面入口,且有各自的路由, vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-93.76%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Seemusic
Vue 云音乐播放器,网易云音乐API,可听网易云高品质付费歌曲。 Vue music player
Stars: ✭ 112 (-95.18%)
Mutual labels:  webpack2, vuex, vue-router, vue2
Vue Quasar Admin
Vue 2.0 admin-dashboard based on Quasar-Framework
Stars: ✭ 516 (-77.8%)
Mutual labels:  webpack2, vuex, vue-router, vue2
Vue Cli Multipage Bootstrap
vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown for learning vue2.0
Stars: ✭ 105 (-95.48%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vue Mobile Cli
🚀 Vue移动端多页应用脚手架
Stars: ✭ 112 (-95.18%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Douban
Douban book website demo by server side render
Stars: ✭ 468 (-79.86%)
Mutual labels:  vue-cli, douban, vuex, vue-router
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区,使用webpack2打包
Stars: ✭ 1,134 (-51.2%)
Mutual labels:  vue-demo, vuex, vue-router, vue2
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (-90.4%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (-93.12%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Gpk admin
✨ GeekPark Content Management System
Stars: ✭ 150 (-93.55%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vue Objccn
🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用
Stars: ✭ 1,993 (-14.24%)
Mutual labels:  vue-cli, vuex, vue-router, vue2


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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].