如何使用ssm实现基于WEB的文学网的设计与实现+vue

赐你岁月如歌

于 2024-09-17 10:17:39 发布

阅读量733

点赞数 12

分类专栏： ssm 管理系统计算机毕设文章标签： ssm 后端 java

本文链接：https://blog.csdn.net/a253399414/article/details/142311825

版权

管理系统同时被 3 个专栏收录

213 篇文章 0 订阅

订阅专栏

计算机毕设

213 篇文章 0 订阅

订阅专栏

ssm

109 篇文章 0 订阅

订阅专栏

@TOC

ssm626基于WEB的文学网的设计与实现+vue

第一章绪论

1.1研究背景与意义

在科学技术水平还比较低下的时期，相关行业通常采用人工登记的方式对相关的文学信息进行记录，而后对这些信息记录进行管理和控制。这种采用纸质存储信息的管理模式，对于相关行业管理人员来说，即不方便后期的数据记录查找，以及进行必要的个人信息资料更新与管理操作，也容易在登记过程中出现失误，严重的影响了信息的真实性和可靠性[1]。所以，传统的使用纸质的方式对相关数据信息进行管理，已经满足不了人们的现实使用需求了，也顺应不了时代的进步和发展。

现今，科学技术正在飞速的发展，其所迸发的力量是无穷的，并且发挥出了巨大的作用，由此促进了信息化的时代诞生[2]。信息化的管理模式正是信息化时代的产物，通过使用信息化的管理模式，可以解除时空的限制，在任何时间和任何地点，均可对数据资源进行管理，由此可见，信息化的管理模式具有极大的现实意义和使用价值。为了提高相关行业管理人员的管理质量和水平，避免错误的记录文学信息，确保数据的真实性和可维护性，本人设计了一款基于WEB的文学网。

1.2国内外研究现状

在国外，尤其是美国为首的发达国家，对信息化管理模式的研究比较早，这些国家对学校、企业、医院、军事等领域的信息化管理建设非常重视。随后许多国家紧随其后，不断地发展和完善信息化管理模式。上个世纪末，德国等国家，重点研究了将信息化建设应用到企业的日常办公工作，英国等国家也加强了对信息化的基础设施的投资[3]。近几十年，随着互联网的发展与普及，使得信息化的管理模式将取代纸质化的管理模式成为了必然趋势。当下，信息化管理模式的相关技术已经非常成熟了[4]。

与国外相比，我国虽然对信息化管理模式的起步比较晚，但是在极短时间内，信息化管理模式发展迅猛，与之相关的技术和工具也由展露头角，到稳步发展，再到趋于成熟，目前也正在逐渐与发达国家缩小差距[5]。近些年，我国的相关技术人员也研究和设计出了支付宝、微信等应用软件，随后，在较短的时间内，被人们所接受和认可，再到当下，人们的日常生活也离不了这些应用软件的使用，并且正在被不断地推广到全球各地，也逐渐被各个地方各个国家的人们所支持和认可，从这一方面可以看出来，我国的信息化技术的发展，以及专业能力和水平的提高是值得被世界所肯定的[6]。

1.3论文组织结构

本文介绍了设计和实现基于WEB的文学网的全过程，从研究系统的背景、意义、现状，到分析系统的使用需求，再到设计系统总体功能和数据表格，最后实现系统功能设计，并对系统进行功能测试。本文具体的组织结构安排如下：

第一章绪论，本章主要介绍了系统研发背景、意义、现状等内容。通过本章所介绍的相关内容，可以对系统的发展有一定的了解和认识，并且也说明了系统开发是具有一定的现实依据和使用价值。再根据研究内容的介绍，可以了解本文对系统的哪些内容进行了具体的研究。

第二章相关技术介绍，本章主要介绍了Java语言、SSM框架、MySQL数据库等开发技术工具。其中，Java语言用于设计系统功能模块，SSM框架用于设计系统整体开发框架，MySQL数据库用于管理系统后台数据信息。本章通过介绍的相关开发技术工具，为系统的设计和实现提供技术支持。

第三章系统分析，本章主要介绍了系统的需求分析、可行性分析等内容。通过对系统进行需求分析，分析系统所需要设计的功能需求，便于设计出一款能满足使用需求的系统，为系统验收阶段提供参考依据。在经济、技术、操作等方面对系统进行可行性分析，确定系统是否具备开发的可行性。

第四章系统设计，本章主要介绍了系统的总体设计和数据库设计。通过设计系统的总体功能，可以确定系统设计的方向和思路，增加系统实现的可能性。本系统主要使用MySQL数据库管理数据信息，通过对系统进行实体-联系图设计以及相关数据表格设计，便于数据库设计人员对与系统相关的数据信息进行管控和维护。

