基于HTML5的娱乐网站的设计与实现

1、编号毕业设计 （论文 ）基于 HTML5HTML5 的娱乐网站的设计与实现Design and Realization of Entertainment Website Based on HTML5学 院 名 称电子与信息工程学院专 业 名 称计算机科学与技术学 生 姓 名修朋飞学号130401016指 导 教 师李 晗 讲 师2017 年 6 月 25 日摘要在 Internet 飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要 渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们的政治、经济、生活等 各个方面发挥着重要的作用。因此网站建设在 Internet 应用上的地位

2、显得格外重要，尤 其娱乐网站已成为企业单位信息化建设中的重要组成部分。娱乐网站是以 HTML5 为基础， Hbuilder 为开发工具，后台使用 PHP脚本语言，数 据库采用 MySQL ，实现了开心一刻、天气预报、实时新闻、百思不得姐、智能机器人、 简易 blog、在线音乐等功能。网站页面采用响应式布局以适应不同分辨率的设备，同时 使用了 bootstrap 框架，使得界面更加美观。请求数据则使用 Ajax 异步刷新提高了用户 体验。娱乐网站部分数据采用 API Store 接口数据，不仅提高了网站的性能而且节约了整个网站采用动静态效果结合，并且使用版块分界，减少冗杂的栏目与小版块，使 整个

3、网站简洁、清新、又不失活泼。为提高用户体验，对首页运用有关动漫的 Canvas 动画，并且用纯色作为背景。用户可根据自己的喜好选择不同颜色的皮肤样式。关键词：娱乐网站；浏览器 / /服务器模式； MySQLMySQLAbstractAbstractToday, with the rapid development of Internet, Internet has become an important channel for people to acquire, issue and transmit information at a fast speed, which is influenc

4、ing mankinds activity in an unprecedented impact force. Internet plays a vital role in many aspects such as politics, economy and life and so on. Thus, status of website construction is extremely significant in the application of Internet, especially entertainment website has become an inseparable p

5、art of enterprise information construction.Entertainment website regards HTML5 as a basis, Hbuilder as a development tool, whos e daemonic application adopts PHP JavaScript and MySQL is adopted in data base, which rea lizes some functions such as joyful moment, weather forecast, news feeds, bird lov

6、e sheep, sm art robot, simple blog and online music,etc. The site page uses a responsive layout to accomm odate different resolution devices, and uses the bootstrap framework to make the interface mo re beautiful. Requirement data utilize Ajax, which improves user experience. Some data of ent ertain

7、ment website uses API Store, which not only boosts the performance of website, but als o saves rate of flow.The whole website combines dynamics with statics and uses form as a dividing line in order to reduce miscellaneous column and small forum and make the whole website clean, fresh and active. Ca

8、nvas cartoon is adopted in the front page against the background of purity so as to enhance user experience. The users can choose skin style with different color according to individual preference.KeyKey words:words: EntertainmentEntertainment website;website; B/SB/S mode;mode; MySQLMySQL目录摘 要 .I.Ab

9、stractAbstract . II第 1 章 绪论 . 11.1网站背景 . 11.2网站设计的意义 . 11.3网站达到的目标 . 1第 2 章 需求分析 . 32.1需求分析 . 32.2数据字典 . 3第 3 章 总体设计 . 63.1网站模块设计 . 63.2网站功能模块图 . 7第 4 章 数据库设计 . 84.1数据库理论基础 . 84.2数据库设计 . 94.3逻辑设计 . 12第 5 章 详细设计与编码 . 155.1前台首页设计 . 155.1.1前台首页概述 . 155.1.2前台首页的实现 . 155.2开心一刻模块设计 . 175.2.1开心一刻模块概述 . 175

10、.2.2开心一刻的实现 . 175.3实时新闻模块设计 . 205.3.1实时新闻模块概述 . 205.3.2实时新闻的实现 . 205.4智能机器人模块设计 . 225.4.1智能机器人模块概述 . 225.4.2智能机器人的实现 . 225.5百思不得姐模块设计 . 235.5.1百思不得姐模块概述 . 235.5.2百思不得姐的实现 . 235.6星座配对模块设计 . 255.6.1星座配对模块概述 . 255.6.2星座配对的实现 . 255.7简易 blog模块设计 . 265.7.1简易 blog 模块概述 . 265.7.2简易 blog 的实现 . 265.8在线音乐模块的设计

11、 . 295.8.1在线音乐模块的概述 . 295.8.2在新音乐的实现 . 295.9 后台界面设计 . 345.9.1后台首页概述 . 345.9.2后台首页的实现 . 34第 6 章 网站的调试与测试 . 366.1网站调试与测试说明 . 366.2网站测试方法 . 366.3网站测试类型 . 366.4调试过程及调试结果分析 . 376.4.1登陆功能的测试 . 376.4.2 文章发表功能的测试 . 38第 7 章 总结与展望 . 40参考文献 . 41致 谢. 42附 录 . 43附 录 . 52第 1 章 绪论1.1网站背景 当前，随着计算机技术与通信技术的发展，网络的规模也逐渐

