目  录

摘要

1 绪论

1.1 研究背景

1.2 研究意义

1.3论文结构与章节安排

2系统分析

2.1 可行性分析

2.2 系统流程分析

2.2.1 用户注册流程

2.2.2 数据删除流程

2.3 系统功能分析

2.3.1 功能性分析

2.4 系统用例分析

2.5本章小结

3 系统总体设计

3.1 系统架构设计

3.2 系统功能模块设计

3.3 数据库设计

3.3.1 数据库概念结构设计

3.3.2 数据库逻辑结构设计

3.4本章小结

4 系统详细设计与实现

4.1注册用户功能模块

4.1.1 前台首页界面

4.1.2用户注册界面

4.1.3用户登录界面

4.1.4新闻咨讯界面

4.1.5 电价策略界面

4.1.6 在线充值界面

4.1.7 个人中心界面

4.2 管理端功能模块

4.2.1系统用户管理界面

4.2.2缴费通知管理界面

4.2.3电价策略管理界面

4.2.4系统管理界面

4.2.5资源管理界面

5系统测试

5.1 系统测试目的

5.2系统测试用例

5.3 系统测试结果

6 结论

参考文献

致  谢

摘要

本文旨在介绍基于Spring Boot后端框架和Vue前端框架开发的大学校园用电数据管理与可视化系统。该系统旨在实现校园用电数据的实时监测、管理和可视化展示，以提高校园能源管理效率和节能意识。通过整合数据采集、分析和可视化展示功能，为校园管理部门提供了一套全面、直观的用电数据管理解决方案。

在系统设计中，注重利用Spring Boot框架的快速开发特性和Vue框架的灵活性，实现了系统的高效运行和用户友好性。通过实时数据监测和图表展示，用户可以直观了解校园各部门的用电情况，帮助管理部门及时调整用电策略，实现能源资源的合理利用和节约。系统的开发意义在于提升校园用电管理的智能化水平，促进校园节能减排工作的顺利进行。

未来，基于Spring Boot和Vue的大学校园用电数据管理与可视化系统将继续优化和升级，引入更多智能化的功能和数据分析技术，实现用电数据的精准监测和预测分析。同时，系统将与校园能源管理系统深度集成，为校园能源管理决策提供更有力的支持，推动校园能源管理工作向更智能、更可持续的方向发展。

关键词：大学校园用电数据管理与可视化；VUE+Spring Boot 

Abstract

The purpose of this paper is to introduce the data management and visualization system of university campus electricity based on Spring Boot back-end framework and Vue front-end framework. The purpose of this system is to realize real-time monitoring, management and visual display of campus power consumption data, so as to improve the efficiency of campus energy management and energy saving consciousness. By integrating data collection, analysis and visual display functions, it provides a comprehensive and intuitive power consumption data management solution for campus management departments.

In the system design, we pay attention to the rapid development of Spring Boot framework and the flexibility of Vue framework to realize the efficient operation and user friendliness of the system. Through real-time data monitoring and chart display, users can intuitively understand the power consumption of various departments on campus, and help the management department to adjust the power consumption strategy in time to realize the rational utilization and saving of energy resources. The significance of the development of the system is to improve the intelligent level of campus electricity management and promote the smooth progress of campus energy conservation and emission reduction.

In the future, the university campus power consumption data management and visualization system based on Spring Boot and Vue will continue to be optimized and upgraded, and more intelligent functions and data analysis technologies will be introduced to achieve accurate monitoring and predictive analysis of power consumption data. At the same time, the system will be deeply integrated with the campus energy management system to provide more powerful support for campus energy management decisions and promote the development of campus energy management to a more intelligent and sustainable direction.

Keywords: University campus electricity data management and visualization; VUE+Spring Boot

1 绪论

1. 1. 研究背景

随着社会对节能环保的重视和大学校园能源消耗量的增加，大学校园用电数据管理与可视化系统的研究备受关注。根据统计数据显示，校园用电量占据整体能耗的较大比例，而传统的用电管理方式存在信息不透明、数据分析困难等问题。因此，设计一套基于Spring Boot和Vue的系统，能够实现用电数据的集中管理和直观展示，有助于提高校园用电管理的智能化水平和节能效果。

当前，大学校园用电数据管理与可视化系统的研究已成为大学节能减排和可持续发展的重要议题。国内外相关研究表明，通过建立智能化的用电数据管理系统，可以有效监控校园用电情况，优化能源使用结构，实现节能减排目标。基于Spring Boot和Vue的技术优势，设计开发这样一套系统有望为大学节能工作提供科学的数据支持和决策依据。

因此，借助Spring Boot后端框架和Vue前端框架的结合，开发大学校园用电数据管理与可视化系统具有重要的现实意义。通过系统的设计与实现，能够为大学校园提供高效的用电数据管理方案，帮助学校更好地掌握能源使用情况，制定合理的节能计划，推动校园节能减排工作的开展，促进校园可持续发展战略的实施。