第五章系统实现，本章主要介绍了系统相关的功能模块实现内容。通过介绍系统主要功能模块的界面设计，及其相关的具体操作和处理步骤，便于用户了解和认识系统主要的功能设计，便于用户访问和使用本系统，以满足自己一定的使用需求的目的。

第六章系统测试，本章主要介绍了系统测试概述、测试结果分析等相关内容。本文中，主要使用功能测试的方式对系统进行测试。通过对系统进行用户登录测试、小说信息管理测试等操作，测试系统的功能模块能否正常运行，以及在运行过程中是否发现错误，而后根据功能测试结果对系统的设计进行总结。

第七章总结与展望，本章主要内容是对本系统的整个开发实现过程进行了总结，并对未来提出了展望。通过对系统设计进行总结，发现系统实现过程中存在的不足，不断地改进和完善本系统。并且展望未来学习和掌握更加先进的技术，将其运用到本系统的设计中，开发出一款功能更强大、应用范围更广的系统。

第二章相关技术介绍

2.1 B/S架构

浏览器/服务器结构，可以被简写为B/S结构（Browser/Server结构），是目前最受欢迎的软件开发结构之一[7]。B/S结构主要通过将系统网址发布到浏览器的方式，由用户在浏览器上进行网站访问，即可实现对系统的相关操作，进而满足实际的功能需求。服务器/客户机结构，可以被简写为C/S结构（Client/Server结构），其主要通过运行客户端程序面向系统的使用对象，进而实现系统的功能操作[8]。通过C/S结构开发的客户端应用程序具有较快的处理速度和响应时间，其在运行安全方面和性能稳定方面具有较大的优势。但是，由于用户需要下载客户端程序，并且通过进行正确的安装步骤，才可运行和使用系统，安装步骤繁琐，工作量大，灵活性不好，并且与系统相关的软、硬件均需要定期的升级和维护，所需的成本极高。相比之下，开发人员一般首先考虑使用C/S结构实现系统。

2.2 Java语言

Java语言是一门面向对象的程序设计语言，这一点与C语言不相同，C语言是一种面向过程的程序设计语言[9]。什么是面向过程，什么又是面向对象？面向过程是指分析待解决问题的具体解决步骤，然后设计相关函数分阶段地实现这些步骤，使用时在对函数进行调用。面向对象最主要的目的不是分阶段地实现每个步骤，而是以对象的方式对需要解决的问题进行分解，再通过描述对象的行为，实现问题的解决。面向对象的编程语言是科技进步的产物，它的出现顺应了社会的发展。面向对象的系统设计，可以继承和封装相关对象及其属性，提高功能代码的使用率，减轻软件开发的设计压力。因此，开发人员通常会选择使用面向对象的编程语言，来解决实际的问题。

Java语言具有跨平台性和可移植性，这就意味着，使用Java语言开发的程序软件，可以支持在不同的浏览器平台上运行，并且代码也可以被转移到其他开发环境中执行，便于在更多的其他任务中使用系统，以此可以延长软件的使用周期。Java语言具有较强的健壮性和稳定性，当系统因为输入错误或外界操作不正常而发生故障时，不会导致死机、崩溃现象的出现，而会给用户一定的错误提示信息，帮助用户找到出错的原因，然后在较短的时间内解决问题。语法简单，容易被理解和掌握[10]。除了上述特点外，Java语言还具有使用简单、容易学习、操作便捷等优点，因此许多开发人员会优先考虑使用Java语言对系统进行功能设计。

2.3 MySQL数据库

MySQL数据库是一种轻量级的关系型数据库，因为它占用的内存资源非常少，而且能够在较短的时间内，快速地响应用户需求，所以非常适应于中小型的系统的开发[11]。MySQL数据库代码具有开源性，设计人员可以在经过源代码设计人员的同意下，个性化地选择使用和修改相关代码，以适应所设计系统的开发和运行。MySQL数据库具有免费性，设计人员不需要额外支付数据库软件使用费用，就可以直接使用MySQL数据库，设计系统相关的数据表格，存储和管理一定的数据记录，由此极大地节约了系统的开发成本[12]。除此之外，MySQL数据库还具有定时刷新功能以及较强的灵活性，在一定的时间范围内，对数据进行刷新操作，便于及时更新和存储数据，并且可以将不同的信息记录存放在不同的数据表格中，较为灵活支持关联不同的数据表格。

2.4 SSM框架

