基于SpringBoot的宠物爱心组织管理系统--论文pf

@TOC

springboot515基于SpringBoot的宠物爱心组织管理系统--论文pf

第1章 绪论

1.1 课题背景

二十一世纪互联网的出现，改变了几千年以来人们的生活，不仅仅是生活物资的丰富，还有精神层次的丰富。在互联网诞生之前，地域位置往往是人们思想上不可跨域的鸿沟，信息的传播速度极慢，信息处理的速度和要求还是通过人们骑马或者是信鸽传递，这些信息传递都是不可控制的，中间很有可能丢失，信息的传递水平决定了人们生活的水平。如今大家都在使用互联网软件产品，从内部管理设置计算机管理，提高内部信息化的管理水准，从外部市场也可以用计算机获取相关数据进行处理，如今各行各业已经严重依赖于计算机了。

本课题研究和开发宠物爱心组织管理系统管理系统，让安装在计算机上的该系统变成管理人员的小帮手，提高宠物爱心组织管理系统信息处理速度，规范宠物爱心组织管理系统信息处理流程，让管理人员的产出效益更高。

1.2 课题意义

传统处理数据，必须是一张张纸，然后处理完毕又是统计在一张张纸上面，不断的重复处理，最终有个结果给最高层作为参考，这个模式在互联网没有出现之前，是一种常见的事情，信息管理的效率提不上去，人多不一定力量大，因为人多肯定更加消耗资源，并且因为人类需要休息，需要管理，思想会不统一，会偷懒，所以人们研究出专门帮助人们计算的机器，就是计算机的前身，到了互联网时代，人们发现完全可以让程序供应商提供解决方案，自己挑选自己合适的方案来提高自己的产出比。所以在日常工作和生活中会发现各种各样方便人们的工具。

本课题研发的宠物爱心组织管理系统管理系统，就是提供宠物爱心组织管理系统信息处理的解决方案，它可以短时间处理完信息，并且这些信息都有专门的存储设备，而且数据的备份和迁移都可以设定为无人值守，从人力角度和信息处理角度以及信息安全角度，宠物爱心组织管理系统管理系统是完胜传统纸质操作的。

1.3 研究内容

本文对宠物爱心组织管理系统管理系统的设计与实现分成六个章节来说明。

第1章：研究宠物爱心组织管理系统管理系统的背景，以及开发宠物爱心组织管理系统管理系统的意义。

第2章：对开发宠物爱心组织管理系统管理系统的环境还有技术进行说明。

第3章：分析宠物爱心组织管理系统管理系统的可行性，性能，流程以及功能。

第4章：设计宠物爱心组织管理系统管理系统的功能结构，设计数据库E-R图以及对数据表的存储结构进行设计。

第5章：实现宠物爱心组织管理系统管理系统的功能并进行功能界面展示。

第6章：对系统测试进行阐述，以及对本系统部分功能进行检测。

第2章 开发环境与技术

本章节对开发宠物爱心组织管理系统管理系统需要搭建的开发环境，还有宠物爱心组织管理系统管理系统开发中使用的编程技术等进行阐述。

2.1 Java语言

Java语言是当今为止依然在编程语言行业具有生命力的常青树之一。Java语言最原始的诞生，不仅仅是创造者感觉C语言在编程上面很麻烦，如果只是专注于业务逻辑的处理，会导致忽略了各种指针以及垃圾回收这些操作，导致出现问题需要解决的时间往往大于正常编程处理业务逻辑的时间，这些是非常浪费时间的。Java语言的创造者就考虑到如何避免这个问题，把指针处理和垃圾处理全部自动化，虽然这会损失一些性能，但是计算机硬件在性能上的发展速度是很快的，这些性能是可以忽略考虑的。并且C语言是针对硬件开发的语言，虽然执行效率高，但是随着硬件的变化或者操作系统的变更，就需要重新编写程序，造成重复劳动，只有解决重复性劳动的语言才算符合生存规律的语言。Java语言的创造者就针对C语言的缺点专门开发了Java语言。让Java语言不管是在什么样的环境里都是可以运行，因为在Java语言运行外面套了一个壳，也就是虚拟机，只要是Java虚拟机能安装的电脑都可以运行Java的程序。

2.2 MYSQL数据库

MySQL数据库是一种数据存放方面的专业软件，也是传统的行式数据模式，获取一些数据是先一行一行的获取，然后一行一行的显示，与列式数据库不同。行式数据库主要是处理最重要的数据逻辑部分，并且必须是有效数据，这样每一处的数据关联都是不可损坏，对数据安全要求比较严格还是用MySQL数据库比较好。列式数据库的发明仅仅是因为读取效率高，但是也就仅仅如此罢了。MySQL虽然比起Oracle或者SQL Server来讲，安装包只是几十兆甚至几百兆，有点小，但是功能并不会弱到哪里，严格遵循SQL标准语法。MySQL的数据存放形式从大向小的说是数据库最大，然后是表，每个表里面存放数据是有一定的规则的，数据存放是表格形式的，也就是说有横也有竖，横着的为行，一般表示一条数据，表与表之间还可以进行关联，进行分表操作，如果一条数据相关项目属性太多，那么可以把有效的相关联系做成关联，可以设定是否唯一。

2.3 IDEA开发工具

