Vue2.0+vue-router实现简易豆瓣电影webApp
2016-12-19 22:12
891 查看
运行项目
项目地址:https://github.com/superman66/vue2.x-doubanclone项目到本地,进入项目文件夹,安装依赖
git clone https://github.com/superman66/vue2.x-douban.git cd vue2.x-douban npm install
然后运行
npm run dev
最后打开浏览器,输入
localhost:8880即可访问。效果图如下:
路由
应用包括下面4个路由*
/movies首页,包含正在上映榜单和即将上映榜单的电影信息,首页只显示各个榜单的前8条数据;
*
/movie-list榜单列表页面,显示榜单列表信息;
*
/movie/subject/:id电影详情页面;
*
/movie/search电影搜索列表页面。
项目结构
. ├── 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 ├── git.sh ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── list.scss │ │ ├── logo.png │ │ ├── search-btn.png │ │ └── style.scss │ ├── components │ │ ├── Hello.vue │ │ ├── Spinner.vue │ │ └── header.vue │ ├── main.js // 入口文件 │ ├── router.js // 路由 │ ├── store │ │ ├── api.js // 抽取访问api的方法 │ │ ├── modules │ │ │ └── movie.js │ │ ├── store.js │ │ └── types.js │ └── views │ ├── index.vue │ ├── movie │ │ ├── movie-detail.vue │ │ ├── movie-list.vue │ │ ├── movies.vue │ │ └── search-list.vue │ └── vuex-demo.vue ├── static └── tree.md
第三方库
HTTP库采用了axios。列表下拉加载更多数据使用了vue-infinite-scroll
豆瓣API
该应用使用了下面4个api:*
/v2/movie/search?q={text}电影搜索api;
*
/v2/movie/in_theaters正在上映的电影;
*
/v2/movie/coming_soon即将上映的电影;
*
/v2/movie/subject/:id单个电影条目信息。
更多关于豆瓣的api可以前往豆瓣api官网查看。
需要注意的是,由于豆瓣api的跨域问题,并不能直接通过ajax请求访问。不过vue-cli提供了代理的配置。
我们需要在
/config/index.js中配置代理:
dev: { env: require('./dev.env'), port: 8880, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } }, cssSourceMap: false }
在
proxyTable这个属性中,配置target属性为我们要代理的目标地址。这里我们写成
http://api.douban.com/v2,这样我们就可以在应用中调用
/api/movie/in_theaters来访问
http://api.douban.com/v2/movie/in_theaters,从而解决跨域的问题。
关于vue-cli更多关于跨域的设置可以看官网文档
关于vuex
如果你想了解vuex的用法,可以切换到vuex分支,在该分支下,所有的state都采用vuex来管理。
文章首发我的个人博客:Vue2.0实现简易豆瓣电影webApp
相关文章推荐
- Vue2.0 项目实战案例及Demo,基于vue2.0+vuex+vue-router+axios实现
- 利用vue+vue-router+elementUI实现简易通讯录
- vue-router(2.0)
- webApp路由控制-vue-router2.0
- vue2.0结合DataTable插件实现表格的动态刷新
- vue2.0环境搭建(含router路由)
- webpack入坑之旅(六)配合vue-router实现SPA
- Vue2.0源码阅读笔记--双向绑定实现原理
- 使用Vue-Router 2实现路由功能
- vue-cli 中实现简单动画效果 (vue2.0)
- vue2.0使用Sortable.js实现的拖拽功能
- vue-router2.0,子路由的使用
- 用vue-router实现二级菜单内容的转换
- 利用vue-router实现二级菜单内容转换
- vue 2.0 router
- vue-router2.0 组件之间传参及获取动态参数
- 使用 Vue 2.0 实现服务端渲染的 HackerNews
- Vue 2.0 + Vue Router + Vuex
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等
- Vue.js:使用Vue-Router 2实现路由功能介绍