基于 springboot 实现的可视化学生管理系统

该系统主要由 前端可视化模块、后端学生管理模块功能、前后端数据接口对接、mysql 数据管理 组成。系统后台模块采用 MVC 与 前后端分离 的架构思想，引入了 spring boot 2 框架构建 Web 项目，以及提供 json 格式的数据接口给予前端进行接口调用，从而实现前后端分离的架构思想。前端采用 layUI 作为前端 UI 框架，数据可视化使用 EChar 开源图表框架，通过引入 CDN 的方式进行引入 ECharts, js 文件，设置合适的 DOM 容器和配置一系列图表参数生成可视化图表。通过把数据可视化技术运用得到学生管理系统中，把管理系统数据之间的关系通过图表的形式展示，其学生信息情况就被清晰的展示出来了。

一、设计方案

1.1、项目分析

由于系统采用 B/S 架构，集中部署、分布使用，且使用当代流行的 “前后端分离” 架构，降低层与层之间的耦合度，且提高了服务器处理时的性能；前端使用 layUI 框架实现，支持多种主流浏览器，且自带响应式页面配置；后端采用 springBoot 2，Mybatis 等技术构建，采用 Mysql 数据库来实现数据管理。该系统具有操作简单、使用方便、易于维护、扩展性强、前后端耦合度低、服务器减压等特点；实现了学生管理系统的流程处理简化、信息统计可视化、验证码、异常页、权限验证、文件导出等功能，为管理者提供了强有力的数据信息可视化的支持。

1.2、示意图

1.2.1、项目功能模块图

在本系统的 “项目功能模块图” 如下图。主要由首页、登录页、后台管理系统三个模块组成。

1.2.2、当前项目架构图

二、项目需求

2.1、首页需求

介绍：
	该首页是一个单页面的，主要是展示小组成员的大致分工，与项目初步了解的页面展示图，以及项目初步的技术选型。

2.2、登录页需求

介绍：
	是一个进入后台管理的唯一入口界面，拥有用户合法验证、数据合法校验、访问出现错误时页面友好展示功能等模块。

2.3、后台需求

介绍：
    可视化学生管理系统的核心，包括 "基础功能性模块" 和 "复杂功能性模块" ；
    其中
    	“基础功能性模块” 包括：用户验证、权限验证、可视化数据展示、分页与优化、表格打印、导出CSV、导出Excel；
    	“复杂功能性模块” 包括：学生信息操作、学生搜索。

2.3.1、基础功能性模块

用户验证：
	当用户点击提交按钮时，会通过服务器进行用户验证，并返回结果。
        如：	验证码错误、用户名或密码错误、验证码获取失败；与登录页用户验证不同的是，验证在服务器端进行；
              为何需要两次验证？因为不确保登录页是否有被恶意修改。
    
权限验证：
	网路路径 url 验证：当路径未获取 session 授权时，禁止登陆，获取到 session 授权时，才可进入后台管理系统。
    
可视化数据展示：
	从服务器端回传的数据进行格式处理只会，进行数据的可视化展示。
    
分页与优化：
	使用第三方框架 LayUI 提供的分页功能实现表格数据的分页展示，并且可动态展示表格数据，且具有良好的移动端适配功能。
    
表格打印：
	前端页面在修改用户信息表格时，提供当前页面数据展示的学生信息数据的表格打印功能。
    
导出CSV：
  	前端页面在修改用户信息表格时，提供当前页面数据展示的学生信息数据的 CSV 文件导出功能。
    
导出Excel：
  	前端页面在修改用户信息表格时，提供当前页面数据展示的学生信息数据的 Excel 文件导出功能。

2.3.2、复杂功能性模块

