Vue.JS开源:一个基于vue全家桶制作的在线电影影讯网站

MerGooch 7年前
   <h2>前言</h2>    <p>之前一直在学习原生的javascript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有什么成就感的,想着豆瓣提供了免费的api接口,不如就利用这个接口做一个电影网站,想想还是有点小激动的!</p>    <h2>技术栈</h2>    <p>技术栈当然首选vue全家桶啦,但是我这个demo是利用的豆瓣api,而且没有后台,所以vuex也就没什么用了,因此技术栈是vue + vue-router + vue-resource + vue-cli。</p>    <h2>功能分析</h2>    <p>功能参考了手机上的猫眼电影app,但是发现网上并没有在线选座的接口,于是这个功能无法实现,发现这个问题之后,赶紧去看看豆瓣api都提供什么信息,然而电影评论信息不提供,WTF!怎么办?评论信息都没有,那信息量也太少了吧,这是开源运动就显得很棒了,在github上有人提供非官方版本的api,可以获得电影的短评和长评信息!有了api开始干!</p>    <h2>效果预览</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/59d4fe19b5f6ef1064ecb6eb388a369e.gif"></p>    <h2>项目主要结构</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/121083dbae3115bf9159d77dc877c5a8.png"></p>    <h2>路由部分</h2>    <p>`export default new Router({</p>    <p>routes: [</p>    <pre>  <code class="language-javascript">{    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  }</code></pre>    <p>]</p>    <p>})`</p>    <h3>再来几张截图</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/373d167824b04046fe53dfacbeb218ae.png"> <img src="https://simg.open-open.com/show/50af865ec139bc2ced8200e8034e3b46.png"> <img src="https://simg.open-open.com/show/51fa26789d03dea03a55c2ece302cbed.png"> <img src="https://simg.open-open.com/show/63c6d724cb9211a942bf0240037bcea5.png"> <img src="https://simg.open-open.com/show/293255677624e008c31e0f57baa26ebc.png"> <img src="https://simg.open-open.com/show/e305809afc8c1bf9a5e7cca7ddfb0c80.png"> <img src="https://simg.open-open.com/show/6c5287a95d870dc50646255c77d23ce4.png"> <img src="https://simg.open-open.com/show/3f101fb5e85abd5e81b647a127ba95a0.png"></p>    <h3> </h3>    <p> </p>