Information Vue cinema critic (watercress, cat's eye)

Vue movie information movie review site

This site is my graduation project, entitled "HTML5 summary based movie information site get", due to look at the recent Vue.js, so wanted to use Vue.js to build a front-end website, where code is not written at great length , and talk about the main features of the site and the use of the technology stack, if you have a problem, then you can go to GitHub Code URL to view or leave a comment below on.

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

The main function of the site is divided into:

Movie showing
is mainly pulling movie information from third-party platform, and then show pictures and movies as well as the name of the carousel show. Show into being aggressively, the North American box office chart, Top25 and other three sections, which are aggressively data from the cat's eye , and the rest are from IMDb . Interface as follows:
image description

Movie show details

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

Movie Details

Online booking (based on cat's eye third-party platforms)

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

Online ticketing

（仅限于最近正在热映的电影，其它的电影大家可以在网上观看）

Online Reviews

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

Movie Reviews

Problems encountered and solutions

此网站的北美票房榜和top25的数据都是来自于豆瓣开发者开放平台提供给开发者的一些API，但是这些API并没有完全交给开发者，而是对其中的一些API做了限制

1 data request permission

　　In the API pointed out, watercress user's permissions into three categories, namely open, senior, business, personal development can only be used for open, public use provided that: all developers can apply audit used. 40 defines a request / min. In fact, under normal circumstances the requested data can be used. But in the development process, we found that when the number of requests exceeds the number of times, watercress will developers ip blocked, making it impossible request, in order to avoid this from happening, the site uses to store data locally method sessionStorage HTML5 new offer. After the first time you open the site, the corresponding data information storage module sessionStorage, when the local store has a corresponding data read from the local storage, whereas the corresponding API to get access to data.

2 loading image resource
　　　in the development process, I found the pictures taken from the API resources can not be rendered properly on the site pages. Found through Baidu, watercress in the picture resources to do the security chain, image server by checking the bar with the URL of the picture is, if it is not allowed, not to show, to prevent Pirates of the map. Picture Cache website with over HTTPS: //images.weserv.nl/#qui ... .

3 axios components
　　　axios Promise is a component-based application development, for the design and development of the browser and the Node.js HTTP client request component. It encapsulates the HTTP related operations and large, in the Web App use very convenient. Vue2.0 official is deprecated vue-resource, instead of instead of using axios components HTTP operations development. No problems were encountered in the course of using the get method of the request, but when the request method is to post, request data errors, data can not get backstage, but through the browser developer tool you can see there is a data transfer over. Get by collecting various information on the Internet, axios default parameters are transmitted in the form of Request Payload, rather than the familiar form-data form, it has previously acquired form-data acquisition methods can not, by means of a third party qs open source libraries for data formatting. code show as below:

 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)
                  }
                })

Note
Reference website:

If you have any copyright issues, please contact me or leave a message, it will be processed the first time

Vue movie information movie review site

Guess you like