国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue 電影信息影評(píng)（豆瓣，貓眼）

hzc / 1200人閱讀

摘要：界面如下圖電影詳情展示此功能是提供電影詳情的界面，包括演員上映時(shí)間導(dǎo)員劇情簡(jiǎn)介宣傳視頻宣傳視頻由于豆瓣官方的限制無(wú)法獲取，所以只有正在熱映板塊從貓眼獲取的電影信息才有。

Vue電影信息影評(píng)網(wǎng)站

此網(wǎng)站是我的畢業(yè)設(shè)計(jì)，題目是“基于HTML5的電影信息匯總弄網(wǎng)站”，由于最近在看Vue.js,所以就想用Vue.js來(lái)構(gòu)建一個(gè)前端網(wǎng)站，這里code就不大篇幅的寫了，主要講一下網(wǎng)站的功能和所用到的技術(shù)棧，大家如果有問(wèn)題的話可以去 GitHub代碼網(wǎng)址上查看或者在下方留言。

**技術(shù)棧**： Vue.js+ThinkPHP+MySql+Vue-router+Node.js

網(wǎng)站主要功能分為：

電影展示
主要是從第三方平臺(tái)拉取電影信息，然后進(jìn)行圖片和電影名字展示還有輪播展示。展示分為正在熱映、北美票房榜、Top25等三個(gè)板塊，其中正在熱映的數(shù)據(jù)來(lái)自貓眼，其余的均來(lái)自豆瓣電影。界面如下圖：

電影詳情展示

此功能是提供電影詳情的界面，包括演員、上映時(shí)間、導(dǎo)員、劇情簡(jiǎn)介、宣傳視頻（宣傳視頻由于豆瓣官方的API限制無(wú)法獲取，所以只有正在熱映板塊-從貓眼獲取的電影信息才有）。界面如下圖：

在線購(gòu)票（基于貓眼第三方平臺(tái)）

在線購(gòu)票是基于第三方平臺(tái)貓眼實(shí)現(xiàn)的，通過(guò)對(duì)應(yīng)的電影id實(shí)現(xiàn)在線購(gòu)票。界面如下圖：

（僅限于最近正在熱映的電影，其它的電影大家可以在網(wǎng)上觀看）

在線評(píng)論

開(kāi)發(fā)這個(gè)版塊的目的是為了給電影愛(ài)好者提供一個(gè)互相交流的平臺(tái)，從而也可以增加用戶對(duì)網(wǎng)站的粘性。界面如下圖：

遇到的問(wèn)題及解決方法

此網(wǎng)站的北美票房榜和top25的數(shù)據(jù)都是來(lái)自于豆瓣開(kāi)發(fā)者開(kāi)放平臺(tái)提供給開(kāi)發(fā)者的一些API，但是這些API并沒(méi)有完全交給開(kāi)發(fā)者，而是對(duì)其中的一些API做了限制

1 數(shù)據(jù)請(qǐng)求權(quán)限

　　在API中指出，豆瓣將用戶的使用權(quán)限分成了3類，分別是公開(kāi)、高級(jí)、商務(wù)，對(duì)于個(gè)人開(kāi)發(fā)只能使用公開(kāi)，公開(kāi)的使用條件是：所有開(kāi)發(fā)者均可申請(qǐng)，審核用過(guò)。限定40次請(qǐng)求/分鐘。其實(shí)這個(gè)請(qǐng)求數(shù)據(jù)正常情況下是可以使用的。但是在開(kāi)發(fā)過(guò)程中，發(fā)現(xiàn)當(dāng)請(qǐng)求次數(shù)超過(guò)這個(gè)次數(shù)后，豆瓣會(huì)將開(kāi)發(fā)者的ip封鎖，導(dǎo)致無(wú)法請(qǐng)求，為了避免這種情況發(fā)生，本網(wǎng)站使用了HTML5新提供的本地存儲(chǔ)數(shù)據(jù)方法sessionStorage。在首次打開(kāi)網(wǎng)站后，將對(duì)應(yīng)模塊的數(shù)據(jù)信息存儲(chǔ)的sessionStorage中，當(dāng)本地存儲(chǔ)中有對(duì)應(yīng)的數(shù)據(jù)，則從本地存儲(chǔ)讀取，反之訪問(wèn)對(duì)應(yīng)的API獲取數(shù)據(jù)。

2 圖片資源加載
　　　在開(kāi)發(fā)過(guò)程中，我發(fā)現(xiàn)從API中獲取的圖片資源無(wú)法正常在網(wǎng)站頁(yè)面中進(jìn)行渲染。通過(guò)百度發(fā)現(xiàn)，豆瓣在圖片資源上做了防盜鏈，圖片服務(wù)器通過(guò)檢查條用該圖片的是那個(gè)網(wǎng)址，如果不是它允許的，就不給顯示，防止盜圖。同過(guò)圖片緩存網(wǎng)站https://images.weserv.nl/#qui...。