1.2 研究意义

设计基于Spring Boot后端框架和Vue前端框架的大学校园用电数据管理与可视化系统具有重要的研究意义。首先，该系统能够实现校园用电数据的实时监测和分析，帮助管理部门更好地了解校园能源使用情况，优化用电策略，实现节能减排的目标。其次，通过可视化展示数据，可以提高校园师生对能源消耗的认识，激发节能意识，推动校园节能减排工作的深入开展。

在当前环境保护和节能减排的背景下，基于Spring Boot和Vue的大学校园用电数据管理与可视化系统的设计与实现具有重要的社会意义。通过系统的建立，可以提高校园能源管理的智能化水平，促进节能理念在校园内的推广和实践，为学校可持续发展和绿色校园建设提供有力支持。未来，这一系统有望成为校园节能管理的重要工具，为学校节能减排工作注入新的活力和智慧。

综上所述，基于Spring Boot和Vue的大学校园用电数据管理与可视化系统的研究具有重要的理论和实践意义。通过系统的设计与实现，可以提高校园用电管理的科学性和效率，推动校园节能减排工作的开展，为学校节能环保工作作出积极贡献，促进校园绿色可持续发展的进程。

1.3论文结构与章节安排

论文将分层次进行编排，除去论文摘要致谢文献参考部分，正文部分主要结构如下：

第一章：绪论，主要介绍系统的研究背景和意义，同时进行了论文整体框架的结构的简要介绍。

第二章：系统分析，主要对系统进行可行性技术、系统功能分析、用例分析。

第三章：系统总体设计，主要是对系统的架构、功能结构、系统数据库进行分析。

第四章：系统详细设计与实现，根据系统功能的划分，主要对系统的部分界面进行展示。

第五章：系统测试，主要对系统的主要功能进行测试。

第六章：结论，主要对系统的开发设计工作进行总结。

2系统分析

系统分析是开发一个项目的先决条件，通过系统分析可以很好的了解系统的主体用户的基本需求情况，同时这也是项目的开发的原因。进而对系统开发进行可行性分析，通常包括技术可行性、经济可行性等，可行性分析同时也是从项目整体角度进行的分析。然后就是对项目的具体需求进行分析，分析的手段一般都是通过用户的用例图来实现。下面是详细的介绍。

2.1 可行性分析

（1）技术可行性

VUE.JS是一种轻量级的前端框架，具有优秀的性能、简单易学且高度灵活，适合用于构建复杂的单页面应用。Spring Boot是一个用于创建独立、生产级别的基于Spring的、运行在Java虚拟机上的应用程序的框架，其内嵌了Tomcat、Jetty或Undertow等Servlet容器，无需部署WAR文件。此外，Spring Boot提供了丰富的API，能够方便快速地搭建RESTful API，对于后端数据处理十分友好。结合VUE和Spring Boot，可以实现前后端分离，提高开发效

率，使得系统的技术实现是可行的。

（2）经济可行性

开发大学校园用电数据管理与可视化系统，可以在很大程度上降低开发成本。首先，这两种技术都是开源的，无需支付昂贵的许可费用。因此，从经济角度分析是可行的。

（3）操作可行性

对于用户来说，大学校园用电数据管理与可视化系统操作简便，易于上手。VUE.js的响应式界面设计可以提供流畅的用户体验，而Spring Boot提供的RESTful API则保证了数据的快速处理和传输。对于管理员来说，系统的管理界面清晰、直观，方便进行文章信息管理、用户管理等操作。

2.2 系统流程分析

系统流程是用一些特定的符合和线条来进行演示用户在使用系统时的过程，在进行系统分析的时候，业务流程可以帮助开发人员更好的理解业务，发现错误，完善系统。

2.2.1 用户注册流程

要成为系统用户，首先要通过注册，用户注册流程图如下图2-1所示。

图2-1  用户注册流程图

2.2.2 数据删除流程

如果系统里面存在一些没有用的数据，相关的管理人员还可以对这些数据进行删除，数据删除时流程图如下图2-2所示。

图2-2  数据删除流程图

2.3 系统功能分析

2.3.1 功能性分析

按照大学校园用电数据管理与可视化系统的角色，主要包括注册用户和管理员这两大功能模块。

注册用户：
（1）注册登录：用户可以通过注册成为系统用户，注册后可以用账号密码登录系统。
（2）首页：用户可以查看首页展示的功能导航栏、轮播图、新闻咨讯等内容。
（3）公告通知：用户点击可查看网站公告、关于我们、联系我们和网站介绍。
（4）新闻咨讯：用户点击可查看新闻咨讯，同时可对咨讯文章进行点赞、收藏和评论。
（5）留言板：用户可点击“发布留言”按钮，输入标题和留言内容进行提交留言。
（6）电价策略：用户点击可通过搜索策略标题进行查看电价策略列表，同时可进行点赞、收藏和评论。
（7）在线充值：用户点击可填写充值信息，包括充值标题、用户名称，充值用户、充值余额、充值时间和充值备注。
（8）个人中心：用户点击头像可查看“个人中心”，包括个人首页、在线充值、用电信息、缴费通知和收藏。

