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

habren 发布于2019-08-21 11:32 / 1692人阅读

摘要：前言之前一直在学习原生的，但是无奈功力太浅，学了很长时候也只能写一些简单的小，知道遇见了，一切都变了，他的双向绑定和组件化思想让我迅速的爱上了他，可是光学不练是没有什么成就感的，想着豆瓣提供了免费的接口，不如就利用这个接口做一个电影网站，想

前言：之前一直在学习原生的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: 本人大三狗，热爱前端，求一份前端实习工作！邮箱zhixuanziben@gmail.com

云服务器服务器托管 app动态web开发 web前端开发用什么语言做app开发用什么云服务器开发手机app用哪个云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86817.html

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

摘要：前言之前一直在学习原生的，但是无奈功力太浅，学了很长时候也只能写一些简单的小，知道遇见了，一切都变了，他的双向绑定和组件化思想让我迅速的爱上了他，可是光学不练是没有什么成就感的，想着豆瓣提供了免费的接口，不如就利用这个接口做一个电影网站，想前言：之前一直在学习原生的javascript，但是无奈功力太浅，学了很长时候也只能写一些简单的小demo，知道遇见了vue，一切都变了，他的双向...

Lowky 2019-08-05 10:53 评论0 收藏0
Vue 电影信息影评（豆瓣，猫眼）

摘要：界面如下图电影详情展示此功能是提供电影详情的界面，包括演员上映时间导员剧情简介宣传视频宣传视频由于豆瓣官方的限制无法获取，所以只有正在热映板块从猫眼获取的电影信息才有。 Vue电影信息影评网站此网站是我的毕业设计，题目是基于HTML5的电影信息汇总弄网站，由于最近在看Vue.js,所以就想用Vue.js来构建一个前端网站，这里code就不大篇幅的写了，主要讲一下网站的功能和所用到的技...

hzc 2019-08-02 16:02 评论0 收藏0
Vue 电影信息影评（豆瓣，猫眼）

摘要：界面如下图电影详情展示此功能是提供电影详情的界面，包括演员上映时间导员剧情简介宣传视频宣传视频由于豆瓣官方的限制无法获取，所以只有正在热映板块从猫眼获取的电影信息才有。 Vue电影信息影评网站此网站是我的毕业设计，题目是基于HTML5的电影信息汇总弄网站，由于最近在看Vue.js,所以就想用Vue.js来构建一个前端网站，这里code就不大篇幅的写了，主要讲一下网站的功能和所用到的技...

Nekron 2019-08-22 18:06 评论0 收藏0
Requests+正则表达式爬取猫眼电影

摘要：目标通过正则表达式爬取猫眼电影电影的排名名字电影封面图片主演上映时间猫眼评分，将爬取的内容写入文件中。为了加快爬取网页的速度，可以开启循环和多线程当需要爬取的信息很大时，这是一个不错的技巧。目标通过Request+正则表达式爬取猫眼电影TOP100电影的排名、名字、电影封面图片、主演、上映时间、猫眼评分，将爬取的内容写入文件中。流程框架进入到猫眼电影TOP100的页面，此时的U...

30e8336b8229 2019-07-30 18:37 评论0 收藏0
2018电影票房分析-谁才是票房之王

摘要：另外由于豆瓣上一些电影评分数量太少而不显示，所以这里的电影数量会和票房数量有所差异。月度票房将类型片的票房按月划分，得到了这张图。去年末的时候，我招收了新的实训生。本文是其中一位 @齐大圣同学在实训两个月时完成的项目案例。（码上行动群里同学应该都看过这个名字，现在也是助教之一。）项目最初的想法是，从互联网上的公开信息中采集2018年在国内上映电影的票房、评分、类型、演员等信息...

stormjun 2019-07-31 10:17 评论0 收藏0