12、增大。网络的元素也 随之而不断增加。有的利用其进行进行通信，有的利用其作为商业用途，在网络上进行 出售、收购、宣传等用途。从而使得网络越来越成为现今社会上必不可少的元素，而网 站就是这个网络的一个很大的元素。所谓网站（Website），就是指在网际网路（因特网）上，根据一定的规则，使用 HTML 等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具， 就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网 站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自 己需要的资讯（信息）或者享受网路服务 1。1.2网站设计的意义HTM

13、L 作为一种样式语言，随着 Internet 上信息量的增多和交互性的加强使 HTML 显得越来越难以胜任的情况之下，在 HTML 编程语言高度发展的形式下，我们开始了 对动态网站网站的开发。动态网站又将娱乐网站再提升一个档次，动态娱乐网站能够实 时更新数据库内容，让用户时刻能够看到最新的内容，这让娱乐网站的实现更加具有现 实意义了。用户可以免费在网站发表问题进行交流、玩游戏、看新闻、读笑话等，也可以在线 听音乐，对喜欢的音乐可以收藏、自定也皮肤样式，以便其他有相同爱好的用户可以更 便捷的找到排名最高的音乐，同时增加了用户体验。作为一个供众多用户免费浏览的网站， 并不是做亏本的生意， 随着大量

14、网友的参与， 以及点击率的增加，可以招商进行广告位的出售，通过在网页上加载各个公司的广告来 维持网站运营所需的资金， 从而获得利益。而广告商之所以会在本网站进行广告的投放， 就取决于本网站是否具有较大数量的会员、用户，以及较高的点击率。而要想拥有这些 吸引广告投资商的资本，就要通过对用户增加较多的权限来实现。所以，充分考虑到这 一点，使网站的建立更具有现实意义 2 。1.3网站达到的目标娱乐网站属于小型网站，在实施后，达到一下目标：（1）网站具有多样性。其中包括：新闻模块、开心一刻模块、天气预报模块、智 能机器人模块、星座配对模块、在线音乐模块、在线游戏模块、生活百科搜索等模块。（2）操作简单

15、方便，界面简洁美观。（3）网站提供了天气预报功能，便于实时查看天气。4）进入网站首页随机获取一条名人名言或手动刷新获取。5）实现每日从云端自动获取实时新闻，开心一刻，百思不得姐等。6）网站提供音乐在线搜索、搜索提示、收藏、单曲循环、列表循环等功能。7）用户登陆成功后可发表文章、点赞等。8）网站提供智能机器人、即问即答。9）网站运行稳定，安全可靠。第 2 章 需求分析2.1需求分析 网站共分为前台和后台： 前台主要用于用户注册和登录网站、 在线音乐、在线游戏、 新闻头条、笑话浏览以及修改个人资料等；后台主要用于查看用户信息、发布通知。网站前台的功能模块：（1）天气预报模块：主要是根据用户所在 I

16、P 显示当前地区天气状况。每 4小时更 新一次。（2）开心一刻模块： 主要包括图片笑话和文字笑话两种模式， 每页显示 20条数据。（3）新闻头条模块：该模块是新闻类的其中一个，每页显示20 条。可以换页。（4）简易 blog 模块：主要包括查看发表文章、发表文章、删除文章、点赞等功能。（5）热歌模块：该模块根据用户收藏歌曲数量进行排名，选出收藏次数最多的前 十首歌曲。（6）名人名言模块：用户进入网站首页系统随机从数据库中选出一条名人名言， 用户也可以手动选择。（7）智能机器人模块：主要包括用户输入问题，机器人智能回答。（8）星座配对模块：用户选择两个想做，网站会匹配对应的信息。（9）生活百科模

17、块：主要是搜索功能，用户输入关键字进行百科搜索。（10）在线音乐模块：该模块是网站的主要部分，点击导航中的music 进入在线音乐页面，该模块提供搜索、搜索提示、收藏、播放模式、自定义皮肤等功能。（11）个人中心模块：该模块包括个人信息、历史发表文章记录、垃圾回收站、修 改密码、修改个人信息等功能。（12）用户状态模块：该模块主要用于显示用户当前登录状态，如果没有登陆则显 示登陆和注册如果用户已经登陆则显示用户头像、用户名和退出。2.2数据字典 数据字典是对网站中数据的详尽描述，是网站数据的清单。他提供对数据描述的集 中管理，目的是对收集的数据进行标准化、统一化管理，使数据有统一定义的名称、格

