@TOC
springboot492基于java线上历史馆藏系统pf
绪论
1.1 选题背景
当人们发现随着生产规模的不断扩大,人为计算方面才是一个巨大的短板,所以发明了各种计算设备,从结绳记事,到算筹,以及算盘,到如今的计算机,都是在无法满足生产的前提下出现的。随着计算机的发展,又出现了互联网技术。到现在为止,互联网已经发展了几十年了,在几十年的时间里就已经风靡世界。各行各业都发现了计算机的好处,计算机刚开始是军用的,后来在民用行业开始使用,到互联网时代,各种行业信息如井喷一般充斥着互联网,信息产生和传播的速度不断的提高。针对互联网的优点,结合互联网,对传统行业信息处理技术进行升级是非常有必要的。本课题对于历史馆藏系统方面,开发一个历史馆藏系统,在信息管理方面不至于混乱,也能降低数据的出错率,数据安全方面也有了保证,该系统还有其他的优点,比如优化信息处理流程,降低信息泄露风险,让管理人员的工作更有效率等。所以说,历史馆藏系统是目前不可缺的,对使用者相当的重要。
1.2 选题意义
如今的年代,已经是步入信息社会了,不仅信息更新速度频繁,信息量也大,在信息时代必须有相应的处理信息的方法,如果还采用以前的结绳记事或者笔写纸记,不仅是信息录入效率上赶不上节奏,在信息检索的速度上更是让人无法承受。幸而当今社会上计算机技术发展的相当不错,可以通过计算机在信息处理上面实现自动化或者半自动化的作业,采用计算机技术,能有效的提高信息录入以及信息检索的效率,社会上相同行业之间本身就是效率高的淘汰效率低的,既然采用计算机来替代手工记录,必然是效率更高,稳定性更强,成本更低等诸多优点。针对于母婴用品销售信息管理,开发一个历史馆藏系统不仅可以实现现代化的信息管理,也更符合现代化信息管理规范。
在实际的使用效果中,历史馆藏系统的意义如下:
第一点:历史馆藏系统的出现,就是为了提高工作人员的效率,能够在规定时间完成工作任务。
第二点:操作页面符合人体工程美学,符合日常人为操作习惯,使用友好。
第三点:区别于传统用纸张记录,提高了信息化水平。
第四点:在信息处理方面,极大的降低了人工处理成本。
1.3 研究内容
本文对系统的描述过程将按照绪论,系统开发技术,分析,设计,实现,测试等环节进行展开介绍。
绪论:本节内容主要展示研究该系统的背景和意义。
系统开发技术:本节内容主要展示该系统开发中需要使用的技术和搭建的开发环境。
系统分析:本节内容主要就是分析系统,包括性能,功能上的数据分析,也包括可行性分析等内容。
系统设计:本节内容主要就是根据系统分析的结果进行设计,主要包括功能和数据库的设计。
系统实现:本节内容主要就是通过程序编码对系统的功能进行实现,同时也对需要介绍的功能进行界面运行效果的展示。
系统测试:本节内容主要就是对系统的功能实现部分进行检测,发现系统的错误并及时纠正,让系统能够保证运行无误。
2 系统开发技术
对系统的开发需要做好准备工作,其中安装开发的工具以及学习开发中需要运用的技术都是需要提前进行的,本节内容就对开发中运用的工具还有技术进行阐述。
2.1 MySQL数据库
本设计用到的数据库就是MySQL数据库,之所以用到这个数据库的原因很多。首先,从满足功能需求上面来讲,MySQL是符合的;其次,从学习程度来讲,MySQL相比其他数据库不管是从安装还是使用上面来讲,都比较简单,最重要的是学习起来相当便捷,比较容易入手;再次,MySQL数据库对电脑要求不高,不管是什么样的电脑都可以安装MySQL数据库,并且并不会对电脑性能造成过多的影响。所以,就平常普普通通的电脑就可以作为开发用的电脑,不需要进行额外的电脑升级。虽然自从MySQL数据库被Oracle数据库收购后,有了一些闭源的风险,但是使用者还是很多,MySQL数据库目前的开发人员已经超过五百人了,对数据库开发者来讲已经是一个很大的开发团队了。MySQL在使用上面来讲,普通的增删改查操作已经可以满足大部分业务需求,像一些数据导出导入,以及一些函数,都可以满足一些不同的需求,最重要的是MySQL数据库可以创建索引,可以大大的提高数据的查询效率,当然,物极必反,如果因为索引好用而滥用,索引弄得比数据库表还要多,这样会造成MySQL数据库更新表数据时候的运行效率。总而言之,MySQL数据库在本次设计的使用上,是完全符合使用要求的。
2.2 IDEA简介
IDEA的诞生在Java集成开发工具行业正所谓平地起雷,瞬间震动了整个Java开发行业。真的是每个人用过的都说好。IDEA之所以相比于其他比如MyEclipse或者Eclipse之类的Java开发工具来讲比较好,原因首先在于设计方面。IDEA采用了所谓的人体工程学设计原理,让使用IDEA的人员用了就忘记不了。软件打开首先要设置主题,可以选择常规的白色或者暗色系列,长时间的白色或者长时间的暗色会让开发人员的眼睛疲劳加重,首先从这个细节就让程序开发人员备受青睐,让程序员看着舒服;然后再对一些常用性插件进行归类,让程序的开发注重于提升生产效率,而不是一味的让开发者找各种插件,有时候插件之间的版本还会存在不兼容,IDEA就把兼容的插件双手呈现,如此贴心的IDEA怎么能让人不喜爱。所以选择IDEA用来开发本项目就理所当然的了。
2.3 Ssm框架
Spring是一个很好的框架,但是发展到现在,在使用上面已经诟病不断,需要配置的越来越多,配置大于开发,让程序员用更多的精力去配置Spring,有点本末倒置了。Ssm框架是为了解决Spring框架的缺点而生,Spring框架好用是好用,但是配置起来相当的繁琐,Ssm则让简化了很多配置过程,让开发变得更有趣也更有效率,并且学过Spring框架的开发人员很容易理解Ssm框架,没有用过框架的人员学习Ssm框架的速度也很快的,Ssm得到了Java开发者的一致好评。
2.4 Vue框架
Vue框架的开发者是一个中国人,区别于其他框架的最核心的概念就是渐进式框架,Vue的出现,让网页前端的开发变成了一种纯前端职业,不需要在考虑后台数据类型以及业务逻辑,只需要进行数据绑定即可,大大的减少了前端开发工程师的学习难度。Vue是当前世界上最火的一种前段框架,学习成本比较低,只需要熟悉最基本的网页知识就可以理解相关知识,并且有很好的免费教程进行学习,有各个国家语言的教程,尤其是因为是中国人开发的框架,让中国的高级程序开发人员做了汉语教程。Vue框架发展之初就是高于IE8版本的,所以说只要是当前的主流浏览器都支持Vue框架,如果是很旧的那种电脑是不支持的,必须安装支持HTML5的浏览器才可以访问用Vue发布的站点。
3 系统分析
对于历史馆藏系统开发设计到的流程有,分析系统的功能,设计系统的结构,设计数据库,编码以及测试,其中,在系统分析中,所做的工作包括功能的确定,性能的分析等。
3.1 可行性研究
历史馆藏系统开发实现分析需要从不同的角度来进行分析可行性,比如从时间角度,经济角度,甚至操作角度。从不同的角度分析可行性会让历史馆藏系统开发具体化,进而达到辩证开发的正确性。
3.1.1 经济可行性
从经济方面分析是第一要素,没有经济的支持,任何项目都如水中捞月,无法实现。实现历史馆藏系统,开发过程不需要额外的经济条件,用本人现有的计算机就可以实现,这方面不需要额外的支出。
3.1.2 时间可行性
历史馆藏系统设计主要作为毕业设计,在题目确定之后,答辩之前使用的项目,对不同的开发进度上面都有时间的要求,总不至于答辩完成后才能实现功能,这个肯定不行,所以从时间上来分析项目的工作量,发现是可行的,符合正常开发时间。
3.1.3 操作可行性
操作必须符合正常人的思维模式,市面上有很多符合要求的程序正在使用中,可以借鉴其他程序的操作流程,变成符合本设计的操作流程,在操作上面进行无缝衔接,让使用者操作过程中不会感到迷茫。
从上面的角度来分析,后续工作可以继续进展。
3.2 系统性能分析
性能分析是软件开发过程中必不可少的一个环节,主要是为了降低软件在使用的过程中的容错率。通常来讲,分析软件系统的性能一般从以下几个方面进行分析。
3.2.1 系统的安全性
系统开发出来就是让正常使用的,那么在如今的互联网时代,首先考虑的就是安全性的问题。如果系统的安全性不够,那么使用价值就会降低。如果出现使用过程中丢失数据,那么用户就不再信赖,所以系统的安全性是第一要位,只有安全性存在了,才能考虑使用的问题,总不至于今天用户注册,明天用户账号泄露,这些都是不友好的。所以账号一般在数据库里存储会通过MD5进行加密,这样关键数据加密可以保证系统的安全性。
3.2.2 系统的易用性
安全性分析处理完毕,才考虑易用性。一个软件设计得符合操作规范,符合正常人类的理解逻辑,那么在使用上面就会很舒服,如果违背了这条原则,安全性再高的软件也是设计失败的,毕竟软件开发出来就是让人使用的,这一点尤为重要。
3.2.3 系统的健壮性
系统设计易用不代表没有规则,那么系统设计使用方面必须健壮,必须符合软件处理逻辑。比如设计一个价格类的输入框,用户需要输入价格,那么可以设定输入框最多两位小数的纯数字输入,如果用户不小心输入了其他字符,那么就会友好的提示让用户修改正确,只有输入符合规范的数据,才能进行提交,并且存储到数据库里。系统的健壮性就是这样,越是规范,越是健壮,有助于用户理解,还有助于程序使用。
3.3 系统流程分析
系统设计不是胡乱的设计,必须符合软件设计思想,具体的流程参考下图。系统设计的前期就是做各种分析,功能的设计,数据库的设计等,等一切都设计好了,逻辑上没有问题,符合设计流程和设计规范,才可以继续编码环节,编码只是实现设计的一个环节而已。
图3.1系统开发流程图
用户是一切应用的基础,只要牵扯到用户,那么肯定需要用户进行注册,只有这样才能让注册的用户进行使用。如果用户没有注册,只能算是游客,那么只能访问一些大众用户可以浏览的信息,如果需要用户操作的部分是不允许访问的,这样能极大的保证用户的权利。用户注册流程用下面的图来表示,主要是先判断用户名,只有用户名能用了才可以进行后面的信息注册。
图3.2 注册流程图
当需要用户登录的时候,肯定是要验证的,只有验证通过的用户才可以进行下一步操作,用户登录成功代表着用户模块的功能对登录用户进行了开放。流程就是如下面的图所示。
图3.3 登录流程图
3.4 系统功能分析
在对设计的总体要求理解了之后,就要把要求给具体化,也就是功能化,要尽量的把每个功能模块和模块之前的关系理清楚,必须符合正常人的行为逻辑才可以,并且尽量研究同类型的项目,这样能避免走弯路,最终才能得到设计的具体功能。
历史馆藏系统把操作该系统的用户群分为两类,即管理员,用户。
4 系统设计
系统在设计的过程中,必然要遵循一定的原则才可以,胡乱设计是不可取的。首先用户在使用过程中,能够直观感受到功能操作的便利性,符合正常思维逻辑的操作,这才是系统好用的一个开端,给使用者第一印象就是这个系统设计的相当不错。
4.1 系统设计原则
系统遵循设计原则进行开发,会有很多可以预料到的好处,只要遵循了设计原则,那么开发出来的系统必然是有质量保证的。
首先第一条原则就是安全性原则:程序必须设定角色管理,不同的角色有不同的功能模块,不同的角色登录都需要输入相对应的账号和密码,否则不允许进行操作相对应的权限。每个用户登录只能修改自己的密码,不需要对别的账号进行密码或者其他资料的修改,否则就违背了安全性原则的设定。
其次第二条原则就是易用性原则:符合安全性只是功能的符合,不代表操作就符合,所以要设定易用性原则。易用性原则就是规定程序符合操作流程,正常人的思维定向为基础,在不违背程序运行逻辑定义的情况下,必须使用简单,操作规范,让每个用户使用起来都能看到页面,就能感知功能模块的作用,短时间的就能使用程序,达到易用效果。
再次第三条原则就是实用性原则:实用性代表着花里胡哨的功能必须抛弃,尽量符合数据处理的简洁性,不仅需要这样进行设定,还需要有预知性,系统后期可能会出现的功能模块尽量要解耦,与程序设定要模块化体现,这样才能达到扩展性。
第四条原则就是准确性原则:准确性原则的唯一定义就是准确,包含数据输入格式的准确,数据处理的准确,以及数据存储的准确。程序里面关于数据准确才有存在的意义,如果一堆不相干的数据存在是没有任何用处的,甚至会产生各种问题,所以必须要保证数据的准确性。
第五条原则是易维护原则:易维护代表着程序运行必须是可控的状态,如果不可控出现各种问题,那么所有的工作都是空谈。程序开发中对于各种程序判定异常,必须有统一的处理模式,异常是程序开发中不可避免的,但是可以对出现的异常进行抛出,有助于程序异常处理的复盘,只要每个异常都能定位准确,那么代表程序设计是趋于完美的,维护起来会更加的方便,只要有助于程序维护的都必须给予支持。
4.2 功能模块设计
对管理员具体功能的设计结果将以图4.1所示的管理员功能结构图来进行体现。管理员对于历史馆藏系统操作的功能包括审核用户评价商品的信息,查看商品评价统计报表,对商品,商品分类,订单等信息进行管理。
图4.1 管理员功能结构图
对用户具体功能的设计结果将以图4.2所示的用户功能结构图来进行体现。用户对于历史馆藏系统操作的功能包括在前台购买商品,咨询留言,对个人收货地址以及订单,留言的博物馆进行管理。
4.3 数据库设计
用户通过系统的功能操作来进行数据交互,包括数据的添加,数据的更新,数据的删除,数据的查询等基本功能操作,表面上虽然是操作系统界面提供的功能,但是实际上系统的这些数据是在数据库当中进行访问与操作的。目前市场上可供选择的存储数据的数据库有很多,除了简单版的Access之外,还有SQL Server,DB2,Informix,MySQL等关系型数据库可供选择,由于关系型数据库具有固定的表结构,以及对数据一致性要求比较强,所以相比没有固定表结构以及具有灵活的数据格式的非关系型数据库而言,在程序配套数据库的选择中,关系型数据库的使用率更高。本系统选择MySQL来存放数据,其相关理论以及技术在经过了很长时间的发展之后,变得非常成熟,各大网络平台都公开分享其开发源码,而且其对计算机的配置要求很低,不需要过多内存进行安装,很符合本系统对于数据库的选择要求。
4.3.1 数据库E-R图
本节需要对系统中存放在数据库中的数据进行充分分析,对数据的实体,实体特征,联系等进行确定,然后通过概念模型的表示方法即E-R图进行表达,在E-R图绘制工具中,选择椭圆,菱形框,矩形等形状表达实体属性,实体间联系,实体这些信息,使用实线段将这些形状进行连接即可。初步完成E-R图之后,需要进行检查,及时进行有误数据的更改,删除实体间存在的冗余联系,删除E-R图中冗余的数据,最终要展示一个内容准确的E-R图。
(1)下图是博物馆实体和其具备的属性。
博物馆实体属性图
(2)下图是博物馆预约实体和其具备的属性。
博物馆预约实体属性图
(3)下图是留言板实体和其具备的属性。
留言板实体属性图
(4)下图是用户实体和其具备的属性。
用户实体属性图
(5)下图是公告实体和其具备的属性。
公告实体属性图
(6)下图是展品实体和其具备的属性。
展品实体属性图
4.3.2 数据库表结构
在指定的数据库里面对数据表进行创建命名,然后设计各个数据表的存储结构,需要对该数据库的操作非常熟悉,并且还需要学习并掌握一定的数据表设计方面的知识,比如数据命名,作为系统的开发人员,为了避免程序运行产生乱码现象以及为了确保系统的正常运行,在对数据表进行命名时,一般都是采用英文名称,同时在对数据表的字段进行编辑时,也是采用英文的方式进行,为了方便今后对数据表的设计内容进行更改或查看,对一些比较重要的字段都会进行中文备注,或者是使用中文进行字段描述。设计期间,也需要对各个字段选择合适的数据类型以及设置匹配的取值范围,当一张数据表设计完成之后,还要对该表的主键进行标注,就是为了确保该数据表的唯一性与独立性。
表4.1博物馆表
序号 | 列名 | 数据类型 | 说明 | 允许空 |
---|---|---|---|---|
1 | Id | Int | id | 否 |
2 | bowuguan_name | String | 博物馆名称 | 是 |
3 | bowuguan_uuid_number | String | 博物馆编号 | 是 |
4 | bowuguan_photo | String | 博物馆照片 | 是 |
5 | bowuguan_address | String | 博物馆地点 | 是 |
6 | bowuguan_types | Integer | 博物馆分类 | 是 |
7 | bowuguan_content | String | 博物馆介绍 | 是 |
8 | bowuguan_kucun_number | Integer | 每天最大人数上限 | 是 |
9 | bowuguan_delete | Integer | 逻辑删除 | 是 |
10 | insert_time | Date | 录入时间 | 是 |
11 | create_time | Date | 创建时间 | 是 |
表4.2博物馆预约表
序号 | 列名 | 数据类型 | 说明 | 允许空 |
---|---|---|---|---|
1 | Id | Int | id | 否 |
2 | bowuguan_id | Integer | 博物馆 | 是 |
3 | yonghu_id | Integer | 用户 | 是 |
4 | bowuguan_order_time | Date | 预约时间 | 是 |
5 | buy_number | Integer | 预约人数 | 是 |
6 | bowuguan_order_types | Integer | 订单类型 | 是 |
7 | insert_time | Date | 订单创建时间 | 是 |
8 | create_time | Date | 创建时间 | 是 |
表4.3字典表
序号 | 列名 | 数据类型 | 说明 | 允许空 |
---|---|---|---|---|
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.4公告表
序号 | 列名 | 数据类型 | 说明 | 允许空 |
---|---|---|---|---|
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.5留言板表
序号 | 列名 | 数据类型 | 说明 | 允许空 |
---|---|---|---|---|
1 | Id | Int | id | 否 |
2 | yonghu_id | Integer | 用户 | 是 |
3 | liuyan_name | String | 留言标题 | 是 |
4 | liuyan_text | String | 留言内容 | 是 |
5 | insert_time | Date | 留言时间 | 是 |
6 | reply_text | String | 回复内容 | 是 |
7 | update_time | Date | 回复时间 | 是 |
8 | create_time | Date | 创建时间 | 是 |
表4.6用户表
序号 | 列名 | 数据类型 | 说明 | 允许空 |
---|---|---|---|---|
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.7展品表
序号 | 列名 | 数据类型 | 说明 | 允许空 |
---|---|---|---|---|
1 | Id | Int | id | 否 |
2 | bowuguan_id | Integer | 博物馆 | 是 |
3 | zhanpin_name | String | 展品名称 | 是 |
4 | zhanpin_uuid_number | String | 展品编号 | 是 |
5 | zhanpin_photo | String | 展品照片 | 是 |
6 | zhanpin_chuchu | String | 展品出处 | 是 |
7 | zhanpin_content | String | 展品介绍 | 是 |
8 | jieru_time | Date | 展品借入时间 | 是 |
9 | yanghu_time | Date | 展品养护时间 | 是 |
10 | zhanpin_delete | Integer | 逻辑删除 | 是 |
11 | insert_time | Date | 录入时间 | 是 |
12 | create_time | Date | 创建时间 | 是 |
表4.8管理员表
序号 | 列名 | 数据类型 | 说明 | 允许空 |
---|---|---|---|---|
1 | Id | Int | id | 否 |
2 | username | String | 用户名 | 是 |
3 | password | String | 密码 | 是 |
4 | role | String | 角色 | 是 |
5 | addtime | Date | 新增时间 | 是 |
5 系统实现
下面主要是通过功能实现界面截图的形式,并且运用文字来描述功能实现界面的内容。
5.1 管理员功能实现
5.1.1 博物馆管理
博物馆可以是给大家带来趣味性运行效果见图5.1。;
图5.1 博物馆界面
5.1.2 展品管理
该功能主要用于相应的介绍运行效果见图5.2。
图5.2 展品管理界面
5.1.3 博物馆预约管理
该功能主要用于实现对博物馆预约管理,博物馆预约管理界面的运行效果见图5.3。
图5.3 博物馆预约管理面
5.1.4 公告管理
该功能主要用于实现对公告管理基本信息的管理,公告管理界面的运行效果见图5.4。在此界面,管理员需要及时查看,对无效的公告管理删除。
图5.4 公告管理界面
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 公告界面
5.2.5 留言
留言界面的运行效果见图5.10。在此界面,留言功能给用户提供了信息便利,若用户觉得此资讯非常有趣,或觉得此资讯对之后的日常生活有所需要,用户登录之后就可以进行留言,留言后可在个人中心中进行查看
图5.10 留言界面
系统
BowuguanController.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("/bowuguan")
public class BowuguanController {
private static final Logger logger = LoggerFactory.getLogger(BowuguanController.class);
private static final String TABLE_NAME = "bowuguan";
@Autowired
private BowuguanService bowuguanService;
@Autowired
private TokenService tokenService;
@Autowired
private DictionaryService dictionaryService;
@Autowired
private BowuguanOrderService bowuguanOrderService;
//级联表非注册的service
//注册表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("bowuguanDeleteStart",1);params.put("bowuguanDeleteEnd",1);
CommonUtil.checkMap(params);
PageUtils page = bowuguanService.queryPage(params);
//字典表数据转换
List<BowuguanView> list =(List<BowuguanView>)page.getList();
for(BowuguanView 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);
BowuguanEntity bowuguan = bowuguanService.selectById(id);
if(bowuguan !=null){
//entity转view
BowuguanView view = new BowuguanView();
BeanUtils.copyProperties( bowuguan , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody BowuguanEntity bowuguan, HttpServletRequest request){
logger.debug("save方法:,,Controller:{},,bowuguan:{}",this.getClass().getName(),bowuguan.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永远不会进入");
Wrapper<BowuguanEntity> queryWrapper = new EntityWrapper<BowuguanEntity>()
.eq("bowuguan_name", bowuguan.getBowuguanName())
.eq("bowuguan_address", bowuguan.getBowuguanAddress())
.eq("bowuguan_types", bowuguan.getBowuguanTypes())
.eq("bowuguan_kucun_number", bowuguan.getBowuguanKucunNumber())
.eq("bowuguan_delete", bowuguan.getBowuguanDelete())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
BowuguanEntity bowuguanEntity = bowuguanService.selectOne(queryWrapper);
if(bowuguanEntity==null){
bowuguan.setBowuguanDelete(1);
bowuguan.setInsertTime(new Date());
bowuguan.setCreateTime(new Date());
bowuguanService.insert(bowuguan);
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 后端修改
*/
@RequestMapping("/update")
public R update(@RequestBody BowuguanEntity bowuguan, HttpServletRequest request) throws NoSuchFieldException, ClassNotFoundException, IllegalAccessException, InstantiationException {
logger.debug("update方法:,,Controller:{},,bowuguan:{}",this.getClass().getName(),bowuguan.toString());
BowuguanEntity oldBowuguanEntity = bowuguanService.selectById(bowuguan.getId());//查询原先数据
String role = String.valueOf(request.getSession().getAttribute("role"));
// if(false)
// return R.error(511,"永远不会进入");
//根据字段查询是否有相同数据
Wrapper<BowuguanEntity> queryWrapper = new EntityWrapper<BowuguanEntity>()
.notIn("id",bowuguan.getId())
.andNew()
.eq("bowuguan_name", bowuguan.getBowuguanName())
.eq("bowuguan_address", bowuguan.getBowuguanAddress())
.eq("bowuguan_types", bowuguan.getBowuguanTypes())
.eq("bowuguan_kucun_number", bowuguan.getBowuguanKucunNumber())
.eq("bowuguan_delete", bowuguan.getBowuguanDelete())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
BowuguanEntity bowuguanEntity = bowuguanService.selectOne(queryWrapper);
if("".equals(bowuguan.getBowuguanPhoto()) || "null".equals(bowuguan.getBowuguanPhoto())){
bowuguan.setBowuguanPhoto(null);
}
if(bowuguanEntity==null){
bowuguanService.updateById(bowuguan);//根据id更新
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Integer[] ids, HttpServletRequest request){
logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
List<BowuguanEntity> oldBowuguanList =bowuguanService.selectBatchIds(Arrays.asList(ids));//要删除的数据
ArrayList<BowuguanEntity> list = new ArrayList<>();
for(Integer id:ids){
BowuguanEntity bowuguanEntity = new BowuguanEntity();
bowuguanEntity.setId(id);
bowuguanEntity.setBowuguanDelete(2);
list.add(bowuguanEntity);
}
if(list != null && list.size() >0){
bowuguanService.updateBatchById(list);
}
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<BowuguanEntity> bowuguanList = 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){
//循环
BowuguanEntity bowuguanEntity = new BowuguanEntity();
// bowuguanEntity.setBowuguanName(data.get(0)); //博物馆名称 要改的
// bowuguanEntity.setBowuguanUuidNumber(data.get(0)); //博物馆编号 要改的
// bowuguanEntity.setBowuguanPhoto("");//详情和图片
// bowuguanEntity.setBowuguanAddress(data.get(0)); //博物馆地点 要改的
// bowuguanEntity.setBowuguanTypes(Integer.valueOf(data.get(0))); //博物馆分类 要改的
// bowuguanEntity.setBowuguanContent("");//详情和图片
// bowuguanEntity.setBowuguanKucunNumber(Integer.valueOf(data.get(0))); //每天最大人数上限 要改的
// bowuguanEntity.setBowuguanDelete(1);//逻辑删除字段
// bowuguanEntity.setInsertTime(date);//时间
// bowuguanEntity.setCreateTime(date);//时间
bowuguanList.add(bowuguanEntity);
//把要查询是否重复的字段放入map中
//博物馆编号
if(seachFields.containsKey("bowuguanUuidNumber")){
List<String> bowuguanUuidNumber = seachFields.get("bowuguanUuidNumber");
bowuguanUuidNumber.add(data.get(0));//要改的
}else{
List<String> bowuguanUuidNumber = new ArrayList<>();
bowuguanUuidNumber.add(data.get(0));//要改的
seachFields.put("bowuguanUuidNumber",bowuguanUuidNumber);
}
}
//查询是否重复
//博物馆编号
List<BowuguanEntity> bowuguanEntities_bowuguanUuidNumber = bowuguanService.selectList(new EntityWrapper<BowuguanEntity>().in("bowuguan_uuid_number", seachFields.get("bowuguanUuidNumber")).eq("bowuguan_delete", 1));
if(bowuguanEntities_bowuguanUuidNumber.size() >0 ){
ArrayList<String> repeatFields = new ArrayList<>();
for(BowuguanEntity s:bowuguanEntities_bowuguanUuidNumber){
repeatFields.add(s.getBowuguanUuidNumber());
}
return R.error(511,"数据库的该表中的 [博物馆编号] 字段已经存在 存在数据为:"+repeatFields.toString());
}
bowuguanService.insertBatch(bowuguanList);
return R.ok();
}
}
}
}catch (Exception e){
e.printStackTrace();
return R.error(511,"批量插入数据异常,请联系管理员");
}
}
/**
* 个性推荐
*/
@IgnoreAuth
@RequestMapping("/gexingtuijian")
public R gexingtuijian(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("gexingtuijian方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
CommonUtil.checkMap(params);
List<BowuguanView> returnBowuguanViewList = new ArrayList<>();
//查询订单
Map<String, Object> params1 = new HashMap<>(params);params1.put("sort","id");params1.put("yonghuId",request.getSession().getAttribute("userId"));
PageUtils pageUtils = bowuguanOrderService.queryPage(params1);
List<BowuguanOrderView> orderViewsList =(List<BowuguanOrderView>)pageUtils.getList();
Map<Integer,Integer> typeMap=new HashMap<>();//购买的类型list
for(BowuguanOrderView orderView:orderViewsList){
Integer bowuguanTypes = orderView.getBowuguanTypes();
if(typeMap.containsKey(bowuguanTypes)){
typeMap.put(bowuguanTypes,typeMap.get(bowuguanTypes)+1);
}else{
typeMap.put(bowuguanTypes,1);
}
}
List<Integer> typeList = new ArrayList<>();//排序后的有序的类型 按最多到最少
typeMap.entrySet().stream().sorted((o1, o2) -> o2.getValue() - o1.getValue()).forEach(e -> typeList.add(e.getKey()));//排序
Integer limit = Integer.valueOf(String.valueOf(params.get("limit")));
for(Integer type:typeList){
Map<String, Object> params2 = new HashMap<>(params);params2.put("bowuguanTypes",type);
PageUtils pageUtils1 = bowuguanService.queryPage(params2);
List<BowuguanView> bowuguanViewList =(List<BowuguanView>)pageUtils1.getList();
returnBowuguanViewList.addAll(bowuguanViewList);
if(returnBowuguanViewList.size()>= limit) break;//返回的推荐数量大于要的数量 跳出循环
}
//正常查询出来商品,用于补全推荐缺少的数据
PageUtils page = bowuguanService.queryPage(params);
if(returnBowuguanViewList.size()<limit){//返回数量还是小于要求数量
int toAddNum = limit - returnBowuguanViewList.size();//要添加的数量
List<BowuguanView> bowuguanViewList =(List<BowuguanView>)page.getList();
for(BowuguanView bowuguanView:bowuguanViewList){
Boolean addFlag = true;
for(BowuguanView returnBowuguanView:returnBowuguanViewList){
if(returnBowuguanView.getId().intValue() ==bowuguanView.getId().intValue()) addFlag=false;//返回的数据中已存在此商品
}
if(addFlag){
toAddNum=toAddNum-1;
returnBowuguanViewList.add(bowuguanView);
if(toAddNum==0) break;//够数量了
}
}
}else {
returnBowuguanViewList = returnBowuguanViewList.subList(0, limit);
}
for(BowuguanView c:returnBowuguanViewList)
dictionaryService.dictionaryConvert(c, request);
page.setList(returnBowuguanViewList);
return R.ok().put("data", page);
}
/**
* 前端列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
CommonUtil.checkMap(params);
PageUtils page = bowuguanService.queryPage(params);
//字典表数据转换
List<BowuguanView> list =(List<BowuguanView>)page.getList();
for(BowuguanView 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);
BowuguanEntity bowuguan = bowuguanService.selectById(id);
if(bowuguan !=null){
//entity转view
BowuguanView view = new BowuguanView();
BeanUtils.copyProperties( bowuguan , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody BowuguanEntity bowuguan, HttpServletRequest request){
logger.debug("add方法:,,Controller:{},,bowuguan:{}",this.getClass().getName(),bowuguan.toString());
Wrapper<BowuguanEntity> queryWrapper = new EntityWrapper<BowuguanEntity>()
.eq("bowuguan_name", bowuguan.getBowuguanName())
.eq("bowuguan_uuid_number", bowuguan.getBowuguanUuidNumber())
.eq("bowuguan_address", bowuguan.getBowuguanAddress())
.eq("bowuguan_types", bowuguan.getBowuguanTypes())
.eq("bowuguan_kucun_number", bowuguan.getBowuguanKucunNumber())
.eq("bowuguan_delete", bowuguan.getBowuguanDelete())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
BowuguanEntity bowuguanEntity = bowuguanService.selectOne(queryWrapper);
if(bowuguanEntity==null){
bowuguan.setBowuguanDelete(1);
bowuguan.setInsertTime(new Date());
bowuguan.setCreateTime(new Date());
bowuguanService.insert(bowuguan);
return R.ok();
}else {
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;
/**
* @author yangliyuan
* @version 创建时间:2020年2月7日 下午9:37:05
* 类说明 :
*/
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 {
//拼装url
String 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;
}
}
ConfigServiceImpl.java
package com.service.impl;
import java.util.Map;
import org.springframework.stereotype.Service;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.dao.ConfigDao;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.Query;
/**
* 系统用户
* @author yangliyuan
* @date 2019年10月10日 上午9:17:59
*/
@Service("configService")
public class ConfigServiceImpl extends ServiceImpl<ConfigDao, ConfigEntity> implements ConfigService {
@Override
public PageUtils queryPage(Map<String, Object> params) {
Page<ConfigEntity> page = this.selectPage(
new Query<ConfigEntity>(params).getPage(),
new EntityWrapper<ConfigEntity>()
);
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="auto"
: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":"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;
background-color: transparent;
}
.btn .el-button {
padding: 0;
}</style>
声明
本博客适用于广泛的学术和教育用途,包括但不限于个人学习、开发设计,产品设计。仅供学习参考,旨在为读者提供深入理解和学术研究的材料。