初学者之《复刻英雄联盟官网之人脸识别登录》②

初学者之《复刻英雄联盟官网之人脸识别登录》②

第3章 Web项目系统设计
第4章 Web项目系统实现

---

三、Web项目系统设计

在完成一个Web项目的开发过程和设计过程时，首先经历的就是整个项目的需求分析而其所具体的需求用例也需要通过开发人员对整个项目进行系统设计才能实现需求用例的功能目的。所以，在通过具体的Web项目系统设计时，首先要考虑的问题就是“这些需求用例怎么做？”，因此这个“怎么做”就成整个Web项目系统设计的核心，也只有了解了怎么做，去采用什么方法做，才能在后续整个项目的实现打好铺垫。在本章结中，主要涉及到的就是描述整个Web系统开发的总体设计思路，采用自顶向下逐层模块化的方法，构造整个Web系统的各部分模块，并使用相对应的模块图对项目中相关的模块进行详细描述，同时也利用到数据库相关的E-R图对数据库的组成结构进行详细描述；除此之外，还需要运用到面向对象的MVC架构视图，充分描述整个Web系统设计的分层结构。

1.Web系统功能模块划分

在整个系统的用例需求分析中，可以看到的是，总共有六个主要的用例需求，而对于这八个主要的用例需求，该Web系统就可以展开出主要的六个功能模块，这些功能模块分别包括首页浏览、英雄搜索、网站管理、以及用户的对战模拟、信息管理、登录注册等；每一部分的功能实现均相互独立，但其相互传输的数据依然存在，从而满足了模块独立性的内聚、耦合准则，下图3.1就是整个Web项目的一些功能模块图。

2.Web系统数据库设计

在该Web项目的系统设计中，数据库的设计当然就是必不可少的一个部分了，作为所有数据源存储的地方，数据库所具备的重要性在整个系统中的不可忽视的，而此项目所采取的数据库框架是一款优秀的持久层框架数据库框架——MyBatis。其实，对于一个项目来说，数据库的采用是极其重要的，而选择一个良好的数据库框架也更是重要的，其不仅可以更方便的处理数据信息并且保障数据信息的安全和方便数据信息的传输，同时更是增强了数据信息的管理能力，在降低了数据冗余度和节约系统资源的情况下，一个项目的开发和运行以及维护就会大大减少成本，同时不仅仅是对开发者的开发效率有利，同时也是对用户信息的一种保障。而在此次开发项目的过程中，主要涉及到三个阶段，其包括数据库的需求分析阶段以及数据库的概念设计阶段和逻辑设计阶段，其中之前的用例需求分析已经介绍到了所要实现的具体的项目功能需求；当前章节就根据所要实现的具体功能需求展开数据库的概念设计阶段和数据库的逻辑设计阶段。

• Web系统数据库概念设计
  对于数据库的概念设计过程，其实就是一个将整个Web系统所划分的功能模块进行抽象化，从而生成各种实体类对象，而作为实体的用户实体，可以通过整个系统设计观察到；同时在该系统也需要用到英雄标签实体、英雄实体、比赛方式实体以及点券实体，在这四个实体中，相互之间均有联系；更具大致分析，英雄实体和用户实体所具备的关系就是1：N的关系，而英雄和英雄标签对应的关系就是M：N的关系。对于英雄和比赛场次的关系，可以知道的是，每场比赛都可以选这多个英雄，但是多个英雄不能参加多场比赛，所以它们的关系就是1：N的关系，同时对于用户和点券的对应关系也是1：N的关系。由以上的大致分析情况，该项目可得到具体的E-R图，如图3.2所示。