管理员：
（1）登录：管理员的账号是在数据列表中直接设置生成的，不需要进行注册，可直接输入账号密码登录，同时可对管理员资料进行增删改查。
（2） 后台首页：管理员点击可查看电价策略、在线充值、用电信息统计数据图。
（3）系统用户：管理员点击可查看管理员和注册用户，同时可点击“用电扣费”按钮填写用户用电信息，包括用电标题，选择用户账号，输入用户名称、电表编号、用电度数、用电费用和费用详情。
（4）电价策略管理：管理员点击可查看电价策略列表和电价策略添加；点击“电价策略添加”，输入策略标题、电价费用，上传封面图片，选择发布策略和输入电价详情，点击“提交”按钮进行添加。
（5）在线充值管理：管理员点击可查看在线充值列表，同时可对充值状态进行更改。
（6）用电信息管理：管理员点击可查看用电信息列表。
（7）缴费通知管理：管理员点击可查看缴费通知和缴费通知列表，点击“缴费通知添加”，输入用电标题，选择用户账号，输入用户名称、通知标题，选择通知日期和输入通知详情，点击“提交”按钮进行添加。
（8）系统管理：管理员可以查看轮播图列表中某一轮播图的详情，可以对轮播图信息进行查询、重置、添加和删除操作；点击列表上方的“添加”进入页面上传轮播图图片、填写标题后点击“提交”即可完成轮播图的添加。
（9）留言管理：管理员点击可查看留言板，同时可对用户的留言信息进行回复。
（10）公告通知管理：管理员可以查看公告通知列表中某一公告通知的详情，可以对公告通知信息进行查询、重置、添加和删除操作。
（11）资源管理：管理员可以查看资讯列表中某一资讯的详情和评论信息，可以对资讯列表信息进行查询、重置、添加和删除操作，可以查看资讯分类列表中某个分类的详情，可以对资讯分类信息进行查询、重置、添加和删除操作。

2.3.2 非功能性分析

大学校园用电数据管理与可视化系统的非功能性需求比如大学校园用电数据管理与可视化系统的安全性怎么样，可靠性怎么样，性能怎么样，可拓展性怎么样等。具体可以表示在如下3-1表格中：

表2-1大学校园用电数据管理与可视化系统非功能需求表

安全性	主要指大学校园用电数据管理与可视化系统数据库的安装，数据库的使用和密码的设定必须合乎规范。
可靠性	可靠性是指大学校园用电数据管理与可视化系统能够安装用户的指示进行操作，经过测试，可靠性90%以上。
性能	性能是影响大学校园用电数据管理与可视化系统占据市场的必要条件，所以性能最好要佳才好。
可扩展性	比如数据库预留多个属性，比如接口的使用等确保了系统的非功能性需求。
易用性	用户只要跟着大学校园用电数据管理与可视化系统的页面展示内容进行操作，就可以了。
可维护性	大学校园用电数据管理与可视化系统开发的可维护性是非常重要的，经过测试，可维护性没有问题

2.4 系统用例分析

通过2.3功能的分析，得出了本系统的用例图：

注册用户用例图如下图2-3所示。

图2-3 注册用户用例图

管理员用例图如下图2-4所示。

图2-4 管理员用例图

2.5本章小结

本章主要通过对大学校园用电数据管理与可视化系统的可行性分析、流程分析、功能需求分析、系统用例分析，确定整个大学校园用电数据管理与可视化系统要实现的功能。同时也为大学校园用电数据管理与可视化系统的代码实现和测试提供了标准。

3 系统总体设计

本章主要讨论的内容包括大学校园用电数据管理与可视化系统的功能模块设计、数据库系统设计。

3.1 系统架构设计

本系统从架构上分为三层：表现层（UI）、业务逻辑层（BLL）以及数据层（DL）。

图3-1系统架构设计图

表现层（UI）：又称UI层，主要完成本系统的UI交互功能，一个良好的UI可以打打提高用户的用户体验，增强用户使用本系统时的舒适度。UI的界面设计也要适应不同版本的系统以及不同尺寸的分辨率，以做到良好的兼容性。UI交互功能要求合理，用户进行交互操作时必须要得到与之相符的交互结果，这就要求表现层要与业务逻辑层进行良好的对接。

业务逻辑层（BLL）：主要完成本系统的数据处理功能。用户从表现层传输过来的数据经过业务逻辑层进行处理交付给数据层，系统从数据层读取的数据经过业务逻辑层进行处理交付给表现层。

