基于SpringBoot+Vue的周边游平台个人管理模块的设计与实现

springboot220基于SpringBoot+Vue的周边游平台个人管理模块的设计与实现

第一章绪论

1.1 选题背景

目前整个社会发展的速度，严重依赖于互联网，如果没有了互联网的存在，市场可能会一蹶不振，严重影响经济的发展水平，影响人们的生活质量。计算机的发展，不管是从硬件还是软件，都有很多技术储备，每年都有很多的技术和软件产生，纵观各个领域，无一不用互联网软件，办公用的还是电脑居多，但是人手一台智能设备已经变成了现在人们的生活日常，哪怕的普通的老百姓都成了上知天文下知地理的所在，这些都依赖于互联网技术。互联网技术在信息的传播方面是巨大的，而信息的处理就变成了各种产业管理者和维护者的重任。人们已经习惯了互联网的存在，所以经常操作一些互联网产品变成了日常，所以开发一个周边游平台，让人们使用是没有一点问题的，并且在这个过程中不仅能够规范旅游信息管理的使用流程还有信息处理流程，也能让整个信息的传播处理，都存在一种可控制的范围，最重要的是，计算机在旅游信息管理方面可以给管理者提供更好的帮助。

1.2 选题意义

当开发软件变成了一个潮流之后，会发现不管任何行业都能开发适合自己的软件，不管是内部员工管理，还是财务管理，甚至业务管理都可以数据化，并且可以对这些数据集中处理，进而根据数据处理结果就自然而然的提高了管理水平，最重要的是，开发一个软件投入使用，开发过程其实就是梳理行业痛点的过程，就是让软件来弥补行业的管理漏洞，不断的优化事物的处理流程。周边游平台就是一款专门开发的软件，通过Web技术，让使用者可以在任何一台智能设备上面通过浏览器进行操作使用，对数据的处理不在局限于地域距离，只要软件开发到位，使用起来方便，达到预期目的，会发现有软件和没有软件的区别是很大的，有了这款软件之后，会发现数据的存储安全方面，比起之前的满屋寻找记录的优势是多么的巨大。

1.3 研究内容

本文将从分析，设计，实现，测试等角度来阐述本系统。

绪论：介绍本系统开发的背景，意义；

开发环境：介绍本系统的配置环境以及开发技术；

系统分析：介绍本系统的功能，性能以及可行性；

系统设计：介绍本系统的数据库的设计以及功能结构的设计；

系统实现：介绍本系统的实现界面以及实现的功能；

系统测试：介绍本系统的功能测试以及测试结果；

第二章开发环境

开发本系统需要配置开发环境，除了需要开发者安装相应的软件外，也需要对开发中运用的技术进行了解和掌握。

2.1 Java语言

Java语言是目前最流行的语言之一，不仅可以做桌面窗口形式的程序，还可以做浏览器访问的程序，目前最流行的就是用Java语言作为基础，做各种程序的后台处理。Java语言是操作变量的语言，而变量则是Java对于数据存在形式的定义，变量用来操作内存，而内存则牵扯到计算机安全问题，这样Java语言反而有了免疫直接针对用Java语言开发出来的程序的病毒，有效的提高了Java语言开发出来程序的生存能力。Java是具有动态运行能力的一种语言，Java的类不仅仅可以用Java核心提供的基础类，还可以进行重写，这样会让Java的功能变得更加丰富，甚至可以编写一些功能模块进行封装，然后其他项目如果需要用到这些可以复用的功能，完全可以直接引用，然后在用得地方调用方法即可。Java是一种开源的语言，可以对Java里面的各种类以及引用方法进行追溯，甚至可以对已经编译过的语言进行反编译，这样不仅仅提高学习的效率，并且可以学习其他从业者提供的优雅的编程方式。Java语言发展到现在，已经在各个行业扎根，学习Java可以从事的行业很多，并且学习的方法很多，网上有很多免费的教程，甚至有些高深的知识也只需要付费就可以进行学习，而不是像Java语言之初，每一个编程人员都需要用记事本进行手动编码，现在有很多集成开发环境帮助Java从业者。选择Java语言进行编程，是一种很好的解决问题的方式。

2.2 MYSQL数据库