SSM框架集主要是由指Spring、SpringMVC和MyBatis三大框架组成，SSM是一个比较合适的系统开发的web框架[13]。从一定程度上，使用SSM框架对系统进行实现，能够提高软件的开发速度，节省一定的开发成本开销，并且所设计出来的系统具有较高的稳定性和扩展性[14]。其中，SpringMVC框架主要的工作是响应表现层的消息请求，MyBatis框架主要的工作是对相关的数据信息进行封装，Spring框架主要的工作是整合处理SpringMVC框架和MyBatis框架所做的工作，协调分离处理各层工作，避免各层相互影响。由于SSM框架比较适合于开发高稳定性、高并发量的系统类型，并且SSM框架比较符合设计系统的实际需求，所以大多数的开发人员会优先使用SSM框架对信息管理系统进行设计和开发。

第三章系统分析

3.1系统的需求分析

需求分析是以用户的使用需求为基础，将用户的真实期望转化为实际的功能设计过程。本人主要通过问卷调查、现场调研的方式，对系统进行需求分析。本系统的使用对象主要分为管理员角色和用户角色，管理员主要的角色职能是管理文学相关的信息记录，用户主要的角色功能是查看和保存个人信息记录。需求分析主要包括功能需求、业务需求、性能需求、安全需求等内容。

其中，功能需求是指为了能够满足不同使用者的具体使用需求，调研人员据此分析系统实际的功能需求，开发人员再根据分析结果，详细的设计系统的主要功能模块，系统主要的功能需求包括用户管理、小说信息管理、阅读记录管理等模块。

业务需求是指为了更快更好地实现对文学信息的交互和管理过程，相关人员将整个文学网站的分解为多个便于实现的子功能模块，每个子功能模块的设计就能够实现相应的系统业务流程，系统主要的业务需求包括用户注册、登录、查询、更新等流程。

性能需求是指为了保证系统的实现能够满足设计期望，以及避免因为不合格的系统性能而造成的软件或网络问题，而对系统进行组件检查、网络服务、信息存储、处理器运作、响应时间等必要的性能需求分析。如果系统在运行过程中，组件检查正常、网络服务正常、信息存储安全、处理器运作正常、响应时间快，那么可以说本次所设计的系统是具备良好的使用性能的。

安全需求是指为了查验所设计的系统是否具有安全性和可靠性，而对系统进行健壮性、可用性、防病毒、数据保密等必要的安全需求分析。由系统授权的合法的用户正常的访问本系统，并且可以选择查看、修改相关信息记录，但是未经授权的非法用户是不能随意修改信息记录。

3.2系统的可行性分析

3.2.1经济可行性

对于开发者来说，研发一款系统最主要的目的是能够获取一定的利润。对于使用者来说，设计一款系统最关键的作用是能够满足一定的使用需求。本系统使用Java语言设计主要的功能模块，Java语言具有跨平台性、可移植性等特点，因此程序可以支持在多种浏览器上运行，并且相关的Java代码可以被重复使用。本系统使用了开源的、免费的MySQL数据库，存储和管理与系统相关的数据记录。MySQL数据库占用内存少，语法简单，操作简便，所以在保证运行速度和响应速率的同时，也大大降低了系统开发的成本。本人尽最大可能地降低开发成本，设计出一款能够满足用户实际使用需求的系统，便于提高相关人员的管理质量和工作效率。根据上述分析可知，基于WEB的文学网的开发是具备经济可行性的。

3.2.2技术可行性

本系统主要通过使用Java语言编码实现相关功能，JSP技术设计系统显示页面，MySQL数据库管控相关数据信息。因为系统是通过使用Java语言编写实现主要的功能模块，所以本系统能够在各种浏览器上被访问和运行，并且代码具有较高的可移植性，便于技术人员将代码运用到更高级别的任务中，增加代码的可重复使用率。JSP技术以Java语言为基础，编写自己的脚本语言，因此其具有可扩充性、跨平台性的特点，可以支持多种网页格式，并且相关代码也有着较强的稳定性和健壮性。MySQL数据库是开源的小型关系型数据库，其具有响应速度快，占用内存少，操作简单等特点，非常适用于中小型应用系统的开发。根据上述分析可知，开发一款基于WEB的文学网站是具备技术可行性的。

3.2.3操作可行性