数据层（DL）：由于本系统的数据是放在服务端的MySQL数据库中，因此本属于服务层的部分可以直接整合在业务逻辑层中，所以数据层中只有数据库，其主要完成本系统的数据存储和管理功能。

3.2 系统功能模块设计

在上一章节中主要对系统的功能性需求和非功能性需求进行分析，并且根据需求分析了本大学校园用电数据管理与可视化系统中的用例。那么接下来就要开始对本大学校园用电数据管理与可视化系统的主要功能和数据库开始进行设计。大学校园用电数据管理与可视化系统根据前面章节的需求分析得出，其总体设计模块图如图4-1所示。

图3-2 系统功能模块图

3.3 数据库设计

数据库设计一般包括需求分析、概念模型设计、数据库表建立三大过程，其中需求分析前面章节已经阐述，概念模型设计有概念模型和逻辑结构设计两部分。

3.3.1 数据库概念结构设计

下面是整个大学校园用电数据管理与可视化系统中主要的数据库表总E-R实体关系图。

图3-3 系统总E-R关系图

3.3.2 数据库逻辑结构设计

通过上一小节中大学校园用电数据管理与可视化系统中总E-R关系图上得出一共需要创建很多个数据表。在此主要罗列几个主要的数据库表结构设计。

表access_token (登陆访问时长)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	token_id	int	10	0	N	Y		临时访问牌ID
2	token	varchar	64	0	Y	N		临时访问牌
3	info	text	65535	0	Y	N
4	maxage	int	10	0	N	N	2	最大寿命：默认2小时
5	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
6	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
7	user_id	int	10	0	N	N	0	用户编号:

表article (文章：用于内容管理系统的文章)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	article_id	mediumint	8	0	N	Y		文章id：[0,8388607]
2	title	varchar	125	0	N	Y		标题：[0,125]用于文章和html的title标签中
3	type	varchar	64	0	N	N	0	文章分类：[0,1000]用来搜索指定类型的文章
4	hits	int	10	0	N	N	0	点击数：[0,1000000000]访问这篇文章的人次
5	praise_len	int	10	0	N	N	0	点赞数
6	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
7	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
8	source	varchar	255	0	Y	N		来源：[0,255]文章的出处
9	url	varchar	255	0	Y	N		来源地址：[0,255]用于跳转到发布该文章的网站
10	tag	varchar	255	0	Y	N		标签：[0,255]用于标注文章所属相关内容，多个标签用空格隔开
11	content	longtext	2147483647	0	Y	N		正文：文章的主体内容
12	img	varchar	255	0	Y	N		封面图
13	description	text	65535	0	Y	N		文章描述

表article_type (文章分类)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	type_id	smallint	5	0	N	Y		分类ID：[0,10000]
2	display	smallint	5	0	N	N	100	显示顺序：[0,1000]决定分类显示的先后顺序
3	name	varchar	16	0	N	N		分类名称：[2,16]
4	father_id	smallint	5	0	N	N	0	上级分类ID：[0,32767]
5	description	varchar	255	0	Y	N		描述：[0,255]描述该分类的作用
6	icon	text	65535	0	Y	N		分类图标：
7	url	varchar	255	0	Y	N		外链地址：[0,255]如果该分类是跳转到其他网站的情况下，就在该URL上设置
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表auth (用户权限管理)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	auth_id	int	10	0	N	Y		授权ID：
2	user_group	varchar	64	0	Y	N		用户组：
3	mod_name	varchar	64	0	Y	N		模块名：
4	table_name	varchar	64	0	Y	N		表名：
5	page_title	varchar	255	0	Y	N		页面标题：
6	path	varchar	255	0	Y	N		路由路径：
7	position	varchar	32	0	Y	N		位置：
8	mode	varchar	32	0	N	N	_blank	跳转方式：
9	add	tinyint	3	0	N	N	1	是否可增加：
10	del	tinyint	3	0	N	N	1	是否可删除：
11	set	tinyint	3	0	N	N	1	是否可修改：
12	get	tinyint	3	0	N	N	1	是否可查看：
13	field_add	text	65535	0	Y	N		添加字段：
14	field_set	text	65535	0	Y	N		修改字段：
15	field_get	text	65535	0	Y	N		查询字段：
16	table_nav_name	varchar	500	0	Y	N		跨表导航名称：
17	table_nav	varchar	500	0	Y	N		跨表导航：
18	option	text	65535	0	Y	N		配置：
19	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
20	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表collect (收藏)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	collect_id	int	10	0	N	Y		收藏ID：
2	user_id	int	10	0	N	N	0	收藏人ID：
3	source_table	varchar	255	0	Y	N		来源表：
4	source_field	varchar	255	0	Y	N		来源字段：
5	source_id	int	10	0	N	N	0	来源ID：
6	title	varchar	255	0	Y	N		标题：
7	img	varchar	255	0	Y	N		封面：
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表comment (评论)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	comment_id	int	10	0	N	Y		评论ID：
2	user_id	int	10	0	N	N	0	评论人ID：
3	reply_to_id	int	10	0	N	N	0	回复评论ID：空为0
4	content	longtext	2147483647	0	Y	N		内容：
5	nickname	varchar	255	0	Y	N		昵称：
6	avatar	varchar	255	0	Y	N		头像地址：[0,255]
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
9	source_table	varchar	255	0	Y	N		来源表：
10	source_field	varchar	255	0	Y	N		来源字段：
11	source_id	int	10	0	N	N	0	来源ID：

