用vue开发一个猫眼电影web app
2017-03-31 08:49
441 查看
前言:之前一直在学习原生的JavaScript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有什么成就感的,想着豆瓣提供了免费的api接口,不如就利用这个接口做一个电影网站,想想还是有点小激动的!
http://www.tuicool.com/articles/viYVBfB
技术栈当然首选vue全家桶啦,但是我这个demo是利用的豆瓣api,而且没有后台,所以vuex也就没什么用了,因此技术栈是vue + vue-router + vue-resource + vue-cli。
功能参考了手机上的猫眼电影app,但是发现网上并没有在线选座的接口,于是这个功能无法实现,发现这个问题之后,赶紧去看看豆瓣api都提供什么信息,然而电影评论信息不提供,WTF!怎么办?评论信息都没有,那信息量也太少了吧,这是开源运动就显得很棒了,在github上有人提供非官方版本的api,可以获得电影的短评和长评信息!有了api开始干!
`export default new Router({
routes: [
]
})`
demo地址
github地址
觉得有用的帮忙给个star!
http://www.tuicool.com/articles/viYVBfB
技术栈
技术栈当然首选vue全家桶啦,但是我这个demo是利用的豆瓣api,而且没有后台,所以vuex也就没什么用了,因此技术栈是vue + vue-router + vue-resource + vue-cli。
功能分析
功能参考了手机上的猫眼电影app,但是发现网上并没有在线选座的接口,于是这个功能无法实现,发现这个问题之后,赶紧去看看豆瓣api都提供什么信息,然而电影评论信息不提供,WTF!怎么办?评论信息都没有,那信息量也太少了吧,这是开源运动就显得很棒了,在github上有人提供非官方版本的api,可以获得电影的短评和长评信息!有了api开始干!
效果预览
项目主要结构
路由部分
`export default new Router({routes: [
{ path: '/inTheaters', name: 'inTheaters', component: inTheaters }, { path: '/movie/:id', name: 'moviesMsg', component: moviesMsg }, { path: '/comingSoon', name: 'comingSoon', component: comingSoon }, { path: '/serchResult', name: 'serchResult', component: serchResult }, { path: '/starMsg/:id', name: 'starMsg', component: starMsg }, { path: '/comment/:id', name: 'comment', component: comment }, { path: '/smallComment/:id', name: 'smallComment', component: smallComment }, { path: '/searchPage', name: 'searchPage', component: searchPage }
]
})`
再来几张截图
写在最后
demo地址github地址
觉得有用的帮忙给个star!
相关文章推荐
- 用vue开发一个猫眼电影web app
- 用vue开发一个猫眼电影web app
- 使用vue开发web app - 2 - 创建一个列表控件
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用
- 用vue搭建的猫眼电影web app
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用
- vue-mobile 又一个 vue ui 库正在开发
- 记一个Vue项目的开发历程
- 做一个gulp+webpack+vue的单页应用开发架子
- vue项目开发(一) 利用vue-cli+webpack构建一个vue项目
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用
- 在2015年 开发一个 Web App 必须了解的那些事
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用
- 发现一个nginx LUA开发Web App的框架
- 分享一个使用 vue.js 开发的网站
- 写一个开发vue组件的cli
- 发现一个nginx LUA开发Web App的框架
- 发现一个nginx LUA开发Web App的框架
- VUE开发一个图片轮播的组件示例代码
- Vue-book 2.0 一个移动端简单的全栈 web APP