学生信息操作：
	可以对学生的信息进行 crud 的操作，其中就提供了两个展示图表的页面。
    一个是对学生的基本信息进行展示，是一个单表横向的数据展示格式，
    	其中 
    		性别取值：0（女） / 1（男），
    		日期格式：yyyy-MM-dd；
    在该页面内提供了 crud 的操作，同时也对非法的数据进行了校验，此外还添加了一些小的功能性模块；
	另外一个是学生科目与成绩的信息表，是一个多表纵向的数据展示格式，其中科目数是动态列，科目名也是动态数据，
    不同的专业所对应的科目列表与科目名称都各不相同，
    	其中 
    		学号、姓名来自 students 表，班级来自 class_and_pro_relation 表，
    		科目名称来自 pro_and_course_relation 表，
    		学生的各个科目的分数来自 students_and_subjectscore_relation 表；
    同样，在该页面内提供了 cru 的操作，同时也对非法的数据进行了校验，学号不存在不允许添加学生信息，此外还添加了一些小的功能性模块。
    
		问题：
    		为什么学生科目与成绩的信息表中没有提供 d 操作？（也就是没有提供删除学生成绩的操作）
		原因：
    		因为本小组人员认为，并不存在删除当前学生成绩的情况，在本项目上会在删除学生基本信息的时候，会同步删除学生的科目成绩。
    		因为当前表是按照学号进行学生成绩查询的，且是优先遍历学号，再进行遍历科目分数的；
    		那么不存在的科目分数会以 空字符串 的形式展示在表格中，所以并不存在要删除学生成绩的情况，
    		若要添加学生成绩，直接点击修改 / 新添即可。
    
    
学生搜索：
	提供 学生学号 和 学生身份证号 查询功能，学生学号与学生身份证号搜索采用全表扫描形式进行扫描，
    若扫描到该学生，则返回该学生的信息状态，若扫描不到该学生，则在前端页面表格展示中显示 “无数据” ；
    当学号为空，身份证为空时，也就是直接点击全局搜索，会直接返回当前未点击全局搜索前的状态；
    
    对于搜索优化：
    	数据会去除搜索框中前后的空格，且在服务器中第一次获取表格时，会有服务器临时存储表格的一个 ArrayList 对象进行表格存放，
    	从而优化了在每次在学号与身份证号为空的情况下，直接点击全局搜索频繁访问数据库，导致服务器性能下降等问题。

三、技术选型

3.1、前端

3.1.1、数据视图层

该层只是提供给用户进行页面展示。在该项目中，只进行首页与后台管理系统的页面展示，以及后台管理系统中的可视化视图组件 Echarts ;
其中 Echarts 采用 CDN 的方式进行导入，因此在开启该项目时，需要开启网络。

3.1.2、交互层

该层会对视图层页面展示进行细节上的优化，以至于管理者在对视图层页面进行操作的时候，不会有过多的专业名词展示在视图层，从而减轻管理者对该系统的使用难度；另外还有对静态资源的 crud 操作。另外还有一些用户非法修改页面时的一些友好提示，和服务器发生错误时的一些友好提示，以至于让管理者区分是页面响应问题，还是服务器内部问题。

3.1.3、数据处理层

移动端页面适配:
	该模块会对移动端设备进行部分页面模块的适配，以至于在不同页面上都会有较好的页面展示，
        不至于出现在移动端上有过长，过大的页面进行展示，也增加了管理者在移动端上也可进行学生信息管理的操作。
        
页面与页面间的数据共享：
	由于在本项目上前端部分不使用第三方非 UI 框架（如：Vue。但使用了 jQuery ），
        但传统的 HTML 页面与页面之间不会进行数据共享，也就是说，在上一个页面的数据不会被下一个页面所引用，反之亦然；
        要想进行静态页面间的数据共享，而且也不使用第三方框架的前提下，可以使用原生 js 中的 API 进行页面间的数据共享；
        在本项目中使用 window.sessionStorage 对象进行页面间的数据共享。

数据格式转换：
	由于在从服务器中获取到的数据可能与前端页面展示的数据可能会出现不一致的效果，使用要采用数据格式转换这一非功能性模块，
        同样，非功能性模块也是使用原生 js 进行数据格式的转换。
        
数据校验：
	在我们进行 crud ，以及登录注册等业务操作时，不进行任何数据校验直接访问服务器会对服务器存储数据产生不可预估的错误，这种错误是致命的；
        因此在此，我们在访问服务器时，会使用正则表达式进行数据的校验，只有当数据合法时，才会对业务操作进行 crud 操作。
        为什么要在客户端进行数据校验？
        
页面实时响应：
	该模块分为两部分 ajax 与定时器：
        ajax：
        	该模块用于与服务器进行数据接口连接，是整个前端静态页面与服务器间获取数据的重要部分，也是对视图层数据进行展示处理的数据核心。
        定时器：
        	该模块用于对一些特定的功能进行实时展示，以及避免服务器资源的过渡浪费，部分也与 ajax 进行结合使用。

3.2、数据接口

3.2.1、接口规范