表electricity_consumption_information (用电信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	electricity_consumption_information_id	int	10	0	N	Y		用电信息ID
2	electricity_title	varchar	64	0	Y	N		用电标题
3	user_account	int	10	0	Y	N	0	用户账户
4	user_name	varchar	64	0	Y	N		用户名称
5	electricity_meter_number	varchar	64	0	Y	N		电表编号
6	electricity_consumption	int	10	0	Y	N	0	用电度数
7	electricity_costs	int	10	0	Y	N	0	用电费用
8	fee_details	longtext	2147483647	0	Y	N		费用详情
9	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表electricity_pricing_strategy (电价策略)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	electricity_pricing_strategy_id	int	10	0	N	Y		电价策略ID
2	strategy_title	varchar	64	0	Y	N		策略标题
3	electricity_price_cost	int	10	0	Y	N	0	电价费用
4	cover_photo	varchar	255	0	Y	N		封面图片
5	release_time	datetime	19	0	Y	N		发布时间
6	electricity_price_details	longtext	2147483647	0	Y	N		电价详情
7	praise_len	int	10	0	N	N	0	点赞数
8	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表hits (用户点击)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	hits_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：

表message (留言板)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	message_id	int	10	0	N	Y		留言板ID:
2	user_id	int	10	0	N	N	0	用户ID:
3	title	varchar	64	0	Y	N		标题:
4	content	longtext	2147483647	0	N	N		内容:
5	nickname	varchar	32	0	N	N		昵称:
6	avatar	varchar	255	0	Y	N		头像:
7	email	varchar	125	0	Y	N		留言者邮箱
8	phone	varchar	11	0	Y	N		留言者手机号码
9	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
11	reply	longtext	2147483647	0	Y	N		回复
12	reply_state	tinyint	4	0	Y	N	0	回复状态

表notice (公告)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	notice_id	mediumint	8	0	N	Y		公告id：
2	title	varchar	125	0	N	N		标题：
3	content	longtext	2147483647	0	Y	N		正文：
4	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
5	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表online_recharge (在线充值)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	online_recharge_id	int	10	0	N	Y		在线充值ID
2	recharge_title	varchar	64	0	Y	N		充值标题
3	user_name	varchar	64	0	Y	N		用户名称
4	recharge_users	int	10	0	Y	N	0	充值用户
5	recharge_amount	int	10	0	Y	N	0	充值金额
6	recharge_time	datetime	19	0	Y	N		充值时间
7	recharge_status	varchar	64	0	Y	N		充值状态
8	recharge_remarks	text	65535	0	Y	N		充值备注
9	pay_state	varchar	16	0	N	N	未支付	支付状态
10	pay_type	varchar	16	0	Y	N		支付类型: 微信、支付宝、网银
11	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
12	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表payment_notice (缴费通知)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	payment_notice_id	int	10	0	N	Y		缴费通知ID
2	electricity_title	varchar	64	0	Y	N		用电标题
3	user_account	int	10	0	Y	N	0	用户账户
4	user_name	varchar	64	0	Y	N		用户名称
5	notification_title	varchar	64	0	Y	N		通知标题
6	notification_time	datetime	19	0	Y	N		通知时间
7	notification_details	longtext	2147483647	0	Y	N		通知详情
8	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表praise (点赞)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	praise_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	status	bit	1	0	N	N	1	点赞状态:1为点赞，0已取消

表registered_users (注册用户)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	registered_users_id	int	10	0	N	Y		注册用户ID
2	user_name	varchar	64	0	N	N		用户名称
3	user_gender	varchar	64	0	Y	N		用户性别
4	user_age	int	10	0	Y	N	0	用户年龄
5	electricity_meter_number	varchar	64	0	N	N		电表编号
6	user_balance	int	10	0	Y	N	0	用户余额
7	examine_state	varchar	16	0	N	N	已通过	审核状态
8	user_id	int	10	0	N	N	0	用户ID
9	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表slides (轮播图)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	slides_id	int	10	0	N	Y		轮播图ID：
2	title	varchar	64	0	Y	N		标题：
3	content	varchar	255	0	Y	N		内容：
4	url	varchar	255	0	Y	N		链接：
5	img	varchar	255	0	Y	N		轮播图：
6	hits	int	10	0	N	N	0	点击量：
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表upload (文件上传)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	upload_id	int	10	0	N	Y		上传ID
2	name	varchar	64	0	Y	N		文件名
3	path	varchar	255	0	Y	N		访问路径
4	file	varchar	255	0	Y	N		文件路径
5	display	varchar	255	0	Y	N		显示顺序
6	father_id	int	10	0	Y	N	0	父级ID
7	dir	varchar	255	0	Y	N		文件夹
8	type	varchar	32	0	Y	N		文件类型

表user (用户账户：用于保存用户登录信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	user_id	mediumint	8	0	N	Y		用户ID：[0,8388607]用户获取其他与用户相关的数据
2	state	smallint	5	0	N	N	1	账户状态：[0,10](1可用|2异常|3已冻结|4已注销)
3	user_group	varchar	32	0	Y	N		所在用户组：[0,32767]决定用户身份和权限
4	login_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	上次登录时间：
5	phone	varchar	11	0	Y	N		手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
6	phone_state	smallint	5	0	N	N	0	手机认证：[0,1](0未认证|1审核中|2已认证)
7	username	varchar	16	0	N	N		用户名：[0,16]用户登录时所用的账户名称
8	nickname	varchar	16	0	Y	N		昵称：[0,16]
9	password	varchar	64	0	N	N		密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成
10	email	varchar	64	0	Y	N		邮箱：[0,64]用户的邮箱，用于找回密码时或登录时
11	email_state	smallint	5	0	N	N	0	邮箱认证：[0,1](0未认证|1审核中|2已认证)
12	avatar	varchar	255	0	Y	N		头像地址：[0,255]
13	open_id	varchar	255	0	Y	N		针对获取用户信息字段
14	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
15	vip_level	varchar	255	0	Y	N		会员等级
16	vip_discount	double	11	2	Y	N	0.00	会员折扣

表user_group (用户组：用于用户前端身份和鉴权)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	group_id	mediumint	8	0	N	Y		用户组ID：[0,8388607]
2	display	smallint	5	0	N	N	100	显示顺序：[0,1000]
3	name	varchar	16	0	N	N		名称：[0,16]
4	description	varchar	255	0	Y	N		描述：[0,255]描述该用户组的特点或权限范围
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	register	smallint	5	0	Y	N	0	注册位置:
9	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

3.4本章小结

整个大学校园用电数据管理与可视化系统的需求分析主要对系统总体架构以及功能模块的设计，通过建立E-R模型和数据库逻辑系统设计完成了数据库系统设计。

4 系统详细设计与实现

大学校园用电数据管理与可视化系统的详细设计与实现主要是根据前面的大学校园用电数据管理与可视化系统的需求分析和大学校园用电数据管理与可视化系统的总体设计来设计页面并实现业务逻辑。主要从大学校园用电数据管理与可视化系统界面实现、业务逻辑实现这两部分进行介绍。

4.1注册用户功能模块

4.1.1 前台首页界面

首页：用户可以查看首页展示的功能导航栏、轮播图、新闻咨讯等内容。其界面展示如下图4-1所示。

图4-1 前台首页界面图

4.1.2用户注册界面

用户点击首页右上角的“注册”按钮进入注册页面填写账号、密码、确认密码、昵称、邮箱、身份等信息后点击“注册”按钮，系统会对输入的信息进行验证，验证通过后即可完成注册。其界面展示如下图4-2所示。

图4-2用户注册界面图

注册代码如下：

    /**

     * 注册

     * @param user

     * @return

     */

    @PostMapping("register")

    public Map<String, Object> signUp(@RequestBody User user) {

        // 查询用户

        Map<String, String> query = new HashMap<>();

        Map<String,Object> map = JSON.parseObject(JSON.toJSONString(user));

        query.put("username",user.getUsername());

        List list = service.selectBaseList(service.select(query, new HashMap<>()));

        if (list.size()>0){

            return error(30000, "用户已存在");

        }

        map.put("password",service.encryption(String.valueOf(map.get("password"))));

        service.insert(map);

        return success(1);

}   

4.1.3用户登录界面

用户注册后可以通过自己的账户名和密码进行登录的，用户点击首页右上角的“登录”进入页面输入完整的自己的账户名和密码信息并点击“登录”按钮后，系统会对输入的信息进行验证，验证通过后即可完成登录，其界面如下图4-3所示。

图4-3用户登录界面图

登录代码如下：

 /**

     * 登录

     * @param data

     * @param httpServletRequest

     * @return

     */

    @PostMapping("login")

    public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {

        log.info("[执行登录接口]");

        String username = data.get("username");

        String email = data.get("email");

        String phone = data.get("phone");

        String password = data.get("password");

        List resultList = null;

        Map<String, String> map = new HashMap<>();

        if(username != null && "".equals(username) == false){

            map.put("username", username);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }

        else if(email != null && "".equals(email) == false){

            map.put("email", email);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }

        else if(phone != null && "".equals(phone) == false){

            map.put("phone", phone);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }else{

            return error(30000, "账号或密码不能为空");

        }

        if (resultList == null || password == null) {

            return error(30000, "账号或密码不能为空");

        }

        //判断是否有这个用户

        if (resultList.size()<=0){

            return error(30000,"用户不存在");

        }

        User byUsername = (User) resultList.get(0);

        Map<String, String> groupMap = new HashMap<>();

        groupMap.put("name",byUsername.getUserGroup());

        List groupList = userGroupService.selectBaseList(userGroupService.select(groupMap, new HashMap<>()));

        if (groupList.size()<1){

            return error(30000,"用户组不存在");

        }

        UserGroup userGroup = (UserGroup) groupList.get(0);

        //查询用户审核状态

        if (!StringUtils.isEmpty(userGroup.getSourceTable())){

            String res = service.selectExamineState(userGroup.getSourceTable(),byUsername.getUserId());

            if (res==null){

                return error(30000,"用户不存在");

            }

            if (!res.equals("已通过")){

                return error(30000,"该用户审核未通过");

            }

        }

        //查询用户状态

        if (byUsername.getState()!=1){

            return error(30000,"用户非可用状态，不能登录");

        }

        String md5password = service.encryption(password);

        if (byUsername.getPassword().equals(md5password)) {

            // 存储Token到数据库

            AccessToken accessToken = new AccessToken();

            accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));

            accessToken.setUser_id(byUsername.getUserId());

            Duration duration = Duration.ofSeconds(7200L);

            redisTemplate.opsForValue().set(accessToken.getToken(), accessToken,duration);

            // 返回用户信息

            JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));

            user.put("token", accessToken.getToken());

            JSONObject ret = new JSONObject();

            ret.put("obj",user);

            return success(ret);

        } else {

            return error(30000, "账号或密码不正确");

        }

    }

