之前一直在学习原生js,可是发现原生js虽然很好,但是想实现一个稍微复杂一点的项目都很麻烦。直到遇见了vue.js,发现vue是真的很好用,而且很简洁,利用组件化开发能够快速做出项目,所以为了学习vue,我决定利用豆瓣电影的api做个电影查询web app,说干就干!

  首先看一下demo: https://zhixuanziben.github.io/gouyan-demo/dist/index.html#/inTheaters

  github地址:https://github.com/zhixuanziben/gouyan-movie-vue

  

  技术栈:

    HTML5 + CSS3 + JavaScript + es6 + vue + vue-router + vue-resource

     由于数据都是直接从豆瓣api获取的,所以并不需要考虑太多的数据存储和共享问题,因此没有使用vuex。

  项目截图:

    

  功能分析:

    利用豆瓣api的接口获取数据,模仿猫眼电影制作的webapp,实现了当前热映电影,即将上映电影,电影详细信息,短评和长评论信息,影星个人信息,以及电影查询的功能。

所有的数据都是ajax请求得到,所有没有后台的支持,直接在前端发送ajax请求!

  主体目录:

  

  

  github项目地址: https://github.com/zhixuanziben/gouyan-movie-vue

  目前只完成前端页面展示部分,后台功能将会持续田间。这个项目会一直更新!如果觉的不错就给个star吧!

用VUEJS做一个猫眼电影web app的更多相关文章

  1. 用vue开发一个猫眼电影web app

    前言:之前一直在学习原生的javascript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有 ...

  2. 今天来做一个PHP电影小爬虫。

    今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过 ...

  3. express 写一个简单的web app

    之前写过一个简单的web app, 能够完成注册登录,展示列表,CURD 但是版本好像旧了,今天想写一个简单的API 供移动端调用 1.下载最新的node https://nodejs.org/zh- ...

  4. 如何做一个跨平台的游戏App?

    如何做一个跨平台的游戏App? iOS和安卓系统上的应用程序,根据提供的内容不同,按照开发方式和用户体验不同,可区分为app和游戏: 首先从开发方式不同来说明,app开发一般是用操作系统官方提供的开发 ...

  5. 用 Vue 做一个简单的购物app

    前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...

  6. 请问IOS中做一个手机网站的app壳复杂吗?

    公司开发了一个平台,手机网站已经做出来了,想开发一个苹果应用app,但公司没人会IOS开发,为了减小成本,现在想直接做一个壳来加载手机网站,请问在ios中复杂吗?是否有相应的控件直接加载url就行? ...

  7. 自然语言处理NLP学习笔记三:使用Django做一个NLP的Web站点

    前言: 前面我们已经能初步实现一个中文自然处理语言的模型了,但交互界面是命令行的,不太友好. 如果想做一个类似http://xiaosi.trs.cn/demo/rs/demo的界面,那就还需要继续往 ...

  8. 用VUEJS做一个网易云音乐

    前言:自己学习VUEJS也一段时间,但一直没有做出来一东西.我自己一直喜欢用网易云音乐app,于是乎就做了这个app. 项目截图 技术栈 vue全家桶 (vue vue-router vuex) ax ...

  9. 项目自动化建构工具gradle 入门5——在intellij中做一个gradle的web工程

    之前的几个小节,都是纯手工建文件夹,纯手工拷贝war包,或者纯手工解压个zip看看结果,,,,这还是我写了玩的helloWorld.若是玩大工程.几十个人的团队协同开发时,这么玩,,,,暴躁的程序员估 ...

随机推荐

  1. JavaScript事件处理程序的3种方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...

  2. Ueditor实现自定义conttoller请求或跨域请求

    http://www.th7.cn/Program/java/201507/510254.shtml

  3. 移动设备应用程序中支持多个屏幕大小和 DPI 值

    支持多个屏幕大小和 DPI 值的指导原则 要部署独立于平台的应用程序,应了解不同的输出设备.设备可以具有不同的屏幕大小或分辨率以及不同的 DPI 值或密度. Flex 工程师 Jason SJ 在他的 ...

  4. 在MyEclipse 2014中给Spket增加ExtJS提示

    参考:http://wenku.baidu.com/link?url=BT2U6Z-HktQJQYpz3Jp88pJSp4lU-lXkvCqpdeaa9a-BVdOgMGK1vj486-32YC4Gq ...

  5. 统计SQLSERVER表行数,以及每天数据变化的行数

    此sql对监控系统很有帮助,知道哪些表压力大,每天的数量级大概多少等信息. 得到这些信息就可以做相应的策略来进行系统优化. create table tmp( name varchar(50), ro ...

  6. Struts2标签--S:iterator----jsp页面遍历双层list

    双层遍历,第一层list为classes,里面放的是班级class对象,第二层为班级class里的小组groups.     <s:iterator value="classes&qu ...

  7. # C#不登录电脑启动程序

    我们知道开机自启动程序如果在用户不登录的情况下是不启动的,但是服务类程序是可以跨过用户登录启动的,例如IIS服务,SQL服务.如果我们已经写好了桌面应用程序,又希望他开机自启动,那就需要借助系统服务在 ...

  8. json-lib之复杂数据类型的转换

    在json字符串转java bean时,一般的对象,可以直接转,如:一个学生类,属性有姓名.年龄等 public class Student{ private String sname; privat ...

  9. GIT团队开发操作

    01. 建立代码仓库(专门用于团队开发的代码仓库) ========================================================================== ...

  10. 比特(bit)、字,字节(B)存储单位之间的关系+其与操作系统位数的关系+不同编译器编译方式下数据类型的表示范围

    1.在表示网络传输速度中与表示存储单位的不同: 表示存储单位时:1kB=1024B,但在网络中表示传输速度是1KB=1000B 2.下面介绍表示存储单位时的关系及其与操作系统位数的关系: 1B=8bi ...