基于HTML5的娱乐网站的设计和实现.doc

编号

毕业设计(论文)

基于HTML5娱乐网站设计和实现
Design and Realization of Entertainment Website Based on HTML5

学院名称
电子和信息工程学院
专业名称
计算机科学和技术
学生姓名
修 朋 飞
学号

指导老师
李晗 讲师

6月25日

摘 要
在Internet飞速发展今天，互联网已成为大家快速获取、公布和传输信息关键渠道，正以一个前所未有冲击力影响着人类活动。它在大家政治、经济、生活等各个方面发挥着关键作用。所以网站建设在Internet应用上地位显得格外关键，尤其娱乐网站已成为企业单位信息化建设中关键组成部分。
娱乐网站是以HTML5为基础，Hbuilder为开发工具，后台使用PHP脚本语言，数据库采取MySQL，实现了快乐一刻、天气预报、实时新闻、百思不得姐、智能机器人、简易blog、在线音乐等功效。网站页面采取响应式布局以适应不一样分辨率设备，同时使用了bootstrap框架，使得界面愈加美观。请求数据则使用Ajax异步刷新提升了用户体验。娱乐网站部分数据采取API Store 接口数据，不仅提升了网站性能而且节省了流量。
整个网站采取动静态效果结合，而且使用版块分界，降低冗杂栏目和小版块，使整个网站简练、清新、又不失活泼。为提升用户体验，对首页利用相关动漫Canvas动画，而且用纯色作为背景。用户可依据自己喜好选择不一样颜色皮肤样式。

关键词：娱乐网站；浏览器/服务器模式；MySQL

Abstract
Today, 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 influencing mankind's 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 part of enterprise information construction.
Entertainment website regards HTML5 as a basis, Hbuilder as a development tool, whose daemonic application adopts PHP JavaScript and MySQL is adopted in data base, which realizes some functions such as joyful moment, weather forecast, news feeds, bird love sheep, smart robot, simple blog and online music,etc. The site page uses a responsive layout to accommodate different resolution devices, and uses the bootstrap framework to make the interface more beautiful. Requirement data utilize Ajax, which improves user experience. Some data of entertainment website uses API Store, which not only boosts the performance of website, but also 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. Canvas 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.

Key words: Entertainment website; B/S mode; MySQL

目 录
摘 要 I
Abstract II
第1章 绪论 1
1.1 网站背景 1
1.2 网站设计意义 1
1.3 网站达成目标 1
第2章 需求分析 3
2.1 需求分析 3
2.2数据字典 3
第3章 总体设计 6
3.1 网站模块设计 6
3.2 网站功效模块图 7
第4章 数据库设计 8
4.1 数据库理论基础 8
4.2 数据库设计 9
4.3 逻辑设计 12
第5章 具体设计和编码 15
5.1 前台首页设计 15
5.1.1 前台首页概述 15
5.1.2 前台首页实现 15
5.2 快乐一刻模块设计 17
5.2.1 快乐一刻模块概述 17
5.2.2 快乐一刻实现 17
5.3 实时新闻模块设计 20
5.3.1 实时新闻模块概述 20
5.3.2 实时新闻实现 20
5.4 智能机器人模块设计 22
5.4.1 智能机器人模块概述 22
5.4.2 智能机器人实现 22
5.5百思不得姐模块设计 23
5.5.1 百思不得姐模块概述 23
5.5.2 百思不得姐实现 23
5.6星座配对模块设计 25
5.6.1 星座配对模块概述 25
5.6.2 星座配正确实现 25
5.7简易blog模块设计 26
5.7.1 简易blog模块概述 26
5.7.2 简易blog实现 26
5.8 在线音乐模块设计 29
5.8.1 在线音乐模块概述 29
5.8.2 在新音乐实现 29
5.9 后台界面设计 34
5.9.1 后台首页概述 34
5.9.2 后台首页实现 34
第6章 网站调试和测试 36
6.1 网站调试和测试说明 36
6.2 网站测试方法 36
6.3 网站测试类型 36
6.4 调试过程及调试结果分析 37
6.4.1登陆功效测试 37
6.4.2 文章发表功效测试 38
第7章 总结和展望 40
参考文件 41
致 谢 42
附 录Ⅰ 43
附 录Ⅱ 52

