基于JAVA语言的在线考试与学习交流网页平台

@TOC

springboot155基于JAVA语言的在线考试与学习交流网页平台

第1章 绪论**

1.1 课题背景

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

本课题研究和开发在线考试与学习交流网页平台,让安装在计算机上的该系统变成管理人员的小帮手,提高考试信息与学习交流信息处理速度,规范考试信息与学习交流信息处理流程,让管理人员的产出效益更高。

1.2 课题意义

传统处理数据,必须是一张张纸,然后处理完毕又是统计在一张张纸上面,不断的重复处理,最终有个结果给最高层作为参考,这个模式在互联网没有出现之前,是一种常见的事情,信息管理的效率提不上去,那就用人才,人多力量大,是一个以前人们的常识。计算机的诞生就是发现了人多力量大的不足,比如高端计算人才的培养已经跟不上使用了,所以人们研究出专门帮助人们计算的机器,就是计算机的前身,到了互联网时代,人们发现完全可以让程序供应商提供解决方案,自己挑选自己合适的方案来提高自己的产出比。于是市面上就出现了各种各样的依靠程序处理信息的解决方案。

本课题研发的在线考试与学习交流网页平台,就是提供考试信息与学习交流信息处理的解决方案,它可以短时间处理完信息,并且只需要使用者动动鼠标和键盘就能获取自己需要的信息,并且这些信息都有专门的存储设备,而且数据的备份和迁移都可以设定为无人值守,从人力角度和信息处理角度以及信息安全角度,在线考试与学习交流网页平台是完胜传统纸质操作的,所以在线考试与学习交流网页平台就是如此的值得信赖。

1.3 研究内容

本文对在线考试与学习交流网页平台的设计与实现分成六个章节进行描述。

第1章:研究在线考试与学习交流网页平台的背景,以及开发在线考试与学习交流网页平台的意义。

第2章:对开发在线考试与学习交流网页平台的环境还有技术进行说明。

第3章:分析在线考试与学习交流网页平台的可行性,性能,流程以及功能。

第4章:设计在线考试与学习交流网页平台的功能结构,设计数据库E-R图以及对数据表的存储结构进行设计。

第5章:实现在线考试与学习交流网页平台的功能并进行功能界面展示。

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

第2章 开发环境与技术

本章节对开发在线考试与学习交流网页平台需要搭建的开发环境,还有在线考试与学习交流网页平台开发中使用的编程技术等进行阐述。

2.1 Java语言

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

2.2 MYSQL数据库

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)时间响应要求:从用户提交操作,到页面反映,中间有个数据处理的问题,如果数据量大,那么考虑索引问题和分库问题,数据量再大就要考虑增加列式数据库的问题,这些都要根据数据量的增加以及逻辑的严密性来进行判断,才能符合用户的要求,毕竟响应时间太久操作起来也不舒服。

系统的性能需求从业务需求之初就能大致了解到性能需求相关的概念,再从系统性能需求来逐条实现,可以让设计的系统有使用价值。

3.4 功能需求

在线考试与学习交流网页平台根据使用权限的角度进行功能分析,并运用用例图来展示各个权限需要操作的功能。

图3.5即为管理员用例图,管理员权限操作的功能包括对注册用户信息的管理,对试题,试卷,考试记录,错题本以及学习视频等信息的管理。

图3.5 管理员用例图

图3.6即为用户用例图,用户权限操作的功能包括选择试卷进行在线考试,查看考试记录和错题本,查看学习视频,查看论坛帖子。

图3.6 用户用例图

第4章 系统设计

系统的设计一切都是为了用户的使用,虽然用户使用过程中可能只是面对着浏览器进行各种操作,但是不代表着系统对于用户在浏览器上的操作不进行处理,所以说,设计一个系统需要考虑到方方面面。

4.1 功能结构设计

图4.1即为设计的管理员功能结构,管理员权限操作的功能包括对注册用户信息的管理,对试题,试卷,考试记录,错题本以及学习视频等信息的管理。

图4.1 管理员功能结构

图4.2即为设计的用户功能结构,用户权限操作的功能包括选择试卷进行在线考试,查看考试记录和错题本,查看学习视频,查看论坛帖子。

图4.2 用户功能结构

4.2 数据库设计

