PHP证照信息录入技巧_卒业生学历证实系统vue

本课题研究和开拓毕业生学历证明系统，让安装在打算机上的该系统变成管理职员的小帮手，提高毕业生学历信息处理速率，规范毕业生学历信息处理流程，让管理职员的产出效益更高。
## 1.2 课题意义 传统处理数据，必须是一张张纸，然后处理完毕又是统计在一张张纸上面，不断的重复处理，终极有个结果给最高层作为参考，这个模式在互联网没有涌现之前，是一种常见的事情，信息管理的效率提不上去，人多不一定力量大，由于人多肯定更加花费资源，并且由于人类须要安歇，须要管理，思想会分歧一，会偷

本课题研发的毕业生学历证明系统，便是供应毕业生学历信息处理的办理方案，它可以短韶光处理完信息，并且这些信息都有专门的存储设备，而且数据的备份和迁移都可以设定为无人值守，从人力角度和信息处理角度以及信息安全角度，毕业生学历证明系统是完胜传统纸质操作的。
## 1.3 研究内容 本文对毕业生学历证明系统的设计与实现分成六个章节来解释。

第1章：研究毕业生学历证明系统的背景，以及开拓毕业生学历证明系统的意义。

第2章：对开拓毕业生学历证明系统的环境还有技能进行解释。

第3章：剖析毕业生学历证明系统的可行性，性能，流程以及功能。

第4章：设计毕业生学历证明系统的功能构造，设计数据库E-R图以及对数据表的存储构造进行设计。

第5章：实现毕业生学历证明系统的功能并进行功能界面展示。

第6章：对系统测试进行阐述，以及对本系统部分功能进行检测。
# 2 开拓环境与技能 本章节对开拓毕业生学历证明系统须要搭建的开拓环境，还有毕业生学历证明系统开拓中利用的编程技能等进行阐述。
## 2.1 Java措辞Java措辞是当今为止依然在编程措辞行业具有生命力的常青树之一。
Java措辞最原始的出身，不仅仅是创造者觉得C措辞在编程上面很麻烦，如果只是专注于业务逻辑的处理，会导致忽略了各种指针以及垃圾回收这些操作，导致涌现问题须要办理的韶光每每大于正常编程处理业务逻辑的韶光，这些是非常摧残浪费蹂躏韶光的。
Java措辞的创造者就考虑到如何避免这个问题，把指针处理和垃圾处理全部自动化，虽然这会丢失一些性能，但是打算机硬件在性能上的发展速率是很快的，这些性能是可以忽略考虑的。
并且C措辞是针对硬件开拓的措辞，虽然实行效率高，但是随着硬件的变革或者操作系统的变更，就须要重新编写程序，造成重复劳动，只有办理重复性劳动的措辞才算符合生存规律的措辞。
Java措辞的创造者就针对C措辞的缺陷专门开拓了Java措辞。
让Java措辞不管是在什么样的环境里都是可以运行，由于在Java措辞运行表面套了一个壳，也便是虚拟机，只假如Java虚拟性能安装的电脑都可以运行Java的程序。
## 2.2 MYSQL数据库 MySQL数据库是一种数据存放方面的专业软件，也是传统的行式数据模式，获取一些数据是先一行一行的获取，然后一行一行的显示，与列式数据库不同。
行式数据库紧张是处理最主要的数据逻辑部分，并且必须是有效数据，这样每一处的数据关联都是不可破坏，对数据安全哀求比较严格还是用MySQL数据库比较好。
列式数据库的发明仅仅是由于读取效率高，但是也就仅仅如此罢了。
MySQL虽然比起Oracle或者SQL Server来讲，安装包只是几十兆乃至几百兆，有点小，但是功能并不会弱到哪里，严格遵照SQL标准语法。
MySQL的数据存放形式从大向小的说是数据库最大，然后是表，每个表里面存放数据是有一定的规则的，数据存放是表格形式的，也便是说有横也有竖，横着的为行，一样平常表示一条数据，表与表之间还可以进行关联，进行分表操作，如果一条数据干系项目属性太多，那么可以把有效的干系联系做成关联，可以设定是否唯一。
## 2.3 IDEA开拓工具 IDEA是捷克共和国的Java程序员开拓职员创造的一个开拓软件，刚开始紧张是对付用Eclipse软件他们用得不顺手，以是直接开拓了这款软件。
之以是不顺手缘故原由在于没有代码提升功能，缘故原由是Eclipse只是把代码提示作为一种插件形式的存在，如果有些程序开拓职员不清楚代码提示插件可能会出问题，并且代码提示只是用来作为插件，以是功能上有所欠缺。
IDEA不仅仅代码提示做的很好，在代码重构上面更上为虎傅翼，程序开拓职员可以选择一段代码然后IDEA就会对代码进行分解重构，有效的把代码弄得更够层次感，复用性更高，用着更简洁和方便，大大的减少了代码事情量，提升了代码开拓效率。
当然，IDEA对付利用者这么好，肯定也是有目的的，缘故原由在于插件越多越友好，就须要花费大量的金钱来利用，以是说IDEA利用紧张是看自己喜好。
## 2.4 SSM框架 开拓一个业务逻辑比较大略的运用，采取这几年最广为流传的SSM框架是很得当的。
SSM框架便是Spring MVC框架和Spring框架，以及持久层常用的MyBatis框架。