一般学习程序开发的人员如果学习数据库的话，肯定是要学习MySQL数据库，MySQL数据库通过这么多年的不断发展，社区版本都是免费的，最重要的是小巧，占用电脑空间比较小，让更多的开发人员可以不需要更换更高级的电脑就可以进行学习。学习只是一个方面，最重要的是MySQL市场占有率是世界第一，基本上十个公司就有七八个用得MySQL数据库。MySQL的优点不只是这么粗浅，MySQL首先是开源的，只要不是商用就不用花钱，并且大型的数据也是支持的，只要是市面上存在的操作系统，MySQL都可以有对应的版本可供使用。因为MySQL是开源的，如果有对MySQL有特殊需求的甚至可以自己修改源码，达到符合自己使用的目的。MySQL数据库好处多多，最重要的一点符合本设计的开发需求，可以说本设计只用到了MySQL的一些基础功能，而这点基础功能就完全够用。MySQL学习的教程网上很多，许多关于入门的教程就完全可以达到普通程序员的开发水平，只需要把基本的知识学会了，到公司里面也只是根据不同的业务逻辑进行不同的语句编写而已。

2.3 IDEA简介

IDEA的诞生在Java集成开发工具行业正所谓平地起雷，瞬间震动了整个Java开发行业。真的是每个人用过的都说好。IDEA之所以相比于其他比如MyEclipse或者Eclipse之类的Java开发工具来讲比较好，原因首先在于设计方面。IDEA采用了所谓的人体工程学设计原理，让使用IDEA的人员用了就忘记不了。软件打开首先要设置主题，可以选择常规的白色或者暗色系列，长时间的白色或者长时间的暗色会让开发人员的眼睛疲劳加重，首先从这个细节就让程序开发人员备受青睐，让程序员看着舒服；然后再对一些常用性插件进行归类，让程序的开发注重于提升生产效率，而不是一味的让开发者找各种插件，有时候插件之间的版本还会存在不兼容，IDEA就把兼容的插件双手呈现，如此贴心的IDEA怎么能让人不喜爱。所以选择IDEA用来开发本项目就理所当然的了。

2.4 Spring Boot框架

Spring Boot适合初学者，也适合从以前的Spring框架开发者学习，学习起来是很方便的，不管是纯英文教程还是中文教程，国内外都有很多学习的资料。Spring Boot可以运行所有的Spring项目，进行无缝切换。内置了Servlet 容器，不需要对代码进行打包变成WAR就可以运行。自带应用监控，运行的时候可以实时的对正在运行的项目进行监控，可以随时发现问题所在并且能定位发生的问题，可以让程序员及时的修改问题。

第三章系统分析

这个阶段，需要依靠大量的资料作为研究本系统的基础数据，除了分析系统开发可行问题之外，还要再通过调查本系统针对的目标人群的需求来确定本系统功能，并在本系统的性能上做出进一步分析。

3.1可行性分析

在项目进行开发之前，必须要有可行性分析报告，分别从技术角度，经济角度，操作角度上面进行分析，经过可行性分析是实现科学开发的必要步骤。

3.1.1技术可行性

从技术的角度出发，目前采用开发的技术完全能满足系统开发需要。目前市场上有现成的软件开发工具和开发技术，这些可以保证系统开发的顺利进展。

3.1.2操作可行性

周边游平台是根据用户经常使用的页面操作流程来进行设计的，并且页面保证统一，从视觉角度和操作角度上都能达到使用要求。

3.1.3经济可行性

在本次开发过程中，因为需要通过电脑来进行配置开发的环境，通过对技术的分析，发现目前正在使用的电脑是可以满足开发需要的，并不需要太多的金钱对电脑进行更换。所以，从经济角度上分析，可以满足开发要求。

从以上三个角度来进行分析论证，证明了周边游平台是可以正常开发并且使用的。

3.2系统流程分析

从系统的角色上分析，每个用户角色都代表了不同的账号身份，而不同的身份则代表着功能的异同，所以首先要区分用户的角色身份问题。设置用户登录需要输入账号和密码，输入的信息必须与数据库里已经存在的账号密码信息进行比对，只有正确的账号和密码才可以进行下一步的页面显示操作，如果不正确的账号密码，则拒绝用户登录，也代表着用户没有继续访问的权限，系统是无法继续提供服务的。

图3-1 操作流程图

任何一个系统都有一个操作流程，本设计里面，对于任何数据的存储都有一定的合法要求，只有符合设定要求的数据才可以进行存储。具体步骤参考下图。

图3-2 添加信息流程图

数据的存储并不是一成不变的，当需要对已经存在的数据进行改变的时候，同样也遵循着操作流程，想更改数据首先要确定更改之前的数据是什么，然后输入新的数据是否合法，都要符合流程，只有合法数据才可以被更新到数据库里存储。具体步骤参考下图。

图3-3 修改信息流程图