第1章 绪论
1.1 网站背景
目前，伴随计算机技术和通信技术发展，网络规模也逐步增大。网络元素也随之而不停增加。有利用其进行进行通信，有利用其作为商业用途，在网络上进行出售、收购、宣传等用途。从而使得网络越来越成为现今社会上必不可少元素，而网站就是这个网络一个很大元素。
所谓网站(Website)，就是指在网际网路（因特网）上，依据一定规则，使用HTML等工具制作用于展示特定内容相关网页集合。简单地说，网站是一个通讯工具，就像布告栏一样，大家能够经过网站来公布自己想要公开资讯（信息），或利用网站来提供相关网路服务（网络服务）。大家能够经过网页浏览器来访问网站，获取自己需要资讯（信息）或享受网路服务[1]。
1.2 网站设计意义
HTML作为一个样式语言，伴随Internet上信息量增多和交互性加强使HTML显得越来越难以胜任情况之下，在HTML编程语言高度发展形式下，我们开始了对动态网站网站开发。动态网站又将娱乐网站再提升一个档次，动态娱乐网站能够实时更新数据库内容，让用户时刻能够看到最新内容，这让娱乐网站实现愈加含有现实意义了。
用户能够无偿在网站发表问题进行交流、玩游戏、看新闻、读笑话等，也能够在线听音乐，对喜爱音乐能够收藏、自定也皮肤样式，方便其它有相同爱好用户能够更便捷找到排名最高音乐，同时增加了用户体验。
作为一个供众多用户无偿浏览网站，并不是做赔本生意，伴随大量网友参与，和点击率增加，能够招商进行广告位出售，经过在网页上加载各个企业广告来维持网站运行所需资金，从而取得利益。而广告商之所以会在本网站进行广告投放，就取决于本网站是否含有较大数量会员、用户，和较高点击率。而要想拥有这些吸引广告投资商资本，就要经过对用户增加较多权限来实现。所以，充足考虑到这一点，使网站建立更含有现实意义[2]。
1.3 网站达成目标
娱乐网站属于小型网站，在实施后，达成一下目标：
（1）网站含有多样性。其中包含：新闻模块、快乐一刻模块、天气预报模块、智能机器人模块、星座配对模块、在线音乐模块、在线游戏模块、生活百科搜索等模块。
（2）操作简单方便，界面简练美观。
（3）网站提供了天气预报功效，便于实时查看天气。
（4）进入网站首页随机获取一条名人名言或手动刷新获取。
（5）实现每日从云端自动获取实时新闻，快乐一刻，百思不得姐等。
（6）网站提供音乐在线搜索、搜索提醒、收藏、单曲循环、列表循环等功效。
（7）用户登陆成功后可发表文章、点赞等。
（8）网站提供智能机器人、即问即答。
（9）网站运行稳定，安全可靠。

第2章 需求分析
2.1 需求分析
网站共分为前台和后台：前台关键用于用户注册和登录网站、在线音乐、在线游戏、新闻头条、笑话浏览和修改个人资料等；后台关键用于查看用户信息、公布通知。
网站前台功效模块：
（1）天气预报模块：关键是依据用户所在IP显示目前地域天气情况。每4小时更新一次。
（2）快乐一刻模块：关键包含图片笑话和文字笑话两种模式，每页显示20条数据。
（3）新闻头条模块：该模块是新闻类其中一个，每页显示20条。能够换页。
（4）简易blog模块：关键包含查看发表文章、发表文章、删除文章、点赞等功效。
（5）热歌模块：该模块依据用户收藏歌曲数量进行排名，选出收藏次数最多前十首歌曲。
（6）名人名言模块：用户进入网站首页系统随机从数据库中选出一条名人名言，用户也能够手动选择。
（7）智能机器人模块：关键包含用户输入问题，机器人智能回复。
（8）星座配对模块：用户选择两个想做，网站会匹配对应信息。
（9）生活百科模块：关键是搜索功效，用户输入关键字进行百科搜索。
（10）在线音乐模块：该模块是网站关键部分，点击导航中music进入在线音乐页面，该模块提供搜索、搜索提醒、收藏、播放模式、自定义皮肤等功效。
（11）个人中心模块：该模块包含个人信息、历史发表文章统计、垃圾回收站、修改密码、修改个人信息等功效。
（12）用户状态模块：该模块关键用于显示用户目前登录状态，假如没有登陆则显示登陆和注册假如用户已经登陆则显示用户头像、用户名和退出。
2.2数据字典
数据字典是对网站中数据详尽描述，是网站数据清单。她提供对数据描述集中管理，目标是对搜集数据进行标准化、统一化管理，使数据有统一定义名称、格式和含义，其除了保留数据名、类型、长度、精度等相关信息外，还包含了数据流向描述、数据加工描述等等。在本网站中，数据字典是很关键自然数据。下面对其做具体介绍，以下表数据字典举例[3-4]。

