資訊專欄INFORMATION COLUMN
摘要：界面如下圖電影詳情展示此功能是提供電影詳情的界面，包括演員上映時間導員劇情簡介宣傳視頻宣傳視頻由于豆瓣官方的限制無法獲取，所以只有正在熱映板塊從貓眼獲取的電影信息才有。
Vue電影信息影評網(wǎng)站
此網(wǎng)站是我的畢業(yè)設(shè)計，題目是“基于HTML5的電影信息匯總弄網(wǎng)站”，由于最近在看Vue.js,所以就想用Vue.js來構(gòu)建一個前端網(wǎng)站，這里code就不大篇幅的寫了，主要講一下網(wǎng)站的功能和所用到的技術(shù)棧，大家如果有問題的話可以去 GitHub代碼網(wǎng)址上查看或者在下方留言。
**技術(shù)棧**： Vue.js+ThinkPHP+MySql+Vue-router+Node.js
網(wǎng)站主要功能分為：
電影展示
主要是從第三方平臺拉取電影信息，然后進行圖片和電影名字展示還有輪播展示。展示分為正在熱映、北美票房榜、Top25等三個板塊，其中正在熱映的數(shù)據(jù)來自貓眼，其余的均來自豆瓣電影。界面如下圖：
電影詳情展示
此功能是提供電影詳情的界面，包括演員、上映時間、導員、劇情簡介、宣傳視頻（宣傳視頻由于豆瓣官方的API限制無法獲取，所以只有正在熱映板塊-從貓眼獲取的電影信息才有）。界面如下圖：
在線購票（基于貓眼第三方平臺）
在線購票是基于第三方平臺貓眼實現(xiàn)的，通過對應的電影id實現(xiàn)在線購票。界面如下圖：
（僅限于最近正在熱映的電影，其它的電影大家可以在網(wǎng)上觀看）
在線評論
開發(fā)這個版塊的目的是為了給電影愛好者提供一個互相交流的平臺，從而也可以增加用戶對網(wǎng)站的粘性。界面如下圖：
遇到的問題及解決方法
此網(wǎng)站的北美票房榜和top25的數(shù)據(jù)都是來自于豆瓣開發(fā)者開放平臺提供給開發(fā)者的一些API，但是這些API并沒有完全交給開發(fā)者，而是對其中的一些API做了限制
1 數(shù)據(jù)請求權(quán)限
在API中指出，豆瓣將用戶的使用權(quán)限分成了3類，分別是公開、高級、商務，對于個人開發(fā)只能使用公開，公開的使用條件是：所有開發(fā)者均可申請，審核用過。限定40次請求/分鐘。其實這個請求數(shù)據(jù)正常情況下是可以使用的。但是在開發(fā)過程中，發(fā)現(xiàn)當請求次數(shù)超過這個次數(shù)后，豆瓣會將開發(fā)者的ip封鎖，導致無法請求，為了避免這種情況發(fā)生，本網(wǎng)站使用了HTML5新提供的本地存儲數(shù)據(jù)方法sessionStorage。在首次打開網(wǎng)站后，將對應模塊的數(shù)據(jù)信息存儲的sessionStorage中，當本地存儲中有對應的數(shù)據(jù)，則從本地存儲讀取，反之訪問對應的API獲取數(shù)據(jù)。
2 圖片資源加載
在開發(fā)過程中，我發(fā)現(xiàn)從API中獲取的圖片資源無法正常在網(wǎng)站頁面中進行渲染。通過百度發(fā)現(xiàn)，豆瓣在圖片資源上做了防盜鏈，圖片服務器通過檢查條用該圖片的是那個網(wǎng)址，如果不是它允許的，就不給顯示，防止盜圖。同過圖片緩存網(wǎng)站https://images.weserv.nl/#qui...。
3 axios組件
axios是一個基于Promise開發(fā)的應用組件，是為瀏覽器和Node.js設(shè)計開發(fā)的HTTP客戶端請求組件。它封裝了和HTTP相關(guān)的大量操作，在Web App中使用起來非常的方便。Vue2.0官方建議不再使用vue-resource，轉(zhuǎn)而代替的是使用axios組件進行HTTP操作開發(fā)。在使用get方法請求的過程中沒有遇到問題，但是當請求方法為post是，請求數(shù)據(jù)出錯，后臺獲取不到數(shù)據(jù)，但是通過瀏覽器開發(fā)者工具可以看到是有數(shù)據(jù)傳輸過去了。通過在網(wǎng)上收集各種弄資料，axios默認是通過Request Payload的形式傳送了參數(shù)，而不是我們熟悉的form-data形式，故有以前獲取form-data的方法獲取不到，可以通過借助于第三方開源qs庫為數(shù)據(jù)格式化。代碼如下：
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)
}
})
備注
參考網(wǎng)站：
貓眼數(shù)據(jù)API
豆瓣電影API
如有任何版權(quán)問題，請及時聯(lián)系本人或留言，將會在第一時間進行處理
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95496.html
摘要：界面如下圖電影詳情展示此功能是提供電影詳情的界面，包括演員上映時間導員劇情簡介宣傳視頻宣傳視頻由于豆瓣官方的限制無法獲取，所以只有正在熱映板塊從貓眼獲取的電影信息才有。 Vue電影信息影評網(wǎng)站 此網(wǎng)站是我的畢業(yè)設(shè)計，題目是基于HTML5的電影信息匯總弄網(wǎng)站，由于最近在看Vue.js,所以就想用Vue.js來構(gòu)建一個前端網(wǎng)站，這里code就不大篇幅的寫了，主要講一下網(wǎng)站的功能和所用到的技...
摘要：前言之前一直在學習原生的，但是無奈功力太淺，學了很長時候也只能寫一些簡單的小，知道遇見了，一切都變了，他的雙向綁定和組件化思想讓我迅速的愛上了他，可是光學不練是沒有什么成就感的，想著豆瓣提供了免費的接口，不如就利用這個接口做一個電影網(wǎng)站，想 前言：之前一直在學習原生的javascript，但是無奈功力太淺，學了很長時候也只能寫一些簡單的小demo，知道遇見了vue，一切都變了，他的雙向...
摘要：作者周蘿卜鏈接長津湖貓眼影評歡迎關(guān)注，專注數(shù)據(jù)分析數(shù)據(jù)挖掘好玩工具對于這個十一黃金周的電影市場，絕對是長津湖的天下，短短幾天，票房就已經(jīng)突破億，大有奮起直追戰(zhàn)狼的盡頭。 ...
摘要：另外由于豆瓣上一些電影評分數(shù)量太少而不顯示，所以這里的電影數(shù)量會和票房數(shù)量有所差異。月度票房將類型片的票房按月劃分，得到了這張圖。 去年末的時候，我招收了新的 實訓生 。本文是其中一位 @齊大圣 同學在實訓兩個月時完成的項目案例。（碼上行動群里同學應該都看過這個名字，現(xiàn)在也是助教之一。）項目最初的想法是， 從互聯(lián)網(wǎng)上的公開信息中采集2018年在國內(nèi)上映電影的票房、評分、類型、演員等信息...
閱讀 2050·2023-04-26 02:23
閱讀 1792·2021-09-03 10:30
閱讀 1355·2019-08-30 15:43
閱讀 1195·2019-08-29 16:29
閱讀 539·2019-08-29 12:28
閱讀 2338·2019-08-26 12:13
閱讀 2189·2019-08-26 12:01
閱讀 2404·2019-08-26 11:56