删除操作，在数据存储方面是一件比较慎重的事件，很有可能会产生失误操作，所以一般删除操作的时候都要提示是否删除，确定删除才会更新数据库内容，实现删除目的。具体步骤参考下图。

图3-4 删除信息流程图

3.3系统性能分析

系统在使用过程中，用户会享受到系统带来的便利。那么如何保持在长时间的使用过程中，不出现乱七八糟的问题，让使用系统变成一种操作上的享受，使用上的便捷，这就是需要考虑的问题。以下主要从系统的性能分析上面进行描述，从数据完整以及数据安全，包括系统的可扩展等方面进行介绍。

3.3.1系统安全性

注册用户与游客用户的区别就在于是否有账号，如果有账号，那么就有相关的注册用户权限，有账号就有密码，密码是保证账号安全性的前提，游客只能浏览一些公共性信息，如果需要用户登录才能观看的信息，那么也需要使用账号登录的。对于系统安全性上面，主要考虑角色的密码加密问题，这样可以防止有效的密码数据拦截后的破解工作。一般密码如果有安全性要求的话，是可以考虑加密存储。密码的加密存储大致有两种设计方法，一种是密码在前台提交后就用Java Script进行MD5加密，然后直接提交密文，这样的好处是密文传输的安全性，另一种是提交密码后在后台处理的过程中对密码进行加密或者解密，这样会增加后台的处理负担。一般都居中考虑，如果登录的话会把密码在后台进行加密与数据库密码进行对比。目前常用的加密方式是MD5加密方式。

3.3.2数据完整性

系统进行开发的最重要的目的就是数据的处理，计算机有其擅长数据的存储以及处理工作，所以数据的完整性是必须保证的，不然系统的存在是没有必要的。数据不管是设计还是存储，都必须完整，从数据的输入就从各个方面保证数据的合法性，违规数据不能直接提交的。数据处理逻辑也会保证数据的加工正常，进而进行数据存储，也会保证数据设计的合理，这些都是有数据设定要求的。目前对数据的存储采用的关系型数据库，关系型数据库有多年的历史，功能强大，迁移备份以及无人值守都可以进行自动备份的。

3.3.3系统可扩展性

系统是有必要存在扩展性的。在设计之初就要考虑可能存在的业务，所以对系统的设计就要模块化设计，这样需要进行扩展的时候，只要在对应模块进行增加，对应逻辑进行调试即可。系统可扩展性的提升会让系统增加不必要的工作量，让程序设计更加符合规范。

3.4系统功能分析

本系统在功能分析上，主要是根据目标用户群的角度进行分析，为了便于展示分析结果，这里就使用用例图进行功能展示。

管理员用例图的绘制结果见图3-5。管理员登录进入本系统操作的功能包括对景点，房间，旅游团，游玩路线，留言信息等进行管理，可以管理景点评价，景点订单，房间评价，房间订单，旅游团留言，旅游团拼团信息，游玩路线留言信息等。

图3-5 管理员用例图

第四章系统设计

到目前为止，市面上已经存在了各种各样的软件系统，从系统的分类着手，主要应用范围倾向于办公系统，娱乐系统，社交系统，然后下面有很多比较细的分支系统。很多系统已经经过了市场的考验，针对不同的业务场景已经开始出现了业务模块化，程序员减代码化的各种设计方式。到目前为止，当要设计一个系统的时候，首先根据业务模型基本上都可以在网上找到类似的模板，然后根据具体业务具体分析设计，进而实现具体功能，大众的就是最好的，毕竟符合市场主流的就代表着肯定符合常规操作流程。

4.1功能结构设计

本系统主要是基于数据的增加，修改，删除等操作，使用者能够通过提前设定的登录功能进入指定的操作区，这里对使用者设计的功能进行结构展示。

管理员功能结构图的绘制结果见图4-1。管理员登录进入本系统操作的功能包括对景点，房间，旅游团，游玩路线，留言信息等进行管理，可以管理景点评价，景点订单，房间评价，房间订单，旅游团留言，旅游团拼团信息，游玩路线留言信息等。

图4-1 管理员功能结构图

4.2 数据库设计

如果说设计系统的功能很重要，那么设计该系统的数据库将更重要，毕竟系统服务于用户，数据库服务于系统，用户访问系统，操作系统的所有数据都要依赖于数据库，而系统的数据几乎都是保存在数据库中的，所以，一个高质量的程序，必然拥有一个安全，快速响应，稳定可靠的数据库。本系统的MySQL数据库可以通过SQL语言来实现对系统数据的管理，包括在指定表中插入数据，在规定的表中更改数据，以及删除指定表中的部分数据等操作。一般来说，像MySQL这样的关系型数据库，对于结构化查询语言SQL都能很好的进行支持。在编程中，通过合理运用SQL语言便能操作数据库的各种数据，真是非常方便快捷！