18、 式和含义，其除了保存数据名、类型、长度、精度等有关信息外，还包括了数据的流向 描述、数据加工的描述等等。在本网站中，数据字典是非常重要的自然数据。下面对其 做详细的介绍，如下表数据字典举例 3-41）用户信息表的数据字典卡片名称：用户信息表别名：（无） 描述：数据库中用于记录用户的信息表 定义：用户信息表 =用户 ID+用户名+密码+邮箱+头像+注册时间+密保问题 +密保答案 位置：用户信息表图 2.1 用户信息表数据字典卡片2）发表文章信息表的数据字典卡片名称：发表文章信息表 别名：（无） 描述：数据库中用于记录用户发表文章信息的信息表 定义：发表文章信息表 =id 编号 +发表内容 +发

19、表时间 +顶 +踩 位置：发表文章信息表图 2.2 发表文章信息表数据字典卡片3）名人名言信息表的数据字典卡片名称：名人名言信息表 别名：（无） 描述：数据库中用于名人名言信息的信息表 定义：名人名言信息表 =id 编号 +名人名称 +名言 位置：名人名言信息表图 2.3 名人名言信息表数据字典卡4）开心一刻信息表的数据字典卡片名称：开心一刻信息表 别名：（无）描述：数据库中用于记录开心一刻信息的信息表定义：开心一刻信息表 =id 编号+标题+内容+图片地址 +更新时间 +类型 位置：开心一刻信息表图 2.4 开心一刻表数据字典卡片5）歌曲收藏信息表的数据字典卡片名称：歌曲收藏信息表 别名：（

20、无）描述：数据库中用于记录用户歌曲收藏信息的信息表定义：歌曲收藏信息表 =id 编号 +用户名 +歌曲 id+ 歌曲名称 +歌曲链接 +歌曲图片 +歌手名称 位置：歌曲收藏信息表图 2.5 歌曲收藏信息表数据字典卡片6）星座配对信息表的数据字典卡片名称：星座配对信息表 别名：（无） 描述：数据库中用于记录星座配对信息的信息表 定义：星座配对信息表 =id 编号 +星座 1+星座 2+内容 1+内容 2+标题 位置：星座信息信息表图 2.6 星座配对信息表数据字典卡片第 3 章 总体设计通过需求分析阶段的工作，已经清楚了网站应该实现什么功能，那么下一步的工作 就是该如何实现这些功能，这就是总体设

21、计的工作。总的来说，总体设计的主要任务是 根据需求规格说明导出网站的实现方案。而最终目标是用比较抽象、概括的方式确定网 站如何完成预定的任务，也就是说要取得实现娱乐网站的最佳方案。一般来讲，好的网 站表现三个特点： 其一是能够按照指定的要求进行工作， 功能、性能都符合指定的要求； 其二是网站是可维护的，可方便地进行修改；三是网站不只是代码，还有一套配置齐全 的文档。而好的网站来自于最佳的设计方案。总体设计阶段是网站开发阶段的上游阶段，该阶段是后续开发工作的基础。在设计 阶段所做的种种决策直接影响软件的质量，没有好的设计就没有稳定的网站，也不会有 易维护的软件 5。3.1网站模块设计根据娱乐网站

22、的特点，可以将其分为前台和后台两个部分。对于前台部分可分为以下 14 个功能：（1）用户注册：用户通过填写用户名、邮箱和密码等信息注册成为网站的用户后， 可以查看个人、回收站、点赞、浏览历史发表、收藏音乐等功能。（2）个人中心：注册成功后可以进入个人中心完善信息、查看历史发表的文章、 删除发表、和查看回收站、回收站可恢复删除的文章也可彻底删除。（3）找回密码：用户如果忘了自己的注册密码，可以通过回答注册时设置的密保 问题而找回密码。（4）修改密码：该功能仅在用户登陆状态下在个人中心的设置中修改密码。（5）修改个人资料：用户可在个人中心的基本信息中修改个人资料。（6）开心一刻：开心一刻包括趣闻和

23、趣图两个模块可切换。（7）新闻头条：新闻头条是新闻类的其中一个，可以点击更多显示全部新闻，其 中包括：头条、娱乐、军事、汽车、财经、笑话、体育、科技。（8）名人名言：进入网站首页后随机产生一条名人名言。也可手动获取。（9）智能机器人：向机器人发出问题，即可回应。（10）星座配对：输入两个星座会查询对象的匹配信息。（11）百思不得姐：首页百思不得姐仅提供最新的 20 条视频信息，点击更多到百 思不得姐页面获取更多的视频。（12）网页换肤：点击首页右上角的网页换肤按钮可以选择颜色。（13）生活百科：调用的是百度百科接口，用来查询百科信息。（14）在线音乐：用户可在输入框输入歌曲名称或者歌手姓名进行

