Vue 电影信息影评（豆瓣，猫眼）

Vue电影信息影评网站

此网站是个人毕业设计，题目是“基于HTML5的电影信息汇总弄网站”，因为最近在看Vue.js,因此就想用Vue.js来构建一个前端网站，这里code就不大篇幅的写了，主要讲一下网站的功能和所用到的技术栈，你们若是有问题的话能够去 GitHub代码网址上查看或者在下方留言。

**技术栈**： Vue.js+ThinkPHP+MySql+Vue-router+Node.js

网站主要功能分为：

电影展现
主要是从第三方平台拉取电影信息，而后进行图片和电影名字展现还有轮播展现。展现分为正在热映、北美票房榜、Top25等三个板块，其中正在热映的数据来自猫眼，其他的均来自豆瓣电影。界面以下图：

---

电影详情展现

此功能是提供电影详情的界面，包括演员、上映时间、导员、剧情简介、宣传视频（宣传视频因为豆瓣官方的API限制没法获取，因此只有正在热映板块-从猫眼获取的电影信息才有）。界面以下图：

---

在线购票（基于猫眼第三方平台）

在线购票是基于第三方平台猫眼实现的，经过对应的电影id实如今线购票。界面以下图：

（仅限于最近正在热映的电影，其它的电影你们能够在网上观看）

---

在线评论

开发这个版块的目的是为了给电影爱好者提供一个互相交流的平台，从而也能够增长用户对网站的粘性。界面以下图：

---

遇到的问题及解决方法

此网站的北美票房榜和top25的数据都是来自于豆瓣开发者开放平台提供给开发者的一些API，可是这些API并无彻底交给开发者，而是对其中的一些API作了限制

---

1 数据请求权限

　　在API中指出，豆瓣将用户的使用权限分红了3类，分别是公开、高级、商务，对于我的开发只能使用公开，公开的使用条件是：全部开发者都可申请，审核用过。限定40次请求/分钟。其实这个请求数据正常状况下是可使用的。可是在开发过程当中，发现当请求次数超过这个次数后，豆瓣会将开发者的ip封锁，致使没法请求，为了不这种状况发生，本网站使用了HTML5新提供的本地存储数据方法sessionStorage。在首次打开网站后，将对应模块的数据信息存储的sessionStorage中，当本地存储中有对应的数据，则从本地存储读取，反之访问对应的API获取数据。

---

2 图片资源加载
　　　在开发过程当中，我发现从API中获取的图片资源没法正常在网站页面中进行渲染。经过百度发现，豆瓣在图片资源上作了防盗链，图片服务器经过检查条用该图片的是那个网址，若是不是它容许的，就不给显示，防止盗图。同过图片缓存网站https://images.weserv.nl/#qui...。

---

3 axios组件
　　　axios是一个基于Promise开发的应用组件，是为浏览器和Node.js设计开发的HTTP客户端请求组件。它封装了和HTTP相关的大量操做，在Web App中使用起来很是的方便。Vue2.0官方建议再也不使用vue-resource，转而代替的是使用axios组件进行HTTP操做开发。在使用get方法请求的过程当中没有遇到问题，可是当请求方法为post是，请求数据出错，后台获取不到数据，可是经过浏览器开发者工具能够看到是有数据传输过去了。经过在网上收集各类弄资料，axios默认是经过Request Payload的形式传送了参数，而不是咱们熟悉的form-data形式，故有之前获取form-data的方法获取不到，能够经过借助于第三方开源qs库为数据格式化。代码以下：

axios.post('http://localhost:8088/video/index.php?g=Video&m=users&a=addComment', qs.stringify({
                type: _this.type,
                video_id: _this.id,
                uid: getCookie('uid'),
                uname: getCookie('uname'),
                content: _this.commentText
              }), {headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }})
                .then((res) => {
                  if (res.data.success === true) {
                    this.$nextTick(() => {
                      _this.comment.push(res.data.response)
                      _this.commentText = ''
                    })
                  } else {
                    alert(res.data.info)
                  }
                })

备注
参考网站：

1. 猫眼数据API
2. 豆瓣电影API

---

若有任何版权问题，请及时联系本人或留言，将会在第一时间进行处理