基于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动画，而且用纯色作为背景。用户可依据自己喜好选择不一样颜色皮肤样式。关键词：娱乐网站；浏览器/服务器模式；MySQLAbstractToday, 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 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 part of enterprise information construction.EntertainmentwebsiteregardsHTML5asabasis,Hbuilderasadevelopmenttool,whosedaemonicapplicationadoptsPHPJavaScriptandMySQLisadoptedindatabase,whichrealizessomefunctionssuchasjoyfulmoment,weatherforecast,newsfeeds,birdlovesheep,smartrobot,simpleblogandonlinemusic,etc.Thesitepageusesaresponsivelayouttoaccommodatedifferentresolutiondevices,andusesthebootstrapframeworktomaketheinterfacemorebeautiful.RequirementdatautilizeAjax,whichimprovesuserexperience.SomedataofentertainmentwebsiteusesAPIStore,whichnotonlybooststheperformanceofwebsite,butalsosavesrateofflow. 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目 录摘 要IAbstractII第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.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 在线音乐模块设计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 网站背景目前，伴随计算机技术和通信技术发展，网络规模也逐步增大。网络元素也随之而不停增加。有利用其进行进行通信，有利用其作为商业用途，在网络上进行出售、收购、宣传等用途。从而使得网络越来越成为现今社会上必不可少元素，而网站就是这个网络一个很大元素。所谓网站(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内容2id编号图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 用户信息表字段名数据类型默认值描述uidint(11)用户ID号emailvarchar(64)Null邮箱usernamevarchar(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 名人名言信息表字段名数据类型默认值描述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是否有效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表示图片笑话，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歌曲idmusicNamevarchar(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匹配内容1content2varchar(512)Null匹配内容2 administrator（管理员信息表）：管理员信息表保留管理员信息，参考表4.8。表4.8 管理员信息表字段名数据类型默认值描述uidint(8)管理员IDusernamevarchar(24)Null管理员名称passwordvarchar(24)Null管理员密码noticevarchar()Null通知第5章 具体设计和编码5.1 前台首页设计5.1.1 前台首页概述首页包含以下13个模块：实时天气：依据用户目前访问IP进行天气预报查询。快乐一刻：该模块实时更新图片笑话、文字笑话。实时新闻：该模块实时更新新闻，可点击更多链接跳转到新闻子页查看更多分类新闻。名人名言：该模块在每次刷新页面时会自动从数据库中随机取出一条名人名言。智能机器人：该模块是网站最新奇功效，用户能够同个输入问题，机器人智能回复，很有趣。星座配对：该功效是经过选择两个星座然后进行数据库比对，输入一条匹配信息。百思不得姐：该模块实时更新最新百思不得姐视频，首页仅显示20条。能够点击更多链接跳转到百思不得姐子页，获取更多百思不得姐。简易blog：该模块仅对登陆成功后用户生效，游客只能查看，不能进行点赞等操作，用户登陆成功后能够发表文章、点赞等操作，且只能删除自己发表文章。热歌：该模块收录用户收藏最多前10条歌曲。且实时更新。登陆/注册：用户注册成为会员后自动登陆，且显示个人中心，点击个人中心链接跳转到个人中新子页。退出：用户登陆成功后显示退出链接，点击退出后，退出本账号。通知：首页头部显示通知，该功效仅对管理员有效，一般用户无法操作。快捷入口：首页下方是快捷入口，可快速访问网站各模块。5.1.2 前台首页实现网站首页是网站专题部分。含有快捷入口，快捷导航。各个模块一目了然。首先网站头部为网站通知内容，该内容由管理员公布。然后是天气预报，该模块显示目前用户IP所在城市天气情况，每4个小时更新一次。头部右侧显示是用户登陆状态，假如没有登陆显示登陆和注册，不然显示用户头像、用户名和退出按钮。接着是导航栏，显示全部网站功效。在向下左侧是快乐一刻模块和新闻头条模块。中间是简易blog，展现用户发表文章内容。首页右侧是名人名言、智能机器人、百思不得姐、星座配对。最终网站页脚部分是快捷入口。能够快速计入应用。网站首页图5.1所表示。图5.1 前台首页前台首页界面部分代码：登录注册童年回想退出 /自定义组件Vponent(todo-item, props: todo,template: item.text ) 5.2 快乐一刻模块设计5.2.1 快乐一刻模块概述快乐一刻模块关键包含两种模式：第一个为图片笑话，第二种为文字笑话二者全部有翻页功效。进入网站首页左侧栏目显示快乐一刻模块，经过Ajax请求数据库中数据，再由模板引擎生成到Dom树上。5.2.2 快乐一刻实现首页Dom加载完成后请求Ajax从数据库中获取最新20条数据，经过解析再由模板引擎生成到Dom树上，在左侧显示快乐一刻模块，默认为图片笑话，图5.2所表示，能够点击快乐一刻右上角链接切换为文字笑话模式，图5.3所表示。快乐一刻模块下方为页码切换上一页和下一页。 图5.2 快乐一刻(图片模式)界面 图5.3 快乐一刻(文字模式)界面快乐一刻模块代码以下：loading.快乐一刻趣文上一页下一页$joke.on(click, .joke_prov, function() /