（1）用户信息表数据字典卡片

名称：用户信息表
别名：（无）
描述：数据库中用于统计用户信息表
定义：用户信息表=用户ID+用户名+密码+邮箱+头像+注册时间+密保问题+密保答案
位置：用户信息表

图2.1 用户信息表数据字典卡片

（2）发表文章信息表数据字典卡片

名称：发表文章信息表
别名：（无）
描述：数据库中用于统计用户发表文章信息信息表
定义：发表文章信息表=id编号+发表内容+发表时间+顶+踩
位置：发表文章信息表

图2.2 发表文章信息表数据字典卡片

（3）名人名言信息表数据字典卡片

名称：名人名言信息表
别名：（无）
描述：数据库中用于名人名言信息信息表
定义：名人名言信息表=id编号+名人名称+名言
位置：名人名言信息表

图2.3 名人名言信息表数据字典卡

（4）快乐一刻信息表数据字典卡片

名称：快乐一刻信息表
别名：（无）
描述：数据库中用于统计快乐一刻信息信息表
定义：快乐一刻信息表=id编号+标题+内容+图片地址+更新时间+类型
位置：快乐一刻信息表

图2.4 快乐一刻表数据字典卡片

（5）歌曲收藏信息表数据字典卡片

名称：歌曲收藏信息表
别名：（无）
描述：数据库中用于统计用户歌曲收藏信息信息表
定义：歌曲收藏信息表=id编号+用户名+歌曲id+歌曲名称+歌曲链接+歌曲图片+歌手名称
位置：歌曲收藏信息表

图2.5 歌曲收藏信息表数据字典卡片

（6）星座配对信息表数据字典卡片

名称：星座配对信息表
别名：（无）
描述：数据库中用于统计星座配对信息信息表
定义：星座配对信息表=id编号+星座1+星座2+内容1+内容2+标题
位置：星座信息信息表

图2.6 星座配对信息表数据字典卡片

