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

---

若有任何版權問題，請及時聯繫本人或留言，將會在第一時間進行處理