社区养老服务平台的设计与实现

@TOC

springboot187社区养老服务平台的设计与实现

第1章 绪论**

1.1 课题背景

互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。所以各行业,尤其是规模较大的企业和学校等都开始借助互联网和软件工具管理信息,传播信息,共享信息等等,以此可以增强自身实力,提高在同行业当中的竞争能力,并从各种激烈的竞争中获取发展的机会。针对服务信息信息管理混乱,出错率高,信息安全性差,劳动强度大,费时费力等问题,经过分析和考虑,在目前的情况下,可以引进一款社区养老服务平台这样的现代化管理工具,这个工具就是解决上述问题的最好的解决方案。它不仅可以实时完成信息处理,还缩短服务信息信息管理流程,使其系统化和规范化。同时还可以减少工作量,节约服务信息信息管理需要的人力和资金。所以社区养老服务平台是信息管理环节中不可缺少的工具,它对管理者来说非常重要。

1.2 课题意义

现如今,信息种类变得越来越多,信息的容量也变得越来越大,这就是信息时代的标志。近些年,计算机科学发展得也越来越快,而且软件开发技术也越来越成熟,因此,在生活中的各个领域,只要存在信息管理,几乎都有计算机的影子,可以说很多行业都采用计算机的方式管理信息。信息计算机化处理相比手工操作,有着保密性强,效率高,存储空间大,成本低等诸多优点。针对服务信息信息管理,采用社区养老服务平台可以有效管理,使信息管理能够更加科学和规范。

总之,在实际中使用社区养老服务平台,其意义如下:

第一点:社区养老服务平台的实际运用,可以帮助管理人员在短时间内完成信息处理工作;

第二点:通过系统页面的合理排版布局,可以更加直观的展示系统的内容,并且使用者可以随时阅读页面信息,随时操作系统提供的功能;

第三点:可以实现信息管理计算机化;

第四点:可以降低信息管理成本;

1.3 研究内容

对社区养老服务平台设计制作,不仅需要技术支撑,也需要大量的理论研究。本文在对社区养老服务平台进行介绍时,将按照如下内容进行。

第一部分:介绍社区养老服务平台研究的背景意义,便于用户了解系统;

第二部分:介绍开发社区养老服务平台需要搭建的环境,包括技术和工具;

第三部分:介绍用户对社区养老服务平台的功能要求,以及对社区养老服务平台的性能要求等;

第四部分:介绍数据库的设计方案,以及根据功能要求设计的功能结构;

第五部分:介绍通过编码最终实现的系统功能运行效果;

第六部分:介绍系统的功能测试,对系统进行综合检测,并及时解决系统出现的问题,直至系统运行正常。

第2章 开发环境与技术

社区养老服务平台的编码实现需要搭建一定的环境和使用相应的技术,接下来的内容就是对社区养老服务平台用到的技术和工具进行介绍。

2.1 MYSQL数据库

本课题所开发的应用程序在数据操作方面是不可预知的,是经常变动的,没有办法直接把数据写在文档里,这样不仅仅不安全,也不能实现应用程序的功能。如果要能实现应用程序所需要的数据存储功能,就避免不了要进行专业数据库存储软件的选择。基本上应用程序实现的功能不算太复杂,市面上任何一个关系型数据库软件都可以实现。参考自己的学习进度和操作习惯来讲,Oracle数据库是适合的,但是所需要的的安装软件很大,并且有好多不需要的功能都是开启的状态,十分消耗电脑资源,所以没有选择Oracle数据库,而SQL Server数据库虽然学过,但是安装的时候因为电脑上可能有其他的软件存在,经常性的出问题,而安装问题不好解决就需要重新安装操作系统,这样对已经存在的软件来讲又是一种时间上的浪费。只有MySQL数据库,安装包小,安装速度快,操作简单,哪怕安装出问题也好解决,不用重装操作系统,也不影响电脑上运行的其他软件,消耗资源也少,最重要的是在功能方面完全的符合设计需要,所以最后选择了MySQL数据库作为应用软件开发需要的数据库。

2.2 vue技术

在动态网站的兴起之初,作为高级编程语言的Java自然不会放弃这个领域的蛋糕。Sun公司推出了Servlet作为输出动态网站的一种技术标准,虽然不怎么受当时程序员的喜爱,但是当初也没有太多的选择,随后几个月java语言问世,不考虑性能和效率如何,起码在书写网页所需要的动态代码块和静态代码块方面进行了区分,让书写效率和可读效率大大的提升,所以很多Java程序员以及刚入行的初级程序员都选择了java语言作为自己职业的发展方向,Sun公司为了维护Java语言在高级编程语言上的江湖地位,防止java继续抢走市场份额占有率,Sun公司联合Apache基金会研发了一个关于Java动态网页的一个新型的技术标准,这就是vue技术。vue吸取了java语言在页面书写上面的所有优点,但是又背靠Java EE的庞大后台,又能实现很多通过Java组件就能实现的功能,在vue页面上可以直接引用那些组件,让vue更加的强壮丰富。保证了Java技术纵向的可持续发展,并且在动态网站开发领域终于站稳了脚跟,其他java开发人员可以很快的转移到vue进行开发,不考虑一些特殊组件或者功能的开发,只从动态页面的开发上来讲,完全实现了java程序和vue程序的几乎无成本的转换,vue技术就这样的发展了起来。