三个框架有三个不同的浸染。
普通用户一样平常都是操作浏览器进行浏览自己喜好的内容，而显示或者提交，都会被Spring MVC框架进行拦截和处理，进入到更深的一个层次便是掌握层，它会智能的匹配提交的路径，对不同的来源匹配不同的处理逻辑，让不同的代码进行实行，如果只是判断用户输入信息格式的问题是不用传入到后台就可以被前端框架处理的，如果须要与数据库内容进行交互，就会从Java的POJO工具通过MyBatis自动转换数据库对应字段的数据类型，详细是该增编削查还是其他操作，都会通过MyBatis进行处理，处理结果是反馈给掌握层，然后通过掌握层再提交给视图层，反馈到用户希望看到的结果。

本文作者在确定了研究的课题之后，从各大数字图书馆下载文献来阅读，并理解同类型的网站具备的大致功能，然后详细事务详细剖析，得出本系统要研究的详细功能与性能。
虽然剖析系统这一阶段性事情紧张是确定功能，但它却影响着后面系统开拓环节的进展，系统剖析这个环节是不能少的。
## 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)韶光相应哀求：从用户提交操作，到页面反响，中间有个数据处理的问题，须要考虑预测数据量的大小，提前预案分库分表的设计，数据量再大就要考虑增加列式数据库的问题，这些都不是一拍脑门就能决定的，都须要履历和同行业的数据剖析研判，才能符合用户的哀求，毕竟相应韶光太久操作起来也不舒畅。

(4)普适性问题：用户利用该当不须要感知做事真个数据量问题或者相应问题，只须要任意一台电脑，不须要更多的操作，打开浏览器就能用，太多的设置以及操作，不符合普适性操作。

(5)页面设计问题：功能符合哀求之后，肯定是要丰富页面的。
页面设计才是用户永劫光面对的问题，首先考虑数据的整洁性，让页面看起来更加的清爽。
颜色与数据方面，该不同颜色就不同颜色，降落用户永劫光利用涌现的视觉疲倦，让用户利用起来心情不至于太差。

(6)系统的稳定性：正常用户操作系统页面，必须是该提交提交，正常输入符合逻辑，不能随随便便的就出各种问题，导致用户操作怠倦，并且输入的数据和回显的数据符合用户的哀求。
如果正常操作都会涌现问题，那设计便是不稳定的，这一点肯定弗成。
只假如与数据进行交互的系统，都必须稳定。
系统稳定从开拓支配角度上来剖析，可以考虑数据的冗余备份功能，自动值守功能，机房数据同步，机房分开的功能，这些都可以让系统的稳定性得到提升。

系统的性能需求须要对业务很闇练的情形下判断然后剖析，再从系统性能需求来逐条实现，可以让设计的系统有利用代价。
## 3.4 功能需求 毕业生学历证明系统根据利用权限的角度进行功能剖析，并利用用例图来展示各个权限须要操作的功能。

图3.5即为管理员用例图，管理员权限操作的功能包括管理用户的签约单位信息，管理用户的学历信息，管理用户的转接地信息，管理根本数据，个中根本信息管理包括部门管理，职位管理，班级管理，身分担理，学习形式管理，学制管理，专业管理，学历性子管理，转接地类型管理等。

图3.5 管理员用例图

管理员包括的功能模块有：个人中央，根本数据管理，签约单位管理，学历管理，用户管理，转接地管理等功能。

（1）个人中央：紧张是帮助管理员变动密码，查看个人信息并变动。

（2）根本数据管理：紧张包括部门管理，职位管理，班级管理，身分担理，学习形式管理，学制管理，专业管理，学历性子管理，转接地类型管理等功能。
管理员紧张是增编削查部门信息，职位信息，班级信息，身分信息，学习形式信息，学制信息，专业信息，学历性子信息，转接地类型信息等。

（3）签约单位管理：签约单位信息包括单位名称，单位地址，部门，职位，月薪，条约文件，签约韶光，条约开始韶光，条约结束韶光，用户姓名，用户手机号等信息，管理员紧张是增编削查签约单位信息。

（4）学历管理：学历信息包括用户姓名，用户手机号，转接地类型，转接地名称，学历编号，证件照，身份证号，证书编号，认证编号，学历性子，学制，学习形式，毕业院校，专业，班级，入校年月，身分等信息。
管理员紧张是增编削查学历信息。

（5）用户管理：用户信息紧张包括用户手机号，用户性别，用户姓名，电子邮箱，用户头像等信息，管理员紧张是增编削查用户信息。

（6）转接地管理：转接地信息包括转接地地址，转接地类型，转接地名称，转接地编号，录入韶光等信息，管理员紧张是增编削查转接地信息。

（7）管理员登录：实现管理员对毕业生学历证明系统的登录功能。

图3.6即为用户用例图，用户权限操作的功能包括管理签约单位信息，紧张是增编削查签约单位信息，查看学历信息，查看转接地信息等。

图3.6 用户用例图

用户包括的功能模块有个人中央，签约单位管理，学历查看，转接地查看等功能。

（1）个人中央：紧张是帮助用户变动密码，查看个人信息并变动。

（2）-签约单位管理：用户也能增编削查签约单位信息。

（3）学历查看：用户紧张是查询学历，查看学历详细信息。

（4）转接地查看：用户紧张是查询转接地，查看转接地详细信息。

（5）注册登录：实现用户注册毕业生学历证明系统以及登录毕业生学历证明系统的功能。
# 4 系统设计 用户对着浏览器操作，肯定会涌现某些不可预见的问题，但是不代表着系统对付用户在浏览器上的操作不进行处理，以是说，要提前考虑可能会涌现的问题。
## 4.1 系统设计思想 系统设计，肯定要把设计的思想进行统一，只有统一的思想才能辅导程序的开拓，并且可以让浩瀚的程序开拓职员更快速的进入状态，提高开拓速率。
根据当前系统的既定需求，下面将进行本系统设计思想的阐述。