4.1.4新闻咨讯界面

新闻咨讯：用户点击可查看新闻咨讯，同时可对咨讯文章进行点赞、收藏和评论。其界面展示如下图4-4所示。

图4-4新闻咨讯界面图

4.1.5 电价策略界面

电价策略：用户点击可通过搜索策略标题进行查看电价策略列表，同时可进行点赞、收藏和评论。其界面如下图4-5所示。

图4-5 电价策略界面图

4.1.6 在线充值界面

在线充值：用户点击可填写充值信息，包括充值标题、用户名称，充值用户、充值余额、充值时间和充值备注。其界面如下图4-6所示。

图4-6 在线充值界面图

4.1.7 个人中心界面

个人中心：用户点击头像可查看“个人中心”，包括个人首页、在线充值、用电信息、缴费通知和收藏。其界面如下图4-7所示。

图4-7 个人中心界面图

4.2 管理端功能模块

4.2.1系统用户管理界面

系统用户：管理员点击可查看管理员和注册用户，同时可点击“用电扣费”按钮填写用户用电信息，包括用电标题，选择用户账号，输入用户名称、电表编号、用电度数、用电费用和费用详情。同时可对系统用户进行增删改查。其界面如下图4-8所示。

图4-8  系统用户界面图

添加的代码如下：

    @PostMapping("/add")

    @Transactional

    public Map<String, Object> add(HttpServletRequest request) throws IOException {

        service.insert(service.readBody(request.getReader()));

        return success(1);

    }