2.3 Spring Boot框架

Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。

SpringBoot基于Spring4.0设计,不仅继承了Spring框架原有的优秀特性,而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程。另外SpringBoot通过集成大量的框架使得依赖包的版本冲突,以及引用的不稳定性等问题得到了很好的解决。

SpringBoot框架中还有两个非常重要的策略:开箱即用和约定优于配置。开箱即用,Outofbox,是指在开发过程中,通过在MAVEN项目的pom文件中添加相关依赖包,然后使用对应注解来代替繁琐的XML配置文件以管理对象的生命周期。这个特点使得开发人员摆脱了复杂的配置工作以及依赖的管理工作,更加专注于业务逻辑。约定优于配置,Convention over configuration,是一种由SpringBoot本身来配置目标结构,由开发者在结构中添加信息的软件设计范式。这一特点虽降低了部分灵活性,增加了BUG定位的复杂性,但减少了开发人员需要做出决定的数量,同时减少了大量的XML配置,并且可以将代码编译、测试和打包等工作自动化。

SpringBoot应用系统开发模板的基本架构设计从前端到后台进行说明:前端常使用模板引擎,主要有FreeMarker和Thymeleaf,它们都是用Java语言编写的,渲染模板并输出相应文本,使得界面的设计与应用的逻辑分离,同时前端开发还会使用到Bootstrap、AngularJS、JQuery等;在浏览器的数据传输格式上采用Json,非xml,同时提供RESTfulAPI;SpringMVC框架用于数据到达服务器后处理请求;到数据访问层主要有Hibernate、MyBatis、JPA等持久层框架;数据库常用MySQL;开发工具推荐IntelliJIDEA。

第3章 系统分析

面对即将开发的系统,进行提前的分析是必要的。这也是开发流程中必须有的环节。通常分析系统期间,主要涉及的内容包括系统开发可行性问题,对系统功能和性能的分析等问题。

3.1 可行性分析

在正式对需要建设的项目进行投资前,有一个比较关键的步骤是不能缺少的,那就是可行性分析。它主要从当前技术,经济等角度去评估系统的可行性,在投资决策中常常采用这种科学的方法来论证项目。

3.1.1 技术可行性

当前,系统开发的技术已经发展成熟,而且通过计算机网络可以获取开发工具的使用方法,以及规范化编写的模块化代码,这些知识可以帮助开发者顺利完成本系统的编码工作。

3.1.2 经济可行性

本系统开发期间需要配置的软件环境,可以免费通过开发类官网下载安装,需要配置的硬件设备也不需要具备很高的性能,通常网吧电脑,或学校计算机机房的电脑都符合要求。因此,从经济方面考虑,社区养老服务平台开发可行。

3.1.3 操作可行性

社区养老服务平台根据用户使用习惯进行开发,设计的界面具有统一性,并具备优秀的导航功能。所以,只要会简单操作电脑的人员,可以无压力操作社区养老服务平台。

总之,从上述的论证来看,本系统可以开发。

3.2 系统流程

流程图这样的工具可以直观反映出系统内部的操作逻辑,可以帮助用户更好的理解系统。

3.2.1 操作流程

进入本系统需要访问者提供验证信息。验证合格的访问者才能获取访问资格。其具体的操作流程见下图。访问者根据登录界面设置的信息项如实填写,待信息通过验证后,访问者可以进入指定的页面享受本系统提供的服务和阅读本系统的相关信息。

图3.1 操作流程图

3.2.2 登录流程

本系统的登录模块,其内部的流程见下图。主要对访问本系统的人员提供的验证信息进行逐个判断,系统面对录入错误的信息会给出提示,比如,提示账号不对,或提示密码不匹配等提示信息。总之,在登录页面填写的所有信息都符合要求,访问者就登录成功了。

图3.2 登录流程图

3.2.3 删除信息流程

本系统在经常性的使用后,会产生很多失去价值的信息,因此就需要及时清理数据,腾出系统的空间。对这些数据进行清理时,其对应的流程见下图。先选中要清理的数据,通过反复确认需要清理的数据,避免操作人员误删。已经删除的数据就不会出现在系统里面。

图3.3 删除信息流程图

3.2.4 添加信息流程

本系统主要用于显示信息,提供服务,其中,数据添加功能就是其中的服务之一,具体流程见下图。让操作者在信息添加的页面录入数据,待这些数据被提交检验合格后,就会在系统指定页面显示出来。

图3.4 添加信息流程图

3.3 性能需求

进行需求分析,包括了根据用户实际需求制定功能,也涵盖了对即将设计的系统进行性能上的需求分析。所以一般分析系统时,一方面要分析系统功能,另一方面也要分析系统的性能。毕竟设计开发出一个好性能的系统可以确保系统的质量可靠。

接下来分析系统的性能,还要从界面友好性,系统的时间特性,系统的可靠性等方面来分析说明。

(1)时间特性要求:系统处理数据都有时间要求,这也是系统的时间特性。通常都会把数据处理的时间进行分析,也会设置用户请求的响应时间,还有系统在满负荷运行时可以偏离的范围数值等都需要提前分析确定。