用户在使用本系统时，不需要通过下载、安装客户端程序等复杂的步骤，也不需要掌握一定的计算机专业知识和技能，直接通过在浏览器上访问系统网址，即可根据相关的提示信息，运行和使用本系统，进而满足自己的使用需求。本系统的实现以人性化设计为主要目的，界面设计具有较高的友好性，数据库连接也具有较强的交互性。对于用户来说，只需要懂得Windows应用程序最基本的操作流程步骤，比如当用户双击选择某个功能时，就可以成功地使用该功能模块了，由此实现对本系统所进行地具体功能操作。综合上述分析可知，基于WEB的文学网具备操作可行性的。

第四章系统设计

4.1系统的总体设计

本系统的整体开发过程是采用B/S结构模式而开展的，通过使用Java语言、MySQL数据库等技术设计系统相关的功能，功能设计完成后，可以通过使用浏览器，运行和使用系统。通过需求分析的相关内容，可以基本上确定系统的主要功能设计。基于WEB的文学网的使用对象主要分为管理员角色和用户角色，主要的功能需求包括用户管理、小说信息管理、阅读记录管理等。系统总体功能设计图如图4-1所示。

文学网站的设计与实现

用户信息管理

留言信息管理

小说信息管理

阅读记录管理

作者信息管理

用户信息修改

用户信息新增

作者信息添加

作者信息删除

作者信息修改

阅读记录添加

阅读记录修改

阅读记录删除

留言信息添加

留言信息删改

留言信息删除

小说信息添加

小说信息修改

小说信息删除

购买信息管理

购买信息修改

购买信息删除

购买信息添加

图4-1系统总体功能设计图

4.2数据库设计

4.2.1概念设计

MySQL数据库是免费的面向使用对象，其源代码对外也是公开发布的，也就是说设计人员在经过源代码设计人员的同意之后，就可以根据自身的一定需求，对相关代码进行使用和修改，由此极大的节约了软件开发成本[15]。而且，MySQL数据库占用极少的内存资源，系统与用户之间的交互性强，响应速度和运行速度也比较快，非常适用于中小型系统的开发和设计。从一定意义上说，MySQL数据库的使用价值是非常高的，其相关的语法语义也比较容易理解和掌握，因此本人使用MySQL数据库完成对相关的系统数据的存储和管控。数据库设计过程主要有两个阶段，分为概念设计和逻辑设计。概念设计是逻辑设计的基础依据，逻辑设计又是概念设计的具体实现。

概念设计阶段主要目的是将真实世界的工作任务转化为抽象世界的概念模型，通过设计实体-联系图（E-R图）的方式，来表示实际生活中的工作功能中的实体和属性[16]。这样一来，在文学网站中，就可以对每一个工作流程进行设计，进而实现对相关的用户信息传递和共享，并由此构建出与系统有关的实体及其属性。本阶段的设计内容是将现实世界中用户对系统的相关功能需求，描述成为便于数据库设计人员理解的概念模型。系统的各实体E-R图设计如图4-2、图4-3、图4-4、图4-5、图4-6、图4-7、图4-8、图4-9、图4-10、图4-11所示，总体E-R图设计如图4-12所示。

图4-2管理员信息E-R图

图4-3用户信息E-R图

图4-4字典信息E-R图

图4-5小说信息E-R图

图4-6章节信息E-R图

图4-7作者信息E-R图

图4-8阅读记录信息E-R图

图4-9书架信息E-R图

图4-10小说留言信息E-R图

图4-11小说购买信息E-R图

图4-12系统的总体E-R图

4.2.2逻辑设计

逻辑设计阶段主要的目的是将概念设计中已经构建好的概念数据模型，转变成数据库能够识别和存储的二维数据表格的形式[17]。本阶段的设计内容是数据库设计人员将理解好的概念模型，描述成为MySQL数据库能够识别的数据表格。本阶段具体的实现方式是将上一阶段设计的E-R图转变成方便数据库进行存储和管理的数据表格，具体的数据表格设计如表4-1、表4-2、表4-3、表4-4、表4-5、4-6所示。

表4-1管理员信息表

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

表4-2用户信息表

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

表4-3字典信息表

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

表4-4小说信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	zuozhe_id	Integer	作者	是
3	xiaoshuo_name	String	小说名称	是
4	xiaoshuo_photo	String	小说照片	是
5	xiaoshuo_types	Integer	小说类型	是
6	xiaoshuo_old_money	BigDecimal	小说原价	是
7	xiaoshuo_new_ money	BigDecimal	现价/积分	是
8	xiaoshuo_clicknum	Integer	点击次数	是
9	zan_number	Integer	赞数量	是
10	cai_number	Integer	踩数量	是
11	xiaoshuo_content	String	小说介绍	是
12	shangxia_types	Integer	是否上架	是
13	xiaoshuo_delete	Integer	逻辑删除	是
14	create_time	Date	创建时间	是

