基于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）实现按照不同电视剧，用户可以根据自己看剧的进度进行标记。

本文大致介绍了该网站的结构与功能，网站虽然已搭建完成，但还存在着许多不足，后端建设不够全面，容错性不足，功能还需要优化。希望之后能更加完善。