4.2.1 数据库概念设计

本节内容主要是使用图形的方式来描述数据库中的实体，每个实体的相应属性，还有实体之间的相互联系，常用的Visio工具即可满足绘制E-R图的需求。E-R图是由矩形，椭圆，菱形等图形元素组成，矩形框中主要写实体的名称，椭圆框中主要是登记该实体的属性，而菱形框中主要是登记实体之间的联系名称，最后使用实心线段把这些图形元素进行连接，即可完成E-R图的绘制。当初步得到一个E-R图时，需要进行检查，使用分析的方式去修改，重构E-R图，以达到消除数据冗余，或者是消除实体间联系冗余的目的。从而保持数据库的完整性，以及降低数据库维护上面的难度。

（1）使用Visio这样的常用的实体属性图绘制工具来绘制景点实体属性图，绘制结果见图4-3。

图4-3 景点实体属性图

（2）使用Visio这样的常用的实体属性图绘制工具来绘制管理员实体属性图，绘制结果见图4-4。

图4-4 管理员实体属性图

（3）使用Visio这样的常用的实体属性图绘制工具来绘制房间实体属性图，绘制结果见图4-5。

图4-5 房间实体属性图

（4）使用Visio这样的常用的实体属性图绘制工具来绘制游玩路线实体属性图，绘制结果见图4-6。

图4-6 游玩路线实体属性图

（5）绘制的上述实体间存在的联系见图4-7。

图4-7 实体间关系E-R图

4.2.2 数据库物理设计

本系统数据在数据库中都是通过各种二维表进行记录保存的，在数据库中设计这样的二维表也是比较重要的内容，因为它影响着数据的存储效率。在设计二维表也就是关系模型之前，一些有关二维表方面的常用概念需要进行充分了解。

关系：一张具体的数据表即表示关系，关系的名称与数据表的名称保持一致；

元组：数据表中，每行显示的数据即代表元组；

属性：数据表中，每列表示的数据即代表属性；

关键字：数据表中，为了与其他数据表进行区分，则需要在每张表中进行主键的设置；

通过上节内容可以知晓数据库中的各个实体，并通过一定方式把这些实体表示的内容进行数据表的转换，通常来说，每个实体都会对应一张具体的数据表，在本系统指定的数据库中创建命名好的数据库，才可以对数据表进行创建与设计。周边游平台数据表设计结果展示如下：

表4-1 客服聊天表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yonghu_id	提问用户	int(11)	是
chat_issue	问题	varchar(200)	是
issue_time	问题时间	timestamp	是
chat_reply	回复	varchar(200)	是
reply_time	回复时间	timestamp	是
zhuangtai_types	状态	int(255)	是
chat_types	数据类型	int(11)	是
insert_time	创建时间	timestamp	是

表4-2 房间表

字段	注释	类型	空
id (主键)	主键	int(11)	否
fangjian_name	房间名称	varchar(200)	是
fangjian_uuid_number	房间编号	varchar(200)	是
jiudian_name	酒店名称	varchar(200)	是
fangjian_photo	房间照片	varchar(200)	是
fangjian_tese	房间特色	varchar(200)	是
fangjian_address	房间位置	varchar(200)	是
fangjian_types	房间类型	int(11)	是
fangjian_old_money	房间原价	decimal(10,2)	是
fangjian_new_money	房间现价/天	decimal(10,2)	是
fangjian_content	房间介绍	text	是
shangxia_types	是否上架	int(11)	是
fangjian_delete	逻辑删除	int(11)	是
create_time	创建时间	timestamp	是

表4-3 房间收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
fangjian_id	房间	int(11)	是
yonghu_id	用户	int(11)	是
fangjian_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4-4 房间评价表

字段	注释	类型	空
id (主键)	主键	int(11)	否
fangjian_id	房间	int(11)	是
yonghu_id	用户	int(11)	是
fangjian_commentback_text	评价内容	text	是
insert_time	评价时间	timestamp	是
reply_text	回复内容	text	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4-5 房间订单表

字段	注释	类型	空
id (主键)	主键	int(11)	否
fangjian_order_uuid_number	订单号	varchar(200)	是
fangjian_id	房间	int(11)	是
yonghu_id	用户	int(11)	是
zhu_time	入住日期	date	是
zhu_number	住的天数	int(11)	是
fangjian_order_true_price	实付价格	decimal(10,2)	是
fangjian_order_types	订单类型	int(11)	是
fangjian_order_payment_types	支付类型	int(11)	是
insert_time	订单创建时间	timestamp	是
create_time	创建时间	timestamp	是