第3章 总体设计
经过需求分析阶段工作，已经清楚了网站应该实现什么功效，那么下一步工作就是该怎样实现这些功效，这就是总体设计工作。总来说，总体设计关键任务是依据需求规格说明导出网站实现方案。而最终目标是用比较抽象、概括方法确定网站怎样完成预定任务，也就是说要取得实现娱乐网站最好方案。通常来讲，好网站表现三个特点：其一是能够根据指定要求进行工作，功效、性能全部符合指定要求；其二是网站是可维护，可方便地进行修改；三是网站不只是代码，还有一套配置齐全文档。而好网站来自于最好设计方案。
总体设计阶段是网站开发阶段上游阶段，该阶段是后续开发工作基础。在设计阶段所做种种决议直接影响软件质量，没有好设计就没有稳定网站，也不会有易维护软件[5]。
3.1 网站模块设计
依据娱乐网站特点，能够将其分为前台和后台两个部分。
对于前台部分可分为以下14个功效：
（1）用户注册：用户经过填写用户名、邮箱和密码等信息注册成为网站用户后，能够查看个人、回收站、点赞、浏览历史发表、收藏音乐等功效。
（2）个人中心：注册成功后能够进入个人中心完善信息、查看历史发表文章、删除发表、和查看回收站、回收站可恢复删除文章也可根本删除。
（3）找回密码：用户假如忘了自己注册密码，能够经过回复注册时设置密保问题而找回密码。
（4）修改密码：该功效仅在用户登陆状态下在个人中心设置中修改密码。
（5）修改个人资料：用户可在个人中心基础信息中修改个人资料。
（6）快乐一刻：快乐一刻包含趣闻和趣图两个模块可切换。
（7）新闻头条：新闻头条是新闻类其中一个，能够点击更多显示全部新闻，其中包含：头条、娱乐、军事、汽车、财经、笑话、体育、科技。
（8）名人名言：进入网站首页后随机产生一条名人名言。也可手动获取。
（9）智能机器人：向机器人发出问题，即可回应。
（10）星座配对：输入两个星座会查询对象匹配信息。
（11）百思不得姐：首页百思不得姐仅提供最新20条视频信息，点击更多到百思不得姐页面获取更多视频。
（12）网页换肤：点击首页右上角网页换肤按钮能够选择颜色。
（13）生活百科：调用是baidu百科接口，用来查询百科信息。
（14）在线音乐：用户可在输入框输入歌曲名称或歌手姓名进行歌曲搜索，搜索解果显示在左侧在线列表内，点击在线列表内歌曲可播放，点击收藏按钮可收藏音乐，收藏成功后在页面右侧当地列表内显示用户收藏音乐，也可再次点击收藏按钮取消收藏。音乐播放模式包含：单曲循环，列表循环，随机播放等功效。页面操作包扩：最小化，最大化，网页换肤等功效。操作方法包含：自定义右键菜单，快捷键等。
对于后台部分可分为以下2个功效：
（1）会员信息：查看全部会员信息。
（2）公布通知：向用户端发送通知。
3.2 网站功效模块图
在娱乐网站中关键实现功效模块图3.1所表示。其中用户身份标识分为三个：一般用户、管理员和游客。游客只能使用实时新闻、快乐一刻、在线音乐、名人名言、百思不得姐、星座配对等；一般用户在游客基础上能够对在线音乐进行收藏、发表文章、删除文章、点赞等操作；管理员拥有网站最高权限能够公布通知、查询账户信息等。

娱乐网站
一般用户
管理员
游客
个人中心
在线游戏
实时新闻
快乐一刻
百思不得姐
在线音乐
星座配对
名人名言
百思不得姐
公布通知
查询账户
删除文章
修改密码
发表文章
文章点赞
实时新闻
快乐一刻
在线音乐
名人名言
星座配对