(2)界面友好性:除了功能上需要考虑用户需求外,在人机交互界面的设计上,也需要考虑用户的使用习惯,包括界面的布局,界面基调选择以及颜色搭配等。尽量做到用户在接受简单的培训之后,可以对系统进行独立操作。

(3)系统可靠性:对于初学者而言,很容易出现一个问题,就是设计开发的系统,因为人为的误操作出现崩溃,有些也会导致电脑死机。这样的现象也说明这种容错能力低下的系统是不可靠的。完全不能作为生活中处理信息的系统。当下,系统开发要保证可靠性,设计时,把模块化和结构化的设计理念也考虑进来。如果遇到对时效性要求比较严格的系统,也需要采取其它的措施,比如双机系统,还有磁盘阵列等方式。还有就是一个可靠性的系统,对设备的供电能力也有要求。

第4章 系统设计

一个成功设计的系统在内容上必定是丰富的,在系统外观或系统功能上必定是对用户友好的。所以为了提升系统的价值,吸引更多的访问者访问系统,以及让来访用户可以花费更多时间停留在系统上,则表明该系统设计得比较专业。

4.1 设计原则

本系统在设计过程中需要依照一定的设计原则进行,目的就是为了让开发的系统具备高质量,齐全完备的功能,方便简单的操作,如此才可以最大限度的满足使用者的要求。系统设计原则除了基本的易操作原则外,还有安全性原则,准确性原则。

第一个设计原则:易操作原则,针对本系统设计的功能要完备齐全,编码时,设计的各个接口要具备友好性,使用者一旦使用本系统时,要能够轻松上手,操作本系统处理数据时,要具备便利性。此外,也需要设计一些必要提示,引导使用者操作系统。

第二个设计原则:安全性原则,本系统在登录模块要对各个访问者进行身份验证,系统会通过访问者输入的信息进行判断,使用提前编写的安全验证代码进行数据比对,引导匹配成功的访问者进入指定的操作界面。这样可以避免无关性访问者窃取系统的数据。

第三个设计原则:准确性原则,为了保证使用者登记的数据是正确的,需要提前设计数据纠错机制,让使用者可以通过系统的报错提示,仔细检查登记的错误信息,并及时纠正错误,填写规范正确的信息。比如设置密码时,要求密码的长度不能低于6个字符,且数据类型要求不能全部是数字等都能进行规范。

4.2 功能结构设计

在前面分析的管理员功能的基础上,进行接下来的设计工作,最终展示设计的管理员结构图(见下图)。管理员增删改查服务信息

社区养老服务平台

用户信息管理

公告信息管理

服务申请管理

服务信息管理

用户信息修改

用户信息新增

服务信息添加

服务信息删除

服务信息修改

服务类型添加

服务类型修改

服务类型删除

公告信息添加

公告信息删改

公告信息删除

服务申请添加

服务申请修改

服务申请删除

公告类型管理

公告类型修改

公告类型删除

公告类型添加

服务类型管理

4.3 数据库设计

开发一个系统也需要提前设计数据库。这里的数据库是相关数据的集合,存储在一起的这些数据也是按照一定的组织方式进行的。目前,数据库能够服务于多种应用程序,则是源于它存储方式最佳,具备数据冗余率低的优势。虽然数据库为程序提供信息存储服务,但它与程序之间也可以保持较高的独立性。总而言之,数据库经历了很长一段时间的发展,从最初的不为人知,到现在的人尽皆知,其相关技术也越发成熟,同时也拥有着坚实的理论基础。

4.3.1 数据库概念设计

这部分内容需要借助数据库关系图来完成,也需要使用专门绘制数据库关系图的工具,比如Visio工具就可以设计E-R图(数据库关系图)。设计数据库,也需要按照设计的流程进行,首先还是要根据需求完成实体的确定,分析实体具有的特征,还有对实体间的关联关系进行确定。最后才是使用E-R模型的表示方法,绘制本系统的E-R图。不管是使用亿图软件,还是Visio工具,对于E-R模型的表示符号都一样,通常矩形代表实体,实体间存在的关系用菱形符号表示,实体的属性也就是实体的特征用符号椭圆表示。最后使用直线将矩形,菱形和椭圆等符号连接起来。接下来就开始对本系统的E-R图进行绘制。

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

C:\Users\Administrator\Desktop\img\sheuquyanglaofuwu\用户.jpg 图4.1 用户实体属性图

(2)下图是用户信息修改审核实体和其具备的属性。

C:\Users\Administrator\Desktop\img\sheuquyanglaofuwu\用户信息修改审核.jpg 图4.2 用户信息修改审核实体属性图

(3)下图是服务申请实体和其具备的属性。

C:\Users\Administrator\Desktop\img\sheuquyanglaofuwu\服务申请.jpg 图4.3 服务申请实体属性图

(4)下图是公告信息实体和其具备的属性。

C:\Users\Administrator\Desktop\img\sheuquyanglaofuwu\公告信息.jpg 图4.4 公告信息实体属性图

(5)下图是字典表实体和其具备的属性。

C:\Users\Administrator\Desktop\img\sheuquyanglaofuwu\字典表.jpg 图4.5 字典表实体属性图

(6)下图是服务信息实体和其具备的属性。

