电子竞技信息交流平台+ssm论文源码调试讲解

2系统关键技术

2.1 微信小程序

微信小程序，简称小程序，英文名Mini Program，是一种全新的连接用户与服务的方式，可以快速访问、快速传播，并具有良好的使用体验[1]。

小程序的主要开发语言是JavaScript，它与普通web的开发有很多相似之处。小程序和普通网页开发并不是相同的东西，是有差异的。网页开发的渲染线程和脚本线程是互斥的，而在小程序中，确实分开的，分别在不同的线程之中运行。网页开发的工作者可以运用各种浏览器暴露出来的DOM API，进行DOM选中和操作，但小程序不行，它并没有一个完整的浏览器对象，因此缺失DOM API和BOM API。这样的差别使得前端开发中经常用到的一些库是无法在小程序中运行的。另外，网页开发的工作者在开发网页时所要面对的环境是在各式各样系统上运行的各式各样的浏览器，，而小程序只，只需面对iOS和Android这两道操作系统下的微信就足够了。

小程序和传统的APP相比，有着开发成本更低，获客成本更低，开发周期更短，发展空间更大等的优点。不过，为了体现“用完即走”、“无需安装”等理念，小程序的功能、性能还有大小都受到了制约，可以说是各有利弊。

2.2微信Web开发者工具

为了实现微信小程序编写，腾讯公司推出微信web开发者工具[2]，用来调试编写微信小程序，微信小游戏，微信公众号的编写和调试，该软件是支持微信小程序官方API 和相应的辅助工具和插件，支持微信端的代码编辑，查看，预览，发布。该工具拥有自己的前端代码文件，视图文件是.wxml、样式文件是.wxss、交互则是JS文件[8]，当然还有支持相应的网络框架，通过接口wx.request和后台进行数据传输，通过配置https域名配置跟服务器对接并发布项目，这是一款集开发、预览、发布等功能的微信产品的开发工具，目前还在更新版本。

2.3微信小程序API接口

微信小程序API接口是腾讯公司为了微信小程序和微信公众号提供的接口文档，里面包含了各种需要使用的接口技术[7]，例如本项目用到的获取微信用户信息(wx.getUserInfo)、蓝牙通讯传输功能、网络请求(wx.request)、定位功能等，总的来说，小程序API是满足一个程序开发的大部分接口。

2.4 WXML 、WXS、JS小程序编写语言

WXML全称是 WeiXin Markup Language，是微信标记语言，是微信小程序的标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。类似于HTML语言，但是他自身也拥有一定的特色。

WXSS(WeiXin Style Sheets)是微信样式表，是微信小程序用于修饰标签语言的样式文件，WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性，同时为了更适合开发微信小程序，WXSS对CSS语言进行修改和扩充，引入全新尺寸单位rpx，但大体语法于CSS语言不分离。

JS是 JavaScript[4]语言的简称，微信小程序里面也可以叫做WXS，是一门脚本语言，通俗易懂，用于页面交互的语言。

2.5 MYSQL数据库

MySQL是典型的关系数据库系统，拥有开源免费、稳定、高效等特点，一直是中小型web项目的最佳数据库选择。MySQL作为当今IT领域使用人数最多的开源关系型数据库软件之一，在2018年的数据库使用率排名中位居第二，仅次于目前为止最成功的商业版数据库Orcle[5]。MySQL最大的优势之一就是无偿使用，这也是它成功的关键。

MySQL支持标准化数据库查询语言SQL。MySQL是一款非常适合个人开发者或小型组织开发团体的数据库管理系统，因为它是开源并且免费的，体积小、速度快、成本低以及其最重要的一点开放源码，深受程序设计人员的喜爱，这也让它成为了许许多多中小型开发网站数据库的首选，同时提供了多种开发的连接API。MySQL将数据的存放按照记录之间的关系存放到了不同的表中，减少了数据的冗余并且提高了开发的工作效率。MySQL支持开发中需要用的大型数据库，并能处理数以万计的记录。因为MySQL是开源的软件，所以在项目的预算中的时候不用花费额外的资金，大大降低了开发的总体成本，这也是MySQL数据库在中小型企业和独立的开发者中广泛流行的原因。

3系统分析

3.1可行性分析

在系统开发之初要进行系统可行分析，这样做的目的就是使用最小成本解决最大问题，一旦程序开发满足用户需要，带来的好处也是很多的。下面我们将从技术上、经济上、操作上、法律上等方面来考虑这个系统到底值不值得开发。

3.1.1 技术可行性

技术可行性是指学习的技术是否能够完成本项目，如果团队本身没有相关的技术储备，而又能够迅速掌握此类技术，那项目应该达不到我们的设计要求。本基于微信小程序的电子竞技信息交流平台采用微信开发者工具、Java语言、MYSQL数据库开发设计，作为计算机专业学生，在学校期间就接触到许多关于编程方面的知识，当然也包括各种编程软件，对他们的了解度也比较系统，所以技术开发上面还是有一定把握。

