基于H5的歐美影視劇信息檢索網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

文/何鋒麗 楊大利 游璐穎 霍艷艷

1 引言

1.1 研究背景與意義

在二十世紀(jì)七十年代以前，國人的視野僅限于國內(nèi)影視媒體，隨著時(shí)代的變遷和數(shù)字媒體的快速發(fā)展，年輕人相比于只看國產(chǎn)電視劇的老一輩人，口味更加多樣化和個(gè)性化，同時(shí)，也開始欣賞歐美的影視劇文化，但這幸事伴隨著2014年11月22日人人網(wǎng)和射手網(wǎng)宣布關(guān)停的消息再一次使歐美影視劇信息收集更加困難?，F(xiàn)在許多國人不得不在茫?！熬W(wǎng)絡(luò)之?！崩锶ふ乙恍┹^好的資源和網(wǎng)站，浪費(fèi)大量時(shí)間。

為了能夠給廣大歐美影視劇愛好者創(chuàng)建一個(gè)平臺(tái)，提供一個(gè)查看影視信息的便捷通道，并且由于歐美影視劇更新時(shí)間的不確定性，因此想要在為用戶提供信息的同時(shí)，也設(shè)計(jì)一個(gè)記錄觀劇進(jìn)度的功能給用戶帶去便利。

建立此網(wǎng)站意義在于為國內(nèi)歐美影視劇愛好者提供一個(gè)高效的影視劇信息獲取平臺(tái)，同時(shí)向用戶提供簡潔的歐美影視劇檢索，追劇進(jìn)度等，使得該網(wǎng)站為用戶創(chuàng)建一個(gè)良好的用戶體驗(yàn)。

2 相關(guān)技術(shù)介紹

該網(wǎng)站前端是基于HTML5技術(shù)建立，通過與CSS和JavaSript搭配使用完成前端部分，目的在于希望能夠跨平臺(tái)實(shí)現(xiàn)。后端使用了PHP的Codelgniter框架，數(shù)據(jù)庫采用MySQL，數(shù)據(jù)是運(yùn)用python爬蟲技術(shù)從“美劇日歷”網(wǎng)站上獲取得到。

2.1 HTML5簡介

HTML5是一種超文本語言。其發(fā)展已越來越成熟，現(xiàn)許多網(wǎng)站及移動(dòng)端都使用該技術(shù)，它取代了許多傳統(tǒng)網(wǎng)站的Flash技術(shù)，輕量且方便，并添加了許多新的技術(shù)，如畫布（canvas），視頻等。

2.2 CSS3簡介

CSS3是CSS技術(shù)的升級(jí)版本，用于控制網(wǎng)站的樣式和布局，它的新特點(diǎn)就是將其分成一系列的小模塊，利于規(guī)范的及時(shí)發(fā)表和更新，并能夠及時(shí)調(diào)整模塊的內(nèi)容，同時(shí)也加入了許多新的模塊，例如盒子模型，顏色模塊和字體模塊等。

2.3 JavaScript簡介

JavaScript是屬于網(wǎng)絡(luò)的腳本語言，被許多網(wǎng)頁用來改進(jìn)設(shè)計(jì)，驗(yàn)證表單，檢查瀏覽器，創(chuàng)建cookies等許多應(yīng)用，由EMCAScript、文檔對(duì)象模型（DOM）和瀏覽器對(duì)象模型（BOM）組成，擁有良好的跨平臺(tái)性，支持大多數(shù)瀏覽器，為許多程序員帶來便利。

2.4 Codelgniter框架簡介

CodeIgniter是一個(gè)小巧但功能強(qiáng)大的 PHP 框架，作為一個(gè)簡單而“優(yōu)雅”的工具包，它可以為開發(fā)者們建立功能完善的 Web 應(yīng)用程序。

2.5 網(wǎng)頁信息提取

網(wǎng)絡(luò)爬蟲是獲取網(wǎng)頁并提取和保存信息的自動(dòng)化程序。一般提取數(shù)據(jù)的過程為獲取網(wǎng)頁、提取信息和保存數(shù)據(jù)三個(gè)階段。通過下載web頁面，對(duì)首先獲取的頁面進(jìn)行爬行，當(dāng)通過這個(gè)頁面順著網(wǎng)頁之間的聯(lián)系，即可獲取到下個(gè)超鏈接，便能夠獲取后續(xù)的頁面，這樣便能夠抓取到網(wǎng)站的數(shù)據(jù)。

此網(wǎng)站便是從“美劇日歷”上的內(nèi)部鏈接獲取得到，無外部鏈接。

3 設(shè)計(jì)過程

3.1 前端界面設(shè)計(jì)

3.1.1 主界面設(shè)計(jì)

需顯示的信息：網(wǎng)站信息簡介。

功能：開始，當(dāng)前熱播，查找劇集，當(dāng)前熱播，個(gè)人收藏。如圖1。

3.1.2 用戶模塊設(shè)計(jì)

此模塊設(shè)計(jì)實(shí)現(xiàn)了注冊(cè)，登錄，忘記密碼，重置密碼。