(1)扩展性：开拓任何一个别系的时候不可避免要考虑这个问题。
软件版本的更迭是一种知识，任何一个软件都不会一次性开拓就成永恒，软件是一个不断发展的东西。
以是考虑问题的时候须要对当前问题进行数据上的扩大化，然后进行归纳整理，终极形成具有一定扩展性的程序。
程序的可扩展性一定会影响开拓进度，以是终极须要综合评估程序的可扩展程度，进而对症下药，循序开拓。

(2)实用性：程序设计是一个先居高临下式的设想，然后再详细化，实用性便是详细化的第一个步骤，要充分考虑利用者是不懂程序设计的这一点，利用者只是懂得常规性的上网操作步骤，并不须要对程序进行理解，以是一定要让利用者觉得到便利，觉得到实用性的存在，如果利用者利用程序过程中没创造利用程序的好处，那么程序设计的实用性将大大降落。

(3)安全性：当利用者利用的过程中，会产生大量的干系数据，这些数据必须有安全性的担保，否则当利用者创造数据涌现问题的缘故原由是程序设计问题的时候，将会对程序开拓者失落去信赖，乃至可能会产生大量的用度赔偿问题，这是一个不可避免的问题。
以是安全性关系开拓与利用者双方的经济利益，程序的安全性是一定要担保的。

(4)前辈性：程序设计的前辈性是开拓者进行考虑的，必须要在知足系统功能的条件下，必须要选择好当下最得当的技能。
最得当的技能要从开拓本钱，利用本钱以及掩护本钱里面综合剖析，经由综合剖析后要让技能实现最优解，保持前辈的技能生产力。

(5)掩护性：程序开拓之初就要考虑往后的掩护问题。
掩护是在程序开拓完毕，已经上线可以运作，进入生产试用过程和利用过程中才会创造须要掩护的必要。
要通过各方面降落掩护本钱，不是说掩护的越少就代表程序开拓的越完美，程序既然是人类进行设计制造的，肯定有很多不可避免的问题产生，那么如何掩护好程序的正常运作也是一门很主要的学问。
## 4.2 功能构造设计 图4.1即为设计的管理员功能构造，管理员权限操作的功能包括管理用户的签约单位信息，管理用户的学历信息，管理用户的转接地信息，管理根本数据，个中根本信息管理包括部门管理，职位管理，班级管理，身分担理，学习形式管理，学制管理，专业管理，学历性子管理，转接地类型管理等。

图4.1 管理员功能构造

图4.2即为设计的用户功能构造，用户权限操作的功能包括管理签约单位信息，紧张是增编削查签约单位信息，查看学历信息，查看转接地信息等。

图4.2 用户功能构造 ## 4.3 数据库设计 毕业生学历证明系统运行中产生的数据须要按照提前设置的存储规则进行保存，设计出一个符合项目的最优数据存储格式，由于它能减少用户的等待韶光，还可以对系统的要求在最短韶光内进行相应。
以是，对数据库设计时，须要对功能需求进行详细的拆分，以及对业务状态的细分，然后设计详细的存储规则，担保数据库能正常运作，缩短数据处理韶光，并在一定程度上降落数据冗余，节省存储空间。
### 4.3.1 数据库观点设计 实体-联系图还有一个名称即E-R图，是Entity Relationship Diagram各英文单词首字母的缩写，它这种观点模型常日用于对现实天下进行描述。
同时它还是一种能够直不雅观表达数据中实体，联系，属性的有效手段。
绘制E-R图能够选择的工具也有很多，但是Office Visio 这款软件在E-R图的绘制上一样平常都是作为首选工具，由于它是基于可视化处理，利用它创建E-R图非常大略。
利用基本的E-R图构成元素，比如椭圆，菱形，矩形，还有实线段来表达对应的信息，椭圆代表属性，即实体的特色，矩形代表实体，即数据库中的一个详细数据表，菱形代表实体中相互关系，实线段紧张是完成椭圆，矩形，菱形的连接。

（1）图4.4即为签约单位这个实体所拥有的属性值。

图4.4 签约单位实体属性图

（2）图4.5即为学历这个实体所拥有的属性值。

图4.5 学历实体属性图

（3）图4.6即为用户这个实体所拥有的属性值。

图4.6 用户实体属性图

图4.7 管理员实体属性图

图4.8 实体间关系E-R图 ### 4.3.2 数据库物理设计 本小节紧张任务即是根据上述内容进行数据存储构造的设计，实体的属性就用来表示字段名称，不同的字段表示的数据类型以及取值都不相同，以及该表各个字段是否能够保持空等进行解释，设计完成一张数据表的构造之后，在保存时同样要命名，只管即便选择英文名称进行命名并保存，还不随意马虎导致系统出错。
接下来就对设计的表进行大略解释。

表4.1 签约单位表

字段

注释

类型

空

id (主键)

主键

int(11)

否

yonghu_id

用户

int(11)

是

qianyuedanwei_uuid_number

签约编号

varchar(200)

是

qianyuedanwei_name

单位名称

varchar(200)

是

qianyuedanwei_address

单位地址

varchar(200)

是

qianyuedanwei_bumen_types

部门

int(11)

是

qianyuedanwei_zhiwei_types

职位

int(11)

是

qianyuedanwei_yuexin

月薪

decimal(10,2)

是

qianyuedanwei_file

条约文件

varchar(200)

是

qianyue_time

签约韶光

timestamp

是

qianyue_kaishi_time

条约开始韶光

timestamp