在当前项目中，使用目前比较流行的接口规范 Restful 接口规范，而不是通过传统的 "以不同的URL（主要为使用动词）进行不同的操作" ；
    同时，使用 Restful 接口规范 具有以下特点：
		1. URL具有很强可读性的，具有自描述性。
		2. 资源描述与视图的松耦合。
		3. 可提供 OpenAPI，便于第三方系统集成，提高互操作性。
		4. 提供无状态的服务接口，降低复杂度，可提高应用的水平扩展性。
		5. 从而达到 资源描述与视图的松耦合。

3.2.2、接口格式

在当前项目中，接口格式主要使用 JSON 格式，其中 JSON 格式的回传数据按照指定的规定进行回传。（code、count、msg、data），
    其中，
    	code 指定的是回传信息状态码；
    	count 指定的是回传信息中 data 数据中的条数；
    	msg 指定的是回传信息状态码的描述信息；
    	data 指定的是回传信息的核心数据部分。

3.3、后端

3.3.1、控制层

Controller 类：
	控制层的核心，负责对前端接口与业务逻辑层的数据交互、数据校验、参数解析、以及对静态页面的请求转发与重定向等操作。
    
拦截器：
	当客户端进行路径请求时进行处理，是对控制器层最基本的权限验证、数据验证、编码控制等的功能性模块。
    
过滤器：
	当客户端进行路径请求时进行处理，是对控制器层最基本的权限验证、数据验证、编码控制等的功能性模块。
    （在当前项目中的后续项目升级中被拦截器所取代）
    
异常处理：
	控制器层发生错误时，会自动交给异常处理模块进行对异常的处理。该异常处理只会捕捉到 控制器层所发生的异常。

3.3.2、业务逻辑层

数据加 / 解密：
	对 控制器层 未 加/解 密的数据进行 解/加 密操作，尽可能减少管理者修改数据被数据库管理者轻易获取敏感数据。
    
学生信息搜索：
	对学生的信息进行搜索。
    
业务逻辑：
	在管理者对前端页面时进行 crud 操作，并且经由 控制器层 过滤掉的数据进行业务逻辑的 crud 操作。
    
业务优化：
	在堆业务逻辑进行 crud 操作时，缩短对业务逻辑操作中所需要花费的时间，从而更快的回传给客户端。

3.3.3、数据访问层

HikariCP 数据连接池：
	在该项目中，使用 HikariCP  数据库连接池增强对数据库访问的效率，并且 hikariCP 在并发较高的情况下，性能基本上没有下降；
    该 HikariCP  数据库连接池 是在spring boot 2.0 新增的默认数据库连接池。
    
数据操作：
	对数据库中的数据进行 crud 的操作。
    
数据优化：
	在对 "数据操作"  的同时为了增强数据完整性，数据访问效率，数据操作效率，也在本项目中采用了外键约束、建立索引表、建立视图表等操作。
    
数据存储：
	对数据操作完之后，就是对数据进行 “永久化存储” 。

3.3.4、公共服务层

跨域问题：
	什么是跨域？答：在浏览器上当前访问的网站向另一个网站发送请求获取数据的过程就是跨域请求。

全局拦截器：
	该模块与控制器层的作用几乎一致，不同在于作用于整个项目。

全局异常处理器：
	该模块与控制器层的作用几句一致，不同在于作用于整个项目，且与控制器层的实现方式不一致，且实现较为繁琐。

JavaBean：
	在 MVC 三层架构中，存放数据处理时，所需要封装的对象。

Web 配置类：
	对 MVC 三层架构的数据配置，如：页面权限控制，静态资源引用，回传给客户端的状态码等。

3.3.5、spring boot 与 spring

a)、spring

用于整合 MVC 三成架构。

b)、spring boot

用于对 spring 配置的简化操作，通过一个 application.yml  或  application.properties 
	或其他以 .yaml / .yml / .properties 结尾的配置文件进行配置文件简化。

3.4、数据库

用于存储数据、对出具进行 crud 操作，以及使用 数据外键约束、触发器、数据索引、数据视图等实现对 SQL 语句的优化。

四、项目测试

4.1、公共页

4.1.1、错误页

0. 当客户端发生指定错误会自动跳转到指定错误。

4.2、首页

4.2.1、前端

1. 页面加载数据时，有过渡动画。
2. 轮播图自动切换，以及鼠标悬停不切换。
3. 缩略图实现细节。
4. 页面响应式，像素 600px 的设备不出现登录按钮。

4.3、登录页

4.3.1、前端