表4-5章节信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	xiaoshuo_id	Integer	小说	是
3	zhangjie_name	String	章节名称	是
4	zhangjie_content	String	章节内容	是
5	zhangjie_delete	Integer	逻辑删除	是
6	create_time	Date	创建时间	是

表4-6作者信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	username	String	账户	是
3	password	String	密码	是
4	zuozhe_name	String	作者姓名	是
5	zuozhe_phone	String	作者手机号	是
6	zuozhe_photo	String	作者头像	是
7	sex_types	Integer	性别	是
8	zuozhe_email	String	电子邮箱	是
9	new_money	BigDecimal	余额	是
10	create_time	Date	创建时间	是

表4-7阅读记录信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	xiaoshuo_id	Integer	小说	是
3	yonghu_id	Integer	用户	是
4	yuedujilu_content	String	详情	是
5	insert_time	Date	阅读时间	是
6	create_time	Date	创建时间	是

表4-8书架信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	xiaoshuo_id	Integer	小说	是
3	yonghu_id	Integer	用户	是
4	xiaoshuo_collection_types	Integer	类型	是
5	insert_time	Date	加入时间	是
6	create_time	Date	创建时间	是

表4-9小说留言信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	xiaoshuo_id	Integer	小说	是
3	yonghu_id	Integer	用户	是
4	xiaoshuo_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4-10小说购买信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	xiaoshuo_order_uuid_number	String	流水号	是
3	xiaoshuo_id	Integer	小说	是
4	yonghu_id	Integer	用户	是
5	insert_time	Date	购买时间	是
6	create_time	Date	创建时间	是

第五章系统实现

5.1个人中心

个人中心模块设计的主要目的是方便用户对密码等个人信息进行管理，用户可以根据自己的实际需求，选择每隔一段时间，更新个人账户的用户名和密码，修改密码界面设计如图5-1所示，个人信息界面如图5-2所示。

图5-1修改密码界面

图5-2个人信息界面

5.2用户管理

用户管理模块设计的主要目的是方便管理用户对相关的用户信息进行管理，管理用户可以选择查看用户的联系电话，修改用户的真实姓名，用户管理界面设计如图5-3所示。

图5-3用户管理界面

5.3作者管理

作者管理模块设计的主要目的是方便管理用户对相关的作者信息进行管理，管理用户可以选择查看作者的详细内容，修改作者信息记录，删除失效的作者信息记录，作者管理界面设计如图5-4所示。

图5-4作者管理界面

5.4小说管理

小说管理模块设计的主要目的是方便管理用户对相关的小说、小说留言、书架、小说购买信息进行管理，管理用户可以选择查看小说、小说留言、书架、小说购买信息的详细内容，修改小说、小说留言、书架、小说购买信息记录，删除失效的小说、小说留言、书架、小说购买信息记录，小说管理界面设计如图5-5所示，小说留言管理界面设计如图5-6所示，书架管理界面设计如图5-7所示，小说购买管理界面设计如图5-8所示。

图5-5小说管理界面

图5-6小说留言管理界面

图5-7书架管理界面

图5-8小说购买管理界面

5.5章节管理

章节管理模块设计的主要目的是方便管理用户对相关的章节信息进行管理，管理用户可以选择查看章节的详细内容，修改章节信息记录，删除失效的章节信息记录，章节管理界面设计如图5-9所示。

图5-9章节管理界面

5.6阅读记录管理

阅读记录管理模块设计的主要目的是方便管理用户对相关的阅读记录信息进行管理，管理用户可以选择查看阅读记录的详细内容，修改阅读记录信息，删除失效的阅读记录信息，阅读记录管理界面设计如图5-10所示。

图5-10阅读记录管理界面

5.7基础数据管理

基础数据管理模块设计的主要目的是方便管理用户对相关的小说类型信息进行管理，管理用户可以选择查看小说类型的详细内容，修改小说类型信息记录，删除失效的小说类型信息记录，小说类型管理界面设计如图5-11所示。

图5-11小说类型管理界面

5.8轮播图管理

轮播图管理模块设计的主要目的是方便管理用户对相关轮播图信息进行管理，管理用户可以选择查看轮播图的详细内容，修改轮播图值，删除失效的轮播图信息记录，轮播图管理界面设计如图5-12所示。

图5-12轮播图管理界面

XiaoshuoLiuyanController.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("/xiaoshuoLiuyan")
public class XiaoshuoLiuyanController {
    private static final Logger logger = LoggerFactory.getLogger(XiaoshuoLiuyanController.class);

