Vue电影资讯影评网站这个网站是我的毕业设计，题目是《基于HTML5的电影资讯汇总网站》，由于最近在看Vue.js，所以想使用它Vue.js用于构建前端网站。这里的代码就不写大篇幅了。主要讲网站的功能和使用的技术栈。有问题可以去GitHub代码网站查看或者在下方留言。**技术栈**：Vue.js+ThinkPHP+MySql+Vue-router+Node.js网站主要功能分为：电影展示主要是从第三方平台拉取电影信息，然后展示图片和电影名称和轮播显示。展示分为三个部分：当前放映、北美票房榜和Top25。其中，当前数据来自猫眼，其余来自豆瓣电影。界面如下：电影详情展示该功能是提供电影详情的界面，包括演员、上映时间、导演、剧情介绍、宣传片（宣传片由于豆瓣官方API限制无法获取，所以只提供热门的showsection-from仅猫眼获取的电影资料）。接口如下：在线购票（基于猫眼第三方平台）基于猫眼第三方平台实现在线购票，通过对应的电影id实现在线购票。界面如下：（仅限近期正在上映的电影，其他电影可在线观看）开发此版块在线评论的目的是为电影爱好者提供一个相互交流的平台，所以以增加用户对网站的兴趣。粘性。界面如下图所示：遇到的问题及解决方法本站北美票房榜和top25数据来源于豆瓣开发者开放平台提供给开发者的部分API，但这些API并没有完全交给开发者,和是对部分API进行限制1.数据请求权限 在API中指出，豆瓣将用户权限分为三类，即public、advanced、business。对于个人开发，只能使用public和public的。使用条件为：所有开发者均可申请，审核已使用。限制40个请求/分钟。其实这个请求数据在正常情况下是可以使用的。但是在开发过程中发现，当请求次数超过这个次数时，豆瓣会屏蔽开发者的ip，导致无法请求。为了避免这种情况，本网站使用了HTML5提供的一种新的本地存储数据方式sessionStorage。首次打开网站后，将相应模块的数据信息存储在sessionStorage中。如果本地存储中有相应的数据，则从本地存储中读取，否则访问相应的API获取数据。2图片资源加载 在开发过程中，发现通过API获取的图片资源无法在网站页面正常渲染。百度了一下发现豆瓣有图片资源防盗链。图像服务器检查哪个URL用于图像。如果不允许，则不会显示，以防止图像盗用。浏览图像缓存网站https://images.weserv.nl/#qui...。3axios组件 axios是基于Promise开发的应用组件。是为浏览器和Node.js设计开发的HTTP客户端请求组件。它封装了大量与HTTP相关的操作，在WebApp中使用起来非常方便。Vue2.0官方建议不要使用vue-resource，而是使用axios组件进行HTTP操作开发。在使用get方法请求的过程中没有问题，但是当请求方法是post的时候，请求的数据是错误的，后台获取不到数据，但是通过浏览器开发者工具可以看到有数据传输。axios通过收集网上的各种数据，默认以RequestPayload的形式传递参数，而不是我们熟悉的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)}})备注参考网址：猫眼数据API豆瓣电影API如有版权问题，请及时联系我或留言，我们会处理尽快地