IDEA是捷克共和国的Java程序员开发人员创造的一个开发软件，刚开始主要是对于用Eclipse软件他们用得不顺手，所以直接开发了这款软件。之所以不顺手原因在于没有代码提升功能，原因是Eclipse只是把代码提示作为一种插件形式的存在，如果有些程序开发人员不清楚代码提示插件可能会出问题，并且代码提示只是用来作为插件，所以功能上有所欠缺。IDEA不仅仅代码提示做的很好，在代码重构上面更上如虎添翼，程序开发人员可以选择一段代码然后IDEA就会对代码进行分解重构，有效的把代码弄得更够层次感，复用性更高，用着更简洁和方便，大大的减少了代码工作量，提升了代码开发效率。当然，IDEA对于使用者这么好，肯定也是有目的的，原因在于插件越多越友好，就需要花费大量的金钱来使用，所以说IDEA使用主要是看自己喜好。

2.4 Spring Boot框架

Spring Boot是一种不需要代码生成的一种框架，并且可以不需要配置任何的XML文件就可以，因为Spring Boot里面自带了很多接口，只需要配置不同的接口就会自动的应用并且识别需要的依赖，在配置方面非常的方便，使用起来感觉像没有用到框架的感觉。Spring Boot有很多默认的配置文件，并且可以对默认的配置文件进行修改，可以设置为自动加载，可以对异常处理分为全局异常处理和默认异常处理。Spring Boot使用过程中就像是使用什么直接注册什么，所谓的注册也就是在对应的类和方法上面进行一个特殊的声明即可。

第3章 系统分析

本文作者在确定了研究的课题之后，从各大数字图书馆下载文献来阅读，并了解同类型的网站具备的大致功能，然后具体事务具体分析，得出本系统要研究的具体功能与性能。虽然分析系统这一阶段性工作主要是确定功能，但它却影响着后面系统开发环节的进展，系统分析这个环节是不能少的。

3.1 可行性分析

从三个不同的角度来分析，确保开发成功的前提是有可行性分析，只有进行提前分析，符合程序开发流程才不至于开发过程的中断。

3.1.1 技术可行性

在技术实现层次，分析了好几种技术实现方法，并且都有对应的成功案例，也有很多开源模块可以进行参考，所以从技术可行性分析来讲，实现宠物爱心组织管理系统管理系统是没有问题的。

3.1.2 经济可行性

对于身为学生的开发者而言，在经济资源上面可用者很少，为了开发宠物爱心组织管理系统管理系统，通过开发软件对硬件的要求，发现自己的电脑是完全能用来开发的，并且学校机房的配置也可以达到要求。最重要的是选择的技术都可以在网上找到不花钱的教程以及资料，因为不花钱，所以经济方面是具有可行性的。

3.1.3 操作可行性

宠物爱心组织管理系统管理系统的具体实现，本身参考人类的正常操作逻辑，把常用的操作习惯当做主要的导航实现，可以让使用者更快速的理解并且上手操作，实现符合逻辑的操作流程是操作可行性的具体体现。

以上就是从不同的角度来分析，确保了宠物爱心组织管理系统管理系统的正常开展。

3.2 系统流程

宠物爱心组织管理系统管理系统投入使用后，使用者如果能看到相应的流程操作图会提高程序的理解能力。

3.2.1 操作流程

使用者在操作宠物爱心组织管理系统管理系统中，应该按照本系统提供的操作流程（图3.1即为本系统的操作流程图）进行操作，可以减少操作失误，从而节省进入宠物爱心组织管理系统管理系统的时间。

图3.1 系统操作流程

3.2.2 登录流程

宠物爱心组织管理系统管理系统通过登录功能（图3.2即为其登录的流程）引导使用者进入指定的功能操作区，也避免非本系统的用户享受本系统提供的服务以及查看本系统提供的信息，进而保证用户安全。

图3.2 登录流程

3.2.3 删除信息流程

宠物爱心组织管理系统管理系统在经过长期使用后，会产生很多的数据信息。为了腾出存储空间存放更多的数据，本系统数据库中存储的数据，一些没有参考价值的数据需要进行删除（图3.3即为删除信息的流程），删除数据过程中，为避免误删，使用者要根据系统的提示来决定是否删除数据。

图3.3 删除信息流程

3.2.4 添加信息流程

宠物爱心组织管理系统管理系统提供可视化的功能操作区，非常方便使用者进行数据操作，当使用者往系统中录入数据时（图3.4即为添加信息的流程），本系统也会进行数据合法性的判断，符合要求的数据才能够在数据库指定表中进行登记。

图3.4 添加信息流程

3.3 性能需求

需求分析少不了对项目用到的硬件设备进行分析，这样才符合正常的分析流程。只谈功能需求不谈性能需求，是一件很严重的事情，可能会导致一些不可控的问题出现。

以下从这几个角度来分析系统性能。

(1)系统数据的容量：从数据角度来分析，每个表和每个数据库，达到的数据量到一定的程度，是否需要分表或者是分库，超过了数据的设定限度，可能会导致数据反映迟钝，容错量增加。

(2)数据精度的要求：需要对需求分析里面数据设定环节，考虑相应的数据精度问题，需要发现数据是常用的精度还是非常用的精度，进而设定不同的数值。