在线考试与学习交流网页平台运行中产生的数据需要按照提前设置的存储规则进行保存,而这个存储规则则是在数据库的设计中进行设置的。通常情况下,为了更好的配合系统运行,也要给用户带来良好的使用体验,设计一个很好的数据库是必须的,因为它能减少用户的等待时间,还可以对系统的请求在最短时间内进行响应。所以,对数据库设计时,需要花费一定的时间来分析系统对于数据存储的要求以及存储的具体数据,然后设计具体的存储规则,保证数据库能够对系统的各种数据请求进行及时回应,缩短数据处理时间,并在一定程度上降低数据冗余,节省存储空间。

4.2.1 数据库概念设计

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

(1)图4.4即为学习视频这个实体所拥有的属性值。

图4.4 学习视频实体属性图

(2)图4.5即为用户这个实体所拥有的属性值。

图4.5 用户实体属性图

(3)图4.6即为试卷这个实体所拥有的属性值。

图4.6 试卷实体属性图

  1. 图4.7即为试题这个实体所拥有的属性值。

图4.7 试题实体属性图

  1. 图4.8即为上面介绍的实体中存在的联系。

图4.8 实体间关系E-R图

4.2.2 数据库物理设计

本小节主要任务即是根据上述内容进行数据存储结构的设计,也就是在数据库中设计存放本系统的数据的数据表,设计数据表时,需要对各个字段进行确定,通常来说,一个实体与一张数据表相对应,实体的属性就用来表示字段名称,不同的字段表示的数据类型以及取值都不相同,这里需要根据系统实际数据的情况进行设置,同时也需要在具体表中确定该表的主键,以及该表各个字段是否能够保持空等进行说明,设计完成一张数据表的结构之后,在保存时同样要命名,尽量选择英文名称进行命名并保存,方便今后系统对数据表进行数据存储访问时,在提高数据存储效率的同时,还不容易导致系统出错。接下来就对设计的数据表进行展示。

表4.1 试卷表

字段注释类型
id (主键)主键int(20)
exampaper_name试卷名称varchar(200)
exampaper_date考试时长(分钟)int(11)
exampaper_myscore试卷总分数int(20)
exampaper_types试卷状态int(11)
exampaper_delete逻辑删除(0代表未删除 1代表已删除)int(255)
create_time创建时间timestamp

表4.2 试题表

字段注释类型
id (主键)主键int(20)
exampaper_id所属试卷id(外键)int(20)
examquestion_name试题名称varchar(200)
examquestion_options选项,json字符串longtext
examquestion_score分值int(20)
examquestion_answer正确答案varchar(200)
examquestion_analysis答案解析longtext
examquestion_types试题类型int(20)
examquestion_sequence试题排序,值越大排越前面int(20)
create_time创建时间timestamp

表4.3 考试记录表

字段注释类型
id (主键)主键int(20)
examrecord_uuid_number考试编号varchar(200)
yonghu_id考试用户int(20)
exampaper_id所属试卷id(外键)int(20)
total_score所得总分int(200)
insert_time考试时间timestamp
create_time创建时间timestamp

表4.4 答题详情表

字段注释类型
id (主键)主键int(20)
examredetails_uuid_number试卷编号varchar(200)
yonghu_id用户idint(20)
examquestion_id试题id(外键)int(20)
examredetails_myanswer考生答案varchar(200)
examredetails_myscore试题得分int(20)
create_time创建时间timestamp

表4.5 错题表

字段注释类型
id (主键)主键int(20)
yonghu_id用户idint(20)
exampaper_id试卷(外键)int(20)
examquestion_id试题id(外键)int(20)
examredetails_myanswer考生作答varchar(200)
insert_time记录时间timestamp
create_time创建时间timestamp

表4.6 论坛表

字段注释类型
id (主键)主键int(11)
forum_name帖子标题varchar(200)
yonghu_id用户int(11)
jiaoshi_id教师int(11)
users_id管理员int(11)
forum_content发布内容text
super_ids父idint(11)
forum_types帖子类型int(11)
forum_state_types帖子状态int(11)
insert_time发帖时间timestamp
update_time修改时间timestamp
create_time创建时间timestamp

表4.7 公告信息表

字段注释类型
id (主键)主键int(11)
news_name公告信息标题varchar(200)
news_types公告信息类型int(11)
news_photo公告信息图片varchar(200)
insert_time公告信息时间timestamp
news_content公告信息详情text
news_delete假删int(11)
create_time创建时间timestamp

表4.8 管理员表