1. 点击验证码会刷新。
2. 当账号/密码框获取焦点时，框内文本会向上偏移。
3. 未输入用户名/密码不允许直接登录。
4. 密码错误/验证码错误出现过渡效果。
5. 用户名密码、验证码正确，且跳转后台管理前，出现动画过渡效果。
6. 页面响应式。
7. 用户名密码正确之后，跳转到后台管理系统。

4.3.2、后端

1. 每次获取验证码前 / 登录成功之后，都会作废掉上一次使用的验证码。
2. 进入数据库查询用户名与密码是否正确。
3. 回传信息包含后台管理页面跳转路径、session 中保存当前用户名、并生成唯一登录状态信息 UUID 。

4.4、后台管理模块

4.4.1、前端

后台管理布局模块

1. 导航栏实现过程。
2. 左侧侧边栏页面实现与过渡优化。
3. 用户登录信息处理。
4. 中文显示细节。【cookie 的编解码】
5. 选项卡卡细节。
6. 切换其他选项卡之后，再返回上一个选项卡时，获取不到数据，以及页面布局崩溃的解决方案。
7. 页面响应式。

首页模块

1. 页面加载就从后台获取页面班级分布信息，并对数据进行转换的可视化数据。
2. 获取数据进行数据格式转换。
3. 数据显示初始化与二次渲染配置。
3. 页面过渡配置。
4. 首页加载之后，获取当前项目中，专业选择信息，并存入 浏览器 cookie/session 中。
5. 页面响应式布局。

单个班级可视化模块

1. 专业点击之后悬浮选择班级，点击之后从服务器获取相对于的数据。
2. 数据筛选、数据统计、数据格式转换。
	2.1 GPA计算等.....
3. 数据表格重绘。
4. 数据视图切换。
5. 数据视图下载细节。
6. 页面响应式。
7. 页面过渡配置。

单个专业可视化模块

1. 专业点击之后悬浮选择专业，点击之后从服务器获取相对于的数据。
2. 数据筛选、数据统计、数据格式转换。
	2.1 GPA计算等.....
3. 数据表格重绘。
4. 数据视图切换。
5. 数据视图下载细节。
6. 页面响应式。
7. 页面过渡配置。

学生信息管理模块

1. 专业点击之后悬浮选择班级，点击之后从服务器获取相对于的数据。
2. 学号、身份证搜索。
3. 数据表格展示。
	3.1 筛选列。
	3.2 导出 CSV 与 Excel。
	3.3 数据打印。
4. 测试数据表格 crud操作。
	4.1 新增学生信息模块测试。
	4.2 编辑学生信息模块测试。
	4.3 删除学生信息模块测试。
5. 分页模块。
6. 页面响应式。
7. 页面过渡配置。

学生成绩管理模块

1. 专业点击之后悬浮选择班级，点击之后从服务器获取相对于的数据。
2. 动态表头科目名称信息。
3. 数据表格展示。
	3.1 筛选列。
	3.2 导出 CSV 与 Excel。
	3.3 数据打印。
4. 测试数据表格 crud操作。
	4.1 新增学生信息模块测试。
	4.2 编辑学生信息模块测试。
	4.3 删除学生信息模块测试。
5. 分页模块。
6. 页面响应式。
7. 页面过渡配置。

4.4.2、后端

a)、后台管理布局模块

1. 判断用户是否登录成功，而不是直接输入路径去访问。
2.

b)、首页模块

0. 对数据库中的数据进行中转，交由前端页面进行格式转换。

c)、单个班级可视化模块

0. 数据展示

d)、单个专业可视化模块

0. 数据展示

e)、学生信息管理模块

1. 获取学生数据。
	1.1 点击搜索。
		
	1.2 获取学生数据。
		对班级编号进行拆分，并回传给前端页面，前两位为专业id，后面的为班级id。
2. 对学生信息进行 crud 操作。
	2.1 查看学生信息表。
	2.2 增加学生信息表。
	2.3 修改学生信息表。
	2.4 查询学生信息表。
3. 数据分页。

f)、学生成绩管理模块

1. 根据班级获取表格表头数据。
2. 对学生成绩进行 cru 操作。
	2.1 查看成绩信息表。
	2.2 增加成绩信息表。
	2.3 修改成绩信息表。
3. 数据分页。

秒速小龟 / 基于 springboot 实现的可视化学生管理系统 .gitee-modal { width: 500px !important; }