(3)时间响应要求：从用户提交操作，到页面反映，中间有个数据处理的问题，需要考虑预测数据量的大小，提前预案分库分表的设计，数据量再大就要考虑增加列式数据库的问题，这些都不是一拍脑门就能决定的，都需要经验和同行业的数据分析研判，才能符合用户的要求，毕竟响应时间太久操作起来也不舒服。

(4)普适性问题：用户使用应该不需要感知服务端的数据量问题或者响应问题，只需要任意一台电脑，不需要更多的操作，打开浏览器就能用，太多的设置以及操作，不符合普适性操作。

(5)页面设计问题：功能符合要求之后，肯定是要丰富页面的。页面设计才是用户长时间面对的问题，首先考虑数据的整洁性，让页面看起来更加的清爽。颜色与数据方面，该不同颜色就不同颜色，降低用户长时间使用出现的视觉疲劳，让用户使用起来心情不至于太差。

(6)系统的稳定性：正常用户操作系统页面，必须是该提交提交，正常输入符合逻辑，不能随随便便的就出各种问题，导致用户操作疲惫，并且输入的数据和回显的数据符合用户的要求。如果正常操作都会出现问题，那设计就是不稳定的，这一点肯定不行。只要是与数据进行交互的系统，都必须稳定。系统稳定从开发部署角度上来分析，可以考虑数据的冗余备份功能，自动值守功能，机房数据同步，机房分开的功能，这些都可以让系统的稳定性得到提升。

系统的性能需求需要对业务很熟练的情况下判断然后分析，再从系统性能需求来逐条实现，可以让设计的系统有使用价值。

3.4 功能需求

宠物爱心组织管理系统管理系统根据使用权限的角度进行功能分析，并运用用例图来展示各个权限需要操作的功能。

第4章 系统设计

用户对着浏览器操作，肯定会出现某些不可预料的问题，但是不代表着系统对于用户在浏览器上的操作不进行处理，所以说，要提前考虑可能会出现的问题。

4.1 系统设计思想

系统设计，肯定要把设计的思想进行统一，只有统一的思想才能指导程序的开发，并且可以让众多的程序开发人员更快速的进入状态，提高开发速度。根据当前系统的既定需求，下面将进行本系统设计思想的阐述。

(1)扩展性：开发任何一个系统的时候不可避免要考虑这个问题。软件版本的更迭是一种常识，任何一个软件都不会一次性开发就成永恒，软件是一个不断成长的东西。所以考虑问题的时候需要对当前问题进行数据上的扩大化，然后进行归纳整理，最终形成具有一定扩展性的程序。程序的可扩展性必然会影响开发进度，所以最终需要综合评估程序的可扩展程度，进而有的放矢，循序开发。

(2)实用性：程序设计是一个先高屋建瓴式的设想，然后再具体化，实用性就是具体化的第一个步骤，要充分考虑使用者是不懂程序设计的这一点，使用者只是懂得常规性的上网操作步骤，并不需要对程序进行理解，所以一定要让使用者感觉到便利，感觉到实用性的存在，如果使用者使用程序过程中没发现使用程序的好处，那么程序设计的实用性将大大降低。

(3)安全性：当使用者使用的过程中，会产生大量的相关数据，这些数据必须有安全性的保证，否则当使用者发现数据出现问题的原因是程序设计问题的时候，将会对程序开发者失去信任，甚至可能会产生大量的费用赔偿问题，这是一个不可避免的问题。所以安全性关系开发与使用者双方的经济利益，程序的安全性是一定要保证的。

(4)先进性：程序设计的先进性是开发者进行考虑的，必须要在满足系统功能的前提下，必须要选择好当下最合适的技术。最合适的技术要从开发成本，使用成本以及维护成本里面综合分析，经过综合分析后要让技术实现最优解，保持先进的技术生产力。

(5)维护性：程序开发之初就要考虑以后的维护问题。维护是在程序开发完毕，已经上线可以运作，进入生产试用过程和使用过程中才会发现需要维护的必要。要通过各方面降低维护成本，不是说维护的越少就代表程序开发的越完美，程序既然是人类进行设计制造的，肯定有很多不可避免的问题产生，那么如何维护好程序的正常运作也是一门很重要的学问。

4.2 功能结构设计

图4.1即为设计的管理员功能结构，管理员权限操作的功能包括管理公告，管理宠物爱心组织管理系统信息，包括志愿者申请管理，培训管理，宠物管理，薪资管理等，可以管理公告。

图4.1 管理员功能结构

4.3 数据库设计

宠物爱心组织管理系统管理系统运行中产生的数据需要按照提前设置的存储规则进行保存，设计出一个符合项目的最优数据存储格式，因为它能减少用户的等待时间，还可以对系统的请求在最短时间内进行响应。所以，对数据库设计时，需要对功能需求进行详细的拆分，以及对业务状态的细分，然后设计具体的存储规则，保证数据库能正常运作，缩短数据处理时间，并在一定程度上降低数据冗余，节省存储空间。

4.3.1 数据库概念设计