字段注释类型
id (主键)主键bigint(20)
username用户名varchar(100)
password密码varchar(100)
role角色varchar(100)
addtime新增时间timestamp

表4.9 学习视频表

字段注释类型
id (主键)主键int(11)
xuexishipin_name课程标题varchar(200)
xuexishipin_photo封面varchar(200)
xuexishipin_video视频varchar(200)
xuexishipin_jiangshi讲师varchar(200)
xuexishipin_types学习类型int(11)
xuexishipin_content详情text
create_time创建时间timestamp

表4.10 学习视频留言表

字段注释类型
id (主键)主键int(11)
xuexishipin_id学习视频int(11)
yonghu_id用户int(11)
xuexishipin_liuyan_text留言内容text
reply_text回复内容text
insert_time留言时间timestamp
update_time回复时间timestamp
create_time创建时间timestamp

表4.11 用户表

字段注释类型
id (主键)主键int(11)
username账户varchar(200)
password密码varchar(200)
yonghu_name用户姓名varchar(200)
yonghu_photo头像varchar(255)
yonghu_phone用户手机号varchar(200)
yonghu_id_number用户身份证号varchar(200)
yonghu_email邮箱varchar(200)
sex_types性别int(11)
yonghu_delete假删int(11)
create_time创建时间timestamp

打开新的 phpMyAdmin 窗口

第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 考试记录界面

5.1.5 用户管理

图5.5 即为编码实现的用户管理界面,管理员在该界面中负责为用户重置密码,更改用户的基础信息,查询用户,删除用户等。

图5.5 用户管理界面

5.2 用户功能实现

5.2.1 试卷表

图5.6 即为编码实现的试卷表界面,用户在该界面中选择试卷并参与在线考试。

图5.6 试卷表界面

5.2.2 学习视频

图5.7 即为编码实现的学习视频界面,用户在该界面中播放学习视频进行知识的学习,用户在视频下方可以查看留言,发布留言,查看留言回复信息等。

图5.7 学习视频界面

5.2.3 错题表

图5.8 即为编码实现的错题表界面,用户在该界面中查看错题信息,包括试卷名称,考生作答,试题类型,分值等信息。

图5.8 错题表界面

5.2.4 论坛信息

图5.9 即为编码实现的论坛信息界面,用户在该界面中可以查看论坛区域的所有帖子,用户在该区域也能发布帖子,每个帖子查看之后,用户可以发布帖子评论等。