24、歌曲搜索，搜索 解果显示在左侧的在线列表内，点击在线列表内的歌曲可播放，点击收藏按钮可收藏音 乐，收藏成功后在页面的右侧的本地列表内显示用户收藏的音乐，也可再次点击收藏按 钮取消收藏。音乐播放模式包括：单曲循环，列表循环，随机播放等功能。页面操作包 扩：最小化，最大化，网页换肤等功能。操作方式包括：自定义右键菜单，快捷键等。对于后台部分可分为以下 2 个功能：（1）会员信息：查看所有会员信息。（2）发布通知：向客户端发送通知。3.2网站功能模块图在娱乐网站中主要实现的功能模块如图 3.1 所示。其中用户身份标识分为三个：普 通用户、管理员和游客。游客只能使用实时新闻、开心一刻、在线音乐、名人名

25、言、百 思不得姐、星座配对等； 普通用户在游客的基础上可以对在线音乐进行收藏、 发表文章、 删除文章、点赞等操作；管理员拥有网站的最高权限可以发布通知、查询账户信息等。图 3.1 娱乐网站功能图第 4 章 数据库设计4.1数据库理论基础 数据库是在计算机上组织、存储和共享数据的方法，数据库网站是由普通的文件网 站发展而来的。 数据库网站具有较高的数据独立性， 即不依赖于特定的数据库应用程序； 数据库网站的数据冗余小，可以节省数据的存储空间；另外数据库网站还很容易实现多 个用户的数据共享。数据库网站成熟的标志就是数据库管理网站的出现。数据库管理网 站（DataBase Managerment S

26、ystem，简称 DBMS） 是对数据库的一种完整和统一的管理和 控制机制。数据库管理网站不仅让我们能够实现对数据的快速检索和维护，还为数据的 安全性、完整性、并发控制和数据恢复提供了保证。一个真正的数据库网站由硬件和软 件两个方面构成，数据库管理网站的核心是一个用来存储大量数据的数据库6。数据库网站的发展经历了层次模型、网状模型及关系模型几个阶段。当今应用最普 遍的是关系型数据库管理网站。 目前，市场上流行的几种大型数据库， 如 Oracle、DB2、 Sybase、MySQL 等都是关系型数据库管理网站。数据库和数据库管理网站实现了信息的存储和管理， 还需要开发面向特定应用的数 据库应用网

27、站，以完成更复杂的信息处理任务。典型的数据库应用有C/S（客户/服务器 ）和 B/S（浏览器/服务器）两种模式。 C/S 模式由客户端和服务器端构成，客户端是一个运 行在客户机上的数据库应用程序，客户端通过网络访问数据库服务器。 B/S 模式是基于 Internet 的一个应用模式，需要一个 WEB 服务器。客户端分布在 Internet 上，使用通用 的网页浏览器，不需要对客户端进行专门的开发。应用程序驻留在 WEB 服务器或以存 储过程的形式存放在数据库服务器上，服务器端是一个后台数据库服务器7-8 。数据库网站重要组成部分：（1）数据库管理网站（ DBMS ）：它是用于描述、管理和维护数

28、据库的程序网站， 是数据库网站的核心组成部分。它建立在操作网站的基础上，对数据库进行统一的管理 和控制。其主要功能为描述数据库、管理数据库、维护数据库、数据通信。 DBMS 主要 有 4 种类型：文件管理网站、层次数据库网站、网状数据库网站和关系数据库网站。关 系模型是目前最为流行的一种数据模型，用二维表格结构表示实体集，关键码表示实体 间的联系。（2）数据库应用程序：在数据库管理网站中存储了大量的数据信息，其目的是为 用户提供信息服务，而数据库应用程序正是与 DBMS 进行通信，并访问 DBMS 中的数 据，它是 DBMS 实现其对外提供数据信息服务这一目的的唯一途径。简单地说，数据 库应用

29、程序是一个允许用户插入、修改、删除并报告数据库中的数据的计算机程序9。4.2数据库设计 数据库是网站的核心组成部分，所有信息处理子系统都将基于某种数据库平台，以 便将其处理的信息资源完整、安全地保存起来，并且对其进行各种管理和利用。选择一 个好的数据库平台是非常重要的。在选择数据库平台时，应考虑下列因素：（1）性能：数据库的数据处理能力；（2）开放性：数据库是否能在多种操作系统下使用；（3）安全性：数据库是否具有高度的安全性；（4）可靠性：数据库是否具有高度的可靠性；（5）并行性：数据库是否并行运行在多节点上；（6）可操作性：数据库在使用前是否需要复杂的培训 10-11。根据网站开发应用的实际

