豆瓣APP
豆瓣電影圣絮，圖書，音樂(lè)柒瓣，廣播，小組吠架。vue2.0 + vue-router + axios + vuex + mint-ui
項(xiàng)目地址
運(yùn)行項(xiàng)目
# git clone git@github.com:liangjilin/douban.git
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
效果圖
text
項(xiàng)目結(jié)構(gòu)
.
├── README.md
├── build // vue-cli 自帶的配置文件
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // vue-cli 自帶的配置文件
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── css
│ │ │ ├──common.styl
│ │ │ │ ├──common.css
│ │ │ │ ├──cfont-awesome.min
│ │ ├── fonts
│ │ └── images
│ ├── components
│ │ ├── banner.vue //
│ │ ├── bookFiction.vue
│ │ ├── bookMoreItem.vue
│ │ ├── cityMoreItem.vue
│ │ ├── header.vue
│ │ ├── loading.vue
│ │ ├── movieMoreItem.vue
│ │ ├── musicMoreItem.vue
│ │ ├── rating.vue
│ │ ├── scroller.vue
│ │ ├── star.vue
│ │ └── tvMoreItem.vue
│ ├── main.js // 入口文件
│ ├── router // 路由
│ │ ├── index.js
│ ├── data // 自己寫的模仿數(shù)據(jù)
│ │ ├── homeData.json
│ ├── fetch // fetch API
│ │ ├── api.js // axios配置及API封裝
│ ├── vuex // 數(shù)據(jù)管理
│ │ ├── modules
│ │ │ ├── home.js
│ │ │ ├── main.js
│ │ │ └── video.js
│ │ ├── store.js
│ │ └── types.js
│ └── pages
│ ├── main.vue // 底部導(dǎo)航及頁(yè)面綁定
│ ├── home
│ │ └── home.vue // 首頁(yè)
│ ├── video // 書影音
│ │ ├── movie // 電影
│ │ │ ├── movie.vue
│ │ │ ├── movieDetail
│ │ │ │ └── movieDetail.vue // 電影詳情
│ │ │ ├── movieMore
│ │ │ │ └── movieMore.vue // 正在熱映
│ │ │ ├── movieSearch
│ │ │ │ └── movieSearch.vue // 即將上映
│ │ │ └── movieToplist
│ │ │ │ └── movieToplist.vue // 榜單
│ │ ├── book // 圖書
│ │ │ ├── book.vue
│ │ │ ├── bookDetail
│ │ │ │ └── bookDetail.vue // 圖書詳情
│ │ │ ├── fictionMore
│ │ │ │ └── fictionMore.vue // 查看更多圖書
│ │ │ └── newBookMore
│ │ │ │ └── newBookMore.vue // 新書速遞
│ │ ├── city // 同城
│ │ │ ├── city.vue
│ │ │ ├── cityDetail
│ │ │ │ └── cityDetail.vue // 同城詳情
│ │ │ ├── cityMore
│ │ │ │ └── cityMore.vue // 查看更多同城
│ │ ├── tv // 電視
│ │ │ ├── tv.vue
│ │ │ ├── tvMore
│ │ │ │ └── tvMore.vue // 查看更多電視劇
│ │ └── music // 音樂(lè)
│ │ │ ├── music.vue
│ │ │ ├── musicDetail
│ │ │ │ └── musicDetail.vue // music詳情
│ │ │ ├── musicMore
│ │ │ │ └── musicMore.vue // 查看更多music
│ ├── broadcast
│ │ ├── broadcast.vue
│ │ └── broadcastDetail
│ │ │ └── broadcastDetail.vue // 廣播詳情
│ ├── group
│ │ └── group.vue // 小組
│ ├── mine
│ │ └── mine.vue // 小組
│ ├── login
│ │ └── login.vue // 登錄
│ └── register
│ └── register.vue // 注冊(cè)
├── static
│ ├── css
│ │ └──eric-meyer-reset.min.css // css reset
│ └── images
│ └──favicon.ico // icon
└── tree.md
豆瓣API
該應(yīng)用使用了下面4個(gè)api：
/v2/book圖書芙贫；/v2/movie電影；/v2/music音樂(lè)傍药；v2/event同城磺平。
更多關(guān)于豆瓣的api可以前往豆瓣api官網(wǎng)查看。
需要注意的是拐辽，由于豆瓣api的跨域問(wèn)題拣挪，并不能直接通過(guò)ajax請(qǐng)求訪問(wèn)。不過(guò)vue-cli提供了代理的配置俱诸。
我們需要在/config/index.js中配置代理：
dev: {
env: require('./dev.env'),
port: 8070,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://api.douban.com',
changeOrigin: true,
pathRewrite:{
'^/api': ''
}
}
}
關(guān)于相關(guān)依賴那些事
vue-router, 請(qǐng)看vue路由配置菠劝。
axios請(qǐng)求，請(qǐng)用力戳Axios文檔睁搭。
亦或你想了解關(guān)于頁(yè)面或跨組件數(shù)據(jù)通訊等的用法赶诊，請(qǐng)點(diǎn)擊傳送門Vuex文檔笼平。
還是餓了么移動(dòng)端組件庫(kù)mint-ui,mint-ui官方文檔。
