豆瓣APP

豆瓣电影，图书，音乐，广播，小组。vue2.0 + vue-router + axios + vuex + mint-ui

项目地址

https://github.com/liangjilin/douban

运行项目

# git clone git@github.com:liangjilin/douban.git

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

效果图

text

项目结构

.

├── 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 // 自己写的模仿数据

│   │   ├── homeData.json

│   ├── fetch // fetch API

│   │   ├── api.js // axios配置及API封装

│   ├── vuex  //  数据管理

│   │   ├── modules

│   │   │    ├── home.js

│   │   │    ├── main.js

│   │   │   └── video.js

│   │   ├── store.js

│   │   └── types.js

│   └── pages

│      ├── main.vue  // 底部导航及页面绑定

│      ├── home

│      │   └── home.vue  // 首页

│      ├── 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  //  音乐

│      │    │   ├── 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  // 注册

├── static

│   ├── css

│   │   └──eric-meyer-reset.min.css  //  css reset

│   └── images

│       └──favicon.ico  //  icon

└── tree.md

豆瓣API

该应用使用了下面4个api：

• /v2/book 图书；

• /v2/movie 电影；

• /v2/music 音乐；

• v2/event 同城。

更多关于豆瓣的api可以前往豆瓣api官网查看。

需要注意的是，由于豆瓣api的跨域问题，并不能直接通过ajax请求访问。不过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': ''

}

}

}

关于相关依赖那些事

vue-router, 请看vue路由配置。

axios请求，请用力戳Axios文档。

亦或你想了解关于页面或跨组件数据通讯等的用法，请点击传送门Vuex文档。

还是饿了么移动端组件库mint-ui,mint-ui官方文档。