30、需要，我们选择了 MySQL 作为数据库开发平台。规划出 在网站中使用的主要实体有用户实体、简易 blog 实体、在线音乐实体、开心一刻实体、 星座配对实体以及管理员实体，下面设计出这几个关键实体的实体关系图。（1）用户实体图 用户实体包括编号、用户名、密码、性别、年龄、注册时间、密保问题、问题答案、 头像、省份、城市、地区等属性。用户实体的 E-R 图，如图 4.1。图 4.1 用户信息实体 E-R 图（2）简易 blog 实体简易 blog 实体包括内容 id 编号、用户 id 、发表内容、发表时间、点赞数和点踩数 等属性。简易 blog 实体的 E-R 图，如图 4.2 。图 4.2 简

31、易 blog 实体 E-R 图（3）在线音乐实体在线音乐实体包括编号、 用户 id、音乐 id、音乐名、音乐链接、 图片、歌手等属性。 在线音乐实体的 E-R 图，如图 4.3。（4）开心一刻实体开心一刻实体包括 id 编号、内容、更新时间、图片链接、类型和标题。开心一刻实体的 E-R 图，如图 4.4开心一刻图 4.4 开心一刻实体 E-R 图（5）星座配对实体星座配对实体包括 id 编号、星座 1、星座 2、标题、内容 1 和内容 2。星座配对实 体的 E-R 图，如图 4.5。（6）管理员实体管理员实体包括姓名和密码。管理员实体的 E-R 图，如图 4.64.3逻辑设计 由于网站对于数据

32、的安全性及完整性要求比较高，并且为了增加程序的适用范围， 还要保证网站可以拥有存储足够足够多数据的能力 ,因此采用 MySQL 数据库 12 。MySQL 是一种高性能的关系型数据库管理网站，它在 MySQL 5.0 的基础上有扩展了网站的性 能、可靠性、安全性和易用性， 逐渐成为在线事务进程和数据仓库等最好的数据库平台。 建立数据库表。users（用户信息表 ）：用户信息表用来保存用户的 头像、年龄等信息，参照表 4.1。表 4.1 用户信息表ID 编号、用户名、邮箱、密码、字段名数据类型默认值描述uidint(11)用户 ID 号emailvarchar(64)Null邮箱username

33、varchar(48)用户名regtimedatatime()注册时间sexdatetime(8)男性别headportraitvarchar(256)6.png头像questionvarchar(256)Null密保问题answervarchar(256)Null密保答案ageint(30)Null年龄provincevarchar(128)Null省份cityvarchar(128)Null城市areavarchar(128)Null地区（县）effectiveint(1)1是否有效famous （名人名言信息表 ）：名人名言信息表用来保存名人名言信息，参照表 4.2表 4.2 名人名言信

34、息表字段名数据类型默认值描述idint(8)ID 号namevarchar(128)Null名人名字contentvarchar(1024)Null内容contents（发表文章信息表 ）：发表文章信息表用来保存用户发表的文章内容、发表时 间、发表人等信息，参照表 4.3。表 4.3 发表文章信息表字段名数据类型默认值描述cidint(8)内容 IDuidint()会员 IDcontentvarchar(256)Null发表内容datelinedatetime()Null发表时间supportint(8)0赞（ 次数）opposeint(8)0踩（次数）effectiveint(1)1是否有效

35、isoperator （点赞信息表 ）：点赞（踩）信息表用来保存用户是否点赞 （踩）以及点赞（踩）的 用户的 ID，autoID 字段为自增 ID 是主键， op字段用来区分点赞和点踩操作， 1 表示点 赞操作， 2 表示点踩操作，参照表 4.4。表 4.4 点赞表字段名数据类型默认值描述autoIDint(8)自增 IDuidint(8)Null用户 IDcidint(8)Null文章 IDopint(2)Null1顶2踩joke2 （开心一刻信息表 ）开心一刻信息表用来保存笑话内容、更新时间、图片地址、 笑话标题和笑话类型等信息，其中 type 字段用来区分开心一刻类型， 1表示图片笑话，

36、 2 表示文字笑话，参照表 4.5。表 4.5 开心一刻信息表字段名数据类型默认值描述idint(8)ID 号contentvarchar(256)Null笑话内容updatetimedatetime(8)Null更新时间urlvarchar(128)图片地址typeint(1)1笑话类型idint(8)ID 号songs（歌曲信息表）：歌曲信息表保存用户收藏的歌曲 ID、用户 ID 、歌曲名称、 歌手名称和歌曲图片等信息，参照表 4.6。表 4.6 歌曲信息表字段名数据类型默认值描述idint(8)ID 号uidint(11)Null用户 IDmusicIDint(8)Null歌曲 idmu