C:\Users\Administrator\Desktop\img\sheuquyanglaofuwu\服务信息.jpg 图4.6 服务信息实体属性图

(7)下图是用户表实体和其具备的属性。

C:\Users\Administrator\Desktop\img\sheuquyanglaofuwu\用户表.jpg 图4.7 用户表实体属性图

4.3.2 数据库物理设计

本数据库是关系型数据库,因此对二维表的结构设计也比较关键。毕竟二维表格模型就是关系型数据库中的关系模型。而一些常用的关系模型中的概念也需要了解,才可以对关系模型进行设计。下面就简单介绍关系,元组,属性,域,关键字等常用概念的含义。

关系:关系就是数据库中的一张数据表,每张数据表都有命名,也就是每个关系也有名字,那就是数据表名;

元组:元组就是数据表中的一行记录;

属性:属性就是数据表中的字段,也就是数据表中的一列;

域:域就是对数据表中属性的取值进行限定;

关键字:关键字就是数据表中的主键;

在了解了表结构设计的常用概念后,接下来就需要使用前面绘制的E-R模型完成表结构的设计工作,并在数据库中创建数据表,并为各个数据表进行命名。以下就对设计的结果通过表格形式进行展示。

表4.1字典表表

序号列名数据类型说明允许空
1IdIntid
2dic_codeString字段
3dic_nameString字段名
4code_indexInteger编码
5index_nameString编码名字
6super_idInteger父字段id
7beizhuString备注
8create_timeDate创建时间

表4.2服务信息表

序号列名数据类型说明允许空
1IdIntid
2fuwu_bianhaoString服务编号
3fuwu_nameString服务名称
4fuwu_photoString服务封面
5fuwu_typesInteger服务类型
6fuwu_contentString详情
7create_timeDate创建时间

表4.3服务申请表

序号列名数据类型说明允许空
1IdIntid
2fuwu_idInteger服务
3yonghu_idInteger用户
4fuwushenqing_yesno_typesInteger审核状态
5fuwushenqing_yesno_textString审核结果
6create_timeDate创建时间

表4.4公告信息表

序号列名数据类型说明允许空
1IdIntid
2news_nameString公告标题
3news_typesInteger公告类型
4news_photoString公告图片
5insert_timeDate公告时间
6news_contentString公告详情
7create_timeDate创建时间

表4.5用户表

序号列名数据类型说明允许空
1IdIntid
2yonghu_nameString用户姓名
3yonghu_photoString头像
4yonghu_phoneString联系方式
5yonghu_id_numberString用户身份证号
6yonghu_emailString邮箱
7yonghu_deleteInteger假删
8create_timeDate创建时间

表4.6用户信息修改审核表

序号列名数据类型说明允许空
1IdIntid
2yonghu_idInteger用户
3yonghushenhe_nameString用户姓名
4yonghushenhe_photoString头像
5sex_typesInteger性别
6yonghushenhe_phoneString联系方式
7yonghushenhe_id_numberString用户身份证号
8yonghushenhe_emailString邮箱
9yonghushenhe_yesno_typesInteger审核状态
10yonghushenhe_yesno_textString审核结果
11create_timeDate创建时间

表4.7用户表表

序号列名数据类型说明允许空
1IdIntid
2usernameString用户名
3passwordString密码
4roleString角色
5addtimeDate新增时间

5.1用户信息管理

如图5.1显示的就是用户信息管理页面,此页面提供给管理员的功能有:用户信息的查询管理,可以删除用户信息、修改用户信息、新增用户信息,

还进行了对用户名称的模糊查询的条件

图5.1 用户信息管理页面

5.2 服务信息管理

如图5.2显示的就是服务信息管理页面,此页面提供给管理员的功能有:查看已发布的服务信息数据,修改服务信息,服务信息作废,即可删除,还进行了对服务信息名称的模糊查询 服务信息信息的类型查询等等一些条件。

图5.2 服务信息管理页面

5.3服务申请管理

如图5.3显示的就是服务申请管理页面,此页面提供给管理员的功能有:根据服务申请进行条件查询,还可以对服务申请进行新增、修改、查询操作等等。

图5.3 服务申请管理页面

5.1公告信息管理

如图5.4显示的就是公告信息管理页面,此页面提供给管理员的功能有:根据公告信息进行新增、修改、查询操作等等。

图5.4 公告信息管理页面

MPUtil.java
package com.utils;

import java.util.Arrays;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

import org.apache.commons.lang3.StringUtils;

import cn.hutool.core.bean.BeanUtil;

import com.baomidou.mybatisplus.mapper.Wrapper;

/**
 * Mybatis-Plus工具类
 */
public class MPUtil {
	public static final char UNDERLINE = '_';

	
	//mybatis plus allEQ 表达式转换
		public static Map allEQMapPre(Object bean,String pre) {
		   Map<String, Object> map =BeanUtil.beanToMap(bean);
		  return camelToUnderlineMap(map,pre);
	   }

		//mybatis plus allEQ 表达式转换
		public static Map allEQMap(Object bean) {
		   Map<String, Object> map =BeanUtil.beanToMap(bean);
		   return camelToUnderlineMap(map,"");
	   }