实体-联系图还有一个名称即E-R图，是Entity Relationship Diagram各英文单词首字母的缩写，它这种概念模型通常用于对现实世界进行描述。同时它还是一种能够直观表达数据中实体，联系，属性的有效手段。绘制E-R图能够选择的工具也有很多，但是Office Visio 这款软件在E-R图的绘制上一般都是作为首选工具，因为它是基于可视化处理，使用它创建E-R图非常简单。使用基本的E-R图构成元素，比如椭圆，菱形，矩形，还有实线段来表达对应的信息，椭圆代表属性，即实体的特征，矩形代表实体，即数据库中的一个具体数据表，菱形代表实体中相互关系，实线段主要是完成椭圆，矩形，菱形的连接。

（1）下图是用户实体和其具备的属性。

用户实体属性图

（2）下图是宠物实体和其具备的属性。

宠物实体属性图

（3）下图是宠物收藏实体和其具备的属性。

宠物收藏实体属性图

（4）下图是团队活动报名实体和其具备的属性。

团队活动报名实体属性图

（5）下图是流浪实体和其具备的属性。

流浪实体属性图

（6）下图是团队活动评价实体和其具备的属性。

团队活动评价实体属性图

（7）下图是流浪评价实体和其具备的属性。

流浪评价实体属性图

（8）下图是流浪订单实体和其具备的属性。

流浪订单实体属性图

（9）下图是团队活动收藏实体和其具备的属性。

团队活动收藏实体属性图

（10）下图是流浪收藏实体和其具备的属性。

流浪收藏实体属性图

（11）下图是志愿者申请实体和其具备的属性。

志愿者申请实体属性图

（12）下图是公告实体和其具备的属性。

公告实体属性图

（13）下图是单页数据实体和其具备的属性。

单页数据实体属性图

（14）下图是团队活动实体和其具备的属性。

团队活动实体属性图

（15）下图是宠物评价实体和其具备的属性。

宠物评价实体属性图

（16）下图是宠物订单实体和其具备的属性。

宠物订单实体属性图

（17）下图是捐赠实体和其具备的属性。

捐赠实体属性图

（18）下图是备忘录实体和其具备的属性。

备忘录实体属性图

4.3.2 数据库物理设计

本小节主要任务即是根据上述内容进行数据存储结构的设计，实体的属性就用来表示字段名称，不同的字段表示的数据类型以及取值都不相同，以及该表各个字段是否能够保持空等进行说明，设计完成一张数据表的结构之后，在保存时同样要命名，尽量选择英文名称进行命名并保存，还不容易导致系统出错。接下来就对设计的表进行简单说明。

表4.1备忘录表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	beiwanglu_name	String	备忘录名称	是
3	beiwanglu_uuid_number	String	备忘录编号	是
4	beiwanglu_content	String	备忘录内容	是
5	beiwanglu_delete	Integer	逻辑删除	是
6	insert_time	Date	录入时间	是
7	create_time	Date	创建时间	是

表4.2宠物表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	chongwu_name	String	宠物名称	是
4	chongwu_uuid_number	String	宠物编号	是
5	chongwu_photo	String	宠物照片	是
6	chongwu_types	Integer	宠物类型	是
7	chongwu_content	String	宠物介绍	是
8	chongwu_delete	Integer	逻辑删除	是
9	insert_time	Date	录入时间	是
10	create_time	Date	创建时间	是

表4.3宠物收藏表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	chongwu_id	Integer	宠物	是
3	yonghu_id	Integer	用户	是
4	chongwu_collection_types	Integer	类型	是
5	insert_time	Date	收藏时间	是
6	create_time	Date	创建时间	是

表4.4宠物评价表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	chongwu_id	Integer	宠物	是
3	yonghu_id	Integer	用户	是
4	chongwu_commentback_text	String	评价内容	是
5	insert_time	Date	评价时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.5宠物订单表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	chongwu_order_uuid_number	String	订单编号	是
3	chongwu_id	Integer	宠物	是
4	yonghu_id	Integer	用户	是
5	chongwu_order_types	Integer	订单类型	是
6	insert_time	Date	订单创建时间	是
7	create_time	Date	创建时间	是

表4.6字典表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	dic_code	String	字段	是
3	dic_name	String	字段名	是
4	code_index	Integer	编码	是
5	index_name	String	编码名字	是
6	super_id	Integer	父字段id	是
7	beizhu	String	备注	是
8	create_time	Date	创建时间	是

表4.7公告表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	gonggao_name	String	公告名称	是
3	gonggao_photo	String	公告图片	是
4	gonggao_types	Integer	公告类型	是
5	insert_time	Date	发布时间	是
6	gonggao_content	String	公告详情	是
7	create_time	Date	创建时间	是

表4.8捐赠表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	juanzeng_uuid_number	String	报名编号	是
3	yonghu_id	Integer	用户	是
4	juanzeng_text	String	捐赠	是
5	new_money	BigDecimal	金额	是
6	insert_time	Date	捐赠时间	是
7	create_time	Date	创建时间	是

表4.9流浪表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	liulang_name	String	流浪名称	是
3	liulang_uuid_number	String	流浪编号	是
4	liulang_photo	String	流浪照片	是
5	liulang_types	Integer	流浪类型	是
6	liulang_content	String	流浪介绍	是
7	liulang_delete	Integer	逻辑删除	是
8	insert_time	Date	录入时间	是
9	create_time	Date	创建时间	是