public Map<String, Object> addMap(Map<String,Object> map){

    service.insert(map);

     return success(1);

 }

删除的代码如下：

    @RequestMapping(value = "/del")

    @Transactional

    public Map<String, Object> del(HttpServletRequest request) {

        service.delete(service.readQuery(request), service.readConfig(request));

        return success(1);

    }

    public void delete(Map<String,String> query,Map<String,String> config){

        QueryWrapper wrapper = new QueryWrapper<E>();

        toWhereWrapper(query, "0".equals(config.get(FindConfig.GROUP_BY)),wrapper);

        baseMapper.delete(wrapper);

        log.info("[{}] - 删除操作：{}",wrapper.getSqlSelect());

    }

4.2.2缴费通知管理界面

缴费通知管理：管理员点击可查看缴费通知和缴费通知列表，点击“缴费通知添加”，输入用电标题，选择用户账号，输入用户名称、通知标题，选择通知日期和输入通知详情，点击“提交”按钮进行添加。其界面如下图4-9所示。

图4-9  缴费通知管理界面图

4.2.3电价策略管理界面

电价策略管理：管理员点击可查看电价策略列表和电价策略添加；点击“电价策略添加”，输入策略标题、电价费用，上传封面图片，选择发布策略和输入电价详情，点击“提交”按钮进行添加。其界面如下图4-10所示。

图4-10 电价策略管理界面图