		public static Wrapper allLikePre(Wrapper wrapper,Object bean,String pre) {
			   Map<String, Object> map =BeanUtil.beanToMap(bean);
			   Map result = camelToUnderlineMap(map,pre);
			 
			return genLike(wrapper,result);
		}
	
		public static Wrapper allLike(Wrapper wrapper,Object bean) {
			  Map result = BeanUtil.beanToMap(bean, true, true);			 
			return genLike(wrapper,result);
		}
	
	
		public static Wrapper genLike( Wrapper wrapper,Map param) {
			Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
			int i=0;
			while (it.hasNext()) {
				if(i>0) wrapper.and();
				Map.Entry<String, Object> entry = it.next();
				String key = entry.getKey();
				String value = (String) entry.getValue();
				wrapper.like(key, value);
				i++;
			}
			return wrapper;
		}
		
		public static Wrapper likeOrEq(Wrapper wrapper,Object bean) {
			  Map result = BeanUtil.beanToMap(bean, true, true);			 
			return genLikeOrEq(wrapper,result);
		}
		
		public static Wrapper genLikeOrEq( Wrapper wrapper,Map param) {
			Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
			int i=0;
			while (it.hasNext()) {
				if(i>0) wrapper.and();
				Map.Entry<String, Object> entry = it.next();
				String key = entry.getKey();
				if(entry.getValue().toString().contains("%")) {
					wrapper.like(key, entry.getValue().toString().replace("%", ""));
				} else {
					wrapper.eq(key, entry.getValue());
				}
				i++;
			}
			return wrapper;
		}
		
		public static Wrapper allEq(Wrapper wrapper,Object bean) {
			  Map result = BeanUtil.beanToMap(bean, true, true);			 
			return genEq(wrapper,result);
		}
	
	
		public static Wrapper genEq( Wrapper wrapper,Map param) {
			Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
			int i=0;
			while (it.hasNext()) {
				if(i>0) wrapper.and();
				Map.Entry<String, Object> entry = it.next();
				String key = entry.getKey();
				wrapper.eq(key, entry.getValue());
				i++;
			}
			return wrapper;
		}
	
	
		public static Wrapper between(Wrapper wrapper,Map<String, Object> params) {
			for(String key : params.keySet()) {
				String columnName = "";
				if(key.endsWith("_start")) {
					columnName = key.substring(0, key.indexOf("_start"));
					if(StringUtils.isNotBlank(params.get(key).toString())) {
						wrapper.ge(columnName, params.get(key));
					}
				}
				if(key.endsWith("_end")) {
					columnName = key.substring(0, key.indexOf("_end"));
					if(StringUtils.isNotBlank(params.get(key).toString())) {
						wrapper.le(columnName, params.get(key));
					}
				}
			}
			return wrapper;
		}
	
		public static Wrapper sort(Wrapper wrapper,Map<String, Object> params) {
			String order = "";
			if(params.get("order") != null && StringUtils.isNotBlank(params.get("order").toString())) {
				order = params.get("order").toString();
			}
			if(params.get("sort") != null && StringUtils.isNotBlank(params.get("sort").toString())) {
				if(order.equalsIgnoreCase("desc")) {
					wrapper.orderDesc(Arrays.asList(params.get("sort")));
				} else {
					wrapper.orderAsc(Arrays.asList(params.get("sort")));
				}
			}
			return wrapper;
		}
	
	
	/**
	 * 驼峰格式字符串转换为下划线格式字符串
	 * 
	 * @param param
	 * @return
	 */
	public static String camelToUnderline(String param) {
		if (param == null || "".equals(param.trim())) {
			return "";
		}
		int len = param.length();
		StringBuilder sb = new StringBuilder(len);
		for (int i = 0; i < len; i++) {
			char c = param.charAt(i);
			if (Character.isUpperCase(c)) {
				sb.append(UNDERLINE);
				sb.append(Character.toLowerCase(c));
			} else {
				sb.append(c);
			}
		}
		return sb.toString();
	}

	public static void main(String[] ages) {
		System.out.println(camelToUnderline("ABCddfANM"));
	}
	