表4.10流浪收藏表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	liulang_id	Integer	流浪	是
3	yonghu_id	Integer	用户	是
4	liulang_collection_types	Integer	类型	是
5	insert_time	Date	收藏时间	是
6	create_time	Date	创建时间	是

表4.11流浪评价表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	liulang_id	Integer	流浪	是
3	yonghu_id	Integer	用户	是
4	liulang_commentback_text	String	评价内容	是
5	insert_time	Date	评价时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.12流浪订单表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	liulang_order_uuid_number	String	订单编号	是
3	liulang_id	Integer	流浪	是
4	yonghu_id	Integer	用户	是
5	liulang_order_types	Integer	订单类型	是
6	insert_time	Date	订单创建时间	是
7	create_time	Date	创建时间	是

表4.13单页数据表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	single_seach_name	String	名字	是
3	single_seach_types	Integer	数据类型	是
4	single_seach_photo	String	图片	是
5	single_seach_content	String	内容	是
6	create_time	Date	创建时间	是

表4.14团队活动表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	tuandui_name	String	团队活动名称	是
3	tuandui_uuid_number	String	团队活动编号	是
4	tuandui_photo	String	团队活动照片	是
5	huodong_time	Date	活动时间	是
6	tuandui_types	Integer	团队活动类型	是
7	tuandui_content	String	团队活动介绍	是
8	tuandui_delete	Integer	逻辑删除	是
9	insert_time	Date	录入时间	是
10	create_time	Date	创建时间	是

表4.15团队活动收藏表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	tuandui_id	Integer	团队活动	是
3	yonghu_id	Integer	用户	是
4	tuandui_collection_types	Integer	类型	是
5	insert_time	Date	收藏时间	是
6	create_time	Date	创建时间	是

表4.16团队活动评价表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	tuandui_id	Integer	团队活动	是
3	yonghu_id	Integer	用户	是
4	tuandui_commentback_text	String	评价内容	是
5	insert_time	Date	评价时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.17团队活动报名表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	tuandui_order_uuid_number	String	订单编号	是
3	tuandui_id	Integer	团队活动	是
4	yonghu_id	Integer	用户	是
5	tuandui_order_types	Integer	订单类型	是
6	insert_time	Date	订单创建时间	是
7	create_time	Date	创建时间	是

表4.18用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_name	String	用户姓名	是
3	yonghu_phone	String	用户手机号	是
4	yonghu_id_number	String	用户身份证号	是
5	yonghu_photo	String	用户头像	是
6	yonghu_types	Integer	用户类型	是
7	new_money	BigDecimal	余额	是
8	yonghu_email	String	电子邮箱	是
9	create_time	Date	创建时间	是

表4.19志愿者申请表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	zhiyuanzhe_shenqing_uuid_number	String	报名编号	是
3	yonghu_id	Integer	用户	是
4	zhiyuanzhe_shenqing_text	String	理由	是
5	insert_time	Date	志愿者申请时间	是
6	zhiyuanzhe_shenqing_yesno_types	Integer	报名状态	是
7	zhiyuanzhe_shenqing_yesno_text	String	审核回复	是
8	zhiyuanzhe_shenqing_shenhe_time	Date	审核时间	是
9	create_time	Date	创建时间	是

表4.20管理员表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	username	String	儿童名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

第5章 系统实现

编程人员在搭建的开发环境中，会让各种编程技术一起呈现出最终效果。本节就展示关键部分的页面效果。

5.1 管理员功能实现

5.1.1 志愿者申请管理

图5.1 即为编码实现的志愿者申请管理界面，管理员在志愿者申请管理界面中可以对界面中显示，可以对志愿者申请信息的志愿者申请状态进行查看，可以添加新的志愿者申请信息等。

图5.1 志愿者申请管理界面

5.1.2 宠物管理

图5.2 即为编码实现的宠物管理界面，管理员在宠物管理界面中查看宠物种类信息，宠物描述信息，新增宠物信息等。

图5.2 宠物管理界面

5.1.3 公告管理

图5.3 即为编码实现的公告管理界面，管理员在公告管理界面中新增公告，可以删除公告。

图5.3 公告管理界面

5.1.4 公告类型管理

图5.4 即为编码实现的公告类型管理界面，管理员在公告类型管理界面查看公告的工作状态，可以对公告的数据进行导出，可以添加新公告的信息，可以编辑公告信息，删除公告信息。

图5.4 公告类型管理界面

FileUtil.java

package com.utils;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

/**
* @author yangliyuan
* @version 创建时间：2020年2月7日 下午8:01:14
* 类说明 : 
*/

public class FileUtil {
	public static byte[] FileToByte(File file) throws IOException {
		// 将数据转为流
		@SuppressWarnings("resource")
		InputStream content = new FileInputStream(file);
		ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
		byte[] buff = new byte[100];
		int rc = 0;
		while ((rc = content.read(buff, 0, 100)) > 0) {
			swapStream.write(buff, 0, rc);
		}
		// 获得二进制数组
		return swapStream.toByteArray();
	}
}

ZhiyuanzheShenqingController.java

package com.controller;

import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;

import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;