图5.9 论坛信息界面

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

    @Autowired
    private ExampaperService exampaperService;


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

    //级联表service

    @Autowired
    private YonghuService yonghuService;


    /**
    * 后端列表
    */
    @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"));
        params.put("exampaperDeleteStart",1);params.put("exampaperDeleteEnd",1);
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = exampaperService.queryPage(params);

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

            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");

        Wrapper<ExampaperEntity> queryWrapper = new EntityWrapper<ExampaperEntity>()
            .eq("exampaper_name", exampaper.getExampaperName())
            .eq("exampaper_date", exampaper.getExampaperDate())
            .eq("exampaper_myscore", exampaper.getExampaperMyscore())
            .eq("exampaper_types", exampaper.getExampaperTypes())
            .eq("exampaper_delete", exampaper.getExampaperDelete())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        ExampaperEntity exampaperEntity = exampaperService.selectOne(queryWrapper);
        if(exampaperEntity==null){
            exampaper.setExampaperDelete(1);
            exampaper.setCreateTime(new Date());
            exampaperService.insert(exampaper);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<ExampaperEntity> queryWrapper = new EntityWrapper<ExampaperEntity>()
            .notIn("id",exampaper.getId())
            .andNew()
            .eq("exampaper_name", exampaper.getExampaperName())
            .eq("exampaper_date", exampaper.getExampaperDate())
            .eq("exampaper_myscore", exampaper.getExampaperMyscore())
            .eq("exampaper_types", exampaper.getExampaperTypes())
            .eq("exampaper_delete", exampaper.getExampaperDelete())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        ExampaperEntity exampaperEntity = exampaperService.selectOne(queryWrapper);
        if(exampaperEntity==null){
            exampaperService.updateById(exampaper);//根据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());
        ArrayList<ExampaperEntity> list = new ArrayList<>();
        for(Integer id:ids){
            ExampaperEntity exampaperEntity = new ExampaperEntity();
            exampaperEntity.setId(id);
            exampaperEntity.setExampaperDelete(2);
            list.add(exampaperEntity);
        }
        if(list != null && list.size() >0){
            exampaperService.updateBatchById(list);
        }
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<ExampaperEntity> exampaperList = 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){
                            //循环
                            ExampaperEntity exampaperEntity = new ExampaperEntity();
//                            exampaperEntity.setExampaperName(data.get(0));                    //试卷名称 要改的
//                            exampaperEntity.setExampaperDate(Integer.valueOf(data.get(0)));   //考试时长(分钟) 要改的
//                            exampaperEntity.setExampaperMyscore(Integer.valueOf(data.get(0)));   //试卷总分数 要改的
//                            exampaperEntity.setExampaperTypes(Integer.valueOf(data.get(0)));   //试卷状态 要改的
//                            exampaperEntity.setExampaperDelete(1);//逻辑删除字段
//                            exampaperEntity.setCreateTime(date);//时间
                            exampaperList.add(exampaperEntity);


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

                        //查询是否重复
                        exampaperService.insertBatch(exampaperList);
                        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 = exampaperService.queryPage(params);

        //字典表数据转换
        List<ExampaperView> list =(List<ExampaperView>)page.getList();
        for(ExampaperView 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);
        ExampaperEntity exampaper = exampaperService.selectById(id);
            if(exampaper !=null){


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

                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody ExampaperEntity exampaper, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,exampaper:{}",this.getClass().getName(),exampaper.toString());
        Wrapper<ExampaperEntity> queryWrapper = new EntityWrapper<ExampaperEntity>()
            .eq("exampaper_name", exampaper.getExampaperName())
            .eq("exampaper_date", exampaper.getExampaperDate())
            .eq("exampaper_myscore", exampaper.getExampaperMyscore())
            .eq("exampaper_types", exampaper.getExampaperTypes())
            .eq("exampaper_delete", exampaper.getExampaperDelete())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        ExampaperEntity exampaperEntity = exampaperService.selectOne(queryWrapper);
        if(exampaperEntity==null){
            exampaper.setExampaperDelete(1);
            exampaper.setCreateTime(new Date());
        exampaperService.insert(exampaper);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }


}

UsersController.java

package com.controller;


import java.util.Arrays;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import com.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.UsersEntity;
import com.service.TokenService;
import com.utils.MPUtil;
import com.utils.PageUtils;
import com.utils.R;

/**
 * 登录相关
 */
@RequestMapping("users")
@RestController
public class UsersController {
	
	@Autowired
	private UsersService usersService;
	
	@Autowired
	private TokenService tokenService;

	/**
	 * 登录
	 */
	@IgnoreAuth
	@PostMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
		if(user==null || !user.getPassword().equals(password)) {
			return R.error("账号或密码不正确");
		}
		String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
		R r = R.ok();
		r.put("token", token);
		r.put("role",user.getRole());
		r.put("userId",user.getId());
		return r;
	}
	
	/**
	 * 注册
	 */
	@IgnoreAuth
	@PostMapping(value = "/register")
	public R register(@RequestBody UsersEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        usersService.insert(user);
        return R.ok();
    }

	/**
	 * 退出
	 */
	@GetMapping(value = "logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}
	
	/**
     * 密码重置
     */
    @IgnoreAuth
	@RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
    	UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
    	if(user==null) {
    		return R.error("账号不存在");
    	}
    	user.setPassword("123456");
        usersService.update(user,null);
        return R.ok("密码已重置为:123456");
    }
	
	/**
     * 列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,UsersEntity user){
        EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
    	PageUtils page = usersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/list")
    public R list( UsersEntity user){
       	EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
      	ew.allEq(MPUtil.allEQMapPre( user, "user")); 
        return R.ok().put("data", usersService.selectListView(ew));
    }

    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        UsersEntity user = usersService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /**
     * 获取用户的session用户信息
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
    	Integer id = (Integer)request.getSession().getAttribute("userId");
        UsersEntity user = usersService.selectById(id);
        return R.ok().put("data", user);
    }

    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody UsersEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
    	user.setPassword("123456");
        usersService.insert(user);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody UsersEntity user){
//        ValidatorUtils.validateEntity(user);
        usersService.updateById(user);//全部更新
        return R.ok();
    }

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        usersService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
}

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-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: {
                }
            };
        },
        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":"sex_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"]="sex_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>

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值