3.1.2经济可行性

项目需要考虑花费问题，我们必须考虑系统开发中所有的花费进行计算，我们要考虑到系统需不需要太大的资金。由于自己本身就是学生，还没有正式参加工作，金钱上面一直都处于缺乏状态。所以在开发程序过程中，我是不会花太多经济成本在上面的。针对开发软件和数据库，还有界面设计的photoshop软件等在百度上面就可以直接下载，然后根据各种安装视频进行安装，这些资源都是免费的，程序编码阶段使用的源代码在百度上面可以轻松获得，在有网络的环境下就能下载下来，不需要支付任何费用，经济成本很低。

3.1.3操作可行性

操作可行性主要是针对系统用户而言，一个系统再完美，技术再先进，用户不去使用，或者用户根本不会使用，该系统存在的价值也是不大的。本人自己就是学生，程序开发经验不足，在界面设计上面不会设计太复杂，要讲究简单好看，操作上要方便，不能让用户觉得不流畅。用户一旦进入操作界面，界面上就会有相应提示，跟着操作提示就可以找到对应的功能操作模块，对于用户来说免培训就能使用，没有任何学习成本，因此，操作上是可行性的。

3.1.4法律可行性

自己本人开发的软件和用到的资料来源都是图书馆、百度文库、百度网页等渠道，并不涉及违法。在个人毕业设计上面，无论源代码还是论文编写内容不存在抄袭行为。

从上面几个部分的可行性分析得出，这次开发的基于微信小程序的电子竞技信息交流平台在开发上面没有什么大问题，值得开发。

3.2系统性能分析

（1）可升级性：系统的容纳信息一定是持续增长，到时系统可以升级，接受信息的更新发展。

（2）存储性：因为是电子竞技信息交流平台，所以就会在数据库要求上比较严格，信息录入的比较多，而且丰富复杂，这就需要一个强大的数据库来存放更多的数据和保证数据的时时性。

（3）可靠性：系统不可以有病毒类代码，必须有拦截器，验证方法，对里面信息的保护措施，这样才让人用的放心。

（4）简单性：系统设计的应该简单易学的，设计的各种功能应该简单操作，不需要努力学习培训，缩短用户熟悉系统的进程。

（5）一致性：数据应该录入准确，需要更新时，数据应该可以及时的修改，数据还应该有独立保存，不能删除数据的时候会连带着把还需要的数据都删除掉。

3.3 系统功能分析

用户通过微信平台可打开本系统，没有账号的用户可进行注册操作，注册登录后主要实现的功能模块包括首页、英雄、比赛、选手以及我的（我的收藏管理和留言板），用户用例图如图3-1所示。

图3-1 用户用例图

3.4用户体验需求分析

这个基于微信小程序的电子竞技信息交流平台要求在微信平台上可以运行，主要实现了注册登录、英雄、比赛、选手以及留言板等功能模块。一个好的程序要具备以下两方面用户体验：

（1）界面友好

用户界面要简洁直观、操作方便。

（2）响应快速

对用户的请求能快速响应，对一些耗时的应用程序，以进度条的形式显示，让用户随时了解程序执行情况。

3.5系统流程分析

3.5.1注册流程

未有账号的用户可进行注册操作，用户注册流程图如图3-2所示。

图3-2注册流程图

3.5.2登录流程

用户要想进入本系统必须进行登录操作，登录流程图如图3-3所示。

图3-3 登录流程图

3.5.3添加留言流程

用户登录后可添加留言操作，添加留言流程图如图3-6所示。

图3-6 添加留言流程图

4系统设计

4.1系统设计要求

（1）可用性。目标系统功能齐全，能够完全满足用户需求。

（2）可靠性。能连续准确的处理业务，有较强的容错能力。

（3）保密性。保证系统的物理安全、数据存储和存取的安全与保密、数据传输的安全与保密，做好使用人员的授权管理。

（4）可理解性。用户容易理解和使用该系统。

（5）可维护性和适应性。系统应易于修改、易于扩充、易于维护，能够适应业务不断发展变化的需要。

4.2系统开发流程设计

在开发本基于微信小程序的电子竞技信息交流平台时，首先进行需求分析，进而对系统进行总体的设计规划，设计系统功能模块，数据库的选择等，本系统的开发流程如图4-1所示

图4-1 系统开发流程图

4.3系统结构设计

系统的设计和划分是系统的核心研究问题，以确定整体结构和功能模块。该系统的结构化设计的思想，是自顶向下的方式将系统分成若干个子系统，以及反过来的子系统分成模块，其被划分成子模块，层划分各计算机可执行模块可迄今用作一个单独的程序。