    @Autowired
    private XiaoshuoLiuyanService xiaoshuoLiuyanService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service
    @Autowired
    private XiaoshuoService xiaoshuoService;
    @Autowired
    private YonghuService yonghuService;

    @Autowired
    private ZuozheService zuozheService;


    /**
    * 后端列表
    */
    @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("zuozheId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = xiaoshuoLiuyanService.queryPage(params);

        //字典表数据转换
        List<XiaoshuoLiuyanView> list =(List<XiaoshuoLiuyanView>)page.getList();
        for(XiaoshuoLiuyanView 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);
        XiaoshuoLiuyanEntity xiaoshuoLiuyan = xiaoshuoLiuyanService.selectById(id);
        if(xiaoshuoLiuyan !=null){
            //entity转view
            XiaoshuoLiuyanView view = new XiaoshuoLiuyanView();
            BeanUtils.copyProperties( xiaoshuoLiuyan , view );//把实体数据重构到view中

                //级联表
                XiaoshuoEntity xiaoshuo = xiaoshuoService.selectById(xiaoshuoLiuyan.getXiaoshuoId());
                if(xiaoshuo != null){
                    BeanUtils.copyProperties( xiaoshuo , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setXiaoshuoId(xiaoshuo.getId());
                }
                //级联表
                YonghuEntity yonghu = yonghuService.selectById(xiaoshuoLiuyan.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到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 XiaoshuoLiuyanEntity xiaoshuoLiuyan, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,xiaoshuoLiuyan:{}",this.getClass().getName(),xiaoshuoLiuyan.toString());

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

        xiaoshuoLiuyan.setInsertTime(new Date());
        xiaoshuoLiuyan.setCreateTime(new Date());
        xiaoshuoLiuyanService.insert(xiaoshuoLiuyan);
        return R.ok();
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody XiaoshuoLiuyanEntity xiaoshuoLiuyan, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,xiaoshuoLiuyan:{}",this.getClass().getName(),xiaoshuoLiuyan.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("用户".equals(role))
//            xiaoshuoLiuyan.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<XiaoshuoLiuyanEntity> queryWrapper = new EntityWrapper<XiaoshuoLiuyanEntity>()
            .eq("id",0)
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        XiaoshuoLiuyanEntity xiaoshuoLiuyanEntity = xiaoshuoLiuyanService.selectOne(queryWrapper);
        xiaoshuoLiuyan.setUpdateTime(new Date());
        if(xiaoshuoLiuyanEntity==null){
            xiaoshuoLiuyanService.updateById(xiaoshuoLiuyan);//根据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());
        xiaoshuoLiuyanService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<XiaoshuoLiuyanEntity> xiaoshuoLiuyanList = 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){
                            //循环
                            XiaoshuoLiuyanEntity xiaoshuoLiuyanEntity = new XiaoshuoLiuyanEntity();
//                            xiaoshuoLiuyanEntity.setXiaoshuoId(Integer.valueOf(data.get(0)));   //小说 要改的
//                            xiaoshuoLiuyanEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            xiaoshuoLiuyanEntity.setXiaoshuoLiuyanText(data.get(0));                    //留言内容 要改的
//                            xiaoshuoLiuyanEntity.setInsertTime(date);//时间
//                            xiaoshuoLiuyanEntity.setReplyText(data.get(0));                    //回复内容 要改的
//                            xiaoshuoLiuyanEntity.setUpdateTime(new Date(data.get(0)));          //回复时间 要改的
//                            xiaoshuoLiuyanEntity.setCreateTime(date);//时间
                            xiaoshuoLiuyanList.add(xiaoshuoLiuyanEntity);


                            //把要查询是否重复的字段放入map中
                        }

                        //查询是否重复
                        xiaoshuoLiuyanService.insertBatch(xiaoshuoLiuyanList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            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));

        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = xiaoshuoLiuyanService.queryPage(params);

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

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


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

                //级联表
                    XiaoshuoEntity xiaoshuo = xiaoshuoService.selectById(xiaoshuoLiuyan.getXiaoshuoId());
                if(xiaoshuo != null){
                    BeanUtils.copyProperties( xiaoshuo , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setXiaoshuoId(xiaoshuo.getId());
                }
                //级联表
                    YonghuEntity yonghu = yonghuService.selectById(xiaoshuoLiuyan.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 XiaoshuoLiuyanEntity xiaoshuoLiuyan, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,xiaoshuoLiuyan:{}",this.getClass().getName(),xiaoshuoLiuyan.toString());
        xiaoshuoLiuyan.setInsertTime(new Date());
        xiaoshuoLiuyan.setCreateTime(new Date());
        xiaoshuoLiuyanService.insert(xiaoshuoLiuyan);
        return R.ok();
        }


}

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();
	}
}

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 {

    @Override
    public 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);
    }


}