• Web系统数据库逻辑设计
  在数据库完成基本的概念设计时就需要对数据库进行逻辑方面的逻辑设计了，因为一个好的数据库就必须做到数据之间具有一定的逻辑。在整个项目的数据库设计分析中，同时又通过实际的项目需求和E-R图的结构分析，可以得到的数据库表有以下几类：
  用户信息表、点券信息表、比赛方式信息表、英雄信息表以及英雄标签信息表等一共五张表，每一张表都会有对应的表信息内容，因为数据本就容易存在冗余或者杂乱的现象，所以通过详细的数据信息表对数据进行处理，无疑就是数据库逻辑设计阶段最重要的部分。
• 用户信息表
  -对于用户信息表中的内容，主要包括的就是用户ID信息，用户名信息、召唤师名称信息、账户密码信息、头像信息、令牌信息、签名信息、英雄拥有信息，经验值信息，点券信息，人脸信息，创建时间以及修改时间信息，当然也包括用户的状态信息。在表中，将用户ID作为整个表的主键，而其中的用户状态信息也通过0，1来决定，所以其设定模式如果是正常在线状态就为1，如果是离线状态就为0，因而此表的详细逻辑设计就如表3.1所示。
  
• 点券信息表
  点券信息表所描述的就是关于用户资产下的点券，与点券对应的信息也主要分为：其点券本身的数量信息，以及点券本身所要使用的消费记录以及其充值记录，点券是整个Web系统中很重要的一个角色，也只有当用户拥有了所谓的点券的资产，才能够进行其他的功能需求操作，以下的点券信息表详细的逻辑设计就如表3.2所示。
• 比赛方式信息表
  所谓的比赛方式就是该Web项目中对战模拟下首选的一个选择内容，通过不同的比赛方式来记录不同的比赛数据，并将其比赛ID设为主键，在每一场比赛中，其主要涉及到的信息有：比赛场次的名称和该比赛场次被选中的次数，以及每场比赛获取的经验值、参赛记录。而其具体信息的详细逻辑设计就如表3.3所示，其主要也介绍了和比赛方式有关的数据成分以及数据关系。
• 英雄信息表
  在英雄信息表中，其对应的就是相关英雄的信息，其主要的信息也包括：英雄的ID，英雄图片的绝对地址，某位英雄被使用的次数以及英雄的名称和英雄的点券价值，根据这些数据的基本逻辑关系，可以设计出对应的且详细的英雄信息表，其具体表格如表3.4所示。
• 英雄标签信息表
  关于英雄标签信息表，其主要目的是给英雄赋予标签，更重要的也是对英雄进行分类，对于不同的标签，其所包含的英雄也不同，在此信息表中，主要涉及到了英雄标签信息中作为主键的ID，以及英雄标签的名称和英雄头像图片的绝对地址，其具体的详细设计信息如信息表3.5所示。
  

3.Web系统详细设计

在经过系统的概要设计阶段以及数据库的三个阶段之后，其主要的下一个阶段就是根据概要设计所涉及的内容进行系统性的详细设计，在对整个系统进行详细设计的同时首先要进行的就是对系统进行分层结构的具体化描述，其主要完成的内容也就是动态性的描述整个Web项目所要进行的动态行为，在这个过程中，需要涉及的就是对整个Web系统进行基础性的分层，以及详细描述其具体的动态行为的设计。
在前面的总体设计理念中也有介绍到，该项目的整个分层设计是采用的MVC架构的方式对系统采取分层的行为，其中主要包括的就是数据层（Model）、表现层（View）、控制层（Control），在不同的层级进行着不同的事物处理行为，主要其具有的优点就是可以提高项目中组件的重用，并降低了层与层之间的依赖，从而有利代码的标准化开发，其具体的层次结构也如图3.3所示。

在该项目中，玩家用户可根据前端的View视图层的内容对整个网站进行操作，而其具体操作的事件所涉及到的数据被浏览器进行处理，在经过此次处理之后的数据，又将被发送到数据的Control控制层，Control控制层将数据传达给Model业务层进行对应的事件处理。数据在Model业务层存留的事件被所调用的Mapper层相关的读写方法进行再次处理，从而使得数据被数据库进行了相应的读写操作。在经过第一回的数据传输时，其只是完成了数据到Web系统数据库的这个过程，但是其具体结果和信息并不能被玩家用户所看到的，所以这又需要进行数据回传，也就是将数据再通过Model业务层，Control控制层，输送到View视图层进行显示。由此可由图3.4所示。