是

qianyue_jieshu_time

条约结束韶光

timestamp

是

qianyuedanwei_content

签约备注

text

是

insert_time

录入韶光

timestamp

是

create_time

创建韶光

timestamp

是

表4.2 管理员表

字段

注释

类型

空

id (主键)

主键

bigint(20)

否

username

用户名

varchar(100)

否

password

密码

varchar(100)

否

role

角色

varchar(100)

是

addtime

新增韶光

timestamp

否

表4.3 学历表

字段

注释

类型

空

id (主键)

主键

int(11)

否

yonghu_id

用户

int(11)

是

zhuanjiedi_id

转接地

int(11)

是

xueli_uuid_number

学历编号

varchar(200)

是

zhengjian_photo

证件照

varchar(200)

是

xueli_name

姓名

varchar(200)

是

xueli_id_number

身份证号

varchar(200)

是

xueli_zhengshu_number

证书编号

varchar(200)

是

xueli_renzhengbianhao_number

认证编号

varchar(200)

是

xuelixingbie_types

性别

int(11)

是

xueli_chushengnianyue

出生年月

varchar(200)

是

xueli_guoji

国籍

varchar(200)

是

xueli_minzu

民族

varchar(200)

是

xuelixingzhi_types

学历性子

int(11)

是

xueli_xuezhi_types

学制

int(11)

是

xueli_xuexixingshi_types

学习形式

int(11)

是

xueli_biyeyuanxiao

毕业院校

varchar(200)

是

xueli_zhuanye_types

专业

int(11)

是

xueli_banji_types

班级

int(11)

是

xueli_ruxiaonianyue

入校年月

varchar(200)

是

xueli_biyenianyue

毕业年月

varchar(200)

是

xueli_chengfen_types

身分

int(11)

是

xueli_lianxifangshi_phone

联系办法

varchar(200)

是

xueli_yesno_types

审核状态

int(11)

是

xueli_yesno_text

审核见地

text

是

xueli_delete

逻辑删除

int(11)

是

insert_time

录入韶光

timestamp

是

create_time

创建韶光

timestamp

是

表4.4 用户表

字段

注释

类型

空

id (主键)

主键

int(11)

否

username

账户

varchar(200)

是

password

密码

varchar(200)

是

yonghu_name

用户姓名

varchar(200)

是

yonghu_phone

用户手机号

varchar(200)

是

yonghu_id_number

用户身份证号

varchar(200)

是

yonghu_photo

用户头像

varchar(200)

是

sex_types

性别

int(11)

是

yonghu_email

电子邮箱

varchar(200)

是

create_time

创建韶光

timestamp

是

表4.5 转接地表

字段

注释

类型

空

id (主键)

主键

int(11)

否

zhuanjiedi_uuid_number

转接地编号

varchar(200)

是

zhuanjiedi_name

转接地名称

varchar(200)

是

zhuanjiedi_address

转接地地址

varchar(200)

是

zhuanjiedi_types

转接地类型

int(11)

是

zhuanjiedi_erji_types

二级类型

int(11)

是

zhuanjiedi_content

转接地详情

text

是

shangdian_shouyin_content

签约备注

text

是

insert_time

录入韶光

timestamp

是

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.1.6 学历性子管理 图5.6 即为编码实现的学历性子管理界面，管理员在学历性子管理界面中新增学历性子信息，学历性子信息包括学历性子编码，学历性子名称信息，管理员可以利用修正功能来实现对登记有误的学历性子信息的变动，利用删除功能来删除须要删除的学历性子信息，同时可以在查询框中编辑学历性子名称来实现对学历性子信息的查询。

图5.6 学历性子管理界面 ### 5.1.7 转接地类型管理 图5.7 即为编码实现的转接地类型管理界面，管理员在转接地类型管理界面中新增转接地类型信息，转接地类型信息包括转接地类型编码，转接地类型名称信息，管理员可以利用修正功能来实现对登记有误的转接地类型信息的变动，利用删除功能来删除须要删除的转接地类型信息，同时可以在查询框中编辑转接地类型名称来实现对转接地类型信息的查询。

图5.7 转接地类型管理界面 ## 5.2 用户功能实现 ### 5.2.1 签约单位管理 图5.8 即为编码实现的签约单位管理界面，用户在签约单位管理界面中可以新增签约单位信息，可以查询签约单位信息，可以变动登记缺点的签约单位信息，同时可以对须要删除的签约单位信息进行删除等。
签约单位信息紧张包括单位名称，单位地址，部门，职位，月薪，条约文件，签约韶光，条约开始韶光，条约结束韶光，用户姓名，用户手机号等信息。

图5.8 签约单位管理界面 ### 5.2.2 学历查看 图5.9 即为编码实现的学历查看界面，用户在学历查看界面中紧张是对自己的学历信息进行查看。
学历信息包括用户姓名，用户手机号，转接地类型，转接地名称，学历编号，证件照，身份证号，证书编号，学历性子，学制，学习形式，毕业院校，专业，班级，入校年月，身分等信息。

图5.9 学历查看界面 ### 5.2.3 转接地查看 图5.10 即为编码实现的转接地查看界面，用户在转接地查看界面中可以查看转接地详细信息，可以查询转接地信息。
转接地信息包括转接地地址，转接地类型，转接地名称，转接地编号，录入韶光等信息。

图5.10 转接地查看界面 ### 5.2.4 个人信息 图5.11 即为编码实现的个人信息界面，用户在个人信息界面中变动头像，变动电子邮箱等信息，变动后的信息须要及时保存。

图5.11 个人信息界面