37、sicNamevarchar(128)Null歌曲名称musicLinkvarchar(128)Null歌曲地址musicImgvarchar(128)Null歌曲图片singervarchar(64)Null歌手名字xingzuo（星座信息表）：星座信息表保存星座的信息，表 4.7 星座信息表参照表 4.7。字段名数据类型默认值描述idint(8)ID 号xingzuo1varchar(24)Null星座 1xingzuo2varchar(24)Null星座 2titlevarchar(64)Null匹配标题content1varchar(512)Null匹配内容 1content2varc

38、har(512)Null匹配内容 2administrator（管理员信息表）：管理员信息表保存管理员的信息，表 4.8 管理员信息表参照表 4.8字段名数据类型默认值描述uidint(8)管理员 IDusernamevarchar(24)Null管理员名称passwordvarchar(24)Null管理员密码noticevarchar(2000)Null通知第 5 章 详细设计与编码5.1 前台首页设计5.1.1前台首页概述首页包含以下 13 个模块： 实时天气：根据用户当前访问的 IP 进行天气预报查询。 开心一刻：该模块实时更新图片笑话、文字笑话。 实时新闻：该模块实时更新新闻，可点击

39、更多链接跳转到新闻子页查看更多分类新 闻。名人名言：该模块在每次刷新页面时会自动从数据库中随机取出一条名人名言。 智能机器人：该模块是网站的最新颖功能，用户可以同个输入问题，机器人智能回 答，非常有趣。星座配对：该功能是通过选择两个星座然后进行数据库比对，输入一条匹配信息。 百思不得姐：该模块实时更新最新的百思不得姐视频，首页仅显示 20 条。可以点 击更多链接跳转到百思不得姐子页，获取更多百思不得姐。简易 blog：该模块仅对登陆成功后的用户生效，游客只能查看，不能进行点赞等操 作，用户登陆成功后可以发表文章、点赞等操作，且只能删除自己发表的文章。热歌：该模块收录用户收藏最多的前 10 条歌

40、曲。且实时更新。登陆 /注册：用户注册成为会员后自动登陆， 且显示个人中心， 点击个人中心链接跳 转到个人中新子页。退出：用户登陆成功后显示退出链接，点击退出后，退出本账号。 通知：首页头部显示通知，该功能仅对管理员有效，普通用户无法操作。 快捷入口：首页下方是快捷入口，可快速访问网站的各模块。5.1.2前台首页的实现 网站首页是网站的主题部分。具有快捷入口，快捷导航。各个模块一目了然。首先 网站的头部为网站的通知内容，该内容由管理员发布。然后是天气预报，该模块显示当 前用户 IP 所在的城市的天气状况，每 4 个小时更新一次。头部右侧显示的是用户的登 陆状态，如果没有登陆显示登陆和注册，否则

41、显示用户头像、用户名和退出按钮。接着 是导航栏，显示所有网站的功能。在向下左侧是开心一刻模块和新闻头条模块。中间是 简易 blog，展现用户发表的文章内容。 首页右侧是名人名言、 智能机器人、 百思不得姐、 星座配对。最后网站的页脚部分是快捷入口。可以快速计入应用。网站首页如图5.1 所示。图 5.1 前台首页前台首页界面部分代码：登录 注册 童年的回忆 退出 /自定义组件Vponent(todo-item, props: todo,template: item.text )5.2 开心一刻模块设计5.2.1开心一刻模块概述 开心一刻模块主要包括两种模式：第一种为图片笑话，第二种为文字笑话二者

42、都有 翻页功能。进入网站首页左侧栏目显示开心一刻模块，通过 Ajax 请求数据库中的数据， 再由模板引擎生成到 Dom 树上。5.2.2开心一刻的实现首页 Dom 加载完毕后请求 Ajax 从数据库中获取最新 20 条数据，通过解析再由模 板引擎生成到 Dom 树上，在左侧显示开心一刻模块，默认为图片笑话，如图 5.2 所示，可以点击开心一刻右上角的链接切换为文字笑话模式，如图 5.3 所示。开心一刻模块下 方为页码切换上一页和下一页。图 5.3 开心一刻 （ 文字模式 ） 界面开心一刻模块代码如下： loading. 开心一刻 趣文 上一页 下一页 $joke.on(click, .joke

43、_prov, function() /上一页 page-; if(page 1) 图 5.2 开心一刻 （ 图片模式 ）界面$(this).siblings(.joke_prov).css(visibility, visible); ).on(click, .jokeTyptBut, function() $joke.fadeOut(500).fadeIn(500); page = 1;/类型切换 if(parseInt(joketype) = 1) joketype = 2; $(this).text(趣文););5.3 实时新闻模块设计5.3.1实时新闻模块概述实时新闻模块的数据主要来自