	public static Map camelToUnderlineMap(Map param, String pre) {

		Map<String, Object> newMap = new HashMap<String, Object>();
		Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
		while (it.hasNext()) {
			Map.Entry<String, Object> entry = it.next();
			String key = entry.getKey();
			String newKey = camelToUnderline(key);
			if (pre.endsWith(".")) {
				newMap.put(pre + newKey, entry.getValue());
			} else if (StringUtils.isEmpty(pre)) {
				newMap.put(newKey, entry.getValue());
			} else {

				newMap.put(pre + "." + newKey, entry.getValue());
			}
		}
		return newMap;
	}
}

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

    @Autowired
    private YonghuService yonghuService;


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

    //级联表service



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

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

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

    }

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

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

        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            .andNew()
            .eq("yonghu_delete", 1)
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if(yonghuEntity==null){
            yonghu.setYonghuDelete(1);
            yonghu.setCreateTime(new Date());
            yonghu.setPassword("123456");
            yonghuService.insert(yonghu);
            return R.ok();
        }else {
            return R.error(511,"账户或者联系方式或者用户身份证号已经被使用");
        }
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .notIn("id",yonghu.getId())
            .andNew()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            .andNew()
            .eq("yonghu_delete", 1)
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if("".equals(yonghu.getYonghuPhoto()) || "null".equals(yonghu.getYonghuPhoto())){
                yonghu.setYonghuPhoto(null);
        }
        if(yonghuEntity==null){
            yonghuService.updateById(yonghu);//根据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<YonghuEntity> list = new ArrayList<>();
        for(Integer id:ids){
            YonghuEntity yonghuEntity = new YonghuEntity();
            yonghuEntity.setId(id);
            yonghuEntity.setYonghuDelete(2);
            list.add(yonghuEntity);
        }
        if(list != null && list.size() >0){
            yonghuService.updateBatchById(list);
        }
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<YonghuEntity> yonghuList = 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){
                            //循环
                            YonghuEntity yonghuEntity = new YonghuEntity();
//                            yonghuEntity.setUsername(data.get(0));                    //账户 要改的
//                            //yonghuEntity.setPassword("123456");//密码
//                            yonghuEntity.setYonghuName(data.get(0));                    //用户姓名 要改的
//                            yonghuEntity.setYonghuPhoto("");//照片
//                            yonghuEntity.setSexTypes(Integer.valueOf(data.get(0)));   //性别 要改的
//                            yonghuEntity.setYonghuPhone(data.get(0));                    //联系方式 要改的
//                            yonghuEntity.setYonghuIdNumber(data.get(0));                    //用户身份证号 要改的
//                            yonghuEntity.setYonghuEmail(data.get(0));                    //邮箱 要改的
//                            yonghuEntity.setYonghuDelete(1);//逻辑删除字段
//                            yonghuEntity.setCreateTime(date);//时间
                            yonghuList.add(yonghuEntity);


                            //把要查询是否重复的字段放入map中
                                //账户
                                if(seachFields.containsKey("username")){
                                    List<String> username = seachFields.get("username");
                                    username.add(data.get(0));//要改的
                                }else{
                                    List<String> username = new ArrayList<>();
                                    username.add(data.get(0));//要改的
                                    seachFields.put("username",username);
                                }
                                //联系方式
                                if(seachFields.containsKey("yonghuPhone")){
                                    List<String> yonghuPhone = seachFields.get("yonghuPhone");
                                    yonghuPhone.add(data.get(0));//要改的
                                }else{
                                    List<String> yonghuPhone = new ArrayList<>();
                                    yonghuPhone.add(data.get(0));//要改的
                                    seachFields.put("yonghuPhone",yonghuPhone);
                                }
                                //用户身份证号
                                if(seachFields.containsKey("yonghuIdNumber")){
                                    List<String> yonghuIdNumber = seachFields.get("yonghuIdNumber");
                                    yonghuIdNumber.add(data.get(0));//要改的
                                }else{
                                    List<String> yonghuIdNumber = new ArrayList<>();
                                    yonghuIdNumber.add(data.get(0));//要改的
                                    seachFields.put("yonghuIdNumber",yonghuIdNumber);
                                }
                        }

                        //查询是否重复
                         //账户
                        List<YonghuEntity> yonghuEntities_username = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("username", seachFields.get("username")).eq("yonghu_delete", 1));
                        if(yonghuEntities_username.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YonghuEntity s:yonghuEntities_username){
                                repeatFields.add(s.getUsername());
                            }
                            return R.error(511,"数据库的该表中的 [账户] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                         //联系方式
                        List<YonghuEntity> yonghuEntities_yonghuPhone = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("yonghu_phone", seachFields.get("yonghuPhone")).eq("yonghu_delete", 1));
                        if(yonghuEntities_yonghuPhone.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YonghuEntity s:yonghuEntities_yonghuPhone){
                                repeatFields.add(s.getYonghuPhone());
                            }
                            return R.error(511,"数据库的该表中的 [联系方式] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                         //用户身份证号
                        List<YonghuEntity> yonghuEntities_yonghuIdNumber = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("yonghu_id_number", seachFields.get("yonghuIdNumber")).eq("yonghu_delete", 1));
                        if(yonghuEntities_yonghuIdNumber.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YonghuEntity s:yonghuEntities_yonghuIdNumber){
                                repeatFields.add(s.getYonghuIdNumber());
                            }
                            return R.error(511,"数据库的该表中的 [用户身份证号] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                        yonghuService.insertBatch(yonghuList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            return R.error(511,"批量插入数据异常,请联系管理员");
        }
    }


    /**
    * 登录
    */
    @IgnoreAuth
    @RequestMapping(value = "/login")
    public R login(String username, String password, String captcha, HttpServletRequest request) {
        YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));
        if(yonghu==null || !yonghu.getPassword().equals(password))
            return R.error("账号或密码不正确");
        else if(yonghu.getYonghuDelete() != 1)
            return R.error("账户已被删除");
        //  // 获取监听器中的字典表
        // ServletContext servletContext = ContextLoader.getCurrentWebApplicationContext().getServletContext();
        // Map<String, Map<Integer, String>> dictionaryMap= (Map<String, Map<Integer, String>>) servletContext.getAttribute("dictionaryMap");
        // Map<Integer, String> role_types = dictionaryMap.get("role_types");
        // role_types.get(.getRoleTypes());
        String token = tokenService.generateToken(yonghu.getId(),username, "yonghu", "用户");
        R r = R.ok();
        r.put("token", token);
        r.put("role","用户");
        r.put("username",yonghu.getYonghuName());
        r.put("tableName","yonghu");
        r.put("userId",yonghu.getId());
        return r;
    }

    /**
    * 注册
    */
    @IgnoreAuth
    @PostMapping(value = "/register")
    public R register(@RequestBody YonghuEntity yonghu){
//    	ValidatorUtils.validateEntity(user);
        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            .andNew()
            .eq("yonghu_delete", 1)
            ;
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if(yonghuEntity != null)
            return R.error("账户或者联系方式或者用户身份证号已经被使用");
        yonghu.setYonghuDelete(1);
        yonghu.setCreateTime(new Date());
        yonghuService.insert(yonghu);
        return R.ok();
    }

    /**
     * 重置密码
     */
    @GetMapping(value = "/resetPassword")
    public R resetPassword(Integer  id){
        YonghuEntity yonghu = new YonghuEntity();
        yonghu.setPassword("123456");
        yonghu.setId(id);
        yonghuService.updateById(yonghu);
        return R.ok();
    }


    /**
     * 忘记密码
     */
    @IgnoreAuth
    @RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request) {
        YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));
        if(yonghu!=null){
            yonghu.setPassword("123456");
            boolean b = yonghuService.updateById(yonghu);
            if(!b){
               return R.error();
            }
        }else{
           return R.error("账号不存在");
        }
        return R.ok();
    }


    /**
    * 获取用户的session用户信息
    */
    @RequestMapping("/session")
    public R getCurrYonghu(HttpServletRequest request){
        Integer id = (Integer)request.getSession().getAttribute("userId");
        YonghuEntity yonghu = yonghuService.selectById(id);
        if(yonghu !=null){
            //entity转view
            YonghuView view = new YonghuView();
            BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中

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


    /**
    * 退出
    */
    @GetMapping(value = "logout")
    public R logout(HttpServletRequest request) {
        request.getSession().invalidate();
        return R.ok("退出成功");
    }





}

register.vue
<template>
    <div style="backgroundImage: url('/sheuquyanglaofuwu/img/back-img-bg.jpg');background-size:cover;">
        <div class="container">
            <div class="login-form" style="backgroundColor:rgba(183, 174, 174, 0.5);borderRadius:22px">
                <h1 class="h1" style="color:#000;fontSize:28px;">社区养老服务平台注册</h1>
                <el-form class="rgs-form" label-width="120px">
                        <el-form-item label="账号" class="input">
                            <el-input v-model="ruleForm.username" autocomplete="off" placeholder="账号"  />
                        </el-form-item>
                        <el-form-item label="密码" class="input">
                            <el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password/>
                        </el-form-item>
                        <el-form-item label="重复密码" class="input">
                            <el-input type="password" v-model="ruleForm.repetitionPassword" autocomplete="off" show-password/>
                        </el-form-item>
                        <el-form-item label="用户姓名" class="input" v-if="tableName=='yonghu'">
                            <el-input v-model="ruleForm.yonghuName" autocomplete="off" placeholder="用户姓名"  />
                        </el-form-item>
                        <el-form-item label="联系方式" class="input" v-if="tableName=='yonghu'">
                            <el-input v-model="ruleForm.yonghuPhone" autocomplete="off" placeholder="联系方式"  />
                        </el-form-item>
                        <el-form-item label="用户身份证号" class="input" v-if="tableName=='yonghu'">
                            <el-input v-model="ruleForm.yonghuIdNumber" autocomplete="off" placeholder="用户身份证号"  />
                        </el-form-item>
                        <el-form-item label="邮箱" class="input" v-if="tableName=='yonghu'">
                            <el-input v-model="ruleForm.yonghuEmail" autocomplete="off" placeholder="邮箱"  />
                        </el-form-item>
                        <div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
                            <el-button class="btn" type="primary" @click="login()">注册</el-button>
                            <el-button class="btn close" type="primary" @click="close()">取消</el-button>
                        </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                },
                tableName:"",
                rules: {},
                sexTypesOptions : [],
            };
        },
        mounted(){
            let table = this.$storage.get("loginTable");
            this.tableName = table;

            //级联表的下拉框查询

        },
        methods: {
            // 获取uuid
            getUUID () {
                return new Date().getTime();
            },
            close(){
                this.$router.push({ path: "/login" });
            },
            // 注册
            login() {

                            if((!this.ruleForm.username)){
                                this.$message.error('账号不能为空');
                                return
                            }
                            if((!this.ruleForm.password)){
                                this.$message.error('密码不能为空');
                                return
                            }
                            if((!this.ruleForm.repetitionPassword)){
                                this.$message.error('重复密码不能为空');
                                return
                            }
                            if(this.ruleForm.repetitionPassword != this.ruleForm.password){
                                this.$message.error('密码和重复密码不一致');
                                return
                            }
                            if((!this.ruleForm.yonghuName)&& 'yonghu'==this.tableName){
                                this.$message.error('用户姓名不能为空');
                                return
                            }
                             if('yonghu' == this.tableName && this.ruleForm.yonghuPhone&&(!this.$validate.isMobile(this.ruleForm.yonghuPhone))){
                                 this.$message.error('手机应输入手机格式');
                                 return
                             }
                            if((!this.ruleForm.yonghuIdNumber)&& 'yonghu'==this.tableName){
                                this.$message.error('用户身份证号不能为空');
                                return
                            }
                            if('yonghu' == this.tableName && this.ruleForm.yonghuEmail&&(!this.$validate.isEmail(this.ruleForm.yonghuEmail))){
                                this.$message.error("邮箱应输入邮件格式");
                                return
                            }
                this.$http({
                    url: `${this.tableName}/register`,
                    method: "post",
                    data:this.ruleForm
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                    this.$message({
                        message: "注册成功,请登录后在个人中心页面补充个人数据",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                        this.$router.replace({ path: "/login" });
                }
                });
                } else {
                    this.$message.error(data.msg);
                }
            });
            }
        }
    };