1. View视图层
   一个项目的直接观感自然少不了视图层的参与，而且其存在关键也是和用户进行良好交互的重要载体。其位于整个项目开发结构层次的最上层，其也主要在前端开发中进行，为用户提供更好的网页观感，图形化的界面也让用户更加容易接受，同时也能更有效的提高用户使用的频率，同时也能增强官网的浏览效益。而在整个项目中，视图层所运用到的技术框架也就是Jquery.js。但是对于前端而言，所要涉及到的内容也需要分为三部分，其中主要包括页面展示、API接口以及网络访问请求，因此根据分析，我们也可以得到关于前端视图层的详细设计描述框架图，而其具体内容如图3.5所示。
   
2. Control控制层
   所谓的控制层，自然是实现了对于整个项目数据的控制，其主要位于View视图层之下，Model业务层之上的，其主要作用是用于接收View视图层中用户所操作的请求，并同时也在分析数据，解析与之相关的数据信息，最后根据需要和调用相关的业务层方法对数据进行处理，随后并将数据回传至View视图层。其中所包含的所有Controller都是继承于BaseController而实现的。由此可以得知，关于Control控制层的类图大致思路，但是此时需要定义一个用户控制器UserController，来确认他们之间的继承关系，并将其包含的服务定义为IuserService，通过这样的具体分析，我们可以得一个相对完整的控制层类图，其具体信息如图3.6所示。
   
3. Model业务层
   在Control控制层之下的就是当前要介绍的业务层，其也是主要的核心层。在接收到Control控制层传来的数据时，其也会根据业务逻辑调用相关的代码，对数据的请求进行处理，并且同时也会在处理所需求的业务时，其也会向数据控制层请求相应的数据。在整个项目的设计里主要采用了遵循面向接口编程的原则。其目的就是为了将业务层中的各个类进行接口性定义，然后再对相应的接口方法进行实现。其中，实现接口的类就需要用到@Service进行注解然后使得服务能够自主的注入到业务层中。其中，所涉及到的业务层的接口都需要继承来自Iservice<>基类，而对于ServiceImpl<>类来说就是被业务层的实现类所继承，由此可得具体业务层类图为图3.7所示，其中User是自定义的实体，其DAO也由UserMapper定义。
   
4. DAL数据层
   数据层就是名副其实的操作项目中所具有的数据的一个层次部分，它主要处于业务层之下，数据源之上，在此项目中主要引入了Mybatis，不仅支持定制化的SQL，更重要的是其存储过程和其高级映射几乎避免了很多其他数据库框架所存在的问题，在增、删、改、查等基本的数据操作功能实现中可用极少量代码即可实现，所以在引入Mybatis数据库的框架时，是大大提高了后端数据处理的效率。在DAL数据层中，主要分为数据访问对象层和实体层，而其具体内容也分为以下两部分介绍。
   数据访问对象层：其对数据进行的操作往往都是长久性的，其中实体层便用来定义具体的不同实体，而作为数据访问对象层为接口，是需要继承BaseMapper<>，从而用以访问Mybatis所提供的相关函数方法，在这里需要使用到@Repository进行注解。其具体的相关类图可如图3.8所示，其中有一个自定义的实体为user，和其对应的数据访问对象为UserMapper。
   
   实体层：该层是为了定义数据对象而存在的，其相关的数据对象将存放在Data文件夹中，每个Data类都对应与数据库中的一张表。因此，也需要使用注解对表名进行一定的说明，而对于每个变量所使用的注解就是指定的对应字段。其中也就需要使用到了Lombok提供的注解，该注解可以自动生成set方法和get方法，从而有了有参和无参的构造方法。

---