表4-6 公告表

字段	注释	类型	空
id (主键)	主键	int(11)	否
gonggao_name	公告名称	varchar(200)	是
gonggao_photo	公告图片	varchar(200)	是
gonggao_types	公告类型	int(11)	否
insert_time	公告发布时间	timestamp	是
gonggao_content	公告详情	text	是
create_time	创建时间	timestamp	是

表4-7 景点表

字段	注释	类型	空
id (主键)	主键	int(11)	否
jingdian_name	景点名称	varchar(200)	是
jingdian_uuid_number	景点编号	varchar(200)	是
jingdian_photo	景点照片	varchar(200)	是
jingdian_tese	景点特色	varchar(200)	是
jingdian_luxian	景点游玩路线	varchar(200)	是
jingdian_address	景点位置	varchar(200)	是
jingdian_zhuyishixiang	景点注意事项	varchar(200)	是
jingdian_types	景点类型	int(11)	是
jingdian_old_money	景点门票原价	decimal(10,2)	是
jingdian_new_money	景点门票现价	decimal(10,2)	是
jingdian_clicknum	景点热度	int(11)	是
jingdian_content	景点介绍	text	是
shangxia_types	是否上架	int(11)	是
jingdian_delete	逻辑删除	int(11)	是
create_time	创建时间	timestamp	是

表4-8 景点收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
jingdian_id	景点	int(11)	是
yonghu_id	用户	int(11)	是
jingdian_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4-9 景点评价表

字段	注释	类型	空
id (主键)	主键	int(11)	否
jingdian_id	景点	int(11)	是
yonghu_id	用户	int(11)	是
jingdian_commentback_text	评价内容	text	是
insert_time	评价时间	timestamp	是
reply_text	回复内容	text	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4-10 景点订单表

字段	注释	类型	空
id (主键)	主键	int(11)	否
jingdian_order_uuid_number	订单号	varchar(200)	是
jingdian_id	景点	int(11)	是
yonghu_id	用户	int(11)	是
buy_number	购买数量	int(11)	是
youwan_time	游玩日期	date	是
jingdian_order_true_price	实付价格	decimal(10,2)	是
jingdian_order_types	订单类型	int(11)	是
jingdian_order_payment_types	支付类型	int(11)	是
insert_time	订单创建时间	timestamp	是
create_time	创建时间	timestamp	是

表4-11 留言板表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yonghu_id	用户	int(11)	是
liuyan_name	留言标题	varchar(200)	是
liuyan_text	留言内容	text	是
insert_time	留言时间	timestamp	是
reply_text	回复内容	text	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4-12 旅游团表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yonghu_id	用户	int(11)	是
lvyoutuan_name	旅游团名称	varchar(200)	是
lvyoutuan_uuid_number	旅游团编号	varchar(200)	是
lvyoutuan_photo	旅游团照片	varchar(200)	是
lvyoutuan_lvxingdizhi	旅行地点	varchar(200)	是
youwanluxian_chuxingfangshi_types	出行方式	int(11)	是
lvyoutuan_types	旅游团类型	int(11)	是
lvyoutuan_number	最大参与人数	int(11)	是
lvyoutuan_clicknum	旅游团热度	int(11)	是
lvyoutuan_content	旅游团详情	text	是
shangxia_types	是否上架	int(11)	是
lvyoutuan_delete	逻辑删除	int(11)	是
create_time	创建时间	timestamp	是

表4-13 旅游团收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
lvyoutuan_id	旅游团	int(11)	是
yonghu_id	用户	int(11)	是
lvyoutuan_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4-14 旅游团留言表

字段	注释	类型	空
id (主键)	主键	int(11)	否
lvyoutuan_id	旅游团	int(11)	是
yonghu_id	用户	int(11)	是
lvyoutuan_liuyan_text	留言内容	text	是
insert_time	留言时间	timestamp	是
reply_text	回复内容	text	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4-15 旅游团拼团表

字段	注释	类型	空
id (主键)	主键	int(11)	否
lvyoutuan_order_uuid_number	订单号	varchar(200)	是
lvyoutuan_id	旅游团	int(11)	是
yonghu_id	用户	int(11)	是
insert_time	报名时间	timestamp	是
lvyoutuan_order_yesno_types	报名状态	int(11)	是
lvyoutuan_order_yesno_text	审核意见	text	是
lvyoutuan_order_shenhe_time	审核时间	timestamp	是
create_time	创建时间	timestamp	是