本基于微信小程序的电子竞技信息交流平台结构图如图4-2所示。

图4-2 系统功能模块图

4.4数据库设计

一个好的数据库可以关系到程序开发的优劣，数据库设计离不开表结构的设计，还有表与表之间的联系，以及系统开发需要设计的数据表内容等信息。在进行数据库设计期间，还是需要多花时间进行考虑，最终设计出配套程序的数据库出来。

4.4.1数据库E-R图设计

本基于微信小程序的电子竞技信息交流平台采用的是MYSQL数据库，数据存储快，因为电子竞技信息交流平台，主要的就是对信息的管理，信息内容比较多，这就需要好好的设计一个好的数据库，分类要清楚，不能添加信息的时候，造成信息太过混乱，设计好的数据库首先就需要先把各个实体之间的关系表达明确，下面我们用E-R图来具体表示。

E-R图是一种描述显示数据类型间的关系的数据描述方法，E-R图可以完整地映射出现实模型的关系。E-R图中的三个最为重要的元素就是实体、属性、关系。E-R图即由这三点组成。本基于微信小程序的电子竞技信息交流平台的E-R图如下所示：

1、比赛信息实体E-R图如图4-3所示：

图4-3 比赛信息实体的E-R图

2、留言板信息实体E-R图如图4-4所示：

图4-4 留言板信息实体E-R图

3、游戏资讯信息实体图如图4-5所示。

图4-5 游戏资讯信息实体E-R图

4、收藏信息实体图如图4-6所示。

图4-6 收藏信息实体E-R图

5、选手信息实体图如图4-7所示。

图4-7 选手信息实体E-R图

6、英雄信息实体图如图4-8所示。

图4-8 英雄信息实体E-R图

4.4.2数据库表设计

本基于微信小程序的电子竞技信息交流平台采用MYSQL数据库，数据库的功能主要是存储网站中所有数据，以便进行操作。关于数据库中的数据表如下：

表 4-1 bisai比赛信息表

列名	数据类型	长度	允许空	说明
id	bigint	20	否	编号
addtime	timestamp		是	创建时间
zhanduimingcheng	varchar	200	是	战队名称
`saiqu`	varchar	200	是	赛区
zhanduijieshao	varchar	200	是	战队介绍
duibiaozhaopian`	varchar	200	是	队标照片
zhanduichengyuan	longtext		是	战队成员
zhanduishuju	longtext		是	战队数据
jinqibisai	longtext		是	近期比赛'
thumbsupnum	int	11	是	赞数
crazilynum	int	11	是	踩数

表 4-2 messages留言板信息表

列名	数据类型	长度	允许空	说明
id	bigint	20	否	编号
addtime	timestamp		是	创建时间
userid	varchar	200	是	留言人编号
username	varchar	200	是	用户名
content	longtext		是	留言内容
reply	longtext		是	回复内容

表 4-3 news游戏资讯信息表

列名	数据类型	长度	允许空	说明
id	bigint	20	否	编号
addtime	timestamp		是	创建时间
title	varchar	200	是	标题
introduction	longtext		是	简介
picture	varchar	200	是	图片
content	longtext		是	内容

表 4-4 storeup收藏信息表

列名	数据类型	长度	允许空	说明
id	bigint	20	否	编号
addtime	timestamp		是	创建时间
userid	bigint	20	是	用户编号
refid`	bigint	20	是	收藏编号
tablename	varchar	200	是	表名
name	varchar	200	是	收藏名称
picture	varchar	200	是	收藏图片

表 4-5 xuansho选手信息表

列名	数据类型	长度	允许空	说明
id	bigint	20	否	编号
addtime	timestamp		是	创建时间
mingcheng	varchar	200	是	名称
suoshuzhandui	varchar	200	是	所属战队
zhaopian	varchar	200	是	照片
dangqianduanwei	varchar	200	是	当前段位
dangqianfenshu	int	11	是	当前分数
jinqibisaijilu	longtext		是	近期比赛记录
xiangqing	longtext		是	详情
thumbsupnum	int	11	是	赞数
crazilynum	int	11	是	踩数

表 4-6 yingxiong英雄信息表

列名	数据类型	长度	允许空	说明
id	bigint	20	否	编号
addtime	timestamp		是	创建时间
yingxiongmingcheng	varchar	200	是	英雄名称
zhenming`	varchar	200	是	真名
leixing	varchar	200	是	类型
zhaopian	varchar	200	是	照片
jinengjieshao	longtext		是	技能介绍
beijingjieshao	longtext		是	背景介绍
yingxiongjiqiao	longtext		是	英雄技巧
thumbsupnum	int	11	是	赞数
crazilynum	int	11	是	踩数