【《web游戏平台设计与实现》13000字（论文）】

web游戏平台设计与实现摘要现在的游戏产业的发展越来越快，游戏的前景也越来越好，所以游戏的种类和数量也在不断增多。玩家在挑选游戏时就需要花费大量的精力，所以就需要一个游戏统筹平台来为玩家提供优质的服务，为玩家提供游戏的更多选择。本设计主要针对于游戏平台的建设。本论文主要以网站形式展现给用户使用，当用户需要这个网站时，打开网站地址，可以直接访问网站，以便用户进行后续操作。避免安装应用所占用用户的空间，简化操作。在本设计中，主要针对用户的体验，提供更多的游戏选择空间，实现主要为网页版。平台主要使用vue.js来作为整体框架，搭建起前端服务，通过获取后台数据来改变前台的展示页面，最终呈现最后的页面效果。[关键词]游戏web前端游戏平台目录256141绪论 725041.1研究背景 7274831.2研究意义 727031.3主要研究内容与组织结构 8278051.4本章小结 995052运用技术介绍 10180442.1Vue.js 1032962.2Koa2 12227262.3MySql 12318882.4Nginx 1332462.5ElementUI 14297102.6本章小结 1461953web游戏平台需求分析 15308913.1web游戏平台系统功能性需求分析 1575503.1.1用户登录注册 1555033.1.2游戏平台主页 1737103.1.3游戏库 188143.1.4游戏排行榜 19158793.1.5游戏详情 19232823.1.6游戏开发者 2049243.1.7个人中心 2058713.2非功能性需求分析 21146133.2.1系统的平均响应时间 21292033.2.2用户并发数 22131143.2.3可靠性 2230923.3本章小结 22190824web游戏平台设计 2367324.1web游戏平台体系结构设计 2358944.1.1MVVM 23298274.1.2Nodejs 24230404.2游戏功能模块设计 2412474.2.1用户注册功能模块 24129774.2.2用户登录模块 2573224.2.3游戏主页模块 26186074.2.4游戏库榜模块 27315384.2.5游戏排行榜模块 2889164.2.6游戏详情功能模块 2910574.2.7游戏开发者模块 30221614.2.8个人中心模块 31162334.3游戏平台实体类设计 32232494.4游戏平台数据结构设计 33254684.4.1概念结构设计 33252854.4.2数据存储 35233544.5本章小结 3521395web游戏平台实现 3643895.1游戏平台功能的实现 3628665.1.1注册功能的实现 36207335.1.2登录功能的实现 37205375.1.3游戏平台主页面 38233865.1.4游戏库功能的实现 39285245.1.5排行榜功能 40253475.1.6游戏详情功能的实现 41185025.1.7游戏开发者功能实现 42107715.1.9个人中心功能实现 4368755.2web游戏平台的核心功能实现 44258975.2.1请求方法封装 44211815.2.2前端路由配置 44320555.2.3vuex数据管理中心 45230665.3本章小结 45196296总结与展望 46160516.1总结 4669276.2展望 4632669参考文献 471绪论1.1研究背景随着时间的推移，游戏行业的发展前景越来越好，所以游戏行业的人数也在不断增多，中国游戏行业大的市场巨大，市场的游戏数量不断增多。所以当游戏的数量上来的时候就需要对于游戏进行综合性的管理，需要一个游戏平台，比如国内的腾讯的WeGame，国外的Steam，这类游戏运营托管网站，就是应运时代而产生的。现在国内主要时两个游戏平台，steam上面有绝大部分中国玩家，WeGame上基本以中国玩家为主，可以看出现在游戏的种类和数量正在开速的开发，将来的游戏肯定越来越多，所以看的出平台的作用和中国游戏市场的潜力。随着游戏的不断发展，加速了游戏平台的发展。游戏平台的现状是分为PC客户端和网页端，PC客户端在中国的主要为Steam和WeGame，这两个占据和绝大部分的市场份额。网页端相较于PC客户端的优势是不需要安装，只需打开网站，即可按照需求找到相应的游戏，所以网页端十分简便。我研究的这个项目主要针对游戏平台的实现，为游戏提供一个平台。可供开发者在上面发布自己开发的游戏，提供一个推广游戏的渠道。用户能够通过平台来获取游戏资源，玩自己想玩的游戏。1.2研究意义国内的游戏发展越来越来了，从之前的小霸王游戏到现在的腾讯游戏，技术也在不断的更新，以前的2D现在的精美3D打斗效果。游戏方面的不断突破也在引领着整个游戏行业的发展，10年之前都没有游戏平台的概念，现在游戏平台不断地发展，例如steam和weGame，这是国内的两个主要游戏平台。平台有利于运营商发布游戏，为平台引流，为游戏提供发布渠道。平台还可以有利于玩家找游戏。有利与政府部门的监管，平台可以为公司提供用户粘性，有利于公司的发展。游戏的快速发展，游戏的类别和数量也在极大的增加。那么也会带来一些困难，在于用户如何去选择游戏。玩家需要从海量的游戏中去挖掘自己喜欢的游戏，这是一个耗费时间的过程。所以就产生了游戏平台，对游戏进行分门别类，这样对与玩家和运营商都有好处，对于玩家而言，玩家就不需要从海量的游戏中去挖掘游戏，只需要去找到自己喜欢的类型，然后到平台上下载，大大的减少了玩家的时间。对于运营商而言，平台就是发布游戏的最好渠道，因为玩家玩家会在这上面找游戏，不需要去打广告，引流，大大减少了成本问题和精力。只需要发不要平台上面即可。所以游戏平台对于游戏平台具有促进作用，为游戏的发行提供了更好的渠道。综上，本研究意义在于：减少玩家挑选游戏的时间减少运营商的成本提供推广游戏渠道1.3主要研究内容与组织结构本文主要从六个方面来进行分析，分别对平台的每个方面进行分析，对于web游戏平台设计与实现提供可靠的理论依据，冲理论到具体实现。以下为每一个部分的介绍。（1）分析游戏平台的研究意义和研究背景，为游戏平台提供一个好的环境调查，为平台的定位和服务的范围进行划分，清楚目标用户是哪一类人员，对于游戏平台的大环境有一个清楚的认识。（2）对于游戏平台实现所需要的技术进行大体的介绍和概括，主要针对于技术选型和特点进行介绍。为后面的技术实现定下大体的框架，为平台实现提供理论和技术上的支持。（3）具体分析项目的需求，游戏平台的需求进行整体性的分析，查看功能的可行性，为后面的实现提供保障，主要分为需求介绍和活动图。（4）总结需求分析，对于需求里面的功能进行划分，然后进行设计，确定大体的框架，为整体实现提供基础。（5）对游戏平台的每一个功能模块进行设计，针对核心部分进行分析。（6）对于本论进行总结，表示未来的期望，对于未来的这个项目有什么开发进行说明。1.4本章小结本章主要针对游戏平台的研究背景和意义进行分析，主要介绍了当前中国游戏行业的现状，以及当前游戏平台的定位，对于游戏平台的未来期望和作用进行介绍，有哪些积极意义。最后对本论文的研究内容和组织架构进行分析，对每一个部分进行概要性的介绍，认识到每一个部分的作用，对于游戏全局和组织结构有一个大概的认识。2运用技术介绍对于游戏平台进行开发，主要运用技术为前端技术和后端技术。本人通过技术分析，来选择适合的开发技术，以下为主要的技术选型：前端技术框架：Vue.js后端nodejs开发框架：Koa2数据库：MySql服务部署：Nginx组件库：ElementUi2.1Vue.jsVue是由尤雨溪开发的一套渐进式javascript框架，它是在2014年诞生的，经过后续的迭代开发，他已经成为前端的主要技术开发框架。它与react和angular不同的是：vue基于的是响应式编程，大体分为三个部分，视图，数据，连接部分，主要思想为数据更新视图，视图更改数据，通过双向数据绑定的方式来实现。React为函数时编程，主要为通过函数式组件来组成整个页面，从而搭建起整个的项目西铜。Angular主要是脏检测，在中国地区不盛行。基于项目的功能、需求等，我使用了vuejs框架来实现项目。Vue.js的用途是构建交互式的Web界面的开发库库，它提供MVVM数据绑定方式和一个可组合的组件系统，组件之间相互组合，想成一个项目，好比一个个齿轮，形成了一辆火车，把一个大大问题划分成一个个小问题。简单、灵活的API。从技术上讲，Vue.js的模式为MVVM模式，VM代表的时视图模型层(viewModel)，并通过双向数据绑定方式来连接视图（view）和数据模型（model）。实际的DOM操作和输出格式被抽象出来形成指令和过滤器，最后放映到真实的DOM上。基于以上，相比其他的MVVM框架，Vue的特点是它更容易上手，它让你通过简单而灵活的API来创建生成由数据驱动的UI组件，并且有很多现成的UI组件库，不需要自己开发，大大的提高了开发效率。MVVM如下图2-1。图2-1MVVM模式:数据驱动试图Vue是一个由双向数据绑定从而使用数据来驱动页面的关系型系统库，Vue的目标是通过内置的API和标签来实现页面，当数据改变时视图也随着改变，用户更改视图数据进而更改model层数据，这种方式称为双向数据绑定方式。Vue只是一个基础框架，并不是全能的，需要和其他的库配合使用，比如Vuex,axios等库，来扩展vue的功能或者简便数据操作。库与库之间的相互配合，最终才能形成成为一个完成的项目，做到完美的配合。Vue的特点如下:轻量级框架双向数据绑定指令组件化客户端路由状态管理2.2Koa2Koa是node.js的后端框架，koa的前生是express。koa也是由express的原班人马打造，在express的基础上扩展形成了koa。Koa是基于现在前端主流Node平台的web后端开发框架，由Express原班人马打造，利用async/await函数，Koa丢弃了回调函数，应为产生了回调的问题，容易出现网络获取数据错误，才出现了koa。Koa的核心思想为洋葱模型，最重要的是4个文件。主要是compose函数，这个是Koa的核心。当你发送一个请求时和接受一个请求完成，好比一层洋葱，Koa的特点是轻量级，体积小，能够很好的处理前端人员书写后端的问题。Koa对于前端而言上手简单，因为语法是前端语法。Koa也需要借助其他库才能构成一个大的项目，比如lodash，mysql等库，才能作为中转作用，处理前端传来的数据，再去数据库中获取数据，最终完成返回数据给前端。2.3MySqlMySQL数据库为关系型数据库，是一款免费开源的数据库，它分为三层，第一层为连接池，主要后端为连接到数据库的一个数组。第二个为核心服务层，主要是处理增改删差等操作的。第三层为存储层，主要是负责数据的存储和存取操作。MySQL的功能强大，在国内的市场份额很大，一很大一部分用户基数，并且它很稳定，所以采用MYSQL数据库。MySQL体系流程图如图2-2。MySQL的特点:功能强大支持跨平台运行速度快支持面向对象安全性高低成本支持各种语言数据库储存量大支持强大的内置函数图2-2MySQL的体系结构图2.4NginxNginx是一个高性能并且方向代理的服务器，主要是为了服务的负载均衡。当用户集中访问网站时，就考验网站的并发性了，如果并发性差网站就会崩溃或者卡死。当你使用Nginx部署网站时，你与服务其之间是没有感知的，通过代理服务器发送请求到目标服务器上面，最终目标服务器放回给客户端相应数据，Nginx是高性能服务器，它的特点是稳定，并发能力强，占用内存少，所以选择Nginx来部署游戏平台，是的平台支持高并发和稳定性加强。图2-3Nginx代理过程2.5ElementUIELementUI是饿了吗开发的一套开源的组件库，基于Vue2.0的桌面组件库，目的是为了减少开发者开发项目的时间，提高开发效率。在ElementUI中有现成的组件，使用npm来安装elementUI组件库到项目中，你就可以直接使用其中封装好的组件，不需要自己从0实现，使用哪个组件，动态引入组件即可。特点：跨平台性好提高效率一次开发，多次使用2.6本章小结本章节主要是介绍当前课题研究实现中所使用的前端组件框架vuejs，后端服务koa，数据库MySQL，部署工具Niginx以及组件库ElementUI，概要的介绍了他们的来历、性能和特点，最后介绍了使用得原因以及优势。3web游戏平台需求分析本部分主要是分析web游戏平台得需求，根据需求来确定相对应的的功能，根据模块进行划分，得到最终的需求功能和结论。并以例图得方式来展示相应的功能，辅助理解。3.1web游戏平台系统功能性需求分析我将对web游戏平台系统性功能性的需求进行分析，根据相应得需求进行模块划分。依据为每个页面进行划分，主要是从用户登录注册、游戏平台主页需求、游戏库需求、游戏排行榜需求、游戏详情需求、游戏开发者需求、游戏评论需求以及个人中心需求共八个方面进行详细分析。通过上述得分析得到相对应得功能，从而进行后续得设计实现，为他提供理论支持。3.1.1用户登录注册在本平台中，用户可以不登录而游览网站，仅限于其中一部分，有一些必须网页必须登录才能访问，比如开发者模块、个人中心模块等，必须登录，才能进行后续操作。登录的首要是在服务器端注册了，没有注册的需要先注册才能登录系统，才能进入后续的页面中。本平台的注册方式是以手机号进行注册，需要填写密码和确认密码，符合要求才能进行注册。需要满足以下条件：必须为未注册并且有效的手机号，位数为11位密码长度为6-16为的字符串确认密码与密码相同满足以上条件后才能注册，点击下一步，进入信息完善页面，需要完善个人信息，如昵称、邮箱等等才算完成注册过程。在这个过程中，需要满足一下条件：头像非必填项，会有默认头像昵称必填，且在3-40个字符之内，不能出现敏感词汇性别默认为男，属于必填项出生年月为必填项邮箱必填，必须符合邮箱的格式完成以上的过程才算是成功的注册成功了，注册成功后后有提示，注册失败也会有提示，提示错误的原因。完成了注册模块。下面就可以直接进入主页面了，不需要再次登录。如果之前已注册完成，需要再次登录，首先需要进入登录页面，用户需要输入信息，手机号和密码，这两个将会发送到后端进行数据库比对，成功匹配后返回登录成功状态，失败返回失败原因。登录所需要的信息必须满足一下要求：手机号必须有效，为11位的手机号码密码符合是为6-16位字符串在登录时，中如果勾选了记住密码，那么在下一次登录时就不需要再次输入密码直接点击登录，跳转到后续页面。当用户忘记密码时，可以点击找回密码按钮，对于密码进行找回，但是需要输入用户的手机号进行查找是否存在，当存在是，需要向手机验证短信，输入正确的验证码，才能更改密码，否则失败，用户发送更改用户当前的密码，更新用户的新密码后在重新输入密码进行重新登录，进入后续的操作流程流程。用户登录注册活动图，如图3-1图3-1登录注册活动图3.1.2游戏平台主页游戏平台主页是你进入平台的主界面，这个界面中主要展示了个个模块的入口。如游戏库、游戏排行榜等等。你需要从主界面进去才能看到后续的界面。其中还展示了新游预告，主要是展示马上要上线的游戏，提供一些简介模块，告诉用户即将上线的游戏。最后是特色模块，主要是推荐一些热门的游戏给用户，以便用户进行选择，为用户提供更多选择的空间。如图3-2所示为活动图。图3-2主界面打开功能活动图3.1.3游戏库游戏库中展示了所有的游戏，主要包括游戏的名字，评分，背景图片等等展示效果。也可以根据用户选者的的类型来展示，选择你喜欢的游戏类型，可以展示出这一个类型的游戏以便选择。或者用户进行搜索游戏名称进行模糊搜索来获取游戏。游戏库里面主要是所有游戏的集合，根据你的条件来搜索游戏，随后展示在页面上面。展示的所需要信息：表3.1游戏信息游戏信息类型游戏IDString游戏名字String游戏图片String游戏类型String游戏简介String游戏源码信息String游戏版本String游戏发布时间String游戏评分Number图2-3游戏库活动图3.1.4游戏排行榜游戏排行榜主要分为三个模块，对于游戏进行规划，分为个个榜单的展示，热门游戏，最新游戏，三个模块，每个模块有每个模块的功能。榜单分为许多模块，比如游戏评分榜，游戏热门榜等等，根据后台的榜单生成不同的榜单，每个榜单中只展示前8的游戏，通过点击排行榜的游戏可以进入游戏详情页看游戏的详细信息。热门游戏是对应其中一个模块的，展示的是最热门的4个游戏，推荐给用户。最新游戏是根据游戏发布时间来判断的，也是展示最新的4个游戏。这个模块主要是方便用户不知道选择什么游戏时，可以为用户提供一些参考价值比较大的选择，给用户推荐好的游戏。3.1.5游戏详情游戏详情是在你点击游戏后进入的页面，里面主要介绍了游戏的详细信息，主要分为两个模块。游戏信息和游戏评论两个模块。游戏信息模块分为游戏内部图片的展示，用户游戏评分，用户是否收藏该游戏，游戏分享功能，游戏的基础简介。其中部分功能需要玩家登录后才能进行操作执行，否则无法执行该功能。最后还有一个游戏游玩的模块，该模块，主要是能够玩小游戏。游戏评论模块主要是针对用户评论后的展示，提供了用户评论功能，分为精彩评论和最新评论，精彩评论主要是展示4条最好的评论，最新评论展示最新的4条评论，展示的内容包括一下内容如表3.2所示。表3.2评论内容评论信息描述头像评论者的头像昵称评论者的昵称内容评论者评论的具体内容时间评论发布的时间点用户对于评论者的态度主要分为支持和不支持两种，有特定符号代替，分别的数量是具体的数量3.1.6游戏开发者开发者模块主要针对的单独的开发者，想把制作的游戏发行到平台上而提供的功能。对于平台的运营有良好的作用，开发者需要上传的信息如表3.3所示。在这个过程中，你需要成为开发者，这个过程需要你回答10道题目，只用会到达一定数量你才能成为开发者，才能发布游戏到平台上。表3.3开发信息开发信息描述图片游戏的封面类型游戏属于那一种类的游戏名称游戏的具体名称游戏图片游戏的相关的图片，每张图片大小不超过500kb游戏代码游戏的主体代码3.1.7个人中心对于个人中心，主要为你所有玩过的所有游戏，分为最近游玩的游戏和喜欢的游戏两类。并且还可以修改自己的资料功能，点击修改资料，可以修改相对应的资料，可修改的主要包括如表3.4所示，当用户修改完资料之后，就可以上传自己的修改完之后的信息了，完善后上传进行保存更新自己的信息，成功会有提示，失败会给出原因。表3.4可修改资料信息资料信息类型描述头像String用户的头像，会有默认头像昵称String用户的昵称性别Number0代表男性，1代表女性出生年月String用户的出生日期邮箱String用户的邮箱号手机号String用户的手机号码个人简介String用户的自我介绍3.2非功能性需求分析本节主要是对游戏平台的非功能性需求，主要是从三个方面来分析，第一个时系统的平均响应时间，如果网站在5秒内没有响应用户，表示网站的性能查，吸引不到用户。第二个时用户并发数，主要是在大量用户在同时访问网站时，网站能否响应用户请求，保障网站的稳定性。第三个时系统的可靠性，防止黑客网络攻击网站，提高网站的安全性。所以需要从这三个方面来对非功能性需求进行分析。3.2.1系统的平均响应时间系统的平均响应时间总体是针对用户来说的。举一个例子，淘宝的网页平均响应时间与客户是否停留页面有关，系统响应时间越长，用户量就越低，所以淘宝的系统响应时间与用户量成反比。这是一个很好的例子，用户不愿意等，所以响应时间越短越好。平均响应时间等于网络请求时间加上浏览器渲染页面的时间加上服务器处理数据的时间，我们需要压缩响应时间，这样用户量就会随之上来。以下为系统的平均响应时间表3.5所示，满足下表要求即可，这样就可以提高网站的竞争力.对于用户而言，用户网络是无感知的，用户至多会在网站停留5s，超过时间则会离开。对于网站这是巨大的打击，用户量决定了网站的生死，所以系统响应时间应该极大的进行压缩，提高用户访问量。表3.5响应时间3.2.2用户并发数用户并发数主要是针对服务器的处理能力的的，服务器能够同时处理多少个请求的上线。当用户并发数高，代表服务器的抗压能力强，能够同时处理许多时件。当并发数低时，当许多用户同时访问网站时，网站可能直接荡机或者无法处理请求，那么网站的抗压性能极差。用户并发数代表网站的抗压能力，同时处理许多请求的能力。3.2.3可靠性网站部署上线后，需要网站在线上平稳运行，保证网站不会崩溃，平稳运行，如果出现错误，系统记录下日志文件，以便后续查明原因和维护，并且可能出现网络攻击的情况，需要维护网站的安全行。3.3本章小结本章主要分析了游戏平台的需求，对于需求进行总结归纳，从而看出每个页面的所需要的功能。根据功能来进行系统的设计和实现，总共总结了八个模块功能，为后续提供支持。并且对非系统性需求进行了分析，主要针对三个方面分析，完善系统的性能，为实现提出要求和保障。4web游戏平台设计4.1web游戏平台体系结构设计在开发中中，开发工具使用VisualStudioCode，提供了开发环境、插件等，这些需要环境需要自我安装才能使用。开发的前端我选用了vue.js框架，后端采用nodejs的koa创建服务，语言选用javascript语言，开发完成后部署上线。开发过程中会解决代码的高内聚低耦合，开发组件，用每一个组件之间进行拼接合成项目。4.1.1MVVM前端使用MVVM架构将数据模型与持久抽象层（Model）、视图层（View）以及视图适配器层（ViewModel）分离，这是vue的核心思想。前端的MVVM架构设计图见图4-1图4-1前端MVVM架构图Model层称为数据层，主要是数据储存的部分，在vue中为date函数内部的数据，当date里面数据发生变化时，会通过双向数据绑定的方式来进行更新View你里面的视图。View代表的是视图层，直观上理解为用户看见的界面，当用户改变视图中的数据时，model里面的数据会随之改变。ViewModel是连接Model和View之间的桥梁，他们两之间的变化主要是通过ViewModel来实现的。这就是MVVM的思想，把框架分为3块，每一块有自己的职责，通过中间那一块进行连接，就可以把整个框架串联起来，vue就是基于这个思想实现的。4.1.2Nodejs 本设计中用到nodejs主要在后端服务模块，搭建起整个后端服务框架体系。Node沿用了前端浏览器JavaScript中的一些相同的接口。Node有自己的特点，特点如下所示：异步事件驱动NodeJS的核心思想就是以事件驱动为核心，事件驱动在于异步回调，回调出现的有回调函数，这种方法有很大的缺点，不知道在哪一环出错。后面出现了promise，链式调用。最终的解决方案为async/await。Node是浏览器上的，所以它一定是单线程执行，维护一个事件队列，可以有效的解决node的问题。异步、非阻塞I/ONode起初实现时是针对浏览器实现的，所以他考虑到浏览器的问题，就提供的很多模块是异步执行的，这样会减少执行的时间，快速执行代码。单线程NodeJS适用于的是浏览器，浏览器时人和页面之间的交互，如果实多线程时，当你同时发起请求和撤销请求执行那个，所以浏览器出生就决定了了时只适用单线程语言，通过任务队列的形式来解决异步问题。性能出众NodeJS的底层是C++和v8来实现的，性能部分很出色，适用于浏览器。4.2游戏功能模块设计根据第三部分的需求进行分析之后，总结出八个游戏功能，对于每个功能的进行是设计和开发。4.2.1用户注册功能模块用户进入注册页面，注册模块会对用户输入的手机号和密码进行校验，手机号并且是没有被注册过的。必须符合要求才能进入后续的流程，如果没有问题那么就需要填写后面的个人信息，按要求填写，同时也会校验玩家的信息模块，最后进行保存。用户注册时序图如图4-1，可以看出整的流程的样子。图4-1用户注册时序图4.2.2用户登录模块用户登录网站时，需要保证自身的手机号为有效手机号，并且已注册，密码为6-16位字符串，必须手机号和密码都能匹配上真实的数据才能登录成功，进入后续的页面模块。用户登录时序图如图4-2：图4-2用户登录时序图4.2.3游戏主页模块游戏主页中主要针对的是所有模块的入口，根据你点击的模块跳转路由到相应的页面中，其中还展示即将上线的新游戏和热门游戏，推荐给用户来选择。游戏主页模块时序图如图4-3：图4-3游戏主页时序图4.2.4游戏库榜模块游戏库榜主要是展示所有的有游戏，主要是先展示20条数据，然后向下拉去的过程中获取新的20条数据。对游戏进行了分类，当你选择游戏类型是，只展示出本类型的游戏给用户，最后搜索功能，对于搜索的关键词进行索引，产生最终结果返回给页面，当你点击游戏时，会进入游戏详情页看到游戏的全部信息。游戏库的时序图如图4-5所示：图4-5游戏库时序图4.2.5游戏排行榜模块游戏排行榜分为三块，第一块为游戏所有榜单，榜单展示所有的榜单前十的游戏.第二块为热门游戏，主要为展示现在时间点最热门的4款游戏。第三块为最新的4款游戏，点击后进入游戏详情页，展示游戏的详细信息。排序主要是依靠游戏热度生成的，最后传给前端一串json字符串的数组，最终展示效果。时序图如图4-5所示图4-5游戏排行榜时序图4.2.6游戏详情功能模块用户在进入游戏详情页是，可以看到游戏的所有基本信息，对游戏进行评价和收藏，有一个开始游戏的模块游戏。下面还有游戏评论功能，用户可以发布自己对于游戏评价，符合发布的要求即可。也可也看到其他用户对于该游戏的评价以及评分。游戏详情页时序图如图4-6：图4-6游戏详情页时序图4.2.7游戏开发者模块开发者模块主要是用于用户上传到游戏到平台上面，提供提其他用户游玩。首先用户想成为开发者需要进行测试，主要是10到题目，当答对的数目达到一定程度时，会让你成为开发者，那么你就可以根据对应的模块上传开发者制作的游戏了。游戏开发者时序图如图4-7：图4-7游戏开发者时序图4.2.8个人中心模块用户在个人中心中可以看见自己喜欢的游戏和最近游玩的游戏，并且可以编辑自己的个人信息，对于个人信息进行修改。个人中心时序图如图4-10：图4-8个人中心时序图4.3游戏平台实体类设计本节对游戏平台进行功能模块的详细分析，分析出游戏平台所包含的，实体类主要分为三类有：用户，游戏，评论3大实体类。表4.1实体类说明实体名说明UserItemVo用户实体类，每一个用户是一个用户是实体类GameItemVo游戏实体类，包含游戏的所有信息CommentItemVo评论实体类，用户对于游戏的评论表4.2用户实体属性描述表用户属性类型描述user_idstring用户的IDuser_phonestring用户的电话号码user_passwordstring用户登录的密码user_nicknamestring用户的昵称user_purikurastring用户的头像(一串url地址)user_sexnumber用户性别，1：男，2女user_dateofbirthstring用户出生日期user_emailstring用户的邮箱地址user_developerboolean用户是否为开发者表4.3游戏实体属性描述表游戏属性类型描述game_idstring游戏的id号game_namestring游戏名称game_typestring游戏类型game_detailstring游戏详情简介game_versionstring游戏版本game_picstring游戏封面game_publishtimestring游戏发布时间表4.4评论实体属性描述表评论属性类型描述commit_idstring评论的id号game_idstring评论的是一款游戏的iduser_idstring评论者的iduser_nicknamestring评论者的昵称user_purikurastring用户的头像(一串url地址)commit_detailstring评论的内容commit_supportnumnumber评论支持的数目commit_nosupportnumnumber评论不支持的数目commit_publishtimestring评论发布时间4.4游戏平台数据结构设计4.4.1概念结构设计第三部分我们对游戏平台的需求进行一系列分析，分析出的用户实体类类图如图4-9，可以清楚的看出用户的属性以及属性的类型，并且可以看出所用到的方法有哪些。图4-9用户实体类类图对于游戏进行分析，主要包括游戏的id、名称、详情等等，通过以上分析就能得出游戏的实体类的具体。游戏实体类类图如图4-10所示。图4-10游戏实体类类图评论主要是针对用户和游戏的，用户评论游戏，所以需要出现用户id和游戏id，才能绑定用户与游戏之间的关系。评论实体类类图如图4-11所示。图4-11评论实体类类图游戏平台中，实体与实体之间，用户可以拥有多个游戏，一个游戏可以被多个用户进行游玩，用户可以发布多条评论，一条评论属于一个用于，一个游戏可以有多个评论，一个评论只属于一个游戏，所以它们之间的关系位从属关系，能够清楚地理解每个实体之间关系，为数据库建设提供帮助。游戏平台实体间关系E-R图，如图4-12图4-12游戏平台实体间E-R图4.4.2数据存储游戏平台的后端数据通过koa保存到MySQL的数据库中，前端通过发送请求的发方式给后端，后端采用node的koa进行实现，通过后端来向数据库中进行一些列操作，对于数据进行增改删差，实现对数据的更新。处理数据完成后在返回结果给前端，前端拿到后渲染页面。前端有时需要储存数据，会放到localStorage或者sessionStorage中进行持久化储存，来给前端保持数据状态，这样前端就能储存相印的数据了。4.5本章小结本章为后续实现提供了基础和思路，通过第三部分的需求得出现在的功能模块，对游戏平台进行详细的设计与实现。完成对功能模块的划分，为每一个功能的实现提供保障。5web游戏平台实现第三部分对游戏平台的需求进行了分析，得到了第四部分对平台的设计路线，清楚的知道了每一个功模块的实现原理和作用。5.1游戏平台功能的实现游戏平台基于vue.js框架进行实现，对于不同模块可能会有多个不同的页面组成，前端会通过请求的方式拿到后端的数据，为前端页面提供数据基础。主要语言是javascript语言。主要的页面为如表5.1：表5.1页面信息页面描述主页面开始展示页面，所有模块的入口游戏库所有游戏展示的页面，可以进行游戏搜索和类型选择排行榜对于游戏所有榜单的展示意见用户对于网站的意见开发者成为开发者，上传游戏的渠道登录页面用户登录网站注册用户第一次登录时需要注册账号游戏详情对于游戏的所有介绍和评论个人中心个人资料展示和修改个人资料游戏游玩游戏游玩的界面5.1.1注册功能的实现注册功能为用户第一次登录网站的时候，需要用先注册一个账号才能登录网站，已注册玩家可以时直接打开登录页面。注册时，用户首先需要输入正确的电话号码作为账号，需要对电话号码进行校验成功，并且需要输入密码和确认密码，符合6-16位字符串，并且需要两者需要一致，才能注册账号。校验电话的函数的核心为：constreg=/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;这是一个正则表达式，通过正则校验电话号码，通过后才能进行后续操作，密码的校验通过内置的rule进行校验输入成功后进行后续流程。校验通过后，后续还有完善用户信息的页面，用户需要上传昵称，性别，email等等信息后，才完成了注册流程。注册成功后直接跳入主页面。注册功能如图5-1和图5-2:图5-1注册页面图5-2完善个人信息页面5.1.2登录功能的实现用户来到登录页后，需要输入有效的电话号码和正确的密码才能将进入后续的页面。会发送请求到后端进行账号验证，验证账号是否存在和密码的正确性。图5-3为登录页面，成功之后回跳转到相应的页面上，失败会给出失败的原因。图5-3登录页面在这之中还有记住密码和找回密码两个按钮，记住密码主要是用户第一次登录后勾选在下一次登录时可以不同在输入密码直接登录进后续页面，找回密码主要当用户忘记密码时，需要通过用户的手机号来重新设置密码。5.1.3游戏平台主页面该页面是打开网站看见的第一个页面。页面中包含三个模块，第一个模块为其他所有的入口，当你点击时会跳转到之后的页面，主要包含4个入口（游戏库、排行榜、意见模块、开发者模块）。第二个模块为新游预告，为来展示马上要上线的新游戏，主要展示图片和介绍，第三部分为游戏的类型展示。效果如图5-4图5-4主页面5.1.4游戏库功能的实现游戏库包括三个功能，第一个是所有游戏的展示，只不过是先展示20个游戏，当通过下拉刷新展示更多。第二个是搜索功能，对于游戏进行模糊查询，通过查询结果来展示游戏。第三个是对于某一类型的游戏进行选择。当你触发某一条件是，会展示响应的结果。游戏库功能如图5-5图5-5游戏库功能5.1.5排行榜功能排行榜主要是对于游戏每一个榜单的的这是你展示过程，会呈现每个榜单中前8的游戏在上面，一便玩家更加方便选择游戏，还有两个详细的游戏展示。如图5-6排行榜展示，主要分为两部分，排行榜展示和热门游戏展示。图5-6排行榜功能图5.1.6游戏详情功能的实现游戏详情页主要是为了展示游戏的所有信息，包括游戏名称，游戏评分，游戏简介，用户时候收藏，分享功能等，如图5-7所示。还有一个大模块为用户的评论，用户可以发布评论，可以看见所有用户的评论，评论分为精评和最新评论两块。如图5-8所示。图5-7游戏详情功能图5-8游戏评论5.1.7游戏开发者功能实现游戏开卡者模块是针对用户成为开发者之后，需要把游戏上传到平台，需要提供游戏的相应信息给平台，最后平台上线该游戏。提供给其他用户游玩或者下载，如图5-9所示。图5-9开发者模块5.1.9个人中心功能实现个人中心主要是针对于用户的喜好和最近玩的游戏进行展示，如图5-10所示。编辑资料模块重新编辑用户资料，如图5-11所示。图5-7个人中心图5-11编辑资料5.2web游戏平台的核心功能实现在开发中，有几个主要的核心实现，前端请求后端数据的分装，前端路由，vuex数据管理状态中心。5.2.1请求方法封装这里主要使用了一个axios的工具库，它支持许多的功能，发送请求、请求拦截，响应拦截等，是我们需要的功能，不需要我们进行实现，只需要在这个基础之上进行封装，大大的增加了我们的开发效率。以下为封装的主要代码，如图5-12和图5-135-12请求拦截器5-13响应拦截器5.2.2前端路由配置前端是靠路由来切换页面的，所以路由的配置很重要。它会影响页面性能，我进行了页面的懒加载，当以进入哪个页面时就加载那一页面，避免一次性加载完所有页面，损耗性能。以下为部分路由配置的代码如图5-14。图5-14部分路由配置5.2.3vuex数据管理中心Vuex的前端有一个数据管理状态中心，以便数据在多个页面之间实现共享，简化了数据共享的流程。以下为vuex的代码如图5-15.图5-15vuex状态中心5.3本章小结本部分根据第四章游戏平台设计，进行项目实现，介绍了每一个功能的实现步骤和实现后的效果图，最后分析了核心代码模块，对于这个模块进行了解释说明。PAGEPAGE446总结与展望6.1总结本论文主要是对游戏平台进行综合性的分析，分析游戏平台的研究背景和意义、需求、设计和功能，最后到综合实现。首先先对项目的需求分析，在对每一个需求进行评估和可行性分析，之后就是界面的设计过程，设计原型图，web游戏平台网站开发，之后就是联调测试，对于网站的安全性和稳定性提供保障，最终才能上线，这就是我开发网站的流程。同时该研究，开发的过程中总结开发经验是十分重要的，开发的总体系的具体流程需要我们熟悉，前端与后端的交互过程