add-or-update.vue

<template>
    <div class="addEdit-block">
        <el-form
                class="detail-form-content"
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="80px"
                :style="{backgroundColor:addEditForm.addEditBoxColor}"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="上下架编码" prop="codeIndex">
                        <el-input v-model="ruleForm.codeIndex"
                                  placeholder="上下架编码" clearable  :readonly="ro.codeIndex"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="上下架编码" prop="codeIndex">
                            <el-input v-model="ruleForm.codeIndex"
                                      placeholder="上下架编码" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="上下架" prop="indexName">
                        <el-input v-model="ruleForm.indexName"
                                  placeholder="上下架" clearable  :readonly="ro.indexName"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="上下架" prop="indexName">
                            <el-input v-model="ruleForm.indexName"
                                      placeholder="上下架" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <!--<el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="备注" prop="beizhu">
                        <el-input v-model="ruleForm.beizhu"
                                  placeholder="备注" clearable  :readonly="ro.beizhu"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="备注" prop="beizhu">
                            <el-input v-model="ruleForm.beizhu"
                                      placeholder="备注" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>-->
            </el-row>
            <el-form-item class="btn">
                <el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
                <el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
                <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
    import styleJs from "../../../utils/style.js";
    // 数字，邮件，手机，url，身份证校验
    import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
    export default {
        data() {
            let self = this
            return {
                addEditForm:null,
                id: '',
                type: '',
                ro:{
                    codeIndex : true,
                    indexName : false,
                    superId : false,
                    beizhu : false,
                },
                ruleForm: {
                    codeIndex: '',
                    indexName: '',
                    superId : '',
                    beizhu : '',
                },
                rules: {
                    /*beizhu: [
                        { required: true, message: '备注不能为空', trigger: 'blur' },
                        {  pattern: /^[1-9]\d*$/,
                            message: '备注只能为正整数',
                            trigger: 'blur'
                        }
                    ],*/
                }
            };
        },
        props: ["parent"],
        computed: {
        },
        created() {
            this.addEditForm = styleJs.addStyle();
            this.addEditStyleChange()
            this.addEditUploadStyleChange()
        },
        methods: {
            // 初始化
            init(id,type) {
                if (id) {
                    this.id = id;
                    this.type = type;
                }
                if(this.type=='info'||this.type=='else'){
                    this.info(id);
                }else{
                    //查询最大值 start
                    this.$http({
                        url: `dictionary/maxCodeIndex`,
                        method: "post",
                        data: {"dicCode":"shangxia_types"}
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.ruleForm.codeIndex = data.maxCodeIndex;
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                    //查询最大值 end
                }
            },
            // 多级联动参数
            info(id) {
                this.$http({
                    url: `dictionary/info/${id}`,
                    method: "get"
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                    this.ruleForm = data.data;
                    //解决前台上传图片后台不显示的问题
                    let reg=new RegExp('../../../upload','g')//g代表全部
                } else {
                    this.$message.error(data.msg);
                }
            });
            },
            // 提交
            onSubmit() {
                if((!this.ruleForm.indexName)){
                    this.$message.error('上下架不能为空');
                    return
                }
                this.$refs["ruleForm"].validate(valid => {
                    if (valid) {
                        let ruleForm = this.ruleForm;
                        ruleForm["dicCode"]="shangxia_types";
                        ruleForm["dicName"]="上下架";
                        this.$http({
                            url: `dictionary/${!this.ruleForm.id ? "save" : "update"}`,
                            method: "post",
                            data: ruleForm
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "操作成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.parent.showFlag = true;
                                        this.parent.addOrUpdateFlag = false;
                                        this.parent.dictionaryCrossAddOrUpdateFlag = false;
                                        this.parent.search();
                                        this.parent.contentStyleChange();

                                    }
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                });
            },
            // 返回
            back() {
                this.parent.showFlag = true;
                this.parent.addOrUpdateFlag = false;
                this.parent.dictionaryCrossAddOrUpdateFlag = false;
                this.parent.contentStyleChange();
            },
            addEditStyleChange() {
                this.$nextTick(()=>{
                    // input
                    document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputFontColor
                el.style.fontSize = this.addEditForm.inputFontSize
                el.style.borderWidth = this.addEditForm.inputBorderWidth
                el.style.borderStyle = this.addEditForm.inputBorderStyle
                el.style.borderColor = this.addEditForm.inputBorderColor
                el.style.borderRadius = this.addEditForm.inputBorderRadius
                el.style.backgroundColor = this.addEditForm.inputBgColor
            })
                document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputLableColor
                el.style.fontSize = this.addEditForm.inputLableFontSize
            })
                // select
                document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectFontColor
                el.style.fontSize = this.addEditForm.selectFontSize
                el.style.borderWidth = this.addEditForm.selectBorderWidth
                el.style.borderStyle = this.addEditForm.selectBorderStyle
                el.style.borderColor = this.addEditForm.selectBorderColor
                el.style.borderRadius = this.addEditForm.selectBorderRadius
                el.style.backgroundColor = this.addEditForm.selectBgColor
            })
                document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectLableColor
                el.style.fontSize = this.addEditForm.selectLableFontSize
            })
                document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
                    el.style.color = this.addEditForm.selectIconFontColor
                el.style.fontSize = this.addEditForm.selectIconFontSize
            })
                // date
                document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateFontColor
                el.style.fontSize = this.addEditForm.dateFontSize
                el.style.borderWidth = this.addEditForm.dateBorderWidth
                el.style.borderStyle = this.addEditForm.dateBorderStyle
                el.style.borderColor = this.addEditForm.dateBorderColor
                el.style.borderRadius = this.addEditForm.dateBorderRadius
                el.style.backgroundColor = this.addEditForm.dateBgColor
            })
                document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateLableColor
                el.style.fontSize = this.addEditForm.dateLableFontSize
            })
                document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
                    el.style.color = this.addEditForm.dateIconFontColor
                el.style.fontSize = this.addEditForm.dateIconFontSize
                el.style.lineHeight = this.addEditForm.dateHeight
            })
                // upload
                let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
                document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
                document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.uploadHeight
                el.style.color = this.addEditForm.uploadLableColor
                el.style.fontSize = this.addEditForm.uploadLableFontSize
            })
                document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
                    el.style.color = this.addEditForm.uploadIconFontColor
                el.style.fontSize = this.addEditForm.uploadIconFontSize
                el.style.lineHeight = iconLineHeight
                el.style.display = 'block'
            })
                // 多文本输入框
                document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
                    el.style.height = this.addEditForm.textareaHeight
                el.style.color = this.addEditForm.textareaFontColor
                el.style.fontSize = this.addEditForm.textareaFontSize
                el.style.borderWidth = this.addEditForm.textareaBorderWidth
                el.style.borderStyle = this.addEditForm.textareaBorderStyle
                el.style.borderColor = this.addEditForm.textareaBorderColor
                el.style.borderRadius = this.addEditForm.textareaBorderRadius
                el.style.backgroundColor = this.addEditForm.textareaBgColor
            })
                document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
                    // el.style.lineHeight = this.addEditForm.textareaHeight
                    el.style.color = this.addEditForm.textareaLableColor
                el.style.fontSize = this.addEditForm.textareaLableFontSize
            })
                // 保存
                document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
                    el.style.width = this.addEditForm.btnSaveWidth
                el.style.height = this.addEditForm.btnSaveHeight
                el.style.color = this.addEditForm.btnSaveFontColor
                el.style.fontSize = this.addEditForm.btnSaveFontSize
                el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
                el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
                el.style.borderColor = this.addEditForm.btnSaveBorderColor
                el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
                el.style.backgroundColor = this.addEditForm.btnSaveBgColor
            })
                // 返回
                document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
                    el.style.width = this.addEditForm.btnCancelWidth
                el.style.height = this.addEditForm.btnCancelHeight
                el.style.color = this.addEditForm.btnCancelFontColor
                el.style.fontSize = this.addEditForm.btnCancelFontSize
                el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
                el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
                el.style.borderColor = this.addEditForm.btnCancelBorderColor
                el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
                el.style.backgroundColor = this.addEditForm.btnCancelBgColor
            })
            })
            },
            addEditUploadStyleChange() {
                this.$nextTick(()=>{
                    document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
            })
            },
        }
    };
</script>
<style lang="scss">
.editor{
        height: 500px;

    & /deep/ .ql-container {
          height: 310px;
      }
    }
    .amap-wrapper {
        width: 100%;
        height: 500px;
    }
    .search-box {
        position: absolute;
    }
    .addEdit-block {
        margin: -10px;
    }
    .detail-form-content {
        padding: 12px;
    }
    .btn .el-button {
        padding: 0;
    }</style>