表4-16 管理员表

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

表4-17 用户表

字段	注释	类型	空
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)	是
new_money	余额	decimal(10,2)	是
create_time	创建时间	timestamp	是

表4-18 游玩路线表

字段	注释	类型	空
id (主键)	主键	int(11)	否
youwanluxian_name	游玩路线名称	varchar(200)	是
youwanluxian_uuid_number	游玩路线编号	varchar(200)	是
youwanluxian_photo	游玩路线照片	varchar(200)	是
youwanluxian_lvyoufangshi_types	旅游方式	int(11)	是
youwanluxian_chufashijian_types	出发时间	int(11)	是
youwanluxian_xingcheng_number	行程时间	int(11)	是
youwanluxian_chuxingfangshi_types	出行方式	int(11)	是
youwanluxian_clicknum	游玩路线热度	int(11)	是
youwanluxian_content	游玩路线介绍	text	是
youwanluxian_delete	逻辑删除	int(11)	是
create_time	创建时间	timestamp	是

表4-19 游玩路线收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
youwanluxian_id	游玩路线	int(11)	是
yonghu_id	用户	int(11)	是
youwanluxian_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4-20 游玩路线留言表

字段	注释	类型	空
id (主键)	主键	int(11)	否
youwanluxian_id	游玩路线	int(11)	是
yonghu_id	用户	int(11)	是
youwanluxian_liuyan_text	留言内容	text	是
insert_time	留言时间	timestamp	是
reply_text	回复内容	text	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

第五章系统实现

这里主要是对系统设计实现进行描述，通过系统的设计和数据库的设计，通过编码后变成了可以进行操作的界面，让一切想法变成了结果，通过文字和具体程序操作界面的截图之间的配合，可以把功能更直观的描述起来。

5.1 景点管理

管理员进入如图5-1所示的景点管理界面之后，管理员点击信息显示栏中最右侧的修改，删除，下架按钮可依次完成景点信息的修改，删除，下架等操作，管理员也能在当前界面查询景点信息，添加景点信息等。

图5-1 景点管理界面

5.2 景点评价管理

管理员进入如图5-2所示的景点评价管理界面之后，管理员点击信息显示栏中最右侧的详情，回复，删除按钮可依次完成景点评价信息的详情查看，回复评价，删除等操作，管理员在当前界面也能查询景点评价信息等。

图5-2 景点评价管理界面

5.3 景点订单管理

管理员进入如图5-3所示的景点订单管理界面之后，管理员点击信息显示栏中最右侧的详情，删除按钮可依次完成景点订单信息的详情查看，删除等操作。对于未检票的景点订单信息，管理员可以进行检票。

图5-3 景点订单管理界面

5.4 房间管理

管理员进入如图5-4所示的房间管理界面之后，管理员点击信息显示栏中最右侧的修改，删除，下架按钮可依次完成房间信息的修改，删除，下架等操作，在本界面，管理员也能新增房间信息。

图5-4 房间管理界面

5.5 游玩路线管理

管理员进入如图5-5所示的游玩路线管理界面之后，管理员点击信息显示栏中最右侧的修改，删除按钮可依次完成游玩路线信息的修改，删除操作，管理员也能在本界面新增游玩路线信息等。

图5-5 游玩路线管理界面

5.6 留言板管理

管理员进入如图5-6所示的留言板管理界面之后，管理员点击信息显示栏右侧的修改，删除按钮可依次完成留言信息的修改，删除操作，管理员在本界面可以通过留言标题字段来实现对留言内容的查询等。

图5-6 留言板管理界面

5.7 旅游团管理

管理员进入如图5-7所示的旅游团管理界面之后，管理员点击信息显示栏右侧的修改，删除，下架按钮可依次完成旅游团信息的修改，删除，下架操作，管理员在本界面可以添加旅游团信息，查询旅游团信息等。