3 axios組件
　　　axios是一個(gè)基于Promise開(kāi)發(fā)的應(yīng)用組件，是為瀏覽器和Node.js設(shè)計(jì)開(kāi)發(fā)的HTTP客戶端請(qǐng)求組件。它封裝了和HTTP相關(guān)的大量操作，在Web App中使用起來(lái)非常的方便。Vue2.0官方建議不再使用vue-resource，轉(zhuǎn)而代替的是使用axios組件進(jìn)行HTTP操作開(kāi)發(fā)。在使用get方法請(qǐng)求的過(guò)程中沒(méi)有遇到問(wèn)題，但是當(dāng)請(qǐng)求方法為post是，請(qǐng)求數(shù)據(jù)出錯(cuò)，后臺(tái)獲取不到數(shù)據(jù)，但是通過(guò)瀏覽器開(kāi)發(fā)者工具可以看到是有數(shù)據(jù)傳輸過(guò)去了。通過(guò)在網(wǎng)上收集各種弄資料，axios默認(rèn)是通過(guò)Request Payload的形式傳送了參數(shù)，而不是我們熟悉的form-data形式，故有以前獲取form-data的方法獲取不到，可以通過(guò)借助于第三方開(kāi)源qs庫(kù)為數(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)問(wèn)題，請(qǐng)及時(shí)聯(lián)系本人或留言，將會(huì)在第一時(shí)間進(jìn)行處理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54546.html

相關(guān)文章

  • Vue 電影信息影評(píng)（豆瓣，貓眼）

    摘要：界面如下圖電影詳情展示此功能是提供電影詳情的界面，包括演員上映時(shí)間導(dǎo)員劇情簡(jiǎn)介宣傳視頻宣傳視頻由于豆瓣官方的限制無(wú)法獲取，所以只有正在熱映板塊從貓眼獲取的電影信息才有。 Vue電影信息影評(píng)網(wǎng)站 此網(wǎng)站是我的畢業(yè)設(shè)計(jì)，題目是基于HTML5的電影信息匯總弄網(wǎng)站，由于最近在看Vue.js,所以就想用Vue.js來(lái)構(gòu)建一個(gè)前端網(wǎng)站，這里code就不大篇幅的寫了，主要講一下網(wǎng)站的功能和所用到的技...

    Nekron 評(píng)論0 收藏0

  • 用vue開(kāi)發(fā)一個(gè)貓眼電影web app

    摘要：前言之前一直在學(xué)習(xí)原生的，但是無(wú)奈功力太淺，學(xué)了很長(zhǎng)時(shí)候也只能寫一些簡(jiǎn)單的小，知道遇見(jiàn)了，一切都變了，他的雙向綁定和組件化思想讓我迅速的愛(ài)上了他，可是光學(xué)不練是沒(méi)有什么成就感的，想著豆瓣提供了免費(fèi)的接口，不如就利用這個(gè)接口做一個(gè)電影網(wǎng)站，想 前言：之前一直在學(xué)習(xí)原生的javascript，但是無(wú)奈功力太淺，學(xué)了很長(zhǎng)時(shí)候也只能寫一些簡(jiǎn)單的小demo，知道遇見(jiàn)了vue，一切都變了，他的雙向...

    habren 評(píng)論0 收藏0

  • 實(shí)戰(zhàn)！《長(zhǎng)津湖》為什么這么火爆？我用 Python 來(lái)分析貓眼影評(píng)

    摘要：作者周蘿卜鏈接長(zhǎng)津湖貓眼影評(píng)歡迎關(guān)注，專注數(shù)據(jù)分析數(shù)據(jù)挖掘好玩工具對(duì)于這個(gè)十一黃金周的電影市場(chǎng)，絕對(duì)是長(zhǎng)津湖的天下，短短幾天，票房就已經(jīng)突破億，大有奮起直追戰(zhàn)狼的盡頭。 ...

    lijy91 評(píng)論0 收藏0

  • 2018電影票房分析-誰(shuí)才是票房之王

    摘要：另外由于豆瓣上一些電影評(píng)分?jǐn)?shù)量太少而不顯示，所以這里的電影數(shù)量會(huì)和票房數(shù)量有所差異。月度票房將類型片的票房按月劃分，得到了這張圖。 去年末的時(shí)候，我招收了新的 實(shí)訓(xùn)生 。本文是其中一位 @齊大圣 同學(xué)在實(shí)訓(xùn)兩個(gè)月時(shí)完成的項(xiàng)目案例。（碼上行動(dòng)群里同學(xué)應(yīng)該都看過(guò)這個(gè)名字，現(xiàn)在也是助教之一。）項(xiàng)目最初的想法是， 從互聯(lián)網(wǎng)上的公開(kāi)信息中采集2018年在國(guó)內(nèi)上映電影的票房、評(píng)分、類型、演員等信息...

    stormjun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<