3.1.3 當(dāng)前熱播模塊設(shè)計(jì)

（1）當(dāng)前熱播界面：猜你喜歡，七日更新，當(dāng)前熱播劇集，已完結(jié)劇集。顯示：推薦劇集名稱，近七日日期，當(dāng)前熱播和已完結(jié)劇集的圖片、名稱，用戶名。功能：當(dāng)前熱播，查找劇集，本日觀看，個(gè)人收藏。如圖2。

（2）劇集詳情界面：劇集詳細(xì)信息，如地區(qū)，總季度，每集更新時(shí)間等；是否看過，收藏人數(shù)，推薦劇集。功能：加入收藏，第X季，標(biāo)記看過。如圖3。

圖1

圖2

圖3

圖4

3.1.4 搜索模塊設(shè)計(jì)

如圖4所示。

3.1.5 本日更新界面顯示信息：本日更新劇集信息，日期；

功能：加入收藏，切換日期，查看某一劇詳情信息，如圖5。

圖5

3.1.6 個(gè)人收藏界面

顯示信息：收藏劇信息，觀看劇進(jìn)度條

功能：取消收藏，查看劇詳情，如圖6。

3.2 后端過程設(shè)計(jì)

本網(wǎng)站名程為美劇日歷（TVEpisodeLabel），分為主模塊、用戶模塊、當(dāng)前熱播、搜索、本日觀看、個(gè)人收藏這六大模塊。如圖7所示。

（1）主模塊：主模塊用于實(shí)現(xiàn)直接跳轉(zhuǎn)至各大模塊，可暫不進(jìn)行登錄注冊(cè)。

（2）當(dāng)前熱播模塊：當(dāng)前熱播模塊主要實(shí)現(xiàn)三個(gè)部分功能，分別是：猜你喜歡，七日更新快捷查看，正在熱播及已完結(jié)美劇的顯示。

（3）猜你喜歡：根據(jù)收藏人數(shù)排行，選出5部最具人氣的劇集推薦給用戶。

（4）七日更新快捷查看，相應(yīng)跳轉(zhuǎn)至近七日對(duì)應(yīng)日期當(dāng)天更新的劇集

（5）正在熱播：根據(jù)數(shù)據(jù)庫數(shù)據(jù)，顯示正在熱播劇的劇名和圖片。

（6）已完結(jié)：根據(jù)數(shù)據(jù)庫數(shù)據(jù)，顯示已完結(jié)的劇名和圖片。

主要功能實(shí)現(xiàn)圖表如表1所示。

3.3 數(shù)據(jù)庫設(shè)計(jì)

3.3.1 用戶表

數(shù)據(jù)庫中的用戶表包含有用戶id，用戶昵稱，手機(jī)號(hào)碼，用戶狀態(tài)，密碼哈希，客戶端令牌哈希等標(biāo)識(shí)。

3.3.2 劇表

數(shù)據(jù)庫中的劇表包含有用戶劇id，劇名，中文翻譯，劇情介紹，劇狀態(tài)，地區(qū)，電視臺(tái)，劇圖，每集長度，更新時(shí)間標(biāo)識(shí)。

3.3.3 季表

數(shù)據(jù)庫中的季度表含有劇id，季度id，第X季，每季級(jí)數(shù)的標(biāo)識(shí)。

3.3.4 劇集表episode

數(shù)據(jù)庫中的劇集表包含主鍵id，外鍵于劇id，索引se_id，集名稱，每季介紹，每集上映時(shí)間，集圖，集狀態(tài)，本季第N集的表示。

3.3.5 用戶訂閱收藏表

數(shù)據(jù)庫中的用戶訂閱收藏表包含用戶id，劇id，訂閱時(shí)間的標(biāo)識(shí)。

3.3.6 用戶標(biāo)記表

數(shù)據(jù)庫中的用戶訂閱收藏表包含用戶id，劇id，標(biāo)記時(shí)間的標(biāo)識(shí)。

E-R結(jié)構(gòu)圖如圖8所示。

3.4 數(shù)據(jù)獲取

圖6

圖7

圖8：E-R結(jié)構(gòu)圖

設(shè)計(jì)思路：通過數(shù)據(jù)表中的屬性，依次從不同的頁面中獲取聯(lián)系緊密的參數(shù)數(shù)據(jù)。由于“美劇日歷”網(wǎng)站頁面多而雜，對(duì)于在一個(gè)表中所需要的數(shù)據(jù)需要在許多不同的頁面獲取。

為了得到多而雜的參數(shù)，在Python3代碼中需運(yùn)用多個(gè)庫，以此來實(shí)現(xiàn)數(shù)據(jù)的獲取。

4 實(shí)現(xiàn)過程

4.1 后端實(shí)現(xiàn)過程

4.1.1 當(dāng)前熱播模塊實(shí)現(xiàn)