图5-7 旅游团管理界面

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

    @Autowired
    private YouwanluxianLiuyanService youwanluxianLiuyanService;


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

    //级联表service
    @Autowired
    private YonghuService yonghuService;
    @Autowired
    private YouwanluxianService youwanluxianService;



    /**
    * 后端列表
    */
    @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 = youwanluxianLiuyanService.queryPage(params);

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

                //级联表
                YonghuEntity yonghu = yonghuService.selectById(youwanluxianLiuyan.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
                //级联表
                YouwanluxianEntity youwanluxian = youwanluxianService.selectById(youwanluxianLiuyan.getYouwanluxianId());
                if(youwanluxian != null){
                    BeanUtils.copyProperties( youwanluxian , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYouwanluxianId(youwanluxian.getId());
                }
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");
        else if("用户".equals(role))
            youwanluxianLiuyan.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));

        youwanluxianLiuyan.setInsertTime(new Date());
        youwanluxianLiuyan.setCreateTime(new Date());
        youwanluxianLiuyanService.insert(youwanluxianLiuyan);
        return R.ok();
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("用户".equals(role))
//            youwanluxianLiuyan.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<YouwanluxianLiuyanEntity> queryWrapper = new EntityWrapper<YouwanluxianLiuyanEntity>()
            .eq("id",0)
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YouwanluxianLiuyanEntity youwanluxianLiuyanEntity = youwanluxianLiuyanService.selectOne(queryWrapper);
        youwanluxianLiuyan.setUpdateTime(new Date());
        if(youwanluxianLiuyanEntity==null){
            youwanluxianLiuyanService.updateById(youwanluxianLiuyan);//根据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());
        youwanluxianLiuyanService.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<YouwanluxianLiuyanEntity> youwanluxianLiuyanList = 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){
                            //循环
                            YouwanluxianLiuyanEntity youwanluxianLiuyanEntity = new YouwanluxianLiuyanEntity();
//                            youwanluxianLiuyanEntity.setYouwanluxianId(Integer.valueOf(data.get(0)));   //游玩路线 要改的
//                            youwanluxianLiuyanEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            youwanluxianLiuyanEntity.setYouwanluxianLiuyanText(data.get(0));                    //留言内容 要改的
//                            youwanluxianLiuyanEntity.setInsertTime(date);//时间
//                            youwanluxianLiuyanEntity.setReplyText(data.get(0));                    //回复内容 要改的
//                            youwanluxianLiuyanEntity.setUpdateTime(sdf.parse(data.get(0)));          //回复时间 要改的
//                            youwanluxianLiuyanEntity.setCreateTime(date);//时间
                            youwanluxianLiuyanList.add(youwanluxianLiuyanEntity);


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

                        //查询是否重复
                        youwanluxianLiuyanService.insertBatch(youwanluxianLiuyanList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }





    /**
    * 前端列表
    */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));

        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = youwanluxianLiuyanService.queryPage(params);

        //字典表数据转换
        List<YouwanluxianLiuyanView> list =(List<YouwanluxianLiuyanView>)page.getList();
        for(YouwanluxianLiuyanView c:list)
            dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
        return R.ok().put("data", page);
    }

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        YouwanluxianLiuyanEntity youwanluxianLiuyan = youwanluxianLiuyanService.selectById(id);
            if(youwanluxianLiuyan !=null){


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

                //级联表
                    YonghuEntity yonghu = yonghuService.selectById(youwanluxianLiuyan.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
                //级联表
                    YouwanluxianEntity youwanluxian = youwanluxianService.selectById(youwanluxianLiuyan.getYouwanluxianId());
                if(youwanluxian != null){
                    BeanUtils.copyProperties( youwanluxian , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYouwanluxianId(youwanluxian.getId());
                }
                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody YouwanluxianLiuyanEntity youwanluxianLiuyan, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,youwanluxianLiuyan:{}",this.getClass().getName(),youwanluxianLiuyan.toString());
        youwanluxianLiuyan.setInsertTime(new Date());
        youwanluxianLiuyan.setCreateTime(new Date());
        youwanluxianLiuyanService.insert(youwanluxianLiuyan);
        return R.ok();
        }


}

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

    @Autowired
    private GonggaoService gonggaoService;


    @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 = gonggaoService.queryPage(params);

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

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

    }

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

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

        Wrapper<GonggaoEntity> queryWrapper = new EntityWrapper<GonggaoEntity>()
            .eq("gonggao_name", gonggao.getGonggaoName())
            .eq("gonggao_types", gonggao.getGonggaoTypes())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GonggaoEntity gonggaoEntity = gonggaoService.selectOne(queryWrapper);
        if(gonggaoEntity==null){
            gonggao.setInsertTime(new Date());
            gonggao.setCreateTime(new Date());
            gonggaoService.insert(gonggao);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<GonggaoEntity> queryWrapper = new EntityWrapper<GonggaoEntity>()
            .notIn("id",gonggao.getId())
            .andNew()
            .eq("gonggao_name", gonggao.getGonggaoName())
            .eq("gonggao_types", gonggao.getGonggaoTypes())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GonggaoEntity gonggaoEntity = gonggaoService.selectOne(queryWrapper);
        if("".equals(gonggao.getGonggaoPhoto()) || "null".equals(gonggao.getGonggaoPhoto())){
                gonggao.setGonggaoPhoto(null);
        }
        if(gonggaoEntity==null){
            gonggaoService.updateById(gonggao);//根据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());
        gonggaoService.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<GonggaoEntity> gonggaoList = 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){
                            //循环
                            GonggaoEntity gonggaoEntity = new GonggaoEntity();
//                            gonggaoEntity.setGonggaoName(data.get(0));                    //公告名称 要改的
//                            gonggaoEntity.setGonggaoPhoto("");//详情和图片
//                            gonggaoEntity.setGonggaoTypes(Integer.valueOf(data.get(0)));   //公告类型 要改的
//                            gonggaoEntity.setInsertTime(date);//时间
//                            gonggaoEntity.setGonggaoContent("");//详情和图片
//                            gonggaoEntity.setCreateTime(date);//时间
                            gonggaoList.add(gonggaoEntity);


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

                        //查询是否重复
                        gonggaoService.insertBatch(gonggaoList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }





    /**
    * 前端列表
    */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));

        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = gonggaoService.queryPage(params);

        //字典表数据转换
        List<GonggaoView> list =(List<GonggaoView>)page.getList();
        for(GonggaoView c:list)
            dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
        return R.ok().put("data", page);
    }

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        GonggaoEntity gonggao = gonggaoService.selectById(id);
            if(gonggao !=null){


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

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


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody GonggaoEntity gonggao, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,gonggao:{}",this.getClass().getName(),gonggao.toString());
        Wrapper<GonggaoEntity> queryWrapper = new EntityWrapper<GonggaoEntity>()
            .eq("gonggao_name", gonggao.getGonggaoName())
            .eq("gonggao_types", gonggao.getGonggaoTypes())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GonggaoEntity gonggaoEntity = gonggaoService.selectOne(queryWrapper);
        if(gonggaoEntity==null){
            gonggao.setInsertTime(new Date());
            gonggao.setCreateTime(new Date());
        gonggaoService.insert(gonggao);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }


}

