基于 html5 的图书管理体系--论文pf
@TOCspringboot532基于 html5 的图书管理体系--论文pf
第1章 绪论
1.1选题动因
当前的网络技术，软件技术等都具备成熟的理论底子，市场上也出现各种技术开辟的软件，这些软件都被用于各个领域，包括生活和工作的领域。随着电脑和条记本的广泛运用，以及各种计算机硬件的美满和升级，市面上的电脑和条记本的性能都得到提升，可以支持的软件也渐渐增多，因此，在计算机上安装软件来发挥其高效地信息处理的作用，则很受人们的青睐。对于图书管理体系信息来讲，通过手工情势处理，在面临庞大的信息数量时，就显得不适宜了，起首需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，为相识决上述问题，有必要建立图书管理体系，来规范图书管理体系信息管理流程，让管理工作可以体系化和程序化，同时，图书管理体系的有效运用可以资助管理人员准确快速地处理信息。
1.2目的和意义
图书管理体系可以对图书管理体系信息进行会合管理，可以真正避免传统管理的缺陷。图书管理体系是一款运用软件开辟技术设计实现的应用体系，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，图书管理体系都可以轻松应对。以是，图书管理体系的运用是让图书管理体系信息管理升级的最好方式。它可以实现信息处理的便利化要求，还可以规范信息处理的流程，让事务处理成为管理人员手中的一件简单事，而不是之前手工处理时的困难事。只管图书管理体系具备较美满的功能，但是也需要管理人员使用闲暇时间提升自身素质以及个人能力，在操纵图书管理体系时可以最大化运用图书管理体系提供的功能，让体系在满意高效率处理数据的同时，也能始终稳固运行，还可以确保数据的可靠性与数据处理的质量。
1.3论文布局安排
本文统共分为6个章节，每个章节都对本体系形貌了不同的内容。接下来就对本文的研究内容进行叙述。
第1章：这个章节是论文的绪论部门。从选题的配景和意义的角度叙述即将开辟的体系。
第2章：这个章节是技术介绍部门。从本体系需要运用的技术知识的角度叙述体系。
第3章：这个章节是体系分析部门。从分析体系可行性，分析体系功能和性能等角度叙述体系。
第4章：这个章节是体系设计部门。从体系功能布局的角度和数据库设计的角度叙述体系。
第5章：这个章节是体系实现部门。从体系功能模块运行效果的角度叙述体系。
第6章：这个章节是体系测试部门。从测试体系功能，体系测试方法的角度叙述体系。
第2章 开辟环境与技术
开辟图书管理体系需要搭建编程的环境，也需要通过观察，对各个相关技术进行分析，选取适合本体系开辟的技术与工具。
2.1 MYSQL数据库
题目确定了是一个应用程序之后，就开始按部就班的进行设计与分析。本课题是需要数据库作为数据管理工具以及数据载体，从程序功能分析到数据分析，选择合适的关系型数据库是当下所选择的重要环节。关系型数据库可选择余地不多，本身甲骨文公司的两个，微软的两个，IBM的一个，也就是这五个了，功能和差异都不影响数据库的选择，由于这些数据库都能实现应用程序功能所需的，那么只能从其他的方面来综合考虑哪种数据库更合适。作为开辟使用的电脑硬件上来讲，照旧大一的时间买的，当初并没有太多的钱买好一点的电脑，只是作为学习用的，以是经过这么几年的使用，电脑老化了，性能降落也比较厉害，还有好多需要用的学习资料，本身面临毕业，选择学校机房也不是一个长久的计划，选择一个数据库适合自己的老旧条记本电脑作为学习开辟当前的应用，是最重要的。综合考虑的结果就是选用MySQL数据库作为应用数据库，由于MySQL数据库体积小，占用内存小，不影响电脑上其他用的软件运行，而且不需要由于安装维护MySQL数据库而重装体系，终极选择的数据库就是MySQL数据库。
2.2 Tomcat 介绍
刚开始学习Java语言的时间，是不知道还有Tomcat这些东西的，各种语法各种输出在控制台进行输出结果，当Java网站开辟的时间就不可避免的学习到了Tomcat服务器。Tomcat准确的来讲不算是服务器，可以说是vue引擎或者一个容器，这些都是学术上或者原理上都比较贴切的，但是实际工作中Tomcat就是作为一个web服务器来用的，由于可以实现网站的发布和运行。由于工作原理的原因，Tomcat一般作为中小型企业和并发量并不突出的一种轻量级的服务器存在的，比如某些行业的应用体系，本身客户端就不多，需要的连接也不多，一般都用Tomcat的。Tomcat里面可以配置多个网站，配置文件后缀是config的文档，雷同于XML的布局，比较清晰明确。每当Java发布新的版本的时间，Tomcat也会为了匹配Java的版本进行升级，目前Tomcat版本已经到版本10了。Tomcat标识是一只有点发黄的小猫咪，当Tomcat配置成功一般测试的时间能看到这个小猫咪就算是成功的，才气进行下一步的配置。Tomcat服务器在Java网站开辟中照旧挺合适的。
2.3 vue技术
vue技术可以让初学者尽快上手进行编写动态网站，不需要变成高级的Java编程人员才可以书写代码，从学习的效率还有编写的效率上都有很大的提升。让着重于网页开辟者与着重于背景逻辑开辟进行分离合作开辟变成了一种可能，降低了学习本钱，不需要考虑程序运行解释编译阶段的话，vue网页本身就可以理解成一个平凡的Servlet。vue布局上面，主要分为两个方面，一个是专属的vue引擎，通俗的讲就是可以实现vue编译后运行解释的一个东西，另一个就是web服务器。vue运行编译需要vue引擎和web服务器进行配合以及相互协作，当然他们的分工也是很明确的，如许才可以真正的运行起来。vue容器和引擎有Tomcat，这个Tomcat其实也还有Apache静态解释代码的部门，虽然看起来运行效果差不多，但是其实是两个截然不同的工具，在文件体系里目次也是不一样的，当然如果有特别需求也是可以进行特别的配置的，配置上面照旧比较灵活的。虽然Tomcat摆设了网站之后就可以运行网页让客户访问，但是Tomcat也只是vue引擎而非web服务器。比如JRUN和Resin都算是vue引擎，而web服务器的职责比较单一，就是处理客户端请求还有返回给客户显示请求处理后的数据而已。vue引擎则可以运行纯HTML编写的网站，也可以运行vue编写的动态网站，在效率上也只是比单纯的web服务器而已，但是从纯web服务器无法运行动态网站上来讲，vue引擎在功能上照旧强大了很多，提升一点点效率反而算不了什么，对于必须实现的功能这些要素上，选择了vue技术。
2.4 SpringBoot框架
java不停被人诟病的一点就是痴肥、麻烦。当我们还在辛苦的搭建项目时，可能Python程序员已经把功能写好了，究其原因注意是两点：复杂的配置，项目各种配置其实是开辟时的消耗， 由于在思索 Spring 特性配置和解决业务问题之间需要进行思维切换，以是写配置挤占了写应用程序逻辑的时间。一个是混乱的依赖管理。项目的依赖管理也是件吃力不讨好的事变。决定项目里要用哪些库就已经够让人头痛的了，你还要知道这些库的哪个版本和其他库不会有冲突，这困难实在太棘手。而且，依赖管理也是一种消耗，添加依赖不是写应用程序代码。一旦选错了依赖的版本，随之而来的不兼容问题毫无疑问会是生产力杀手。而SpringBoot让这一切成为过去！Spring Boot 简化了基于Spring的应用开辟，只需要“run”就能创建一个独立的、生产级别的Spring应用。Spring Boot为Spring平台及第三方库提供开箱即用的设置（提供默认设置，存放默认配置的包就是启动器），如许我们就可以简单的开始。多数Spring Boot应用只需要很少的Spring配置。我们可以使用SpringBoot创建java应用，并使用java –jar 启动它，就能得到一个生产级别的web工程。
第3章 体系分析
用户的需求以及与本体系相似的在市场上存在的别的体系可以作为体系分析中参考的资料，分析人员可以根据这些信息确定出本体系具备的功能，分析出本体系具备的性能等内容。
3.1可行性分析
只管体系是根据用户的要求进行制作，但是在确定制作前，有必要分析其可行性。
3.1.1操纵可行性分析
开辟本体系需要用到的工具，本人都比较熟悉，因此可以使用这些工具，完备开辟图书管理体系。此外，图书管理体系在功能上，基本都是完成信息的处理，涵盖了添加，修改，删除等，而且操纵者面临的都是各个功能操纵界面，并不是编码背景，以是一般的使用者都可以通过操纵界面轻松完成信息的加工处理。因此，本体系操纵可行。
3.1.2经济可行性分析
开辟本体系，并没有投入资金购买开辟工具。由于使用的开辟工具都是事先在百度上下载安装在本人电脑上的，随着软件开辟技术的成熟，体系功能实现的编码也都模块化，很容易通过各大软件开辟类网站获取，并通过小部门代码改动，运用到本体系中，这些都不需要资金投入，同时，本体系开辟的布局选用B/S，本钱可以忽略不计。
3.1.3技术可行性分析
本体系需要的软件包括Eclipse，Tomcat，Mysql等，这些工具都接触并使用过，至于JAVA，B/S，vue，Html等技术，图书馆都有对应的书籍可以参考学习，加上平时课堂上学习的编程小项目对这些技术都有讲解，另外，本人也从课程设计作业中锻炼了编程能力。以是在技术上，可以完成图书管理体系的编程开辟。
通过上面的分析，已经确定了本体系在经济上的可行，本体系在技术上的可行，本体系在操纵上的可行。由此，可以得出在目前的条件下，对于图书管理体系的设计与实现是可以进行下去的。
3.2体系流程分析
本体系在处理数据时，其内部的操纵逻辑也需要使用相应的工具进行展示。
在本体系的数据录入页面，对于操纵者提供的每条数据都有相应的检验规则，比如数据信息不能有非法字符，或者本来应该是汉字的数据，不能用字母取代，还有对数据内容的长度等进行规范，如许的可以确保数据准确性的检验规则，在编码时，就提前编写好了。数据添加的流程见下图。如果数据已经保存进入数据库，则说明操纵者提供的数据内容和格式都是符合要求的。
https://i-blog.csdnimg.cn/direct/aaf5a9e7e29a45458ae6cbc36dca6282.png
图3.1 添加信息流程图
很多时间，面临体系中的大量数据，不免会发现一些错误，因此需要实时纠正错误，本体系也提供数据后期的修改功能，其流程见下图。但是更新的数据也需要通过数据有效性检验。能够终极写入数据库则说明修改的数据是符合要求的。
https://i-blog.csdnimg.cn/direct/f9d2d403371c48a0be3e5748052761db.png
图3.2 修改信息流程图
面临数据库里面大量数据，在体系的前台，要想快速获取需要的信息，就需要使用查询功能。其流程见下图。该功能需要操纵者提前输入关键词，当体系的背景数据库保存了与关键词匹配的数据时，就会实时显示出来，整个过程耗时很短。
https://i-blog.csdnimg.cn/direct/c50f4170191c470494f94a4703b15194.png
图3.3 查询信息流程图
3.3体系性能分析
分析图书管理体系对于性能的需求主要照旧从下面的5个角度来分析，它们分别是体系的实用性，体系的适应性，体系的易操纵性，体系的安全性和体系的易维护性。
性能需求一：体系的实用性，本体系主要是让管理人员会合处理相关信息，可以提供方便快捷的信息添加，信息编辑等操纵。在提高信息管理人员的工作效率的同时，也可以降低管理本钱，并大大淘汰管理人员一样平常繁琐的工作量。
性能需求二：体系的适应性，本体系对于运行环境的要求并不高，可以被广泛运用在生活中。由于使用者只要在一样平常使用的计算机，或者是随身携带的条记本上搭建运行环境都能运行本体系，另外体系提供的底子功能包括添加，修改等都能随时操纵。
性能需求三：体系的易操纵性，本体系提供的功能跟同范例体系一样，也具备简单的增删改操纵，操纵流程的逻辑也符合广大使用者的使用需求，使用者使用本体系管理数据会非常顺手。
性能需求四：体系的安全性，本体系在数据保存与管理上安全系数要达标，在设计与编码阶段，通过对用户进行权限分配，把体系的功能依照不同用户的角色进行分配，在首次进入体系时，通过编写安全验证的代码模块，引导不同用户进入不同的操纵界面。还可以对用户底子信息包括登录的账号密码等进行加密保存，可以使用当下常用的技术成熟的MD5加密技术实现。
性能需求五：体系的易维护性，本体系在后期运行中，会根据使用者的操纵，产生许多数据信息，为了便于维护，就要求这些数据可以通过工具从数据库中导出来，对于一些阶段性数据，可以进行批量删除，以此达到轻负荷处理数据的目的，让本体系可以变得更加轻盈。
第4章 体系设计
市面上设计比较好的体系都有一个共同特性，就是主题光显突出。通过对页面简洁清晰的布局，让页面的内容，包括文字语言，或者视频图片等元素可以清晰表达出体系的主题。让来访用户无需花费过多精力和时间找寻需要的内容。
4.1界面设计原则
一般来说，大部门用户使用体系，有些是想从体系中获取需要的信息，有些则是使用体系提供的服务。以是，为了改善用户体验，提高体系的使用率，在对体系界面设计时，需要按照下面的原则进行。
第一点，对用户进行分析，相识用户使用体系的目的，以及使用体系的方式，考虑大部门用户的阅读风俗，设计Z字形或F型布局可以方便用户获取信息。
第二点：设计有效的导航，这个包括每个页面上都有导航条的显示，有时也可以在页面的底部设计导航条，当用户进入具体页面时，要设计相应的位置提示，在页面中比较特别的位置，需要设计返回链接，可以返回上个页面，也可以返回首页等。
第三点：对整个体系要运用统一的设计方案，包括色彩方案的一致性，页面模板的相似性等，对雷同操纵和专业术语的形貌在整个体系中也应该保持一致。
第四点：设计的界面要包管传达的内容清晰准确。要避免在同一个页面设计非常多的内容，另外可以准确对体系内容进行分类，把页面中用户视觉会合的位置，用来显示重要信息。
作为初学者，并没有那么多的设计履历，但是可以运用上面提到的界面设计原则设计出比较好的体系，可以让用户产生良好的使用体验。
4.2功能布局设计
为了让体系的编码可以顺遂进行，特意对本体系功能进行细分设计，设计的体系功能布局见下图。
https://i-blog.csdnimg.cn/direct/1891e084f3b3498a9bf673ad09f2e912.png
图4.1 体系功能布局图
4.3数据库设计
一般来说，对用户进行观察，相识其需求，主要照旧完成功能上的分析设计，殊不知，设计功能时，也要展示对数据库的设计。数据库服务于程序，它可以按照设定的规则对程序的数据进行保存，因此，也可以说数据库就是程序相关数据的聚集。为了包管程序的高质量，数据库提供的数据存储服务也需要快速相应，同时数据信息也要安全合法可靠，以是设计一个数据库如许的任务也需要高度器重，并花时间和精力去积极完成。毕竟这影响到后期程序的开辟和使用。试想而知，假设设计一个不好的数据库，遇到的问题将会有：第一，面临信息处理，会有着繁琐的业务逻辑，延伸事务处理时间。第二：程序编码期间，将会产生更多的代码去完成数据处理的功能，产生大量的数据冗余，而且也不方便注释代码，还会占用更多的存储空间。综上所述，设计出公道的数据库是多么的重要。
（1）下图是收支库详情实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/8f9d6bea6fc24aa194d623c7e8d6bba1.png 收支库详情实体属性图
（2）下图是用户实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/5270c35ecc18425eaf2f9e9e6791d961.png 用户实体属性图
（3）下图是书籍收藏实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/ab90c21803704e65ba9c3f0447ea208b.png 书籍收藏实体属性图
（4）下图是公告信息实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/41e23470bd734e63b11966606a82c52a.png 公告信息实体属性图
（5）下图是书籍借阅实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/4daa4842f1ca405f834f6f266c8746ab.png 书籍借阅实体属性图
（6）下图是书籍实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/1a97c3a3d94e4546a376d50e8eb032c5.png 书籍实体属性图
（7）下图是论坛实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/5bbebef141594ba0ae73fe1850a11c08.png 论坛实体属性图
（8）下图是罚金信息实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/f4a23badea414b85b339a159d387654a.png 罚金信息实体属性图
（9）下图是收支库实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/2aa956ac2e34490f89e08f11aef0edb7.png 收支库实体属性图
（10）下图是每日盘点实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/07dcb2ce76ca426699164db3995a4f57.png 每日盘点实体属性图
（11）下图是书籍评价实体和其具备的属性。
https://i-blog.csdnimg.cn/direct/f1de6968ee1d43b4b3bf672b239fc606.png 书籍评价实体属性图
4.3.2 数据库物理设计
作为程序背景的支持，本数据库也需要设计数据存储的布局。而数据存储布局的设计就包括了数据表布局的设计和创建。数据表布局包括了字段，数据范例，还有字段的取值范围等信息。而E-R模型中的实体就是一张表，实体的特性就可以作为该表中的字段，根据本程序信息存储要求，设计每个字段需要的范例，还有该字段的取值范围等。每当设计完成一张数据表，就需要实时保存在数据库里面，并对该设计的数据表准确命名，要求设置的数据表的名称尽量不要是中文，而且要方便记忆。由于在程序编码阶段，通过SQL语句可以把程序里面的数据写入在各个数据表里面，而这个环节需要使用到数据表的名称。如果数据表名称是中文的话，可能会乱码并影响程序运行。下面就以表格情势展示设计的结果。
表4.1字典表
序号列名数据范例说明答应空1IdIntid否2dic_codeString字段是3dic_nameString字段名是4code_indexInteger编码是5index_nameString编码名字是6super_idInteger父字段id是7beizhuString备注是8create_timeDate创建时间是 表4.2罚金信息表
序号列名数据范例说明答应空1IdIntid否2yonghu_idInteger用户是3fajin_priceBigDecimal缴纳金额是4fajin_contentString缴纳原因是5insert_timeDate添加时间是6create_timeDate创建时间是 表4.3论坛表
序号列名数据范例说明答应空1IdIntid否2forum_nameString帖子标题是3yonghu_idInteger用户是4users_idInteger管理员是5forum_contentString发布内容是6super_idsInteger父id是7forum_state_typesInteger帖子状态是8insert_timeDate发帖时间是9update_timeDate修改时间是10create_timeDate创建时间是 表4.4公告信息表
序号列名数据范例说明答应空1IdIntid否2news_nameString公告标题是3news_typesInteger盘点信息是4news_photoString公告图片是5insert_timeDate添加时间是6news_contentString公告详情是7create_timeDate创建时间是 表4.5每日盘点表
序号列名数据范例说明答应空1IdIntid否2shuji_idInteger书籍是3pandian_numInteger盘点数量是4pandian_contentString备注是5insert_timeDate添加时间是6create_timeDate创建时间是 表4.6书籍表
序号列名数据范例说明答应空1IdIntid否2shuji_uuid_numberString书籍编号是3shuji_nameString书籍名称是4shuji_zuozheString书籍作者是5shuji_chubansheString出版社是6shuji_photoString书籍照片是7shuji_typesInteger书籍范例是8shujia_typesInteger所在书架是9shujia_addressString详细地址是10shuji_kucun_numberInteger书籍库存是11shuji_clicknumInteger热度是12shuji_contentString书籍介绍是13shuji_deleteInteger逻辑删除是14create_timeDate创建时间是 表4.7收支库表
序号列名数据范例说明答应空1IdIntid否2shuji_churu_inout_uuid_numberString收支库流水号是3shuji_churu_inout_nameString收支库名称是4shuji_churu_inout_typesInteger收支库范例是5shuji_churu_inout_contentString备注是6insert_timeDate添加时间是7create_timeDate创建时间是 表4.8收支库详情表
序号列名数据范例说明答应空1IdIntid否2shuji_churu_inout_idInteger收支库是3shuji_idInteger书籍是4shuji_churu_inout_list_numberInteger操纵数量是5insert_timeDate操纵时间是6create_timeDate创建时间是 表4.9书籍收藏表
序号列名数据范例说明答应空1IdIntid否2shuji_idInteger书籍是3yonghu_idInteger用户是4shuji_collection_typesInteger范例是5insert_timeDate收藏时间是6create_timeDate创建时间是 表4.10书籍评价表
序号列名数据范例说明答应空1IdIntid否2shuji_idInteger书籍是3yonghu_idInteger用户是4shuji_commentback_textString评价内容是5insert_timeDate评价时间是6reply_textString复兴内容是7update_timeDate复兴时间是8create_timeDate创建时间是 表4.11书籍借阅表
序号列名数据范例说明答应空1IdIntid否2shuji_idInteger书籍是3yonghu_idInteger用户是4shuji_yuyue_timeDate借阅时间是5shuji_yuyue_numInteger借阅天数是6shuji_yuyue_typesInteger借阅状态是7shuji_yuyue_deleteInteger逻辑删除是8insert_timeDate添加时间是9create_timeDate创建时间是 表4.12用户表
序号列名数据范例说明答应空1IdIntid否2yonghu_nameString用户姓名是3yonghu_photoString头像是4yonghu_phoneString用户手机号是5yonghu_id_numberString用户身份证号是6yonghu_emailString邮箱是7yonghu_deleteInteger假删是8create_timeDate创建时间是 表4.13管理员表
序号列名数据范例说明答应空1IdIntid否2usernameString用户名是3passwordString密码是4roleString角色是5addtimeDate新增时间是 第5章 体系实现
这个环节需要使用前面的设计方案，包括对体系模块的设计，还有对程序背景的数据支持的数据库的设计等。不过这部门内容照旧强调体系编码人员的开辟能力，要把前面设计的内容通过编码的情势以一个完备的，可以运行的体系呈现出来。
功能模块的实现
5.1用户信息管理
如图5.1显示的就是用户信息管理页面，此页面提供给管理员的功能有：用户信息的查询管理，可以删除用户信息、修改用户信息、新增用户信息，
还进行了对用户名称的暗昧查询的条件
https://i-blog.csdnimg.cn/direct/a846d7c2bddb4ccebf44bb8e9b89eba5.png
图5.1 用户信息管理页面
5.2 书籍信息管理
如图5.2显示的就是书籍信息管理页面，此页面提供给管理员的功能有：检察已发布的书籍信息数据，修改书籍信息，书籍信息作废，即可删除，还进行了对书籍信息名称的暗昧查询 书籍信息信息的范例查询等等一些条件。
https://i-blog.csdnimg.cn/direct/101aacd316524488862c9a7c91941bb1.png
图5.2 书籍信息管理页面
5.3盘点信息管理
如图5.3显示的就是盘点信息管理页面，此页面提供给管理员的功能有：根据盘点信息进行条件查询，还可以对盘点信息进行新增、修改、查询操纵等等。
https://i-blog.csdnimg.cn/direct/94b883953f1a4de6afd222879d07cdf5.png
图5.3 盘点信息管理页面
5.1公告信息管理
如图5.4显示的就是公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操纵等等。
https://i-blog.csdnimg.cn/direct/760754bdad8949dcbe33f4d0cbfe986f.png
图5.4 公告信息管理页面
ConfigController.java
package com.controller;
import java.util.Arrays;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
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.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;
/**
* 登录相关
*/
@RequestMapping("config")
@RestController
public class ConfigController{
@Autowired
private ConfigService configService;
/**
* 列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,ConfigEntity config){
EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
PageUtils page = configService.queryPage(params);
return R.ok().put("data", page);
}
/**
* 列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,ConfigEntity config){
EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
PageUtils page = configService.queryPage(params);
return R.ok().put("data", page);
}
/**
* 信息
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") String id){
ConfigEntity config = configService.selectById(id);
return R.ok().put("data", config);
}
/**
* 详情
*/
@IgnoreAuth
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") String id){
ConfigEntity config = configService.selectById(id);
return R.ok().put("data", config);
}
/**
* 根据name获取信息
*/
@RequestMapping("/info")
public R infoByName(@RequestParam String name){
ConfigEntity config = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
return R.ok().put("data", config);
}
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody ConfigEntity config){
// ValidatorUtils.validateEntity(config);
configService.insert(config);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody ConfigEntity config){
// ValidatorUtils.validateEntity(config);
configService.updateById(config);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
configService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
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;
}
}
add-or-update.vue
<template>
<div class="addEdit-block">
<el-form
class="detail-form-content"
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="auto"
>
<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: /^\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":"forum_state_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"]="forum_state_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%;.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>
声明
本博客实用于广泛的学术和教育用途，包括但不限于个人学习、开辟设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]