图片上传的代码如下：

   @PostMapping("/upload")

    public Map<String, Object> upload(@RequestParam("file") MultipartFile file) {

        log.info("进入方法");

        if (file.isEmpty()) {

            return error(30000, "没有选择文件");

        }

        try {

            //判断有没路径，没有则创建

            String filePath = System.getProperty("user.dir") + "/src/main/resources/static/";

            File targetDir = new File(filePath);

            if (!targetDir.exists() && !targetDir.isDirectory()) {

                if (targetDir.mkdirs()) {

                    log.info("创建目录成功");

                } else {

                    log.error("创建目录失败");

                }

            }

            String fileName = file.getOriginalFilename();

            File dest = new File(filePath + fileName);

            log.info("文件路径:{}", dest.getPath());

            log.info("文件名:{}", dest.getName());

            file.transferTo(dest);

            JSONObject jsonObject = new JSONObject();

            jsonObject.put("url", "/api/upload/" + fileName);

            return success(jsonObject);

        } catch (IOException e) {

            log.info("上传失败：{}", e.getMessage());

        }

        return error(30000, "上传失败");

    }

4.2.4系统管理界面

系统管理：管理员可以查看轮播图列表中某一轮播图的详情，可以对轮播图信息进行查询、重置、添加和删除操作；点击列表上方的“添加”进入页面上传轮播图图片、填写标题后点击“提交”即可完成轮播图的添加。其界面如下图4-11所示。

图4-11系统管理界面图

4.2.5资源管理界面

资源管理：管理员可以查看资讯列表中某一资讯的详情和评论信息，可以对资讯列表信息进行查询、重置、添加和删除操作，可以查看资讯分类列表中某个分类的详情，可以对资讯分类信息进行查询、重置、添加和删除操作。其界面如下图4-12所示。

图4-12 资源管理界面图

5系统测试

5.1 系统测试目的

无论什么样的系统，测试都至关重要，通过测试可以检查出潜藏的缺陷，从而确保系统的性能和稳定性，避免Bug的出现，并确保系统的功能和性价比达到预期的要求。

5.2系统测试用例

系统测试包括：用户登录功能测试、用电策略查看功能、轮播图信息添加功能、密码修改功能测试，如表5-1、5-2、5-3、5-4所示：

用户登录功能测试：

表5-1 用户登录功能测试表

用例名称	用户登录系统
目的	测试用户通过正确的用户名和密码可否登录功能
前提	未登录的情况下
测试流程	1) 进入登录页面 2) 输入正确的用户名和密码
预期结果	用户名和密码正确的时候，跳转到登录成功界面，反之则显示错误信息，提示重新输入
实际结果	实际结果与预期结果一致

用电策略查看功能测试：

表5-2 用电策略查看功能测试表

用例名称	用电策略查看
目的	测试用电策略查看功能
前提	用户登录
测试流程	点击用电策略
预期结果	可以查看到所有用电策略信息
实际结果	实际结果与预期结果一致

轮播图信息添加界面测试：

表5-3 轮播图信息添加界面测试表

用例名称	轮播图信息新增测试用例
目的	测试轮播图信息新增功能
前提	管理员用户正常登录情况下
测试流程	1）管理员点击系统管理下方的轮播图，然后点击添加进入新增页面填写信息。 2）填写完毕后点击提交。
预期结果	提交以后，页面首页会显示新的轮播图信息
实际结果	实际结果与预期结果一致

密码修改功能测试：

表5-4 密码修改功能测试表

用例名称	密码修改测试用例
目的	测试学生用户密码修改功能
前提	学生用户用户正常登录情况下
测试流程	1）用户点击我的头像的下拉菜单“我的账户”进入页面后点击“修改密码”； 2）修改后点击“确认修改”。
预期结果	使用新的密码可以登录
实际结果	实际结果与预期结果一致

5.3 系统测试结果

通过编写大学校园用电数据管理与可视化系统的测试用例，已经检测完毕用户登录功能测试、用电策略查看功能、轮播图信息添加功能、密码修改功能测试，通过这四大模块的测试为大学校园用电数据管理与可视化系统的后期推广运营提供了强力的技术支撑。

6 结论

在大学校园用电数据管理与可视化系统开发之前，需要先对用户的具体需求进行分析。包括系统的可行性分析、功能需求分析以及其他需求等。在可行性分析过程中，对系统实现的技术性、经济性等方面进行了分析。总体上证明了系统实施的可行性。

本文总结了大学校园用电数据管理与可视化系统开发背景与意义，然后阐述了系统的具体业务需求，并根据系统需求对系统结构以及功能模块等进行了详细地设计，将整个系统划分为多个不同的功能模块。在分析系统功能需求时，对整个系统的总体架构以及功能模块等进行了分析，并选择合适的系统开发技术完成了对各个模块的开发工作。系统开发完成之后进行了部署，同时进行了系统的测试过程，通过测试证明了系统在功能以及性能等方面都达到了预期的要求，具有较高的稳定性与可靠性。