Bản DEMO douban tuyệt vời được tạo bằng Vue2.x + Vuex + Vue-router + Superagent
……
Live Demo
Tính năng
- Vue + vue-router + vuex + Superagent hoạt động cùng nhau
- Vuex chia store thành các module
- Cú pháp JavaScript hiện đại với ES6
- Mẫu webpack vue-cli
- Các thành phần Vue đơn tệp
- Yêu cầu API được tách riêng
- API từ xa thực sự và một số dữ liệu giả lập
- Tích hợp linter eslint
- Tải lại nhanh trong quá trình phát triển
- Css với Sass
- Không có framework CSS bên thứ ba
- Logic xem phong cách phức tạp và khác nhau
- Danh sách tải vô hạn
- Logic tìm kiếm hoàn chỉnh
- Các thành phần tùy chỉnh như Danh sách, Đánh giá, Thẻ …
- Xác thực với JSON Web Tokens
- Logic đăng ký đăng nhập hoàn chỉnh ……
Thiết lập Xây dựng
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
Để biết giải thích chi tiết về cách mọi thứ hoạt động, hãy kiểm tra guide và docs for vue-loader.
Thư viện
- Vuex : Quản lý Trạng thái Tập trung cho Vue.js
- Vue-router : Bộ định tuyến chính thức cho Vue.js
- vue-resource ~~: Ứng dụng HTTP cho Vue.js~~
- Superagent : Ajax ít xấu – (và khách hàng HTTP node.js phù hợp)
- vue-infinite-loading : Plugin cuộn vô hạn cho Vue.js 1.0 & Vue.js 2.0.
- normalize.css : Bộ sưu tập chuẩn hóa phong cách phần tử và thuộc tính HTML
- vue-scroll-behavior : Tùy chỉnh hoàn toàn hành vi cuộn trên việc điều hướng tuyến đường
API
Douban Api V2
- URI Cơ bản :
https://api.douban.com/V2/ - Hoạt động trực tuyến
- Danh sách hoạt động :
/event/list?loc=108288&count=&start= - Thông tin hoạt động đơn :
/event/id - Phim
- Đang chiếu:
/movie/in_theaters?count= - Sắp chiếu:
/movie/coming_soon?count= - Top 250:
/movie/top250?count= - Thông tin phim đơn:
/movie/subject/id - Sách
- Tìm kiếm sách:
/book/search?q=&count= - Thông tin sách đơn:
/book/id - Tìm kiếm
- Tìm kiếm sách:
/book/search?q= - Tìm kiếm phim:
/movie/search?q= - Tìm kiếm nhạc:
/music/search?q=
Giả lập Douban Backend
- URI Cơ bản Người dùng:
https://douban.herokuapp.com/user/ - Đăng ký
- Đường dẫn:
/user - Phương thức:
POST - Đăng nhập
- Đường dẫn:
/user/:id - Phương thức:
GET
Để biết giải thích chi tiết, hãy kiểm tra Douban Api V2 và Douban Backend
Cấu trúc Tệp
.
├── 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
Nhật ký thay đổi
- Ngày 24 tháng 8 năm 2017:
- Kết hợp PR #19
- Xóa dist/, sử dụng tschaub/gh-pages
- Ngày 11 tháng 8 năm 2017:
- Thêm thư mục /screenshot.
- Cập nhật README sửa screenshot
- Ngày 24 tháng 6 năm 2017:
- Cập nhật vue-scroll-behavior sửa lỗi hành vi cuộn
- Ngày 28 tháng 5 năm 2017:
- Sử dụng superagent
Đóng góp
. Sao chép nó!
. Tạo nhánh tính năng của bạn: git checkout -b my-new-feature
. Cam kết các thay đổi của bạn: git commit -am 'Thêm một số tính năng'
. Đẩy lên nhánh: git push origin my-new-feature
. Gửi một yêu cầu kéo
Chi tiết tải về:
Tác giả: jeneser
Nguồn: https://github.com/jeneser/douban
Giấy phép: MIT license