44、API Store。进入网站首页左侧栏目显示实时新闻模块 中的一个新闻头条模块。新闻子页是实时新闻的全部模块，其中包括：头条、娱乐、军 事、汽车、财经、笑话、体育、科技等八大模块。5.3.2实时新闻的实现首页 Dom 加载完毕后首先发送 Ajax 请求新闻头条数据。该过程通过 PHP 再次请求 API Store接口数据，经过解析后再发送到前端， 最后通过解析再由模板引擎生成到 Dom 树上，在左侧显示新闻头条模块，如图 5.4 所示。该模块中显示的内容包括：新闻标题、 新闻简介、和图片等信息。鼠标移入图片可显示更多简介信息。图 5.4 新闻头条新闻头条模块代码如下：loading.新闻头条

45、更多 each data as value ivalue.titlevalue.edit_time 来自 :value.sourcevalue.digest/each上一页 下一页 5.4 智能机器人模块设计5.4.1智能机器人模块概述 智能机器人是由图灵机器人提供技术支持。该模块主要包括问答两部分，用户在输 入框中提出问题，机器人根据要提问的问题进行解答。5.4.2智能机器人的实现首页 Dom 加载完毕后在右侧显示智能机器人模块。用户必须输入内容机器人才能 回答，问题为空时不作答。该过程首先通过 Ajax 请求图灵机器人接口数据，然后经过 解析后返回到服务器，再由服务器转发到客户端，最后通过

46、解析再由模板引擎生成到 Dom 树上显示，如图 5.5 所示。图 5.5 智能机器人智能机器人模块代码如下： 智能机器人 回答 5.5百思不得姐模块设计5.5.1百思不得姐模块概述百思不得姐模块数据来自 API Store接口。实时更新，首页仅显示前 20条数据，更 多数据需要转到百思不得姐子页面，该模块主要显示百思不得姐视频内容。子页包括两 种模式：推荐和搜索。5.5.2百思不得姐的实现首页 Dom 加载完毕后在右侧显示百思不得姐模块。该过程先发送 Ajax 请求，由服 务器再次请求 API Store 接口，返回的数据由服务器解析并转发到客户端，最后由模板 引擎生成在 Dom 上，视频默认

47、显示第一条数据，用户可点击百思不得姐视频列表选择 播放，播放模式支持快进、加减声音、全屏播放和下载等功能，如图 5.6 所示。图 5.6 百思不得姐百思不得姐模块代码如下：百思不得姐 更多 !- loading. oBaiSiList.onscroll = function() var oScrollTop = document.documentElement.scrollTop | document.body.scrollTop;/document.title = aLiaLi.length - 1.offsetTop;for(var i = 0; i aLi.length; i+) aLi

48、i.index = i; aLii.onclick = function() for(var j = 0; j aLi.length; j+) aLij.style.background = ; aLithis.index.style.color = black;aLithis.index.style.background = #9ACD32; aLithis.index.style.color = white; createMp4(aBaiSiNamethis.index.getAttribute(data-url), autoplay);5.6星座配对模块设计5.6.1星座配对模块概述星座

49、配对模块是模仿星座屋。数据由 API Store 提供，为了减少接口请求次数，服 务器将所有配对信息保存在本地数据库中， 不仅减少了接口的请求次数而且提高了页面 加载速度，减少服务器压力，给用户带来更好的体验。5.6.2星座配对的实现首页 Dom 加载完毕后在右侧显示星座配对模块。该过程会发送 Ajax 请求，由数据 库随机选择一条匹配信息返回给客户端，返回的数据由 js 解析并通过模板引擎生成在 Dom 上。在该模块中用户可选择十二个星座中的一个或手动输入。 为了更好的用户体验 和数据安全，该过程必须通过验证后发送 Ajax 请求，验证规则使用的是正则表达式， 如果用户输入的星座不符合规则网

50、站会做出相应的错误提示， 如果输入或选择正确则可 以发送 Ajax 请求，如图 5.7 所示。图 5.7 百思不得姐星座配对模块代码如下：星座配对 配对 白羊座 巨蟹座 天秤座 摩羯座 金牛座 狮子座 天蝎座 水瓶座 双子座 处女座 射手座 双鱼座 !-5.7简易 blog 模块设计5.7.1简易 blog 模块概述简易 blog 模块是娱乐网站的重要部分。 所有数据均来自本地服务器， 该模块仅对普 通用户等级以上包括普通用户开放，用户登陆成功后可进行发表文章点赞等功能，游客 不能发表文章，但可浏览其他用户发布的文章信息。5.7.2简易 blog 的实现首页 Dom 加载完毕后在网站中间显示简