YouwanluxianCollectionServiceImpl.java

package com.service.impl;

import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.YouwanluxianCollectionDao;
import com.entity.YouwanluxianCollectionEntity;
import com.service.YouwanluxianCollectionService;
import com.entity.view.YouwanluxianCollectionView;

/**
 * 游玩路线收藏 服务实现类
 */
@Service("youwanluxianCollectionService")
@Transactional
public class YouwanluxianCollectionServiceImpl extends ServiceImpl<YouwanluxianCollectionDao, YouwanluxianCollectionEntity> implements YouwanluxianCollectionService {

    @Override
    public PageUtils queryPage(Map<String,Object> params) {
        if(params != null && (params.get("limit") == null || params.get("page") == null)){
            params.put("page","1");
            params.put("limit","10");
        }
        Page<YouwanluxianCollectionView> page =new Query<YouwanluxianCollectionView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

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('dictionaryYouwanluxianChuxingfangshi','新增')"
                                type="success"
                                icon="el-icon-plus"
                                @click="addOrUpdateHandler()"
                        >新增</el-button>
                        <el-button
                                v-if="isAuth('dictionaryYouwanluxianChuxingfangshi','删除')"
                                :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('dictionaryYouwanluxianChuxingfangshi','查看')"
                          :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('dictionaryYouwanluxianChuxingfangshi','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
                            <el-button v-if="isAuth('dictionaryYouwanluxianChuxingfangshi','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
                            <el-button v-if="isAuth('dictionaryYouwanluxianChuxingfangshi','删除')" 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'] = "youwanluxian_chuxingfangshi_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: 40px;
		color: rgba(254, 190, 0, 1);
		font-size: 14px;
		border-width: 1px;
		border-style: solid;
		border-color: #DCDFE6;
		border-radius: 4px;
		background-color: rgba(10, 53, 245, 0.01);
	}
	
	& /deep/ .el-button--primary {
		height: 40px;
		color: rgba(254, 190, 0, 1);
		font-size: 14px;
		border-width: 1px;
		border-style: solid;
		border-color: #DCDFE6;
		border-radius: 4px;
		background-color: #fff;
	}
	
	& /deep/ .el-button--danger {
		height: 40px;
		color: rgba(254, 190, 0, 1);
		font-size: 14px;
		border-width: 1px;
		border-style: solid;
		border-color: #DCDFE6;
		border-radius: 4px;
		background-color: rgba(254, 252, 252, 1);
	}

    & /deep/ .el-button {
      margin: 4px;
    }
  }</style>