图3.1 娱乐网站功效图
第4章 数据库设计
4.1 数据库理论基础
数据库是在计算机上组织、存放和共享数据方法，数据库网站是由一般文件网站发展而来。数据库网站含有较高数据独立性，即不依靠于特定数据库应用程序；数据库网站数据冗余小，能够节省数据存放空间；另外数据库网站还很轻易实现多个用户数据共享。数据库网站成熟标志就是数据库管理网站出现。数据库管理网站(DataBase Managerment System，简称DBMS)是对数据库一个完整和统一管理和控制机制。数据库管理网站不仅让我们能够实现对数据快速检索和维护，还为数据安全性、完整性、并发控制和数据恢复提供了确保。一个真正数据库网站由硬件和软件两个方面组成，数据库管理网站关键是一个用来存放大量数据数据库[6]。
数据库网站发展经历了层次模型、网状模型及关系模型多个阶段。当今应用最普遍是关系型数据库管理网站。现在，市场上流行多个大型数据库，如Oracle、DB2、Sybase、MySQL等全部是关系型数据库管理网站。
数据库和数据库管理网站实现了信息存放和管理，还需要开发面向特定应用数据库应用网站，以完成更复杂信息处理任务。经典数据库应用有C/S(用户/服务器)和B/S(浏览器/服务器)两种模式。C/S模式由用户端和服务器端组成，用户端是一个运行在用户机上数据库应用程序，用户端经过网络访问数据库服务器。B/S模式是基于Internet一个应用模式，需要一个WEB服务器。用户端分布在Internet上，使用通用网页浏览器，不需要对用户端进行专门开发。应用程序驻留在WEB服务器或以存放过程形式存放在数据库服务器上，服务器端是一个后台数据库服务器[7-8]。
数据库网站关键组成部分：
（1）数据库管理网站（DBMS）：它是用于描述、管理和维护数据库程序网站，是数据库网站关键组成部分。它建立在操作网站基础上，对数据库进行统一管理和控制。其关键功效为描述数据库、管理数据库、维护数据库、数据通信。DBMS关键有4种类型：文件管理网站、层次数据库网站、网状数据库网站和关系数据库网站。关系模型是现在最为流行一个数据模型，用二维表格结构表示实体集，关键码表示实体间联络。
（2）数据库应用程序：在数据库管理网站中存放了大量数据信息，其目标是为用户提供信息服务，而数据库应用程序正是和DBMS进行通信，并访问DBMS中数据，它是DBMS实现其对外提供数据信息服务这一目标唯一路径。简单地说，数据库应用程序是一个许可用户插入、修改、删除并汇报数据库中数据计算机程序[9]。
4.2 数据库设计
数据库是网站关键组成部分，全部信息处理子系统全部将基于某种数据库平台，方便将其处理信息资源完整、安全地保留起来，而且对其进行多种管理和利用。选择一个好数据库平台是很关键。在选择数据库平台时，应考虑下列原因：
（1）性能：数据库数据处理能力；
（2）开放性：数据库是否能在多个操作系统下使用；
（3）安全性：数据库是否含有高度安全性；
（4）可靠性：数据库是否含有高度可靠性；
（5）并行性：数据库是否并行运行在多节点上；
（6）可操作性：数据库在使用前是否需要复杂培训[10-11]。
依据网站开发应用实际需要，我们选择了MySQL作为数据库开发平台。计划出在网站中使用关键实体有用户实体、简易blog实体、在线音乐实体、快乐一刻实体、星座配对实体和管理员实体，下面设计出这多个关键实体实体—关系图。
（1）用户实体图
城市
用户
用户名
编号
密码
年纪
注册时间
性别
密保问题
问题答案
头像
地域
省份
用户实体包含编号、用户名、密码、性别、年纪、注册时间、密保问题、问题答案、头像、省份、城市、地域等属性。用户实体E-R图，图4.1。

图4.1 用户信息实体E-R图

（2）简易blog实体
简易blog实体包含内容id编号、用户id、发表内容、发表时间、点赞数和点踩数等属性。简易blog实体E-R图，图4.2。

公布内容
内容id
用户id
发表时间
点赞数
发表内容
点踩数

图4.2 简易blog实体E-R图

（3）在线音乐实体
在线音乐实体包含编号、用户id、音乐id、音乐名、音乐链接、图片、歌手等属性。在线音乐实体E-R图，图4.3。
id编号
在线音乐
用户id
音乐id
音乐链接
图片
音乐名
歌手

图4.3 在线音乐实体E-R图

（4）快乐一刻实体
快乐一刻实体包含id编号、内容、更新时间、图片链接、类型和标题。快乐一刻实体E-R图，图4.4。
id编号
快乐一刻
内容
图片链接
类型
更新时间
标题

图4.4 快乐一刻实体E-R图

（5）星座配对实体
星座配对实体包含id编号、星座1、星座2、标题、内容1和内容2。星座配对实体E-R图，图4.5。
星座配对
星座1
标题
内容1
星座2
内容2
id编号

图4.5 星座配对实体E-R图

（6）管理员实体
管理员实体包含姓名和密码。管理员实体E-R图，图4.6。

图4.6 管理员实体E-R图

4.3 逻辑设计
因为网站对于数据安全性及完整性要求比较高，而且为了增加程序适用范围，还要确保网站能够拥有存放足够足够多数据能力,所以采取MySQL数据库[12]。MySQL是一个高性能关系型数据库管理网站，它在MySQL 5.0基础上有扩展了网站性能、可靠性、安全性和易用性，逐步成为在线事务进程和数据仓库等最好数据库平台。建立数据库表。
users(用户信息表)：用户信息表用来保留用户ID编号、用户名、邮箱、密码、性别、头像、年纪等信息，参考表4.1。

表4.1 用户信息表
字段名
数据类型
默认值
描述
uid
int(11)