package com.controller;import com.alibaba.fastjson.JSONObject;import com.baomidou.mybatisplus.mapper.EntityWrapper;import com.baomidou.mybatisplus.mapper.Wrapper;import com.entity.ZhuanjiediEntity;import com.entity.view.ZhuanjiediView;import com.service.DictionaryService;import com.service.TokenService;import com.service.YonghuService;import com.service.ZhuanjiediService;import com.utils.PageUtils;import com.utils.PoiUtil;import com.utils.R;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.BeanUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.;import javax.servlet.http.HttpServletRequest;import java.io.File;import java.net.URL;import java.text.SimpleDateFormat;import java.util.;/ 转接地 后端接口 @author @email/@RestController@Controller@RequestMapping("/zhuanjiedi")public class ZhuanjiediController { private static final Logger logger = LoggerFactory.getLogger(ZhuanjiediController.class); @Autowired private ZhuanjiediService zhuanjiediService; @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")); if(params.get("orderBy")==null || params.get("orderBy")==""){ params.put("orderBy","id"); } PageUtils page = zhuanjiediService.queryPage(params); //字典表数据转换 List<ZhuanjiediView> list =(List<ZhuanjiediView>)page.getList(); for(ZhuanjiediView 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); ZhuanjiediEntity zhuanjiedi = zhuanjiediService.selectById(id); if(zhuanjiedi !=null){ //entity转view ZhuanjiediView view = new ZhuanjiediView(); BeanUtils.copyProperties( zhuanjiedi , view );//把实体数据重构到view中 //修正对应字典表字段 dictionaryService.dictionaryConvert(view, request); return R.ok().put("data", view); }else { return R.error(511,"查不到数据"); } } / 后端保存 / @RequestMapping("/save") public R save(@RequestBody ZhuanjiediEntity zhuanjiedi, HttpServletRequest request){ logger.debug("save方法:,,Controller:{},,zhuanjiedi:{}",this.getClass().getName(),zhuanjiedi.toString()); String role = String.valueOf(request.getSession().getAttribute("role")); if(false) return R.error(511,"永久不会进入"); Wrapper<ZhuanjiediEntity> queryWrapper = new EntityWrapper<ZhuanjiediEntity>() .eq("zhuanjiedi_uuid_number", zhuanjiedi.getZhuanjiediUuidNumber()) .eq("zhuanjiedi_name", zhuanjiedi.getZhuanjiediName()) .eq("zhuanjiedi_address", zhuanjiedi.getZhuanjiediAddress()) .eq("zhuanjiedi_types", zhuanjiedi.getZhuanjiediTypes()) .eq("zhuanjiedi_erji_types", zhuanjiedi.getZhuanjiediErjiTypes()) ; logger.info("sql语句:"+queryWrapper.getSqlSegment()); ZhuanjiediEntity zhuanjiediEntity = zhuanjiediService.selectOne(queryWrapper); if(zhuanjiediEntity==null){ zhuanjiedi.setInsertTime(new Date()); zhuanjiedi.setCreateTime(new Date()); zhuanjiediService.insert(zhuanjiedi); return R.ok(); }else { return R.error(511,"表中有相同数据"); } } / 后端修正 / @RequestMapping("/update") public R update(@RequestBody ZhuanjiediEntity zhuanjiedi, HttpServletRequest request){ logger.debug("update方法:,,Controller:{},,zhuanjiedi:{}",this.getClass().getName(),zhuanjiedi.toString()); String role = String.valueOf(request.getSession().getAttribute("role"));// if(false)// return R.error(511,"永久不会进入"); //根据字段查询是否有相同数据 Wrapper<ZhuanjiediEntity> queryWrapper = new EntityWrapper<ZhuanjiediEntity>() .notIn("id",zhuanjiedi.getId()) .andNew() .eq("zhuanjiedi_uuid_number", zhuanjiedi.getZhuanjiediUuidNumber()) .eq("zhuanjiedi_name", zhuanjiedi.getZhuanjiediName()) .eq("zhuanjiedi_address", zhuanjiedi.getZhuanjiediAddress()) .eq("zhuanjiedi_types", zhuanjiedi.getZhuanjiediTypes()) .eq("zhuanjiedi_erji_types", zhuanjiedi.getZhuanjiediErjiTypes()) ; logger.info("sql语句:"+queryWrapper.getSqlSegment()); ZhuanjiediEntity zhuanjiediEntity = zhuanjiediService.selectOne(queryWrapper); if(zhuanjiediEntity==null){ zhuanjiediService.updateById(zhuanjiedi);//根据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()); zhuanjiediService.deleteBatchIds(Arrays.asList(ids)); return R.ok(); } / 批量上传 / @RequestMapping("/batchInsert") public R save(String fileName, HttpServletRequest request){ logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName); Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); try { List<ZhuanjiediEntity> zhuanjiediList = new ArrayList<>();//上传的东西 Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段 Date date = new Date(); int lastIndexOf = fileName.lastIndexOf("."); if(lastIndexOf == -1){ return R.error(511,"该文件没有后缀"); }else{ String suffix = fileName.substring(lastIndexOf); if(!".xls".equals(suffix)){ return R.error(511,"只支持后缀为xls的excel文件"); }else{ URL resource = this.getClass().getClassLoader().getResource("../../upload/" + fileName);//获取文件路径 File file = new File(resource.getFile()); if(!file.exists()){ return R.error(511,"找不到上传文件，请联系管理员"); }else{ List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件 dataList.remove(0);//删除第一行，由于第一行是提示 for(List<String> data:dataList){ //循环 ZhuanjiediEntity zhuanjiediEntity = new ZhuanjiediEntity();// zhuanjiediEntity.setZhuanjiediUuidNumber(data.get(0)); //转接地编号 要改的// zhuanjiediEntity.setZhuanjiediName(data.get(0)); //转接地名称 要改的// zhuanjiediEntity.setZhuanjiediAddress(data.get(0)); //转接地地址 要改的// zhuanjiediEntity.setZhuanjiediTypes(Integer.valueOf(data.get(0))); //转接地类型 要改的// zhuanjiediEntity.setZhuanjiediErjiTypes(Integer.valueOf(data.get(0))); //二级类型 要改的// zhuanjiediEntity.setZhuanjiediContent("");//详情和图片// zhuanjiediEntity.setShangdianShouyinContent("");//详情和图片// zhuanjiediEntity.setInsertTime(date);//韶光// zhuanjiediEntity.setCreateTime(date);//韶光 zhuanjiediList.add(zhuanjiediEntity); //把要查询是否重复的字段放入map中 //转接地编号 if(seachFields.containsKey("zhuanjiediUuidNumber")){ List<String> zhuanjiediUuidNumber = seachFields.get("zhuanjiediUuidNumber"); zhuanjiediUuidNumber.add(data.get(0));//要改的 }else{ List<String> zhuanjiediUuidNumber = new ArrayList<>(); zhuanjiediUuidNumber.add(data.get(0));//要改的 seachFields.put("zhuanjiediUuidNumber",zhuanjiediUuidNumber); } } //查询是否重复 //转接地编号 List<ZhuanjiediEntity> zhuanjiediEntities_zhuanjiediUuidNumber = zhuanjiediService.selectList(new EntityWrapper<ZhuanjiediEntity>().in("zhuanjiedi_uuid_number", seachFields.get("zhuanjiediUuidNumber"))); if(zhuanjiediEntities_zhuanjiediUuidNumber.size() >0 ){ ArrayList<String> repeatFields = new ArrayList<>(); for(ZhuanjiediEntity s:zhuanjiediEntities_zhuanjiediUuidNumber){ repeatFields.add(s.getZhuanjiediUuidNumber()); } return R.error(511,"数据库的该表中的 [转接地编号] 字段已经存在 存在数据为:"+repeatFields.toString()); } zhuanjiediService.insertBatch(zhuanjiediList); return R.ok(); } } } }catch (Exception e){ e.printStackTrace(); return R.error(511,"批量插入数据非常，请联系管理员"); } }}PoiUtil.java

package com.utils;import org.apache.commons.io.FileUtils;import org.apache.poi.hssf.usermodel.HSSFCell;import org.apache.poi.hssf.usermodel.HSSFRow;import org.apache.poi.hssf.usermodel.HSSFSheet;import org.apache.poi.hssf.usermodel.HSSFWorkbook;import org.apache.poi.ss.usermodel.Cell;import java.io.File;import java.io.FileOutputStream;import java.util.ArrayList;import java.util.List;/ 文件导入到处 /public class PoiUtil { / 导入 @param url @return @throws Exception / public static List<List<String>> poiImport(String url) throws Exception { List<List<String>> list = new ArrayList<>(); // 创建Excel 读取文件内容 HSSFWorkbook workbook = new HSSFWorkbook(FileUtils.openInputStream(new File(url))); / 第一种办法读取Sheet页 /// HSSFSheet sheet = workbook.getSheet("Sheet0"); / 第二种办法读取Sheet页 / HSSFSheet sheet = workbook.getSheetAt(0);//获取事情表 for (int i = 0; i < sheet.getLastRowNum()+1; i++) { HSSFRow row = sheet.getRow(i);//获取行 List<String> rowlist = new ArrayList<>();//行数据 for (int j = 0; j < row.getLastCellNum(); j++) { HSSFCell cell = row.getCell(j); cell.setCellType(Cell.CELL_TYPE_STRING); String value = cell.getStringCellValue(); rowlist.add(value);//行中数据添加到行中 } list.add(rowlist);//将行数据添加到list中 } return list; } // 导出 public static void poiExport(List<List<String>> list, String url) throws Exception { //创建Excel事情薄 HSSFWorkbook workbook = new HSSFWorkbook(); //创建一个事情表shheet HSSFSheet sheet = workbook.createSheet(); for (int i = 0; i < list.size(); i++) { HSSFRow row = sheet.createRow(i); List<String> dataList = list.get(i); for (int j = 0; j < dataList.size(); j++) { HSSFCell cell = row.createCell(j); cell.setCellValue(dataList.get(j)); } } FileOutputStream stream = FileUtils.openOutputStream(new File(url)); workbook.write(stream); stream.close(); } public static void main(String[] args) { try { //导入 List<List<String>> lists = PoiUtil.poiImport("C:/Users/Administrator/Desktop/事情1.xls"); System.out.println(); //导出 PoiUtil.poiExport(lists, "C:/Users/Administrator/Desktop/事情1.xls");//// List<List<String>> list = new ArrayList<>();// ArrayList<String> dataList = new ArrayList<>();// dataList.add("标题1");// dataList.add("标题2");// dataList.add("标题3");// list.add(dataList);// // 追加数据// for (int i = 1; i < 10; i++) {// 这里的int 起始是1 也便是第二行开始// ArrayList<String> dataList111 = new ArrayList<>();// dataList111.add("内容" + i);// dataList111.add("内容1111111121222222222333333333377777777411111111477777777" + i);// dataList111.add("内容" + i);// list.add(dataList111);// }// PoiUtil.poiExport(list, "C:/Users/Administrator/Desktop/事情1.xls"); } catch (Exception e) { e.printStackTrace(); } }}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")@RestControllerpublic 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(); }}list.vue

<template> <div class="main-content"> <!-- 列表页 --> <div v-if="showFlag"> <el-form :inline="true" :model="searchForm" class="form-content"> <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}"> <el-form-item label="性别类型"> <el-input prefix-icon="el-icon-search" v-model="searchForm.indexNameSearch" placeholder="性别类型" clearable></el-input> </el-form-item> <el-form-item> <el-button icon="el-icon-search" type="success" @click="search()">查询</el-button> </el-form-item> </el-row> <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}"> <el-form-item> <el-button v-if="isAuth('dictionarySex','新增')" type="success" icon="el-icon-plus" @click="addOrUpdateHandler()" >新增</el-button> <el-button v-if="isAuth('dictionarySex','删除')" :disabled="dataListSelections.length <= 0" type="danger" icon="el-icon-delete" @click="deleteHandler()" >删除</el-button> </el-form-item> </el-row> </el-form> <div class="table-content"> <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader" :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle" :border="contents.tableBorder" :fit="contents.tableFit" :stripe="contents.tableStripe" :row-style="rowStyle" :cell-style="cellStyle" :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}" v-if="isAuth('dictionarySex','查看')" :data="dataList" v-loading="dataListLoading" @selection-change="selectionChangeHandler"> <el-table-column v-if="contents.tableSelection" type="selection" header-align="center" align="center" width="50"> </el-table-column> <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" /> <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="codeIndex" header-align="center" label="性别类型编码"> <template slot-scope="scope"> {{scope.row.codeIndex}} </template> </el-table-column> <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="indexName" header-align="center" label="性别类型名称"> <template slot-scope="scope"> {{scope.row.indexName}} </template> </el-table-column> <!--<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="beizhu" header-align="center" label="备注"> <template slot-scope="scope"> {{scope.row.beizhu}} </template> </el-table-column>--> <el-table-column width="300" :align="contents.tableAlign" header-align="center" label="操作"> <template slot-scope="scope"> <el-button v-if="isAuth('dictionarySex','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button> <el-button v-if="isAuth('dictionarySex','修正')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修正</el-button> <el-button v-if="isAuth('dictionarySex','删除')" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination clsss="pages" :layout="layouts" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="Number(contents.pageEachNum)" :total="totalPage" :small="contents.pageStyle" class="pagination-content" :background="contents.pageBtnBG" :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}" ></el-pagination> </div> </div> <!-- 添加/修正页面 将父组件的search方法通报给子组件--> <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update> </div></template><script> import AddOrUpdate from "./add-or-update"; import styleJs from "../../../utils/style.js"; export default { data() { return { searchForm: { key: "" }, form:{}, dataList: [], pageIndex: 1, pageSize: 10, totalPage: 0, dataListLoading: false, dataListSelections: [], showFlag: true, sfshVisiable: false, shForm: {}, chartVisiable: false, addOrUpdateFlag:false, contents:null, layouts: '', }; }, created() { this.contents = styleJs.listStyle(); this.init(); this.getDataList(); this.contentStyleChange() }, mounted() { }, filters: { htmlfilter: function (val) { return val.replace(/<[^>]>/g).replace(/undefined/g,''); } }, components: { AddOrUpdate, }, methods: { contentStyleChange() { this.contentSearchStyleChange() this.contentBtnAdAllStyleChange() this.contentSearchBtnStyleChange() this.contentTableBtnStyleChange() this.contentPageStyleChange() }, contentSearchStyleChange() { this.$nextTick(()=>{ document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{ let textAlign = 'left' if(this.contents.inputFontPosition == 2) textAlign = 'center' if(this.contents.inputFontPosition == 3) textAlign = 'right' el.style.textAlign = textAlign el.style.height = this.contents.inputHeight el.style.lineHeight = this.contents.inputHeight el.style.color = this.contents.inputFontColor el.style.fontSize = this.contents.inputFontSize el.style.borderWidth = this.contents.inputBorderWidth el.style.borderStyle = this.contents.inputBorderStyle el.style.borderColor = this.contents.inputBorderColor el.style.borderRadius = this.contents.inputBorderRadius el.style.backgroundColor = this.contents.inputBgColor }) if(this.contents.inputTitle) { document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{ el.style.color = this.contents.inputTitleColor el.style.fontSize = this.contents.inputTitleSize el.style.lineHeight = this.contents.inputHeight }) } setTimeout(()=>{ document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{ el.style.color = this.contents.inputIconColor el.style.lineHeight = this.contents.inputHeight }) document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{ el.style.color = this.contents.inputIconColor el.style.lineHeight = this.contents.inputHeight }) document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{ el.style.lineHeight = this.contents.inputHeight }) },10) }) }, // 搜索按钮 contentSearchBtnStyleChange() { this.$nextTick(()=>{ document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{ el.style.height = this.contents.searchBtnHeight el.style.color = this.contents.searchBtnFontColor el.style.fontSize = this.contents.searchBtnFontSize el.style.borderWidth = this.contents.searchBtnBorderWidth el.style.borderStyle = this.contents.searchBtnBorderStyle el.style.borderColor = this.contents.searchBtnBorderColor el.style.borderRadius = this.contents.searchBtnBorderRadius el.style.backgroundColor = this.contents.searchBtnBgColor }) }) }, // 新增、批量删除 contentBtnAdAllStyleChange() { this.$nextTick(()=>{ document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{ el.style.height = this.contents.btnAdAllHeight el.style.color = this.contents.btnAdAllAddFontColor el.style.fontSize = this.contents.btnAdAllFontSize el.style.borderWidth = this.contents.btnAdAllBorderWidth el.style.borderStyle = this.contents.btnAdAllBorderStyle el.style.borderColor = this.contents.btnAdAllBorderColor el.style.borderRadius = this.contents.btnAdAllBorderRadius el.style.backgroundColor = this.contents.btnAdAllAddBgColor }) document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{ el.style.height = this.contents.btnAdAllHeight el.style.color = this.contents.btnAdAllDelFontColor el.style.fontSize = this.contents.btnAdAllFontSize el.style.borderWidth = this.contents.btnAdAllBorderWidth el.style.borderStyle = this.contents.btnAdAllBorderStyle el.style.borderColor = this.contents.btnAdAllBorderColor el.style.borderRadius = this.contents.btnAdAllBorderRadius el.style.backgroundColor = this.contents.btnAdAllDelBgColor }) document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{ el.style.height = this.contents.btnAdAllHeight el.style.color = this.contents.btnAdAllWarnFontColor el.style.fontSize = this.contents.btnAdAllFontSize el.style.borderWidth = this.contents.btnAdAllBorderWidth el.style.borderStyle = this.contents.btnAdAllBorderStyle el.style.borderColor = this.contents.btnAdAllBorderColor el.style.borderRadius = this.contents.btnAdAllBorderRadius el.style.backgroundColor = this.contents.btnAdAllWarnBgColor }) }) }, // 表格 rowStyle({ row, rowIndex}) { if (rowIndex % 2 == 1) { if(this.contents.tableStripe) { return {color:this.contents.tableStripeFontColor} } } else { return '' } }, cellStyle({ row, rowIndex}){ if (rowIndex % 2 == 1) { if(this.contents.tableStripe) { return {backgroundColor:this.contents.tableStripeBgColor} } } else { return '' } }, headerRowStyle({ row, rowIndex}){ return {color: this.contents.tableHeaderFontColor} }, headerCellStyle({ row, rowIndex}){ return {backgroundColor: this.contents.tableHeaderBgColor} }, // 表格按钮 contentTableBtnStyleChange(){ }, // 分页 contentPageStyleChange(){ let arr = [] if(this.contents.pageTotal) arr.push('total') if(this.contents.pageSizes) arr.push('sizes') if(this.contents.pagePrevNext){ arr.push('prev') if(this.contents.pagePager) arr.push('pager') arr.push('next') } if(this.contents.pageJumper) arr.push('jumper') this.layouts = arr.join() this.contents.pageEachNum = 10 }, init () { }, search() { this.pageIndex = 1; this.getDataList(); }, // 获取数据列表 getDataList() { this.dataListLoading = true; let params = { page: this.pageIndex, limit: this.pageSize, sort: 'id', } if(this.searchForm.indexNameSearch!='' && this.searchForm.indexNameSearch!=undefined){ params['indexName'] = this.searchForm.indexNameSearch } //本表的 params['dicCode'] = "sex_types"//编码名字 params['dicName'] = "性别类型",//汉字名字 this.$http({ url: "dictionary/page", method: "get", params: params }).then(({ data }) => { if (data && data.code === 0) { this.dataList = data.data.list; this.totalPage = data.data.total; } else { this.dataList = []; this.totalPage = 0; } this.dataListLoading = false; }); }, // 每页数 sizeChangeHandle(val) { this.pageSize = val; this.pageIndex = 1; this.getDataList(); }, // 当前页 currentChangeHandle(val) { this.pageIndex = val; this.getDataList(); }, // 多选 selectionChangeHandler(val) { this.dataListSelections = val; }, // 添加/修正 addOrUpdateHandler(id,type) { this.showFlag = false; this.addOrUpdateFlag = true; this.crossAddOrUpdateFlag = false; if(type!='info'){ type = 'else'; } this.$nextTick(() => { this.$refs.addOrUpdate.init(id,type); }); }, // 删除 deleteHandler(id) { var ids = id ? [Number(id)] : this.dataListSelections.map(item => { return Number(item.id); }); this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.$http({ url: "dictionary/delete", method: "post", data: ids }).then(({ data }) => { if (data && data.code === 0) { this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => { this.search(); } }); } else { this.$message.error(data.msg); } }); }); }, } };</script><style lang="scss" scoped>.slt { margin: 0 !important; display: flex; } .ad { margin: 0 !important; display: flex; } .pages { & /deep/ el-pagination__sizes{ & /deep/ el-input__inner { height: 22px; line-height: 22px; } } } .el-button+.el-button { margin:0; } .tables { & /deep/ .el-button--success { height: 30px; color: rgba(88, 179, 81, 1); font-size: 12px; border-width: 1px; border-style: none none solid none; border-color: rgba(88, 179, 81, 1); border-radius: 0px; background-color: #fff; } & /deep/ .el-button--primary { height: 30px; color: rgba(88, 179, 81, 1); font-size: 12px; border-width: 1px; border-style: none none solid none; border-color: rgba(88, 179, 81, 1); border-radius: 0px; background-color: #fff; } & /deep/ .el-button--danger { height: 30px; color: rgba(88, 179, 81, 1); font-size: 12px; border-width: 1px; border-style: none none solid none; border-color: rgba(88, 179, 81, 1); border-radius: 0px; background-color: #fff; } & /deep/ .el-button { margin: 4px; } }</style>声明

本博客适用于广泛的学术和教诲用场，包括但不限于个人学习、开拓设计，产品设计。
仅供学习参考，旨在为读者供应深入理解和学术研究的材料。

java系统设计，毕设辅导