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)
}
})
備註
參考網站：
若有任何版權題目，請實時聯絡本人或留言，將會在第一時候舉行處置懲罰
