基于H5的歐美影視劇信息檢索網站的設計與實現

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

1 引言

1.1 研究背景與意義

在二十世紀七十年代以前，國人的視野僅限于國內影視媒體，隨著時代的變遷和數字媒體的快速發展，年輕人相比于只看國產電視劇的老一輩人，口味更加多樣化和個性化，同時，也開始欣賞歐美的影視劇文化，但這幸事伴隨著2014年11月22日人人網和射手網宣布關停的消息再一次使歐美影視劇信息收集更加困難。現在許多國人不得不在茫茫“網絡之海”里去尋找一些較好的資源和網站，浪費大量時間。

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

建立此網站意義在于為國內歐美影視劇愛好者提供一個高效的影視劇信息獲取平臺，同時向用戶提供簡潔的歐美影視劇檢索，追劇進度等，使得該網站為用戶創建一個良好的用戶體驗。

2 相關技術介紹

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

2.1 HTML5簡介

HTML5是一種超文本語言。其發展已越來越成熟，現許多網站及移動端都使用該技術，它取代了許多傳統網站的Flash技術，輕量且方便，并添加了許多新的技術，如畫布（canvas），視頻等。

2.2 CSS3簡介

CSS3是CSS技術的升級版本，用于控制網站的樣式和布局，它的新特點就是將其分成一系列的小模塊，利于規范的及時發表和更新，并能夠及時調整模塊的內容，同時也加入了許多新的模塊，例如盒子模型，顏色模塊和字體模塊等。

2.3 JavaScript簡介

JavaScript是屬于網絡的腳本語言，被許多網頁用來改進設計，驗證表單，檢查瀏覽器，創建cookies等許多應用，由EMCAScript、文檔對象模型（DOM）和瀏覽器對象模型（BOM）組成，擁有良好的跨平臺性，支持大多數瀏覽器，為許多程序員帶來便利。

2.4 Codelgniter框架簡介

CodeIgniter是一個小巧但功能強大的 PHP 框架，作為一個簡單而“優雅”的工具包，它可以為開發者們建立功能完善的 Web 應用程序。

2.5 網頁信息提取

網絡爬蟲是獲取網頁并提取和保存信息的自動化程序。一般提取數據的過程為獲取網頁、提取信息和保存數據三個階段。通過下載web頁面，對首先獲取的頁面進行爬行，當通過這個頁面順著網頁之間的聯系，即可獲取到下個超鏈接，便能夠獲取后續的頁面，這樣便能夠抓取到網站的數據。

此網站便是從“美劇日歷”上的內部鏈接獲取得到，無外部鏈接。

3 設計過程

3.1 前端界面設計

3.1.1 主界面設計

需顯示的信息：網站信息簡介。

功能：開始，當前熱播，查找劇集，當前熱播，個人收藏。如圖1。

3.1.2 用戶模塊設計

此模塊設計實現了注冊，登錄，忘記密碼，重置密碼。

3.1.3 當前熱播模塊設計

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

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

圖1

圖2

圖3

圖4

3.1.4 搜索模塊設計

如圖4所示。

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

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

圖5

3.1.6 個人收藏界面

顯示信息：收藏劇信息，觀看劇進度條

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

3.2 后端過程設計

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

（1）主模塊：主模塊用于實現直接跳轉至各大模塊，可暫不進行登錄注冊。

（2）當前熱播模塊：當前熱播模塊主要實現三個部分功能，分別是：猜你喜歡，七日更新快捷查看，正在熱播及已完結美劇的顯示。

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

（4）七日更新快捷查看，相應跳轉至近七日對應日期當天更新的劇集

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

（6）已完結：根據數據庫數據，顯示已完結的劇名和圖片。

主要功能實現圖表如表1所示。

3.3 數據庫設計

3.3.1 用戶表

數據庫中的用戶表包含有用戶id，用戶昵稱，手機號碼，用戶狀態，密碼哈希，客戶端令牌哈希等標識。

3.3.2 劇表

