用vue开发一个猫眼电影web app
发布于 2 年前 作者 zhixuanziben 3884 次浏览 来自 分享

前言:之前一直在学习原生的javascript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有什么成就感的,想着豆瓣提供了免费的api接口,不如就利用这个接口做一个电影网站,想想还是有点小激动的! ###技术栈 技术栈当然首选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! ps:本人大三狗,热爱前端,求前端实习!

14 回复

可以的。 已star

可以的,正好准备学学。

@Qiubaowei 谢谢兄弟!

@imhered 我也是刚学,可以多多交流

我们公司最近招实习生,简历投递地址:http://ctrip.m.zhiye.com/JobAd/List?jc=2 明天内推截止,内推免笔试,有兴趣的话回复我,我给你内推码

求内推码,明天晚上截至吗?

@zhixuanziben 内推码S61417,推荐人:尹光耀 HR说的是10号截止,他刚刚在群里说五点之后就不能投了,你最好马上投

@zhixuanziben 今天下午五点之前投了,去给你的那个网址完善简历,内推简历过了可以直接面试

@yinguangyao 好的兄弟,我抓紧时间弄弄

楼主,豆瓣API停止申请了吗?

@zhengjun87 不是很清楚,我用的非官方的

前端都是手写的吗? From Noder

@gaoli861121 这个只有前端,整体结构是vue-cli搭建的,剩下的都是手写

回到顶部