猜你喜歡實(shí)現(xiàn)：獲取劇id，在shows表中查找該??；再根據(jù)劇id，從episode表和season表獲取相應(yīng)的劇集信息，跳轉(zhuǎn)至劇集詳情界面。

表1：主要功能實(shí)現(xiàn)圖表

圖9

圖10：正則表達(dá)式

圖11：獲取數(shù)據(jù)截圖

七日推薦實(shí)現(xiàn)：根據(jù)更新時(shí)間，從episode表中選取相應(yīng)日期下已更新的劇集，跳轉(zhuǎn)至本日更新界面。

4.1.2 劇集詳情界面設(shè)計(jì)

獲取要顯示的劇id，在season表內(nèi)查找該劇的季度，顯示在頁面上，后根據(jù)season的id查找episode表內(nèi)的相應(yīng)季度的集，顯示在表內(nèi)。加入收藏功能，獲取將加入收藏的劇id，將劇id和當(dāng)前用戶id添加到表subscribe內(nèi)。標(biāo)記看過功能，獲取將標(biāo)記的集id，將集id和當(dāng)前用戶id添加到表synchron表內(nèi)。

4.1.3 查找劇集界面設(shè)計(jì)

獲取用戶輸入的查找劇名，從show表內(nèi)查找該劇名，返回劇信息。

4.1.4 本日更新界面設(shè)計(jì)

獲取當(dāng)前日期，查找episode表內(nèi)今日更新劇集的所有信息，顯示在頁面上；加入收藏功能，獲取將加入收藏的劇id，將劇id和當(dāng)前用戶id添加到表subscribe內(nèi)。

4.1.5 個(gè)人收藏界面

獲取當(dāng)前用戶id，查找subscribe表內(nèi)用戶關(guān)注的劇id信息，在episode表內(nèi)查找相應(yīng)劇id的信息，將劇信息顯示在當(dāng)前頁面。取消收藏功能，通過獲取將取消收藏的劇id和用戶id，將此信息從subscribe表中刪除。

4.2 數(shù)據(jù)獲取過程

4.2.1 獲取頁面源碼

使用urllib庫中的urlopen()方法便可得到網(wǎng)頁的源碼，以“美劇日歷”舉例：如圖9所示。

4.2.2 提取信息

提取信息的過程中，由于多個(gè)頁面參數(shù)的多樣化，因此獲取的方式也不同，在這里概述幾個(gè)常用的獲取方式。

（1）通過正則表達(dá)式獲?。簩?duì)于多個(gè)頁面url相似，獲取的數(shù)據(jù)標(biāo)簽相同來說，使用正則表達(dá)式非?？焖偾曳奖恪＿^程如圖10。

因?yàn)樵诙鄠€(gè)頁面中，獲取數(shù)據(jù)的HTML標(biāo)簽相同，通過循環(huán)便可實(shí)現(xiàn)網(wǎng)頁的遍歷。

（2）通過選擇器獲?。河捎谠S多頁面的標(biāo)簽很復(fù)雜，對(duì)于獲取數(shù)據(jù)使用正則表達(dá)式非常容易出錯(cuò)，因此在此使用解析工具BeautifulSoup中的lxmlHTML解析器，使用嵌套選擇、方法選擇器和CSS選擇器等來進(jìn)行一層層的過濾，得到需要的數(shù)據(jù)。過程如圖11。

4.2.3 保存數(shù)據(jù)

在本項(xiàng)目中，采用MySQL數(shù)據(jù)庫實(shí)現(xiàn)存儲(chǔ)數(shù)據(jù)。在Python2中，連接MySQL的庫大多使用MySQLdb，但是此庫官方不支持Python3，所以使用庫為PyMySQL。過程如圖12。

將爬取數(shù)據(jù)存放入數(shù)據(jù)庫中相對(duì)容易，較為繁瑣的在于數(shù)據(jù)的處理，從網(wǎng)頁上獲取的數(shù)據(jù)較為雜亂，放入數(shù)據(jù)庫的數(shù)據(jù)需要經(jīng)過處理得到。

5 總結(jié)

經(jīng)過幾個(gè)月的開發(fā)，該網(wǎng)站的功能已完成。通過前后端結(jié)合，實(shí)現(xiàn)以下具體的功能：

（1）設(shè)計(jì)實(shí)現(xiàn)了一個(gè)用于獲取“美劇日歷”劇集的提取器，發(fā)并能夠?qū)⑻崛〉臄?shù)據(jù)存入數(shù)據(jù)庫。

（2）設(shè)計(jì)并實(shí)現(xiàn)了能夠查看電視劇的簡介信息，可以根據(jù)電視劇受喜愛程度進(jìn)行推薦。

（3）實(shí)現(xiàn)按照不同電視劇，用戶可以根據(jù)自己看劇的進(jìn)度進(jìn)行標(biāo)記。

本文大致介紹了該網(wǎng)站的結(jié)構(gòu)與功能，網(wǎng)站雖然已搭建完成，但還存在著許多不足，后端建設(shè)不夠全面，容錯(cuò)性不足，功能還需要優(yōu)化。希望之后能更加完善。