@TOC
ssm736基于Java的高校物业工程报修系统+jsp
绪论
1.1研究背景与意义
信息化管理模式是将行业中的工作流程由人工服务，逐渐转换为使用计算机技术的信息化管理服务。这种管理模式发展迅速，使用起来非常简单容易，用户甚至不用掌握相关的专业知识，根据教程指导即可正常使用相关的系统，因而被越来越多的用户所使用。由于相关行业管理信息化，这就使得管理工作不在受到时间和区域的限制，随时随地即可完成相关的工作任务和结果[1]。就目前而言，管理信息化在现代社会中非常流行，使用比较广泛。早在20世纪70年代末，就出现了早期的电子商务，相关的公司企业使用计算机建立专用的内部网络，通过内部网络完成相应的采购、销售等活动，加快相关的企业之间的交易速度，提高了工作效率[2]。
当下，许多行业采用互联网技术将工作流程信息化、数字化，提高了相关人员的服务质量和效率，节约了相关行业的人力、财力、物力等资源，与此同时，人们获取外界的相关信息主要依赖于主流的信息化技术和工具。人们对生活的需求也在不断的发生着变化，为了应对用户的多样化需求，许多相关的第三产业应运而生，管理信息化也逐渐的流行起来，比如电子商务行业。本人通过查询大量学习资料，了解基本的开发系统的基本背景和关键任务，学习与掌握Java语言、web技术、AJAX技术、HTML语言等开发技术，设计系统功能模块，以及MySQL数据库的相关语法和工具，创建和存储数据表格，反映和关联表格之间相互存在的关系，由此对高校物业工程报修系统进行研发和实现。
1.2国内外研究现状
大概在20世纪90年代，我国才开始研发高校物业工程报修系统，与一些发达国家相比，系统研发起步比较晚。当时的计算机技术刚开始发展起来，国家经济力量比较薄弱，各地区的经济发展水平不平衡，再加上相关的网络应用技术不太先进，我国也使用了一段较长的时间对网络信息化管理进行探索[3]。近些年，因为国家非常重视和支持第三产业的发展，以及人们的日常生活需求越来越离不开信息管理技术的使用，所以我国的信息管理系统行业发展速度非常快，并且相关的体制法规也正在不断地被完善和改进。新时代背景下，根据人们的相关需求，不断地促进着相关产业的产生与发展，一系列电子产品、应用软件、信息管理系统等新时代的产物逐渐出现在人们的视野中，并且在近几年发展迅速，日渐趋于成熟[4]。
与国内相比，国外高校物业工程报修系统领域发展较早。国外的计算机技术发展比较成熟，所以系统相关的设计也比较完善。19世纪60年代左右，国外就开始研发高校物业工程报修系统，并且不久之后，迅速将其投入市场进行使用。美国、英国等一些发达国家快速发展计算机技术，促进了高校物业工程报修系统管理行业信息化建设[5]。而后随着相关的技术不断地发展，覆盖面非常广泛，应用领域比较多，促进着高校物业工程报修系统等相关的信息管理系统不断地发展和完善，并且其所设计的系统功能结构也比较合理、全面。相对而言，国外系统的研发在相关领域上还是占据着较大的优势[6]。因此，我们需要吸收国外系统开发领域中的较好的技术精华，发展我国的信息化管理系统，使得其面向大众，能够更好的、更全面的服务于相关的工作人员。
1.3研究内容
现今，互联网在我们的日常生活占据着日益重要的地位，我们也越来越离不开对移动设备、电脑等上网设备的使用。传统的高校物业工程报修系统模式主要依靠管理人员纯手工记录的相关信息，比较繁琐，不方便查找，也非常容易出现错误。如今，如果再通过手工记录报修，将大大不利于高校物业工程报修系统行业管理相关的高校物业工程报修系统信息，严重影响高校物业工程报修系统行业的发展。因此，本人结合传统的高校物业工程报修系统业务模式和先进的电子信息管理模式，使用Java语言编程设计功能模块，AJAX实现前台和后台之间的交互，MySQL数据库创建和存储数据表格，对高校物业工程报修系统进行设计和开发。本系统的设计有利于相关行业实现最大化的资源管理与共享，促进相关行业的信息交流、分工合作，提高相关工作人员的工作效率，最终实现整个高校物业工程报修系统行业服务的信息化管理。
1.4论文结构
本文围绕着高校物业工程报修系统的整个开发过程，展开了详细的描述和说明，设计和实现本系统的主要工作有：首先分析研究背景、研究状态，其次介绍设计系统时使用到的相关技术，然后通过系统分析确定系统的功能需求，接着通过编码工作详细设计和实现系统，最后再通过系统测试，找出系统存在的问题和解决问题的方法，不断地修改和完善系统。论文内容的组织结构设计如下。
第一章绪论，通过介绍本系统的研究背景、研究现状等内容，帮助用户了解和认识本系统的发展过程。
第二章相关技术介绍，主要介绍了Java语言、B/S模式、MySQL数据库等相关的开发技术，为后期系统的功能实现提供技术上的支持。
第三章系统分析，分析用户的使用需求，以及系统实现的可行性，最后通过用例建模分析与系统相关的参与者及其用例之间的关系。
第四章系统设计，主要根据系统总体功能设计，确定将要设计的系统功能模块，设计相关的数据表格。
第五章系统实现，通过相关的功能模块运行图，展现出系统的主要功能模块操作流程。
第六章系统测试，主要使用功能测试的方式，测试系统的相关功能运行和使用的具体情况。
第七章总结与展望，通过本文的各章节描述总结得出，基本上完成了系统的设计，展望未来将学习和使用更加先进的技术，提高系统的实用性，使得系统更好的服务于使用人员。
1.5本章小结
本章主要介绍了课题的研究背景与意义，研究现状，研究内容等内容，最后介绍了本论文的组织结构设计。信息化管理模式顺应了信息化时代的变化，本人以现在主流的管理模式为前提，根据使用者的相关需求，设计出一款符合大众需求的高校物业工程报修系统。
2理论基础
2.1 B/S模式
B/S模式（Browser/Server）是一种比较常用的网络结构模式[7]。B/S模式是由模型、视图、控制器（Model-View-Controller，MVC）结构组成[8]。模型主要是指业务模型，视图主要是指用户界面，控制器主要是控制保证视图和模型的同步执行。B/S模式的三层结构是相互独立的，换句话说，当某一个模块发生修改和更新，其不会对其他模块产生影响。根据B/S的这一特点，可以将对业务逻辑的处理以及约束条件集中到中间层中，便于前端增加对模型和方法的调用和复用。并且可以直接通过中间层对数据库进行相关的操作处理，大大减少了数据库的连接数，节省了计算机的对相关的资源配置空间。
使用B/S模式可以节省系统资源配置，提高研发工作效率，减少开发时间，因而大大提高了我们开发软件的可能性。B/S模式有针对性的改变了传统的客户端/服务器模式（Client/Server，C/S模式），也可以说这是对C/S模式进行了扩展。在这种结构模式中，用户不用再向使用C/S模式一样，下载客户端，其可以直接通过使用浏览器的方式，打开网站地址，即可访问和使用相关的系统功能服务。
2.2 IDEA开发环境
软件开发使用的编程语言有许多种，而每种编程语言需要通过与其相对应的开发平台进行编译和运行。IDEA平台都是目前比较常用的开发环境。IDEA平台是开源的，具有功能强大、可扩展性强等特点，可以应用于C/S模式软件的开发，但是它所占据的内存容量比较大，运行较慢，并且其并未提供Tomcat服务器，运行过程中需要将代码发布到Tomcat服务器中，测试使用的时间较长，故而不太适用于B/S模式软件的开发。
IDEA平台是建立在IDEA平台的基础之上，增加了许多的应用插件，比如Tomcat插件、mail组件等。IDEA平台增加了Tomcat插件，代码编写完成或者更新完成时，程序员无需将代码发布到Tomcat服务器中，可以直接通过调试实现程序的运行。IDEA平台增加了Mail组件，该组件可以为本程序提供标准的邮件方法，便于开发人员完成与邮件功能相关的编译工作。IDEA平台占据的内存空间较小，同时其也具有较高的可扩展性，编程人员可以根据需要添加和使用相关的插件。可以支持主流的开源产品和相关的开发框架，被广泛运用到相关的移动系统、web应用系统等开发中。相比于IDEA平台，本系统比较适合使用IDEA平台进行编程和开发。
2.3 MySQL数据库
MySQL是一种小型的关系型数据库管理系统，因为其运行速度快，占用内存空间小，并且源代码也是开源的，运行和维护成本低，系统性能稳定，受到了许多开发人员的喜爱[9]。考虑到MySQL数据库开发成本低，功能齐全等因素，大多中小型网站选择使用MySQL数据库管理数据信息。
SQL Server也是近几年使用较多的关系型数据库，其与MySQL数据库存在的不同之处主要有，在环境方面，SQL Server数据库比较适合于.NET环境，而MySQL数据库适用于几乎所有的语言；在成本方面，SQL Server数据库是商业化的，其运行多个数据库可许证，虽然有一个免费版，但是只能让你对关系型数据库管理系统有一定的认识与了解，熟悉相关的使用流程。如果要想使用SQL Server数据库的话，就需要支付相关费用，而MySQL数据库是开源的，其对于用户来说，使用是完全免费；在实际应用方面，SQL Server数据库和MySQL数据库均支持Java语言、PHP语言、C++语言等多种编程语言，但是MySQL数据库除了支持上述SQL Server数据库能支持的编程语言外，还支持Scheme、Eiffel等其他编程语言，故而MySQL数据库受欢迎程度比SQL Server数据库更高。
2.4 Java语言
Java语言是一种面向对象的编程语言，其主要具有继承、封装、多态等特征，从而提高编程工作效率，实现软件的设计和开发[10]。继承机制可以继承相关的类和方法，新的类可以在继承已经定义的类的相关特性基础上，扩展自己新的数据和功能，进而提高自身的能力。封装机制可以提高程序的安全性，其隐藏对象的相关属性和行为，对外只提供一个接口，用户直接通过访问相应的接口来实现自己需要的功能操作。多态机制可以描述对象的多样性，简单的来说就是引用相同的对象做不同的事务。Java语言具有安全高效的优点，并且其通过依靠Java虚拟机，可以实现跨平台操作[11]。Java语言比较容易学习和掌握，就目前软件开发所使用的开发类语言而言，Java语言比较受程序员喜爱，应用比较广泛。
2.5本章小结
本章主要介绍了实现高校物业工程报修系统的相关理论基础以及开发工具。本系统采用B/S模式，使用Java语言、AJAX技术、MySQL数据库等工具，设计系统功能、页面布局、后台数据等。开发本系统所使用的相关技术操作简单、容易掌握，Java语言具有跨平台性，可以支持在不同的浏览器使用本系统，MySQL数据库是开源的，减少了本系统的开发成本。
3需求分析
3.1功能需求分析
需求分析过程是系统能否成功投入市场，也能否被用户所接受和使用的非常关键的一个步骤。功能需求分析是通过设计系统功能来实现相关的业务事项，详细分析用户的实际需要，确定需要设计的相关业务事项，其是系统实现的关键，本系统存在的主要功能需求包括用户注册管理、用户信息管理、客房信息管理等。
3.2技术需求分析
本系统需要使用Java语言编码设计相关的功能模块，MySQL数据库创建和存储数据表格，AJAX实现前台和后台之间的交互，并且需要在IDEA开发环境中，编写相关的Java代码等系统程序文件，使用MySQL数据库存储数据信息，然后通过使用连接代码完成与MySQL数据库的搭建工作，再通过使用开发环境中的Tomcat插件，完成与Tomcat服务器的发布工作，最后通过与Tomcat服务器的交互行为可以实现代码调试工作。满足以上相关的技术需求，本系统才可以在浏览器上进行访问和使用。
3.3数据需求分析
在设计系统功能模块时，需要收集与系统有关的数据信息，并且对采集的数据信息进行组织和存储，分析系统功能设计，筛选有价值的数据，而后形成数据字典。其中，从庞大的数据信息中筛选出有价值的数据是比较耗时，也是非常重要的一步，主要依据信息的来源、信息的有效性、信息的扩充性、信息的真实性等内容筛选数据。数据需求分析阶段，为系统的开发工作做好进一步准备，便于更好的设计和完成系统。
3.4安全需求分析
安全需求分析是在系统使用过程中对性能的具体要求，对功能需求的一个补充内容，也是对功能需求的一个补充内容，主要包括响应需求、安全性需求、稳定性需求、可扩展性需求等内容。安全需求是在系统功能需求以外的其他必要的需求内容，其不论在系统设计过程，还是在系统投入市场过程，都起到了极其重要的作用。
3.5可行性分析
3.5.1经济可行性
经济可行性是决定是否研发系统的关键性因素。我们主要通过比较实际的收益和成本的方法，来确定一个系统是否具有经济可行性。在使用系统的过程中，当获得的收益大于开发的成本时，说明此系统的研发在经济上是可行的。由于本系统的开发使用的技术基本上是开源的，获得技术上的支持是没有多少问题的，在软件实现方面所花费的成本是很低的，甚至不需要花费成本。研发系统的成本主要是来自调研、硬件和技术人员等方面。如果系统中需要存储的数据量不是很大，仅需要配置一台普通的服务器，即可满足相关需求。如果需要存储的数据量很大，则需要配置一台具有独立功能的服务器，比如管理数据库需要单独的数据库服务器，负责接入网站需要web服务器等等，但是一台服务器的价格是比较贵的。考虑到数据量和成本，我们使用小型集群服务器，这样既可以充分利用相关的资源，又可以让系统正常访问服务器。
3.5.2技术可行性
Java语言具有跨平台性，本系统主要通过Java语言进行编码实现的，所以本系统可以支持在多个操作系统或者多个浏览器上运行和使用[14]。MySQL数据库是可以被免费使用的，并且MySQL数据库的日常运行和维护工作比较简单，这样有利于降低本系统的开发成本[15]。在学校期间，本人已经学习和掌握了Java语言、MySQL数据库、AJAX技术等相关的技术相关知识以及用法，因此在技术可行性方面，本系统是可以实现被设计与实现的。
3.5.3操作可行性
本系统所采用网络结构是B/S模式，对于开发人员来说，可以直接复用相关的代码，或者稍微对原代码进行修改，使得其满足于本系统的相关需求，如此便可大大节约了开发时间，在最优最短的时间内完成对系统的设计。对于用户来说，在传统的模式下，需要下载客户端才可使用系统。现在，在新型的模式下，使用本系统，就不需要下载，直接选择浏览器打开网址，即可访问和使用本系统。并且，用户可以根据自身的工作需要，选择相关的菜单按钮操作本系统。在系统的一些功能模块中，本人还添加了相关的使用提示信息，方便用户更好更快的了解和使用本系统。因此，本系统的设计和实现是具备操作可行性的。
3.6本章小结
需求分析在软件开发周期中是耗时最长的一个环节，系统的整个设计和实现过程主要依赖于需求分析报告。调查收集出不同用户对本系统的相关使用需求，由此设计相关的功能模块，从而期望实现用户满意度较高的实用型系统。本章主要从功能需求、技术需求、数据需求、安全需求、可行性分析等方面，对系统进行需求分析，确保设计出一款实用价值比较高的管理系统。
4系统设计
4.1系统功能设计
本系统主要通过使用Java语言编码设计系统功能，MySQL数据库管理数据，AJAX技术设计简洁的、友好的网址页面，然后在IDEA开发平台中，编写相关的Java代码文件，接着通过连接语言完成与数据库的搭建工作，再通过平台提供的Tomcat插件完成信息的交互，最后在浏览器中打开系统网址便可使用本系统。本系统的使用角色可以被分为用户和管理员，用户具有注册、查看信息、留言信息等功能，管理员具有修改用户信息，发布新闻等功能，系统总体功能设计图如图4-1所示。
高校物业工程报修系统
系统设置管理
公告管理
用户管理
公告类型管理
报修管理
个人信息设置
密码信息设置管理
报修添加
报修删除
报修修改
用户添加
用户删除
公告类型添加
公告类型修改
公告类型删除
公告添加
公告修改
公告删除
图4-1系统总体功能设计图
4.2 数据库设计
开发一个系统也需要提前设计数据库。这里的数据库是相关数据的集合，存储在一起的这些数据也是按照一定的组织方式进行的。目前，数据库能够服务于多种应用程序，则是源于它存储方式最佳，具备数据冗余率低的优势。虽然数据库为程序提供信息存储服务，但它与程序之间也可以保持较高的独立性。总而言之，数据库经历了很长一段时间的发展，从最初的不为人知，到现在的人尽皆知，其相关技术也越发成熟，同时也拥有着坚实的理论基础。
4.2.1 数据库概念设计
这部分内容需要借助数据库关系图来完成，也需要使用专门绘制数据库关系图的工具，比如Visio工具就可以设计E-R图（数据库关系图）。设计数据库，也需要按照设计的流程进行，首先还是要根据需求完成实体的确定，分析实体具有的特征，还有对实体间的关联关系进行确定。最后才是使用E-R模型的表示方法，绘制本系统的E-R图。不管是使用亿图软件，还是Visio工具，对于E-R模型的表示符号都一样，通常矩形代表实体，实体间存在的关系用菱形符号表示，实体的属性也就是实体的特征用符号椭圆表示。最后使用直线将矩形，菱形和椭圆等符号连接起来。接下来就开始对本系统的E-R图进行绘制。
（1）下图是用户实体和其具备的属性。
图4.1 用户实体属性图
（2）下图是公告实体和其具备的属性。
图4.2 公告实体属性图
（3）下图是报修实体和其具备的属性。
图4.3 报修实体属性图
（4）下图是工程师实体和其具备的属性。
图4.4 工程师实体属性图
4.2.2逻辑设计
本系统使用MySQL数据库管理与系统相关的数据信息。逻辑设计阶段是将上一个阶段中的概念数据模型，转换为方便数据库进行存储的关系模型，即基本表的形式，方便开发人员后期对数据模型进行优化和管理[20]。逻辑设计阶段是整个数据库设计设计的关键，与系统有关的信息将会在这一阶段中被存储在数据库中，当用户使用本系统进行相关的功能操作时，与之有关的数据信息所在的基本表会发生相应的更新变化。数据库的逻辑设计阶段主要任务是将与系统相关的数据信息，设计成为方便数据库存储和管理的基本表格的形式，具体内容如下。
表4.1报修表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_id | Integer | 用户 | 是 |
| 3 | gongchengshi_id | Integer | 工程师 | 是 |
| 4 | baoxiu_uuid_number | String | 报修编号 | 是 |
| 5 | baoxiu_name | String | 报修名称 | 是 |
| 6 | baoxiu_wupin_name | String | 报修物品 | 是 |
| 7 | baoxiu_address | String | 报修地点 | 是 |
| 8 | baoxiu_types | Integer | 报修类型 | 是 |
| 9 | insert_time | Date | 报修时间 | 是 |
| 10 | baoxiu_content | String | 报修详情 | 是 |
| 11 | baoxiu_zhuangtai_types | Integer | 报修状态 | 是 |
| 12 | create_time | Date | 创建时间 | 是 |
表4.2字典表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 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.3公告表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 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.4用户表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_name | String | 用户姓名 | 是 |
| 3 | yonghu_phone | String | 用户手机号 | 是 |
| 4 | yonghu_id_number | String | 用户身份证号 | 是 |
| 5 | yonghu_photo | String | 用户头像 | 是 |
| 6 | yonghu_email | String | 电子邮箱 | 是 |
| 7 | create_time | Date | 创建时间 | 是 |
表4.5工程师表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | gongchengshi_name | String | 工程师姓名 | 是 |
| 3 | gongchengshi_phone | String | 工程师手机号 | 是 |
| 4 | gongchengshi_id_number | String | 工程师身份证号 | 是 |
| 5 | gongchengshi_photo | String | 工程师头像 | 是 |
| 6 | gongchengshi_email | String | 电子邮箱 | 是 |
| 7 | create_time | Date | 创建时间 | 是 |
表4.6管理员表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | username | String | 用户名 | 是 |
| 3 | password | String | 密码 | 是 |
| 4 | role | String | 角色 | 是 |
| 5 | addtime | Date | 新增时间 | 是 |
4.3本章小结
本章主要介绍了系统功能设计、数据库设计等内容。通过设计系统的总体功能框架，确定系统的功能设计主要包括报修等模块。数据库设计主要分为概念设计阶段和逻辑设计阶段，其中，概念设计是将现实世界中的数据转变为信息世界中的概念模型，逻辑设计是将概念设计中的概念模型转变成可以被数据库存储的数据表格。系统功能设计好坏是系统得以被编码实现的重要依据。数据库设计是否符合规范，是系统能够成功运行的基本保障，也是用户和系统实现交互处理的重要前提。
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公告类型管理界面
系
YonghuServiceImpl.java
package com.service.impl;import com.utils.StringUtil;
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 com.dao.YonghuDao;
import com.entity.YonghuEntity;
import com.service.YonghuService;
import com.entity.view.YonghuView;/*** 用户 服务实现类*/
@Service("yonghuService")
@Transactional
public class YonghuServiceImpl extends ServiceImpl<YonghuDao, YonghuEntity> implements YonghuService {@Overridepublic PageUtils queryPage(Map<String,Object> params) {if(params != null && (params.get("limit") == null || params.get("page") == null)){params.put("page","1");params.put("limit","10");}Page<YonghuView> page =new Query<YonghuView>(params).getPage();page.setRecords(baseMapper.selectListView(page,params));return new PageUtils(page);}}BaoxiuController.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("/baoxiu")
public class BaoxiuController {private static final Logger logger = LoggerFactory.getLogger(BaoxiuController.class);@Autowiredprivate BaoxiuService baoxiuService;@Autowiredprivate TokenService tokenService;@Autowiredprivate DictionaryService dictionaryService;//级联表service@Autowiredprivate YonghuService yonghuService;@Autowiredprivate GongchengshiService gongchengshiService;/*** 后端列表*/@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"));else if("工程师".equals(role))params.put("gongchengshiId",request.getSession().getAttribute("userId"));if(params.get("orderBy")==null || params.get("orderBy")==""){params.put("orderBy","id");}PageUtils page = baoxiuService.queryPage(params);//字典表数据转换List<BaoxiuView> list =(List<BaoxiuView>)page.getList();for(BaoxiuView 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);BaoxiuEntity baoxiu = baoxiuService.selectById(id);if(baoxiu !=null){//entity转viewBaoxiuView view = new BaoxiuView();BeanUtils.copyProperties( baoxiu , view );//把实体数据重构到view中//级联表YonghuEntity yonghu = yonghuService.selectById(baoxiu.getYonghuId());if(yonghu != null){BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段view.setYonghuId(yonghu.getId());}//级联表GongchengshiEntity gongchengshi = gongchengshiService.selectById(baoxiu.getGongchengshiId());if(gongchengshi != null){BeanUtils.copyProperties( gongchengshi , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段view.setGongchengshiId(gongchengshi.getId());}//修改对应字典表字段dictionaryService.dictionaryConvert(view, request);return R.ok().put("data", view);}else {return R.error(511,"查不到数据");}}/*** 后端保存*/@RequestMapping("/save")public R save(@RequestBody BaoxiuEntity baoxiu, HttpServletRequest request){logger.debug("save方法:,,Controller:{},,baoxiu:{}",this.getClass().getName(),baoxiu.toString());String role = String.valueOf(request.getSession().getAttribute("role"));if(false)return R.error(511,"永远不会进入");else if("用户".equals(role)){baoxiu.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));baoxiu.setBaoxiuZhuangtaiTypes(1);}else if("工程师".equals(role))baoxiu.setGongchengshiId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));Wrapper<BaoxiuEntity> queryWrapper = new EntityWrapper<BaoxiuEntity>().eq("yonghu_id", baoxiu.getYonghuId()).eq("gongchengshi_id", baoxiu.getGongchengshiId()).eq("baoxiu_uuid_number", baoxiu.getBaoxiuUuidNumber()).eq("baoxiu_name", baoxiu.getBaoxiuName()).eq("baoxiu_wupin_name", baoxiu.getBaoxiuWupinName()).eq("baoxiu_address", baoxiu.getBaoxiuAddress()).eq("baoxiu_types", baoxiu.getBaoxiuTypes()).eq("baoxiu_zhuangtai_types", baoxiu.getBaoxiuZhuangtaiTypes());logger.info("sql语句:"+queryWrapper.getSqlSegment());BaoxiuEntity baoxiuEntity = baoxiuService.selectOne(queryWrapper);if(baoxiuEntity==null){baoxiu.setInsertTime(new Date());baoxiu.setCreateTime(new Date());baoxiuService.insert(baoxiu);return R.ok();}else {return R.error(511,"表中有相同数据");}}/*** 后端修改*/@RequestMapping("/update")public R update(@RequestBody BaoxiuEntity baoxiu, HttpServletRequest request){logger.debug("update方法:,,Controller:{},,baoxiu:{}",this.getClass().getName(),baoxiu.toString());String role = String.valueOf(request.getSession().getAttribute("role"));
// if(false)
// return R.error(511,"永远不会进入");
// else if("用户".equals(role))
// baoxiu.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
// else if("工程师".equals(role))
// baoxiu.setGongchengshiId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));//根据字段查询是否有相同数据Wrapper<BaoxiuEntity> queryWrapper = new EntityWrapper<BaoxiuEntity>().notIn("id",baoxiu.getId()).andNew().eq("yonghu_id", baoxiu.getYonghuId()).eq("gongchengshi_id", baoxiu.getGongchengshiId()).eq("baoxiu_uuid_number", baoxiu.getBaoxiuUuidNumber()).eq("baoxiu_name", baoxiu.getBaoxiuName()).eq("baoxiu_wupin_name", baoxiu.getBaoxiuWupinName()).eq("baoxiu_address", baoxiu.getBaoxiuAddress()).eq("baoxiu_types", baoxiu.getBaoxiuTypes()).eq("baoxiu_zhuangtai_types", baoxiu.getBaoxiuZhuangtaiTypes());logger.info("sql语句:"+queryWrapper.getSqlSegment());BaoxiuEntity baoxiuEntity = baoxiuService.selectOne(queryWrapper);if(baoxiuEntity==null){baoxiuService.updateById(baoxiu);//根据id更新return R.ok();}else {return R.error(511,"表中有相同数据");}}/*** 删除*/@RequestMapping("/delete")public R delete(@RequestBody Integer[] ids){logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());baoxiuService.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");try {List<BaoxiuEntity> baoxiuList = 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("../../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){//循环BaoxiuEntity baoxiuEntity = new BaoxiuEntity();
// baoxiuEntity.setYonghuId(Integer.valueOf(data.get(0))); //用户 要改的
// baoxiuEntity.setGongchengshiId(Integer.valueOf(data.get(0))); //工程师 要改的
// baoxiuEntity.setBaoxiuUuidNumber(data.get(0)); //报修编号 要改的
// baoxiuEntity.setBaoxiuName(data.get(0)); //报修名称 要改的
// baoxiuEntity.setBaoxiuWupinName(data.get(0)); //报修物品 要改的
// baoxiuEntity.setBaoxiuAddress(data.get(0)); //报修地点 要改的
// baoxiuEntity.setBaoxiuTypes(Integer.valueOf(data.get(0))); //报修类型 要改的
// baoxiuEntity.setInsertTime(date);//时间
// baoxiuEntity.setBaoxiuContent("");//详情和图片
// baoxiuEntity.setBaoxiuZhuangtaiTypes(Integer.valueOf(data.get(0))); //报修状态 要改的
// baoxiuEntity.setCreateTime(date);//时间baoxiuList.add(baoxiuEntity);//把要查询是否重复的字段放入map中//报修编号if(seachFields.containsKey("baoxiuUuidNumber")){List<String> baoxiuUuidNumber = seachFields.get("baoxiuUuidNumber");baoxiuUuidNumber.add(data.get(0));//要改的}else{List<String> baoxiuUuidNumber = new ArrayList<>();baoxiuUuidNumber.add(data.get(0));//要改的seachFields.put("baoxiuUuidNumber",baoxiuUuidNumber);}}//查询是否重复//报修编号List<BaoxiuEntity> baoxiuEntities_baoxiuUuidNumber = baoxiuService.selectList(new EntityWrapper<BaoxiuEntity>().in("baoxiu_uuid_number", seachFields.get("baoxiuUuidNumber")));if(baoxiuEntities_baoxiuUuidNumber.size() >0 ){ArrayList<String> repeatFields = new ArrayList<>();for(BaoxiuEntity s:baoxiuEntities_baoxiuUuidNumber){repeatFields.add(s.getBaoxiuUuidNumber());}return R.error(511,"数据库的该表中的 [报修编号] 字段已经存在 存在数据为:"+repeatFields.toString());}baoxiuService.insertBatch(baoxiuList);return R.ok();}}}}catch (Exception e){e.printStackTrace();return R.error(511,"批量插入数据异常，请联系管理员");}}}BaiduUtil.java
package com.utils;import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import org.json.JSONObject;/**
* 类说明 :
*/public class BaiduUtil {/*** 根据经纬度获得省市区信息* @param lon 纬度* @param lat 经度* @param coordtype 经纬度坐标系* @return*/public static Map<String, String> getCityByLonLat(String key, String lng, String lat) {String location = lat + "," + lng;try {//拼装urlString url = "http://api.map.baidu.com/reverse_geocoding/v3/?ak="+key+"&output=json&coordtype=wgs84ll&location="+location;String result = HttpClientUtils.doGet(url);JSONObject o = new JSONObject(result);Map<String, String> area = new HashMap<>();area.put("province", o.getJSONObject("result").getJSONObject("addressComponent").getString("province"));area.put("city", o.getJSONObject("result").getJSONObject("addressComponent").getString("city"));area.put("district", o.getJSONObject("result").getJSONObject("addressComponent").getString("district"));area.put("street", o.getJSONObject("result").getJSONObject("addressComponent").getString("street"));return area;}catch (Exception e) {e.printStackTrace();}return null;}/*** 获取API访问token* 该token有一定的有效期，需要自行管理，当失效时需重新获取.* @param ak - 百度云官网获取的 API Key* @param sk - 百度云官网获取的 Securet Key* @return assess_token*/public static String getAuth(String ak, String sk) {// 获取token地址String authHost = "https://aip.baidubce.com/oauth/2.0/token?";String getAccessTokenUrl = authHost// 1. grant_type为固定参数+ "grant_type=client_credentials"// 2. 官网获取的 API Key+ "&client_id=" + ak// 3. 官网获取的 Secret Key+ "&client_secret=" + sk;try {URL realUrl = new URL(getAccessTokenUrl);// 打开和URL之间的连接HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();connection.setRequestMethod("GET");connection.connect();// 获取所有响应头字段Map<String, List<String>> map = connection.getHeaderFields();// 遍历所有的响应头字段for (String key : map.keySet()) {System.err.println(key + "--->" + map.get(key));}// 定义 BufferedReader输入流来读取URL的响应BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));String result = "";String line;while ((line = in.readLine()) != null) {result += line;}/*** 返回结果示例*/System.err.println("result:" + result);org.json.JSONObject jsonObject = new org.json.JSONObject(result);String access_token = jsonObject.getString("access_token");return access_token;} catch (Exception e) {System.err.printf("获取token失败！");e.printStackTrace(System.err);}return null;}}bootstrap-colorpicker.min.js
/*!* Bootstrap Colorpicker* (c) 2012 Stefan Petre* http://mjaalnir.github.io/bootstrap-colorpicker/* http://www.apache.org/licenses/LICENSE-2.0.txt*/(function(d){var k=function(a){this.value={h:1,s:1,b:1,a:1};this.setColor(a)};k.prototype={constructor:k,setColor:function(a){a=a.toLowerCase();var b=this;d.each(e.stringParsers,function(c,d){var f=d.re.exec(a),f=f&&d.parse(f),g=d.space||"rgba";return f?(b.value="hsla"===g?e.RGBtoHSB.apply(null,e.HSLtoRGB.apply(null,f)):e.RGBtoHSB.apply(null,f),!1):!0})},setHue:function(a){this.value.h=1-a},setSaturation:function(a){this.value.s=a},setLightness:function(a){this.value.b=1-a},setAlpha:function(a){this.value.a=
parseInt(100*(1-a),10)/100},toRGB:function(a,b,c,d){a||(a=this.value.h,b=this.value.s,c=this.value.b);var f,g,e;a=360*a%360/60;e=c*b;b=e*(1-Math.abs(a%2-1));c=f=g=c-e;a=~~a;c+=[e,b,0,0,b,e][a];f+=[b,e,e,b,0,0][a];g+=[0,0,b,e,e,b][a];return{r:Math.round(255*c),g:Math.round(255*f),b:Math.round(255*g),a:d||this.value.a}},toHex:function(a,b,c,d){a=this.toRGB(a,b,c,d);return"#"+(16777216|parseInt(a.r)<<16|parseInt(a.g)<<8|parseInt(a.b)).toString(16).substr(1)},toHSL:function(a,b,c,d){a||(a=this.value.h,
b=this.value.s,c=this.value.b);var f=(2-b)*c;b*=c;b=0<f&&1>=f?b/f:b/(2-f);1<b&&(b=1);return{h:a,s:b,l:f/2,a:d||this.value.a}}};var l=0,h=function(a,b){l++;this.element=d(a).attr("data-colorpicker-guid",l);var c=b.format||this.element.data("color-format")||"hex";this.format=e.translateFormats[c];this.isInput=this.element.is("input");this.component=this.element.is(".colorpicker-component")?this.element.find(".add-on, .input-group-addon"):!1;this.picker=d(e.template).attr("data-colorpicker-guid",l).appendTo("body").on("mousedown.colorpicker",
d.proxy(this.mousedown,this));if(this.isInput)this.element.on({"focus.colorpicker":d.proxy(this.show,this),"keyup.colorpicker":d.proxy(this.update,this)});else if(this.component)this.component.on({"click.colorpicker":d.proxy(this.show,this)});else this.element.on({"click.colorpicker":d.proxy(this.show,this)});if("rgba"===c||"hsla"===c)this.picker.addClass("alpha"),this.alpha=this.picker.find(".colorpicker-alpha")[0].style;this.component?(this.picker.find(".colorpicker-color").hide(),this.preview=
this.element.find("i")[0].style):this.preview=this.picker.find("div:last")[0].style;this.base=this.picker.find("div:first")[0].style;this.update();d(d.proxy(function(){this.element.trigger("create",[this])},this))};h.prototype={constructor:h,show:function(a){this.picker.show();this.height=this.component?this.component.outerHeight():this.element.outerHeight();this.place();d(window).on("resize.colorpicker",d.proxy(this.place,this));!this.isInput&&a&&(a.stopPropagation(),a.preventDefault());d(document).on({"mousedown.colorpicker":d.proxy(this.hide,
this)});this.element.trigger({type:"showPicker",color:this.color})},update:function(){var a=this.isInput?this.element.prop("value"):this.element.data("color");if("undefined"===typeof a||null===a)a="#ffffff";this.color=new k(a);this.picker.find("i").eq(0).css({left:100*this.color.value.s,top:100-100*this.color.value.b}).end().eq(1).css("top",100*(1-this.color.value.h)).end().eq(2).css("top",100*(1-this.color.value.a));this.previewColor()},hide:function(){this.picker.hide();d(window).off("resize",this.place);
d(document).off({mousedown:this.hide});this.isInput?""!==this.element.val()&&this.element.prop("value",this.format.call(this)).trigger("change"):(this.component&&""!==this.element.find("input").val()&&this.element.find("input").prop("value",this.format.call(this)).trigger("change"),this.element.data("color",this.format.call(this)));this.element.trigger({type:"hidePicker",color:this.color})},place:function(){var a=this.component?this.component.offset():this.element.offset();this.picker.css({top:a.top+
this.height,left:a.left})},destroy:function(){d(".colorpicker[data-colorpicker-guid="+this.element.attr("data-colorpicker-guid")+"]").remove();this.element.removeData("colorpicker").removeAttr("data-colorpicker-guid").off(".colorpicker");!1!==this.component&&this.component.off(".colorpicker");this.element.trigger("destroy",[this])},setValue:function(a){this.isInput?this.element.prop("value",a):(this.element.find("input").val(a),this.element.data("color",a));this.update();this.element.trigger({type:"changeColor",
color:this.color})},previewColor:function(){try{this.preview.backgroundColor=this.format.call(this)}catch(a){this.preview.backgroundColor=this.color.toHex()}this.base.backgroundColor=this.color.toHex(this.color.value.h,1,1,1);this.alpha&&(this.alpha.backgroundColor=this.color.toHex())},pointer:null,slider:null,mousedown:function(a){a.stopPropagation();a.preventDefault();var b=d(a.target).closest("div");if(!b.is(".colorpicker")){if(b.is(".colorpicker-saturation"))this.slider=d.extend({},e.sliders.saturation);
else if(b.is(".colorpicker-hue"))this.slider=d.extend({},e.sliders.hue);else if(b.is(".colorpicker-alpha"))this.slider=d.extend({},e.sliders.alpha);else return!1;var c=b.offset();this.slider.knob=b.find("i")[0].style;this.slider.left=a.pageX-c.left;this.slider.top=a.pageY-c.top;this.pointer={left:a.pageX,top:a.pageY};d(document).on({"mousemove.colorpicker":d.proxy(this.mousemove,this),"mouseup.colorpicker":d.proxy(this.mouseup,this)}).trigger("mousemove")}return!1},mousemove:function(a){a.stopPropagation();
a.preventDefault();var b=Math.max(0,Math.min(this.slider.maxLeft,this.slider.left+((a.pageX||this.pointer.left)-this.pointer.left)));a=Math.max(0,Math.min(this.slider.maxTop,this.slider.top+((a.pageY||this.pointer.top)-this.pointer.top)));this.slider.knob.left=b+"px";this.slider.knob.top=a+"px";this.slider.callLeft&&this.color[this.slider.callLeft].call(this.color,b/100);this.slider.callTop&&this.color[this.slider.callTop].call(this.color,a/100);this.previewColor();if(this.isInput)try{this.element.val(this.format.call(this)).trigger("change")}catch(c){this.element.val(this.color.toHex()).trigger("change")}else try{this.element.find("input").val(this.format.call(this)).trigger("change")}catch(d){this.element.find("input").val(this.color.toHex()).trigger("change")}this.element.trigger({type:"changeColor",
color:this.color});return!1},mouseup:function(a){a.stopPropagation();a.preventDefault();d(document).off({mousemove:this.mousemove,mouseup:this.mouseup});return!1}};d.fn.colorpicker=function(a,b){return this.each(function(){var c=d(this),e=c.data("colorpicker"),f="object"===typeof a&&a;if(!e)"destroy"!==a&&c.data("colorpicker",new h(this,d.extend({},d.fn.colorpicker.defaults,f)));else if("string"===typeof a)e[a](b)})};d.fn.colorpicker.defaults={};d.fn.colorpicker.Constructor=h;var e={translateFormats:{rgb:function(){var a=
this.color.toRGB();return"rgb("+a.r+","+a.g+","+a.b+")"},rgba:function(){var a=this.color.toRGB();return"rgba("+a.r+","+a.g+","+a.b+","+a.a+")"},hsl:function(){var a=this.color.toHSL();return"hsl("+Math.round(360*a.h)+","+Math.round(100*a.s)+"%,"+Math.round(100*a.l)+"%)"},hsla:function(){var a=this.color.toHSL();return"hsla("+Math.round(360*a.h)+","+Math.round(100*a.s)+"%,"+Math.round(100*a.l)+"%,"+a.a+")"},hex:function(){return this.color.toHex()}},sliders:{saturation:{maxLeft:100,maxTop:100,callLeft:"setSaturation",
callTop:"setLightness"},hue:{maxLeft:0,maxTop:100,callLeft:!1,callTop:"setHue"},alpha:{maxLeft:0,maxTop:100,callLeft:!1,callTop:"setAlpha"}},RGBtoHSB:function(a,b,c,d){a/=255;b/=255;c/=255;var f,e;f=Math.max(a,b,c);e=f-Math.min(a,b,c);a=60*(((0===e?0:f===a?(b-c)/e:f===b?(c-a)/e+2:(a-b)/e+4)+360)%6)/360;return{h:a||1,s:0===e?0:e/f,b:f,a:d||1}},HueToRGB:function(a,b,c){0>c?c+=1:1<c&&(c-=1);return 1>6*c?a+6*(b-a)*c:1>2*c?b:2>3*c?a+6*(b-a)*(2/3-c):a},HSLtoRGB:function(a,b,c,d){0>b&&(b=0);b=0.5>=c?c*(1+
b):c+b-c*b;var f=2*c-b,g=a-1/3;c=Math.round(255*e.HueToRGB(f,b,a+1/3));a=Math.round(255*e.HueToRGB(f,b,a));b=Math.round(255*e.HueToRGB(f,b,g));return[c,a,b,d||1]},stringParsers:[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(a){return[a[1],a[2],a[3],a[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(a){return[2.55*a[1],2.55*a[2],2.55*a[3],a[4]]}},{re:/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
parse:function(a){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}},{re:/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,parse:function(a){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}},{re:/hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,space:"hsla",parse:function(a){return[a[1]/360,a[2]/100,a[3]/100,a[4]]}}],template:'<div class="colorpicker dropdown-menu"><div class="colorpicker-saturation"><i><b></b></i></div><div class="colorpicker-hue"><i></i></div><div class="colorpicker-alpha"><i></i></div><div class="colorpicker-color"><div /></div></div>'}})(window.jQuery);
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。