</script>
<style lang="scss" scoped>
    .el-radio__input.is-checked .el-radio__inner {
        border-color: #00c292;
        background: #00c292;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #00c292;
        background: #00c292;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #00c292;
        background: #00c292;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #00c292;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #00c292;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #00c292;
    }

    .h1 {
        margin-top: 10px;
    }

    body {
        padding: 0;
        margin: 0;
    }

    // .container {
       //    min-height: 100vh;
       //    text-align: center;
       //    // background-color: #00c292;
       //    padding-top: 20vh;
       //    background-image: url(../assets/img/bg.jpg);
       //    background-size: 100% 100%;
       //    opacity: 0.9;
       //  }

    // .login-form:before {
       // 	vertical-align: middle;
       // 	display: inline-block;
       // }

    // .login-form {
       // 	max-width: 500px;
       // 	padding: 20px 0;
       // 	width: 80%;
       // 	position: relative;
       // 	margin: 0 auto;

    // 	.label {
          // 		min-width: 60px;
          // 	}

    // 	.input-group {
          // 		max-width: 500px;
          // 		padding: 20px 0;
          // 		width: 80%;
          // 		position: relative;
          // 		margin: 0 auto;
          // 		display: flex;
          // 		align-items: center;

    // 		.input-container {
              // 			display: inline-block;
              // 			width: 100%;
              // 			text-align: left;
              // 			margin-left: 10px;
              // 		}

    // 		.icon {
              // 			width: 30px;
              // 			height: 30px;
              // 		}

    // 		.input {
              // 			position: relative;
              // 			z-index: 2;
              // 			float: left;
              // 			width: 100%;
              // 			margin-bottom: 0;
              // 			box-shadow: none;
              // 			border-top: 0px solid #ccc;
              // 			border-left: 0px solid #ccc;
              // 			border-right: 0px solid #ccc;
              // 			border-bottom: 1px solid #ccc;
              // 			padding: 0px;
              // 			resize: none;
              // 			border-radius: 0px;
              // 			display: block;
              // 			width: 100%;
              // 			height: 34px;
              // 			padding: 6px 12px;
              // 			font-size: 14px;
              // 			line-height: 1.42857143;
              // 			color: #555;
              // 			background-color: #fff;
              // 		}

    // 	}
    // }

    .nk-navigation {
        margin-top: 15px;

    a {
        display: inline-block;
        color: #fff;
        background: rgba(255, 255, 255, .2);
        width: 100px;
        height: 50px;
        border-radius: 30px;
        text-align: center;
        display: flex;
        align-items: center;
        margin: 0 auto;
        justify-content: center;
        padding: 0 20px;
    }

    .icon {
        margin-left: 10px;
        width: 30px;
        height: 30px;
    }
    }

    .register-container {
        margin-top: 10px;

    a {
        display: inline-block;
        color: #fff;
        max-width: 500px;
        height: 50px;
        border-radius: 30px;
        text-align: center;
        display: flex;
        align-items: center;
        margin: 0 auto;
        justify-content: center;
        padding: 0 20px;

    div {
        margin-left: 10px;
    }
    }
    }

    .container {
        height: 100vh;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;

    .login-form {
        right: 50%;
        top: 50%;
        height: auto;
        transform: translate3d(50%, -50%, 0);
        border-radius: 10px;
        background-color: rgba(255,255,255,.5);
        width: 420px;
        padding: 30px 30px 40px 30px;
        font-size: 14px;
        font-weight: 500;

    .h1 {
        margin: 0;
        text-align: center;
        line-height: 54px;
        font-size: 24px;
        color: #000;
    }

    .rgs-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    .input {
        width: 100%;

    & /deep/ .el-form-item__label {
          line-height: 40px;
          color: rgba(17, 16, 16, 1);
          font-size: #606266;
      }

    & /deep/ .el-input__inner {
          height: 40px;
          color: rgba(23, 24, 26, 1);
          font-size: 14px;
          border-width: 1px;
          border-style: solid;
          border-color: #606266;
          border-radius: 22px;
          background-color: #fff;
      }
    }

    .btn {
        margin: 0 10px;
        width: 88px;
        height: 44px;
        color: #fff;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #409EFF;
        border-radius: 22px;
        background-color: #409EFF;
    }

    .close {
        margin: 0 10px;
        width: 88px;
        height: 44px;
        color: #409EFF;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #409EFF;
        border-radius: 22px;
        background-color: #FFF;
    }

    }
    }
    }
</style>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值