空间网站大全,购物网站建设价位,全国全屋定制品牌十大排名,seo平台是什么TOC
springboot220基于SpringBootVue的周边游平台个人管理模块的设计与实现
第一章 绪论
1.1 选题背景
目前整个社会发展的速度#xff0c;严重依赖于互联网#xff0c;如果没有了互联网的存在#xff0c;市场可能会一蹶不振#xff0c;严重影响经济的发展水平#xf…TOC
springboot220基于SpringBootVue的周边游平台个人管理模块的设计与实现
第一章 绪论
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);Autowiredprivate YouwanluxianLiuyanService youwanluxianLiuyanService;Autowiredprivate TokenService tokenService;Autowiredprivate DictionaryService dictionaryService;//级联表serviceAutowiredprivate YonghuService yonghuService;Autowiredprivate YouwanluxianService youwanluxianService;/*** 后端列表*/RequestMapping(/page)public R page(RequestParam MapString, 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);//字典表数据转换ListYouwanluxianLiuyanView list (ListYouwanluxianLiuyanView)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转viewYouwanluxianLiuyanView 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))));//根据字段查询是否有相同数据WrapperYouwanluxianLiuyanEntity queryWrapper new EntityWrapperYouwanluxianLiuyanEntity().eq(id,0);logger.info(sql语句:queryWrapper.getSqlSegment());YouwanluxianLiuyanEntity youwanluxianLiuyanEntity youwanluxianLiuyanService.selectOne(queryWrapper);youwanluxianLiuyan.setUpdateTime(new Date());if(youwanluxianLiuyanEntitynull){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 {ListYouwanluxianLiuyanEntity youwanluxianLiuyanList new ArrayList();//上传的东西MapString, ListString 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{ListListString dataList PoiUtil.poiImport(file.getPath());//读取xls文件dataList.remove(0);//删除第一行因为第一行是提示for(ListString 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,批量插入数据异常请联系管理员);}}/*** 前端列表*/IgnoreAuthRequestMapping(/list)public R list(RequestParam MapString, 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);//字典表数据转换ListYouwanluxianLiuyanView list (ListYouwanluxianLiuyanView)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转viewYouwanluxianLiuyanView 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);Autowiredprivate GonggaoService gonggaoService;Autowiredprivate TokenService tokenService;Autowiredprivate DictionaryService dictionaryService;//级联表serviceAutowiredprivate YonghuService yonghuService;/*** 后端列表*/RequestMapping(/page)public R page(RequestParam MapString, 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);//字典表数据转换ListGonggaoView list (ListGonggaoView)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转viewGonggaoView 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,永远不会进入);WrapperGonggaoEntity queryWrapper new EntityWrapperGonggaoEntity().eq(gonggao_name, gonggao.getGonggaoName()).eq(gonggao_types, gonggao.getGonggaoTypes());logger.info(sql语句:queryWrapper.getSqlSegment());GonggaoEntity gonggaoEntity gonggaoService.selectOne(queryWrapper);if(gonggaoEntitynull){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,永远不会进入);//根据字段查询是否有相同数据WrapperGonggaoEntity queryWrapper new EntityWrapperGonggaoEntity().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(gonggaoEntitynull){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 {ListGonggaoEntity gonggaoList new ArrayList();//上传的东西MapString, ListString 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{ListListString dataList PoiUtil.poiImport(file.getPath());//读取xls文件dataList.remove(0);//删除第一行因为第一行是提示for(ListString 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,批量插入数据异常请联系管理员);}}/*** 前端列表*/IgnoreAuthRequestMapping(/list)public R list(RequestParam MapString, 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);//字典表数据转换ListGonggaoView list (ListGonggaoView)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转viewGonggaoView 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());WrapperGonggaoEntity queryWrapper new EntityWrapperGonggaoEntity().eq(gonggao_name, gonggao.getGonggaoName()).eq(gonggao_types, gonggao.getGonggaoTypes());logger.info(sql语句:queryWrapper.getSqlSegment());GonggaoEntity gonggaoEntity gonggaoService.selectOne(queryWrapper);if(gonggaoEntitynull){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 ServiceImplYouwanluxianCollectionDao, YouwanluxianCollectionEntity implements YouwanluxianCollectionService {Overridepublic PageUtils queryPage(MapString,Object params) {if(params ! null (params.get(limit) null || params.get(page) null)){params.put(page,1);params.put(limit,10);}PageYouwanluxianCollectionView page new QueryYouwanluxianCollectionView(params).getPage();page.setRecords(baseMapper.selectListView(page,params));return new PageUtils(page);}}
list.vue
templatediv classmain-content!-- 列表页 --div v-ifshowFlagel-form :inlinetrue :modelsearchForm classform-contentel-row :gutter20 classslt :style{justifyContent:contents.searchBoxPosition1?flex-start:contents.searchBoxPosition2?center:flex-end}el-form-item label出行方式el-input prefix-iconel-icon-search v-modelsearchForm.indexNameSearch placeholder出行方式 clearable/el-input/el-form-itemel-form-itemel-button iconel-icon-search typesuccess clicksearch()查询/el-button/el-form-item/el-rowel-row classad :style{justifyContent:contents.btnAdAllBoxPosition1?flex-start:contents.btnAdAllBoxPosition2?center:flex-end}el-form-itemel-buttonv-ifisAuth(dictionaryYouwanluxianChuxingfangshi,新增)typesuccessiconel-icon-plusclickaddOrUpdateHandler()新增/el-buttonel-buttonv-ifisAuth(dictionaryYouwanluxianChuxingfangshi,删除):disableddataListSelections.length 0typedangericonel-icon-deleteclickdeleteHandler()删除/el-button/el-form-item/el-row/el-formdiv classtable-contentel-table classtables :sizecontents.tableSize :show-headercontents.tableShowHeader:header-row-styleheaderRowStyle :header-cell-styleheaderCellStyle:bordercontents.tableBorder:fitcontents.tableFit:stripecontents.tableStripe:row-stylerowStyle:cell-stylecellStyle:style{width: 100%,fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}v-ifisAuth(dictionaryYouwanluxianChuxingfangshi,查看):datadataListv-loadingdataListLoadingselection-changeselectionChangeHandlerel-table-column v-ifcontents.tableSelectiontypeselectionheader-aligncenteraligncenterwidth50/el-table-columnel-table-column label索引 v-ifcontents.tableIndex typeindex width50 /el-table-column :sortablecontents.tableSortable :aligncontents.tableAlignpropcodeIndexheader-aligncenterlabel出行方式编码template slot-scopescope{{scope.row.codeIndex}}/template/el-table-columnel-table-column :sortablecontents.tableSortable :aligncontents.tableAlignpropindexNameheader-aligncenterlabel出行方式名称template slot-scopescope{{scope.row.indexName}}/template/el-table-column!--el-table-column :sortablecontents.tableSortable :aligncontents.tableAlignpropbeizhuheader-aligncenterlabel备注template slot-scopescope{{scope.row.beizhu}}/template/el-table-column--el-table-column width300 :aligncontents.tableAlignheader-aligncenterlabel操作template slot-scopescopeel-button v-ifisAuth(dictionaryYouwanluxianChuxingfangshi,查看) typesuccess iconel-icon-tickets sizemini clickaddOrUpdateHandler(scope.row.id,info)详情/el-buttonel-button v-ifisAuth(dictionaryYouwanluxianChuxingfangshi,修改) typeprimary iconel-icon-edit sizemini clickaddOrUpdateHandler(scope.row.id)修改/el-buttonel-button v-ifisAuth(dictionaryYouwanluxianChuxingfangshi,删除) typedanger iconel-icon-delete sizemini clickdeleteHandler(scope.row.id)删除/el-button/template/el-table-column/el-tableel-paginationclssspages:layoutlayoutssize-changesizeChangeHandlecurrent-changecurrentChangeHandle:current-pagepageIndex:page-sizes[10, 20, 50, 100]:page-sizeNumber(contents.pageEachNum):totaltotalPage:smallcontents.pageStyleclasspagination-content:backgroundcontents.pageBtnBG:style{textAlign:contents.pagePosition1?left:contents.pagePosition2?center:right}/el-pagination/div/div!-- 添加/修改页面 将父组件的search方法传递给子组件--add-or-update v-ifaddOrUpdateFlag :parentthis refaddOrUpdate/add-or-update/div
/template
scriptimport 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 leftif(this.contents.inputFontPosition 2) textAlign centerif(this.contents.inputFontPosition 3) textAlign rightel.style.textAlign textAlignel.style.height this.contents.inputHeightel.style.lineHeight this.contents.inputHeightel.style.color this.contents.inputFontColorel.style.fontSize this.contents.inputFontSizeel.style.borderWidth this.contents.inputBorderWidthel.style.borderStyle this.contents.inputBorderStyleel.style.borderColor this.contents.inputBorderColorel.style.borderRadius this.contents.inputBorderRadiusel.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.inputTitleColorel.style.fontSize this.contents.inputTitleSizeel.style.lineHeight this.contents.inputHeight})}setTimeout((){document.querySelectorAll(.form-content .slt .el-input__prefix).forEach(el{el.style.color this.contents.inputIconColorel.style.lineHeight this.contents.inputHeight})document.querySelectorAll(.form-content .slt .el-input__suffix).forEach(el{el.style.color this.contents.inputIconColorel.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.searchBtnHeightel.style.color this.contents.searchBtnFontColorel.style.fontSize this.contents.searchBtnFontSizeel.style.borderWidth this.contents.searchBtnBorderWidthel.style.borderStyle this.contents.searchBtnBorderStyleel.style.borderColor this.contents.searchBtnBorderColorel.style.borderRadius this.contents.searchBtnBorderRadiusel.style.backgroundColor this.contents.searchBtnBgColor})})},// 新增、批量删除contentBtnAdAllStyleChange() {this.$nextTick((){document.querySelectorAll(.form-content .ad .el-button--success).forEach(el{el.style.height this.contents.btnAdAllHeightel.style.color this.contents.btnAdAllAddFontColorel.style.fontSize this.contents.btnAdAllFontSizeel.style.borderWidth this.contents.btnAdAllBorderWidthel.style.borderStyle this.contents.btnAdAllBorderStyleel.style.borderColor this.contents.btnAdAllBorderColorel.style.borderRadius this.contents.btnAdAllBorderRadiusel.style.backgroundColor this.contents.btnAdAllAddBgColor})document.querySelectorAll(.form-content .ad .el-button--danger).forEach(el{el.style.height this.contents.btnAdAllHeightel.style.color this.contents.btnAdAllDelFontColorel.style.fontSize this.contents.btnAdAllFontSizeel.style.borderWidth this.contents.btnAdAllBorderWidthel.style.borderStyle this.contents.btnAdAllBorderStyleel.style.borderColor this.contents.btnAdAllBorderColorel.style.borderRadius this.contents.btnAdAllBorderRadiusel.style.backgroundColor this.contents.btnAdAllDelBgColor})document.querySelectorAll(.form-content .ad .el-button--warning).forEach(el{el.style.height this.contents.btnAdAllHeightel.style.color this.contents.btnAdAllWarnFontColorel.style.fontSize this.contents.btnAdAllFontSizeel.style.borderWidth this.contents.btnAdAllBorderWidthel.style.borderStyle this.contents.btnAdAllBorderStyleel.style.borderColor this.contents.btnAdAllBorderColorel.style.borderRadius this.contents.btnAdAllBorderRadiusel.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 langscss 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