用户ID号
email
varchar(64)
Null
邮箱
username
varchar(48)

用户名
regtime
datatime()

注册时间
sex
datetime(8)
男
性别
headportrait
varchar(256)
6.png
头像
question
varchar(256)
Null
密保问题
answer
varchar(256)
Null
密保答案
age
int(30)
Null
年纪
province
varchar(128)
Null
省份
city
varchar(128)
Null
城市
area
varchar(128)
Null
地域(县)
effective
int(1)
1
是否有效

famous (名人名言信息表)：名人名言信息表用来保留名人名言信息，参考表4.2。

表4.2 名人名言信息表
字段名
数据类型
默认值
描述
id
int(8)

ID号
name
varchar(128)
Null
名人名字
content
varchar(1024)
Null
内容

contents(发表文章信息表)：发表文章信息表用来保留用户发表文章内容、发表时间、发表人等信息，参考表4.3。

表4.3 发表文章信息表
字段名
数据类型
默认值
描述
cid
int(8)

内容ID
uid
int()

会员ID
content
varchar(256)
Null
发表内容
dateline
datetime()
Null
发表时间
support
int(8)
0
赞(次数)
oppose
int(8)
0
踩(次数)
effective
int(1)
1
是否有效

isoperator (点赞信息表)：点赞(踩)信息表用来保留用户是否点赞(踩)和点赞(踩)用户ID，autoID字段为自增ID是主键，op字段用来区分点赞和点踩操作，1表示点赞操作，2表示点踩操作，参考表4.4。

表4.4 点赞表
字段名
数据类型
默认值
描述
autoID
int(8)

自增ID
uid
int(8)
Null
用户ID
cid
int(8)
Null
文章ID
op
int(2)
Null
1顶2踩

joke2 (快乐一刻信息表)快乐一刻信息表用来保留笑话内容、更新时间、图片地址、笑话标题和笑话类型等信息，其中type字段用来区分快乐一刻类型，1表示图片笑话，2表示文字笑话，参考表4.5。

表4.5 快乐一刻信息表
字段名
数据类型
默认值
描述
id
int(8)

ID号
content
varchar(256)
Null
笑话内容
updatetime
datetime(8)
Null
更新时间
url
varchar(128)

图片地址
type
int(1)
1
笑话类型
id
int(8)

ID号

songs（歌曲信息表）：歌曲信息表保留用户收藏歌曲ID、用户ID、歌曲名称、歌手名称和歌曲图片等信息，参考表4.6。

表4.6 歌曲信息表
字段名
数据类型
默认值
描述
id
int(8)

ID号
uid
int(11)
Null
用户ID
musicID
int(8)
Null
歌曲id
musicName
varchar(128)
Null
歌曲名称
musicLink
varchar(128)
Null
歌曲地址
musicImg
varchar(128)
Null
歌曲图片
singer
varchar(64)
Null
歌手名字

xingzuo（星座信息表）：星座信息表保留星座信息，参考表4.7。

表4.7 星座信息表
字段名
数据类型
默认值
描述
id
int(8)

ID号
xingzuo1
varchar(24)
Null
星座1
xingzuo2
varchar(24)
Null
星座2
title
varchar(64)
Null
匹配标题
content1
varchar(512)
Null
匹配内容1
content2
varchar(512)
Null
匹配内容2

administrator（管理员信息表）：管理员信息表保留管理员信息，参考表4.8。

表4.8 管理员信息表
字段名
数据类型
默认值
描述
uid
int(8)

管理员ID
username
varchar(24)
Null
管理员名称
password
varchar(24)
Null
管理员密码
notice
varchar()
Null
通知