51、易 blog 模块。该过程会发送 Ajax 请求取出 10条最新数据返回给客户端，返回的数据由 js解析并通过模板引擎生成在 Dom 上。与 此同时服务器会判断用户是否为登陆状态，如果没有登陆则不会显示删除操作，用户也 不能操作发表文章、点赞、删除等操作，如果为登陆状态则显示删除按钮，用户可进行点赞、删除等操作。在该模块中可点击刷新按钮获取最新数据，也可点击显示更多按钮获取更多历史内容，如图 5.8 所示图 5.8 简易 blog简易 blog 模块代码如下： loading. 发表 each data as value ivalue.username发布时间 :value.datelinev

52、alue.content顶(value.support) | 踩(value.oppose) if current_user_id=value.uid|  删除 /ifif current_user_id=value.uid/each显示更多 . 5.8 在线音乐模块的设计5.8.1在线音乐模块的概述在线音乐模块的主要功能是在线搜索、 播放模式、本地收藏、自定义皮肤、 最小化、 最大化、歌词同步等功能。在该模块中，用户首先需要注册才能收藏。如果没有注册可 以点击立即登陆按钮， 左侧显示登陆和注册输入框， 用户可根据提示信息进行注册登陆。 如果对该页面有什

53、么意见或建议可以在留言处进行留言。5.8.2在新音乐的实现 在线音乐资源来自网易云音乐，用户进入此页面后网站会检测用户的登陆状态，如 果已经登陆，在线音乐右侧会显示用户历史收藏记录，如图 5.9 所示。点击本地列表内 的歌曲可进行播放。如果没有登陆则不会显示，用户可以点击登陆按钮进行登陆，如果 没有账号可点击注册进行注册。图 5.9 本地收藏列表用户在搜索框输入歌曲名称或歌手名称则在按键抬起时候触发keyup 事件发送 Ajax请求提示数据，经过 js 解析后由模板引擎生成在 Dom 数上，如图 5.10所示。图 5.10 搜索提示输入完成后回车或点击搜索按钮后再次请求 Ajax 获取对应输入

54、歌曲名称的歌曲数 据，该数据为 json 格式，其中包括歌手名称信息、歌手专辑信息、歌曲名称、歌曲所在 链接地址、歌曲对应图片链接地址，经 js 解析后由模板引擎生成在 Dom 树上，在左侧 列表进行显示，如图 5.11 所示。图 5.11 搜索结果点击搜索到的歌曲播放再次同时网站会根据用户点击的歌曲再次搜索对应歌曲的 歌词，如图 5.12 所示，播放界面的下方是控制台，其功能包括：暂停音乐，下一曲、上 一曲、单曲循环、循环列表、随机播放、声音加减等功能。控制台可进行拖拽隐藏和显 示。图 5.12 音乐播放界面播放歌曲同时页面会显示当前播放歌曲对应的图片， 用户可点击修改皮肤按钮根据自己的喜好

55、选择皮肤，单击即可生成皮肤，如图 5.13 所示。图 5.13 搜索结果在线音乐界面 js 代码： function play(liIndex)for(var i = 0; i songList.length; i+) songListi.style.background = ; songListi.style.color = #333333; songListliIndex.style.background = rgba(2,152,245,.5); songListliIndex.style.color = yellow;musicID = songListliIndex.getAttri

56、bute(data-id); singer = songListliIndex.getAttribute(data-singer); musicName = songListliIndex.getAttribute(data-musicName); musicLink = songListliIndex.getAttribute(data-musicLink); musicImg = songListliIndex.getAttribute(data-img); oScrollName.innerHTML = singer + + musicName; if(window.localStora

57、ge.getItem(allowChangeSkin) = true) oWarpper.style.background = url( + musicImg + ); window.localStorage.setItem(aSkinIndex,url( + musicImg + ); oWarpper.style.backgroundSize = cover; document.getElementById(music).innerHTML = ; clearInterval(timer_progress);clearInterval(timer_cd);/暂停和播放var oOnOff

58、= document.getElementsByClassName(onAndOff)0; oOnOff.style.background = url(././img/pause.png) no-repeat; control();checkSave(); /检测是否收藏 getLyc(); function promptBack(prompt) var oPrompt = document.getElementsByClassName(prompt)0; var oPromptList = oPrompt.getElementsByClassName(promptList)0; var oP

59、romptLi = oPromptList.getElementsByTagName(li);var promptID = 0; var html = ; /oPromptList.style.display = block; oPromptList.innerHTML = html; for(var i = 0; i prompt.length; i+) html += + prompti.songname+ +prompti.artistname+ ; oPromptList.innerHTML = html; for(var i = 0; i oPromptLi.length; i+)

60、oPromptLii.index = i; oPromptLii.onclick = function() var str = this.innerText; /去除括号里的内容 var re = /-(sS*) ) -/g; while(str.match(re) str = str.replace(re, ); document.getElementById(tex).value = str; document.getElementById(tex).focus(); document.getElementById(but).onclick();oPromptList.style.disp