數據庫中的劇表包含有用戶劇id，劇名，中文翻譯，劇情介紹，劇狀態，地區，電視臺，劇圖，每集長度，更新時間標識。

3.3.3 季表

數據庫中的季度表含有劇id，季度id，第X季，每季級數的標識。

3.3.4 劇集表episode

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

3.3.5 用戶訂閱收藏表

數據庫中的用戶訂閱收藏表包含用戶id，劇id，訂閱時間的標識。

3.3.6 用戶標記表

數據庫中的用戶訂閱收藏表包含用戶id，劇id，標記時間的標識。

E-R結構圖如圖8所示。

3.4 數據獲取

圖6

圖7

圖8：E-R結構圖

設計思路：通過數據表中的屬性，依次從不同的頁面中獲取聯系緊密的參數數據。由于“美劇日歷”網站頁面多而雜，對于在一個表中所需要的數據需要在許多不同的頁面獲取。

為了得到多而雜的參數，在Python3代碼中需運用多個庫，以此來實現數據的獲取。

4 實現過程

4.1 后端實現過程

4.1.1 當前熱播模塊實現

猜你喜歡實現：獲取劇id，在shows表中查找該劇；再根據劇id，從episode表和season表獲取相應的劇集信息，跳轉至劇集詳情界面。

表1：主要功能實現圖表

圖9

圖10：正則表達式

圖11：獲取數據截圖

七日推薦實現：根據更新時間，從episode表中選取相應日期下已更新的劇集，跳轉至本日更新界面。

4.1.2 劇集詳情界面設計

獲取要顯示的劇id，在season表內查找該劇的季度，顯示在頁面上，后根據season的id查找episode表內的相應季度的集，顯示在表內。加入收藏功能，獲取將加入收藏的劇id，將劇id和當前用戶id添加到表subscribe內。標記看過功能，獲取將標記的集id，將集id和當前用戶id添加到表synchron表內。

4.1.3 查找劇集界面設計

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

4.1.4 本日更新界面設計

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

4.1.5 個人收藏界面

獲取當前用戶id，查找subscribe表內用戶關注的劇id信息，在episode表內查找相應劇id的信息，將劇信息顯示在當前頁面。取消收藏功能，通過獲取將取消收藏的劇id和用戶id，將此信息從subscribe表中刪除。

4.2 數據獲取過程

4.2.1 獲取頁面源碼

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

4.2.2 提取信息

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

（1）通過正則表達式獲取：對于多個頁面url相似，獲取的數據標簽相同來說，使用正則表達式非常快速且方便。過程如圖10。

因為在多個頁面中，獲取數據的HTML標簽相同，通過循環便可實現網頁的遍歷。

（2）通過選擇器獲取：由于許多頁面的標簽很復雜，對于獲取數據使用正則表達式非常容易出錯，因此在此使用解析工具BeautifulSoup中的lxmlHTML解析器，使用嵌套選擇、方法選擇器和CSS選擇器等來進行一層層的過濾，得到需要的數據。過程如圖11。

4.2.3 保存數據

在本項目中，采用MySQL數據庫實現存儲數據。在Python2中，連接MySQL的庫大多使用MySQLdb，但是此庫官方不支持Python3，所以使用庫為PyMySQL。過程如圖12。

將爬取數據存放入數據庫中相對容易，較為繁瑣的在于數據的處理，從網頁上獲取的數據較為雜亂，放入數據庫的數據需要經過處理得到。

5 總結

經過幾個月的開發，該網站的功能已完成。通過前后端結合，實現以下具體的功能：

（1）設計實現了一個用于獲取“美劇日歷”劇集的提取器，發并能夠將提取的數據存入數據庫。

（2）設計并實現了能夠查看電視劇的簡介信息，可以根據電視劇受喜愛程度進行推薦。

（3）實現按照不同電視劇，用戶可以根據自己看劇的進度進行標記。

本文大致介紹了該網站的結構與功能，網站雖然已搭建完成，但還存在著許多不足，后端建設不夠全面，容錯性不足，功能還需要優化。希望之后能更加完善。