第5章 具体设计和编码
5.1 前台首页设计
5.1.1 前台首页概述
首页包含以下13个模块：
实时天气：依据用户目前访问IP进行天气预报查询。
快乐一刻：该模块实时更新图片笑话、文字笑话。
实时新闻：该模块实时更新新闻，可点击更多链接跳转到新闻子页查看更多分类新闻。
名人名言：该模块在每次刷新页面时会自动从数据库中随机取出一条名人名言。
智能机器人：该模块是网站最新奇功效，用户能够同个输入问题，机器人智能回复，很有趣。
星座配对：该功效是经过选择两个星座然后进行数据库比对，输入一条匹配信息。
百思不得姐：该模块实时更新最新百思不得姐视频，首页仅显示20条。能够点击更多链接跳转到百思不得姐子页，获取更多百思不得姐。
简易blog：该模块仅对登陆成功后用户生效，游客只能查看，不能进行点赞等操作，用户登陆成功后能够发表文章、点赞等操作，且只能删除自己发表文章。
热歌：该模块收录用户收藏最多前10条歌曲。且实时更新。
登陆/注册：用户注册成为会员后自动登陆，且显示个人中心，点击个人中心链接跳转到个人中新子页。
退出：用户登陆成功后显示退出链接，点击退出后，退出本账号。
通知：首页头部显示通知，该功效仅对管理员有效，一般用户无法操作。
快捷入口：首页下方是快捷入口，可快速访问网站各模块。
5.1.2 前台首页实现
网站首页是网站专题部分。含有快捷入口，快捷导航。各个模块一目了然。首先网站头部为网站通知内容，该内容由管理员公布。然后是天气预报，该模块显示目前用户IP所在城市天气情况，每4个小时更新一次。头部右侧显示是用户登陆状态，假如没有登陆显示登陆和注册，不然显示用户头像、用户名和退出按钮。接着是导航栏，显示全部网站功效。在向下左侧是快乐一刻模块和新闻头条模块。中间是简易blog，展现用户发表文章内容。首页右侧是名人名言、智能机器人、百思不得姐、星座配对。最终网站页脚部分是快捷入口。能够快速计入应用。网站首页图5.1所表示。

图5.1 前台首页
前台首页界面部分代码：

<div class="userCenter_module fr">
<div class="loginState">
<a class="headPortrait" href="html/personalCenter.html" target="_blank"></a>
<!--登录注册按钮-->
<div class="log_reg_But">
<a target="_blank" id="denglu" title="登录">登录</a>
<a target="_blank" id="zhuce" title="注册">注册</a>
</div>
<!--登录信息和退出-->
<div class="logout-module">
<a class="user" title="个人中心" href="html/personalCenter.html" target="_blank">童年回想</a>
<a class="loginOut" title="退出">退出</a>
</div>
</div>
<script>
//自定义组件
Vponent('todo-item', {
props: ['todo'],
template: '<li>{{ item.text }}</li>'
})
</script>
<div class="numTime">
<embed src="img/timeSwf.swf" wmode="transparent" autostart='true' loop="true" width="188" height="80" quality="high"></embed>
</div>
</div>
5.2 快乐一刻模块设计
5.2.1 快乐一刻模块概述
快乐一刻模块关键包含两种模式：第一个为图片笑话，第二种为文字笑话二者全部有翻页功效。进入网站首页左侧栏目显示快乐一刻模块，经过Ajax请求数据库中数据，再由模板引擎生成到Dom树上。
5.2.2 快乐一刻实现
首页Dom加载完成后请求Ajax从数据库中获取最新20条数据，经过解析再由模板引擎生成到Dom树上，在左侧显示快乐一刻模块，默认为图片笑话，图5.2所表示，能够点击快乐一刻右上角链接切换为文字笑话模式，图5.3所表示。快乐一刻模块下方为页码切换上一页和下一页。

图5.2 快乐一刻(图片模式)界面 图5.3 快乐一刻(文字模式)界面

快乐一刻模块代码以下：
<div class="joke_column column" id="joke">
<div class="jokeLoading loading">
<div class="loading3">
<div>loading..</div>
<div></div>
<div></div>
</div>
</div>
<div class="joke_title column_title notSelect">
<span>快乐一刻</span>
<a class="jokeTyptBut notSelect" data-type="2">趣文>></a>
</div>
<ul class="jokeList slideBar_list"></ul>
<div class="jokeBtnGroup button_group">
<a class="joke_prov notSelect button_3d">上一页</a>
<a class="joke_next notSelect button_3d">下一页</a>
</div>
</div>
<script>
$joke.on('click', '.joke_prov', function() {
//