/**
 * 志愿者申请
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/zhiyuanzheShenqing")
public class ZhiyuanzheShenqingController {
    private static final Logger logger = LoggerFactory.getLogger(ZhiyuanzheShenqingController.class);

    private static final String TABLE_NAME = "zhiyuanzheShenqing";

    @Autowired
    private ZhiyuanzheShenqingService zhiyuanzheShenqingService;


    @Autowired
    private TokenService tokenService;

    @Autowired
    private BeiwangluService beiwangluService;//备忘录
    @Autowired
    private ChongwuService chongwuService;//宠物
    @Autowired
    private ChongwuCollectionService chongwuCollectionService;//宠物收藏
    @Autowired
    private ChongwuCommentbackService chongwuCommentbackService;//宠物评价
    @Autowired
    private ChongwuOrderService chongwuOrderService;//宠物订单
    @Autowired
    private DictionaryService dictionaryService;//字典
    @Autowired
    private GonggaoService gonggaoService;//公告
    @Autowired
    private JuanzengService juanzengService;//捐赠
    @Autowired
    private LiulangService liulangService;//流浪
    @Autowired
    private LiulangCollectionService liulangCollectionService;//流浪收藏
    @Autowired
    private LiulangCommentbackService liulangCommentbackService;//流浪评价
    @Autowired
    private LiulangOrderService liulangOrderService;//流浪订单
    @Autowired
    private SingleSeachService singleSeachService;//单页数据
    @Autowired
    private TuanduiService tuanduiService;//团队活动
    @Autowired
    private TuanduiCollectionService tuanduiCollectionService;//团队活动收藏
    @Autowired
    private TuanduiCommentbackService tuanduiCommentbackService;//团队活动评价
    @Autowired
    private TuanduiOrderService tuanduiOrderService;//团队活动报名
    @Autowired
    private YonghuService yonghuService;//用户
    @Autowired
    private UsersService usersService;//管理员


    /**
    * 后端列表
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永不会进入");
        else if("用户".equals(role))
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        CommonUtil.checkMap(params);
        PageUtils page = zhiyuanzheShenqingService.queryPage(params);

        //字典表数据转换
        List<ZhiyuanzheShenqingView> list =(List<ZhiyuanzheShenqingView>)page.getList();
        for(ZhiyuanzheShenqingView c:list){
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(c, request);
        }
        return R.ok().put("data", page);
    }

    /**
    * 后端详情
    */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        ZhiyuanzheShenqingEntity zhiyuanzheShenqing = zhiyuanzheShenqingService.selectById(id);
        if(zhiyuanzheShenqing !=null){
            //entity转view
            ZhiyuanzheShenqingView view = new ZhiyuanzheShenqingView();
            BeanUtils.copyProperties( zhiyuanzheShenqing , view );//把实体数据重构到view中
            //级联表 用户
            //级联表
            YonghuEntity yonghu = yonghuService.selectById(zhiyuanzheShenqing.getYonghuId());
            if(yonghu != null){
            BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime", "yonghuId"});//把级联的数据添加到view中,并排除id和创建时间字段,当前表的级联注册表
            view.setYonghuId(yonghu.getId());
            }
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody ZhiyuanzheShenqingEntity zhiyuanzheShenqing, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,zhiyuanzheShenqing:{}",this.getClass().getName(),zhiyuanzheShenqing.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");
        else if("用户".equals(role))
            zhiyuanzheShenqing.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));

        Wrapper<ZhiyuanzheShenqingEntity> queryWrapper = new EntityWrapper<ZhiyuanzheShenqingEntity>()
            .eq("yonghu_id", zhiyuanzheShenqing.getYonghuId())
            .in("zhiyuanzhe_shenqing_yesno_types", new Integer[]{1,2})
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        ZhiyuanzheShenqingEntity zhiyuanzheShenqingEntity = zhiyuanzheShenqingService.selectOne(queryWrapper);
        if(zhiyuanzheShenqingEntity==null){
            zhiyuanzheShenqing.setInsertTime(new Date());
            zhiyuanzheShenqing.setZhiyuanzheShenqingYesnoTypes(1);
            zhiyuanzheShenqing.setCreateTime(new Date());
            zhiyuanzheShenqingService.insert(zhiyuanzheShenqing);
            return R.ok();
        }else {
            if(zhiyuanzheShenqingEntity.getZhiyuanzheShenqingYesnoTypes()==1) {

                return R.error(511,"有相同的待审核的数据");
            }



            else if(zhiyuanzheShenqingEntity.getZhiyuanzheShenqingYesnoTypes()==2)
                return R.error(511,"有相同的审核通过的数据");
            else
                return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody ZhiyuanzheShenqingEntity zhiyuanzheShenqing, HttpServletRequest request) throws NoSuchFieldException, ClassNotFoundException, IllegalAccessException, InstantiationException {
        logger.debug("update方法:,,Controller:{},,zhiyuanzheShenqing:{}",this.getClass().getName(),zhiyuanzheShenqing.toString());
        ZhiyuanzheShenqingEntity oldZhiyuanzheShenqingEntity = zhiyuanzheShenqingService.selectById(zhiyuanzheShenqing.getId());//查询原先数据

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("用户".equals(role))
//            zhiyuanzheShenqing.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        if("".equals(zhiyuanzheShenqing.getZhiyuanzheShenqingText()) || "null".equals(zhiyuanzheShenqing.getZhiyuanzheShenqingText())){
                zhiyuanzheShenqing.setZhiyuanzheShenqingText(null);
        }
        if("".equals(zhiyuanzheShenqing.getZhiyuanzheShenqingYesnoText()) || "null".equals(zhiyuanzheShenqing.getZhiyuanzheShenqingYesnoText())){
                zhiyuanzheShenqing.setZhiyuanzheShenqingYesnoText(null);
        }

            zhiyuanzheShenqingService.updateById(zhiyuanzheShenqing);//根据id更新
            return R.ok();
    }


    /**
    * 审核
    */
    @RequestMapping("/shenhe")
    public R shenhe(@RequestBody ZhiyuanzheShenqingEntity zhiyuanzheShenqingEntity, HttpServletRequest request){
        logger.debug("shenhe方法:,,Controller:{},,zhiyuanzheShenqingEntity:{}",this.getClass().getName(),zhiyuanzheShenqingEntity.toString());

        ZhiyuanzheShenqingEntity oldZhiyuanzheShenqing = zhiyuanzheShenqingService.selectById(zhiyuanzheShenqingEntity.getId());//查询原先数据

        if(zhiyuanzheShenqingEntity.getZhiyuanzheShenqingYesnoTypes() == 2){//通过
            YonghuEntity yonghuEntity = yonghuService.selectById(zhiyuanzheShenqingEntity.getYonghuId());
            yonghuEntity.setYonghuTypes(2);
            yonghuService.updateById(yonghuEntity);
//            zhiyuanzheShenqingEntity.setZhiyuanzheShenqingTypes();
        }else if(zhiyuanzheShenqingEntity.getZhiyuanzheShenqingYesnoTypes() == 3){//拒绝
//            zhiyuanzheShenqingEntity.setZhiyuanzheShenqingTypes();
        }
        zhiyuanzheShenqingEntity.setZhiyuanzheShenqingShenheTime(new Date());//审核时间
        zhiyuanzheShenqingService.updateById(zhiyuanzheShenqingEntity);//审核

        return R.ok();
    }

    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids, HttpServletRequest request){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        List<ZhiyuanzheShenqingEntity> oldZhiyuanzheShenqingList =zhiyuanzheShenqingService.selectBatchIds(Arrays.asList(ids));//要删除的数据
        zhiyuanzheShenqingService.deleteBatchIds(Arrays.asList(ids));

        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName, HttpServletRequest request){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId")));
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //.eq("time", new SimpleDateFormat("yyyy-MM-dd").format(new Date()))
        try {
            List<ZhiyuanzheShenqingEntity> zhiyuanzheShenqingList = new ArrayList<>();//上传的东西
            Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
            Date date = new Date();
            int lastIndexOf = fileName.lastIndexOf(".");
            if(lastIndexOf == -1){
                return R.error(511,"该文件没有后缀");
            }else{
                String suffix = fileName.substring(lastIndexOf);
                if(!".xls".equals(suffix)){
                    return R.error(511,"只支持后缀为xls的excel文件");
                }else{
                    URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
                    File file = new File(resource.getFile());
                    if(!file.exists()){
                        return R.error(511,"找不到上传文件，请联系管理员");
                    }else{
                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
                        dataList.remove(0);//删除第一行，因为第一行是提示
                        for(List<String> data:dataList){
                            //循环
                            ZhiyuanzheShenqingEntity zhiyuanzheShenqingEntity = new ZhiyuanzheShenqingEntity();
//                            zhiyuanzheShenqingEntity.setZhiyuanzheShenqingUuidNumber(data.get(0));                    //报名编号 要改的
//                            zhiyuanzheShenqingEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            zhiyuanzheShenqingEntity.setZhiyuanzheShenqingText(data.get(0));                    //理由 要改的
//                            zhiyuanzheShenqingEntity.setInsertTime(date);//时间
//                            zhiyuanzheShenqingEntity.setZhiyuanzheShenqingYesnoTypes(Integer.valueOf(data.get(0)));   //报名状态 要改的
//                            zhiyuanzheShenqingEntity.setZhiyuanzheShenqingYesnoText(data.get(0));                    //审核回复 要改的
//                            zhiyuanzheShenqingEntity.setZhiyuanzheShenqingShenheTime(sdf.parse(data.get(0)));          //审核时间 要改的
//                            zhiyuanzheShenqingEntity.setCreateTime(date);//时间
                            zhiyuanzheShenqingList.add(zhiyuanzheShenqingEntity);


                            //把要查询是否重复的字段放入map中
                                //报名编号
                                if(seachFields.containsKey("zhiyuanzheShenqingUuidNumber")){
                                    List<String> zhiyuanzheShenqingUuidNumber = seachFields.get("zhiyuanzheShenqingUuidNumber");
                                    zhiyuanzheShenqingUuidNumber.add(data.get(0));//要改的
                                }else{
                                    List<String> zhiyuanzheShenqingUuidNumber = new ArrayList<>();
                                    zhiyuanzheShenqingUuidNumber.add(data.get(0));//要改的
                                    seachFields.put("zhiyuanzheShenqingUuidNumber",zhiyuanzheShenqingUuidNumber);
                                }
                        }

                        //查询是否重复
                         //报名编号
                        List<ZhiyuanzheShenqingEntity> zhiyuanzheShenqingEntities_zhiyuanzheShenqingUuidNumber = zhiyuanzheShenqingService.selectList(new EntityWrapper<ZhiyuanzheShenqingEntity>().in("zhiyuanzhe_shenqing_uuid_number", seachFields.get("zhiyuanzheShenqingUuidNumber")));
                        if(zhiyuanzheShenqingEntities_zhiyuanzheShenqingUuidNumber.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(ZhiyuanzheShenqingEntity s:zhiyuanzheShenqingEntities_zhiyuanzheShenqingUuidNumber){
                                repeatFields.add(s.getZhiyuanzheShenqingUuidNumber());
                            }
                            return R.error(511,"数据库的该表中的 [报名编号] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                        zhiyuanzheShenqingService.insertBatch(zhiyuanzheShenqingList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }




    /**
    * 前端列表
    */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));

        CommonUtil.checkMap(params);
        PageUtils page = zhiyuanzheShenqingService.queryPage(params);

        //字典表数据转换
        List<ZhiyuanzheShenqingView> list =(List<ZhiyuanzheShenqingView>)page.getList();
        for(ZhiyuanzheShenqingView c:list)
            dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段

        return R.ok().put("data", page);
    }

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Integer id, HttpServletRequest request){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        ZhiyuanzheShenqingEntity zhiyuanzheShenqing = zhiyuanzheShenqingService.selectById(id);
            if(zhiyuanzheShenqing !=null){


                //entity转view
                ZhiyuanzheShenqingView view = new ZhiyuanzheShenqingView();
                BeanUtils.copyProperties( zhiyuanzheShenqing , view );//把实体数据重构到view中

                //级联表
                    YonghuEntity yonghu = yonghuService.selectById(zhiyuanzheShenqing.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody ZhiyuanzheShenqingEntity zhiyuanzheShenqing, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,zhiyuanzheShenqing:{}",this.getClass().getName(),zhiyuanzheShenqing.toString());
        Wrapper<ZhiyuanzheShenqingEntity> queryWrapper = new EntityWrapper<ZhiyuanzheShenqingEntity>()
            .eq("zhiyuanzhe_shenqing_uuid_number", zhiyuanzheShenqing.getZhiyuanzheShenqingUuidNumber())
            .eq("yonghu_id", zhiyuanzheShenqing.getYonghuId())
            .eq("zhiyuanzhe_shenqing_text", zhiyuanzheShenqing.getZhiyuanzheShenqingText())
            .in("zhiyuanzhe_shenqing_yesno_types", new Integer[]{1,2})
            .eq("zhiyuanzhe_shenqing_yesno_text", zhiyuanzheShenqing.getZhiyuanzheShenqingYesnoText())
//            .notIn("zhiyuanzhe_shenqing_types", new Integer[]{102})
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        ZhiyuanzheShenqingEntity zhiyuanzheShenqingEntity = zhiyuanzheShenqingService.selectOne(queryWrapper);
        if(zhiyuanzheShenqingEntity==null){
            zhiyuanzheShenqing.setInsertTime(new Date());
            zhiyuanzheShenqing.setZhiyuanzheShenqingYesnoTypes(1);
            zhiyuanzheShenqing.setCreateTime(new Date());
        zhiyuanzheShenqingService.insert(zhiyuanzheShenqing);

            return R.ok();
        }else {
            if(zhiyuanzheShenqingEntity.getZhiyuanzheShenqingYesnoTypes()==1)
                return R.error(511,"有相同的待审核的数据");
            else if(zhiyuanzheShenqingEntity.getZhiyuanzheShenqingYesnoTypes()==2)
                return R.error(511,"有相同的审核通过的数据");
            else
                return R.error(511,"表中有相同数据");
        }
    }

}

TuanduiServiceImpl.java

package com.service.impl;

import com.utils.StringUtil;
import com.service.DictionaryService;
import com.utils.ClazzDiff;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import org.springframework.lang.Nullable;
import org.springframework.util.Assert;
import com.dao.TuanduiDao;
import com.entity.TuanduiEntity;
import com.service.TuanduiService;
import com.entity.view.TuanduiView;

/**
 * 团队活动 服务实现类
 */
@Service("tuanduiService")
@Transactional
public class TuanduiServiceImpl extends ServiceImpl<TuanduiDao, TuanduiEntity> implements TuanduiService {

    @Override
    public PageUtils queryPage(Map<String,Object> params) {
        Page<TuanduiView> page =new Query<TuanduiView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

HomeChart.vue

<template>
  <div id="home-chart" style="width:100%;height:400px;"></div>
</template>
<script>
export default {
  mounted() {
    this.homeChart();
  },
  methods: {
    homeChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("home-chart"));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["访问量", "用户量", "收入"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "访问量",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230
            ]
          },
          {
            name: "用户量",
            type: "line",
            stack: "总量",
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              310,
              182,
              191,
              234,
              290,
              330,
              310
            ]
          },
          {
            name: "收入",
            type: "line",
            stack: "总量",
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              410,
              232,
              201,
              154,
              190,
              330,
              410
            ]
          }
        ]
      };
      // // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      //根据窗口的大小变动图表
      window.onresize = function() {
        myChart.resize();
      };
    }
  }
};
</script>
<style lang="scss" scoped>
#home-chart {
  background: #ffffff;
  padding: 20px 0;
}
</style>

声明

本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。