Vue2.0开发仿豆瓣电影WebApp
2017-08-01 09:12
281 查看
想自己动手搭建一个
WordPress 独立博客?试试腾讯云上实验室吧 https://cloud.tencent.com/developer/labs
原文链接:https://segmentfault.com/a/1190000010309751
更接近豆瓣原版的webapp,本项目在论坛上也看到其他人做过,但有的功能不完善有的实现效果的体验感并不好,所以自己照着理想的效果做了一版 —— 由hxgzj分享
api来源自豆瓣官方api,详情请戳豆瓣电影api
项目源码:请戳 github
求star,如果对您有帮助,可以在github上点右上角 "Star" 支持一下 谢谢! ^_^
打开浏览器进入开发者模式,选择移动端视口
chrome浏览器下的iphone5/6/6 plus体验效果更佳
WordPress 独立博客?试试腾讯云上实验室吧 https://cloud.tencent.com/developer/labs
原文链接:https://segmentfault.com/a/1190000010309751
更接近豆瓣原版的webapp,本项目在论坛上也看到其他人做过,但有的功能不完善有的实现效果的体验感并不好,所以自己照着理想的效果做了一版 —— 由hxgzj分享
前言
虽然在此之前已经有类似的仿豆瓣电影的webapp,但或是开发的有些简洁功能不太完善,或是体验感觉得可以再完善下,所以自己摸索着对比豆瓣和豆瓣电影两款app做了一下,初步满足了自己的想法,经过几次完善基本不会出现bug,如果发现存在问题请告诉我修改,谢谢!项目简介
使用vue2.0仿豆瓣电影app,根据豆瓣电影api对功能作了适当修改api来源自豆瓣官方api,详情请戳豆瓣电影api
项目源码:请戳 github
求star,如果对您有帮助,可以在github上点右上角 "Star" 支持一下 谢谢! ^_^
线上体验
PC访问
豆瓣电影webapp打开浏览器进入开发者模式,选择移动端视口
chrome浏览器下的iphone5/6/6 plus体验效果更佳
移动端访问
打开手机浏览器扫描下方二维码或访问上面的地址,推荐全屏模式下体验项目运行
clone项目源码git clone https://github.com/buptsky/vue-douban-movie.git[/code] 安装依赖cd vue-douban-movie npm install
运行npm run dev
打开浏览器进入localhost:8000,在开发者工具的移动端模式下查看效果运行环境
node 6+ npm 4+部分效果演示
上映电影信息和电影详情
排行和影人
搜索和收藏
项目描述
技术栈
vue2.0 + vue-router + vuex:vue全家桶
axios:用于ajax请求
vue-lazyload:用于图片懒加载
better-scroll:移动端滚动库,优化移动端滚动效果
webpack: 构建工具
es6: 使用es6语法
stylus: css预处理
使用flex布局进行移动端适配,用eslint进行代码规范检查
使用localStorage存储收藏的电影信息,影人信息,评论点赞信息
webpack + webpack-dev-server + http-proxy-middleware进行本地开发环境http请求转发,实现跨域请求
线上使用express的http-proxy-middleware实现请求转发功能实现
上映电影部分
获取正在上映的电影信息和即将上映电影的信息
电影信息滚动(底部)加载提高响应速度排行部分
获取所有可以从豆瓣api得到的排行榜
查看排行榜详细,在排行榜中查看具体电影详细搜索部分
支持用户根据关键字搜索
支持用户根据给出标签进行标签搜索(与输入与标签相同的关键字进行搜索不同)
根据搜索结果查看电影详情
查看搜索历史电影详情部分
获取电影所有的基础信息和评分信息
获取电影的短评和长评,可查看该电影所有短评长评
将电影标记为想看/看过影人信息部分
获取影人基本信息
查看影人作品详细用户中心部分
查看收藏的影人
查看想看的电影
查看看过的电影关于浏览器跨域
开发环境
项目通过vue脚手架vue-cli进行配置,可在'config/index'目录下进行如下配置proxyTable: { '/v2': { target: 'http://api.douban.com', changeOrigin: true, pathRewrite: { '^/v2': '/v2' } } }
参数里中的changeOrigin,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了vue-cli的这个设置来自于其使用的插件http-proxy-middleware生产环境
服务器端配置const express = require('express'); const proxy = require('http-proxy-middleware'); const app = express(); app.use('/static', express.static(`${__dirname}/static`)); app.use('/v2', proxy({ target: 'http://api.douban.com', changeOrigin: true, })); app.get('/*', (req, res) => { res.sendFile(`${__dirname}/index.html`); }); app.listen(8000);
本质上都是通过使用'http-proxy-middleware'中间件实现代理关于移动端滚动库better-scroll
better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。
从之前黄轶老师的高仿elem外卖app开始接触过这个滚动库,感觉体验感很好,用起来也比较顺手,所以在后来的项目联系中就一直在使用。
推荐大家也尝试一下:)
滚动的原理时父容器有固定的高度。父容器的第一个子元素,它的高度会随着内容的大小而撑高。当内容的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是better-scroll 的滚动原理。
可以通过黄轶老师的这篇文章具体了解下:当
better-scroll 遇见 Vue
better-scroll的github地址戳:better-scroll项目布局
├─build // webpack配置文件 ├─config // 项目开发环境配置相关代码 ├─screenshots // 项目截图 ├─src // 源码目录 │ ├─api // axios请求,获取项目数据 │ ├─base // 项目基础组件 │ │ ├─confirm // 确认框组件 │ │ ├─history-list // 历史记录列表组件 │ │ ├─loading // 初始加载过渡组件 │ │ ├─loadmore // 加载更多组件 │ │ ├─scroll // 页面滚动组件 │ │ ├─search-box // 搜索框组件 │ │ ├─star // 星级评分组件 │ │ └─switches // 选项卡组件 │ ├─common // 公共资源 │ │ ├─fonts // 图标字体 │ │ ├─image // 图片资源 │ │ ├─js // 公共方法 │ │ └─stylus // css样式 │ ├─components // 业务组件 │ │ ├─all-discussion // 全部评论组件 │ │ ├─celebrity-detail // 影人详情组件 │ │ ├─celebrity-info // 影人基础信息组件 │ │ ├─celebrity-list // 影人列表组件 │ │ ├─celebrity-works // 影人作品组件 │ │ ├─movie-comment // 电影短评组件 │ │ ├─movie-detail // 电影详情组件 │ │ ├─movie-info // 电影基础信息组件 │ │ ├─movie-list // 电影列表组件 │ │ ├─movie-review // 电影长评组件 │ │ ├─movie-show // 主页上映电影组件 │ │ ├─rank // 排行组件 │ │ ├─rank-detail // 排行详情组件 │ │ ├─rank-list // 排行列表组件 │ │ ├─review-detail // 电影长评详情组件 │ │ ├─search // 电影搜索组件 │ │ ├─suggest // 搜索结果组件 │ │ ├─tab // 主页tab栏组件 │ │ └─user-center // 用户中心组件 │ ├─router // vue-router路由管理 │ └─store // vuex状态管理 └─static
相关文章推荐
- Vue2.0 新手完全填坑攻略——从环境搭建到展示豆瓣的电影列表
- 小应用开发——豆瓣电影数据获取
- 【初学者】基于vue的webapp——豆瓣电影
- 基于MEAN的仿豆瓣电影网站开发实战(1)
- 基于微信公众平台的Python开发——豆瓣电影搜索
- 基于MEAN框架的仿豆瓣电影开发实战(2)
- 安卓app开发方式之webApp
- jquery mobile开发手机webapp页面(二)上传功能
- 移动WebApp开发 JS框架对比 - 转自新浪Blog
- 用BeautifulSoup爬取豆瓣的电影排行榜,并用xlwt把数据保存成excel
- Python->用Scrapy爬取豆瓣电影
- 爬取豆瓣电影推荐排行榜
- 利用sklearn进行豆瓣电影评论的文本分类
- mui开发webapp(1)
- 转发 2013豆瓣电影【口碑榜】Top100
- 德国基于240GHz开发超高速无线网络 每秒下载10部电影
- 使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示
- RSelenium包抓取豆瓣电影(模拟滚动条)
- Scrapy抓取豆瓣电影
- Python爬虫初学(2)豆瓣电影top250评论数