四、Web项目系统实现

本章主要介绍了网站的登录注册、点券充值、英雄购买以及签名更改和对战模拟等多个模块的实现，对这些模块中的关键技术和实现进行了详细介绍。

1.登录注册

 在整个登录注册模块中主要也分为四个部分，其分别包括用户的账户密码登录和用户的人脸识别登录，而注册中主要又包括用户基本信息注册和用户的人脸信息采集功能模块，所以其具体总共包含又四个页面，在之后的模块介绍中，部分功能也会涉及关键代码的介绍。但在人脸识别登录的页面里，人脸识别登录的实现的最为关键的。在如今的科技时代，人脸识别系统也变得更加普遍，而且也有很多平台都开放了人脸识别系统的API接口，所以该项目主要引入了百度大脑的人脸识别API接口。在解决整个问题的之时，首先就是需要通过百度云进入人脸识别控制台，即地址为：

https://console.bce.baidu.com/ai/?_=1528192333418&fromai=1#/ai/face/overview/index

然后就是通过创建人脸识别应用来获取API Key及Secret Key，并对接口进行调用的操作，然后又进行相关的基本配置。最后便可获取调用接口所需要的Access Token，由于人脸识别在线的接口主要针对的是HTTP API调用者，其调用API时也需要在URL上标志accesss_token参数，其具体代码段为：

#!/bin/bash-curl-i-k'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【百度云应用的AK】&client_secret=【百度云应用的SK】'

在获取到了Access Token并请求了URL的数据格式，服务器将返回参数如下：

{"refresh_token": "25.b55fe1d287227ca97aab219bb249b8ab.315360000.1798284651.282335-8574074",
    "expires_in": 2592000,
    "scope": "public wise_adapt",
    "session_key": "9mzdDZXu3dENdFZQurfg0Vz8slgSgvvOAUebNFzyzcpQ5EnbxbF+hfG9DQkpUVQdh4p6HbQcAiz5RmuBAja1JJGgIdJI",
    "access_token": "24.6c5e1ff107f0e8bcef8c46d3424a0e78.2592000.1485516651.282335-8574074",
    "session_secret": "dfac94a3489fe9fca7c3221cbf7525ff"}

然后准备接口的调用，这里需要用到接口调用工具是PostMan，其可以很快的对接口进行调用，当接口调用成功的时候，就需要搭配人脸信息采集的图片实现人脸识别登录。而这也就是人脸识别进行登录的部分。其主要的功能实现效果图如图4.2所示(涉及隐私此处未展示，见谅)

其用户的基本信息注册页面如图4.3所示。

当然，在人脸信息采集的方面其主要方法是进行人脸图片的采集，所以在使用人脸信息采集页面中，这里就需要调用主机的摄像头，然后进行图片截取，并对图片进行数据库保存，其具体的代码段为：

window.onload = function () {
	var canvas = document.getElementsByTagName('canvas')[0],
		context = canvas.getContext('2d'),
		video = document.getElementsByTagName("video")[0],
		snap = document.getElementById("snap"),
		close = document.getElementById("close"),
		start = document.getElementById("start"),
		MediaStreamTrack;
	start.addEventListener('click', function () {
		if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
			navigator.mediaDevices.getUserMedia({
					video: true,
					audio: true
			}).then(function (stream) {
					console.log(stream);
					MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
					video.src=(window.URL).createObjectURL(stream);
					video.play();
			}).catch(function(err){
					console.log(err);});
		}else if(navigator.getMedia){
			navigator.getMedia({
				video: true
			}).then(function (stream) {
				console.log(stream);
				MediaStreamTrack=stream.getTracks()[1];
				video.src=(window.webkitURL).createObjectURL(stream);
				video.play();
			}).catch(function(err){
				console.log(err);});}});
	snap.addEventListener('click', function () {
		context.drawImage(video, 0, 0,200,150);});
	close.addEventListener('click', function () {
		MediaStreamTrack &