如何使用ssm实现流浪动物救助站+vue

@TOC

ssm593流浪动物救助站vue">ssm593流浪动物救助站+vue

绪论

课题背景

身处网络时代，随着网络系统体系发展的不断成熟和完善，人们的生活也随之发生了很大的变化。目前，人们在追求较高物质生活的同时，也在想着如何使自身的精神内涵得到提升，而读书就是人们获得精神享受非常重要的途径[1]。纸质版的校园失物比较沉重，携带不方便，而由于手机、平板不仅能够储存大量的校园失物信息数据，而且重量轻，可随身携带，因此现在的人们更愿意通过手机、平板等来进行在线阅读[2]。由此，开发一款流浪动物救助站非常符合人们阅读的需求。

过去人们看书需要到书店或者图书馆，而现在只要有网络，人们就可以通过手机、平板或电脑想什么时候看书就可以什么时候看，想看什么样的书就可以看什么样的书，非常的方便，并且人们把平时的闲碎时间全部利用起来进行阅读，使阅读效率大大提高，生活也变得丰富多彩起来。另外，通过流浪动物救助站，想要阅读哪本书，搜索下就能够快速找到，并且还可以对校园失物进行归类、统计和规范管理。该流浪动物救助站的界面非常清晰，使用简单，识字的人们都可以使用，并且它的功能齐全，能够满足各种各样的人的要求。

本文不仅从需求分析、设计分析、功能分析对该电子书在线系统进行了全面的分析，而且还从开发背景、开发环境、目标、流程、数据库、系统维护对该流浪动物救助站进行了总体的规划和设计。该流浪动物救助站利用vue技术和MYSQL数据库进行开发，具有很好的稳定性和可发展性。

研究现状

国外信息技术的发展步伐一直没有停止，源源不断的计算机应用软件被研发出来，并且软件技术也在不断迭代，目前世界各国的软件行业都已新兴了起来[3-5]。

与国外相比，我国信息技术的发展相对晚一些，不过后面，经过我们的不断追赶，我国的信息技术已经有了很大的进步，我国对现有的软件开发技术进行了细致的专研，目前我国已经能够独立的开发系统，并且也已经将这些软件系统应用于人们的生活中和各行各业中，目前，软件行业是我国非常受欢迎的行业[6-9]。

信息数字化使人们的各种信息能够快速传播，使人们的各种信息能够得到充分利用，同时，也大大宣传了信息数字化背后的软件系统[10-12]。软件开发团队的能力越来越强，开发技术功能越来越强大，软件系统大大提高了信息处理的效率，节省了处理者的处理时间。在阅读校园失物方面，人们阅读纸质版的校园失物，现在已经显得有些过时[13-14]。利用目前的软件开发技术开发出一款流浪动物救助站能够大大的满足人们的阅读需求，人们通过该流浪动物救助站能够快速查找、在线阅读自己喜欢的校园失物，并且也大大提高了人们阅读的效率。

研究内容

本论文主要阐述了该流浪动物救助站的开发技术、系统需求分析、系统设计、系统功能实现和系统测试。为了开发该系统，我在下面花费了很多功夫和心思，例如，到图书馆阅读vue技术、MYSQL数据库等方面的编程校园失物，又在网上搜索了很多别人做的相类似的系统，将他们比较好的设计理念应用到自己的设计当中，最后才有了现在的成果。

本论文主要分为7部分，包括：

一、绪论：阐述了该系统的背景技术、研究现状和开发意义；

二、相关技术：介绍了开发该系统所用到的各种技术；

三、系统需求分析：阐述了开发该系统的可行性分析和功能需求分析；

四、系统设计：阐述了该系统的功能模块设计和数据库设计；

五、系统实现：展示了该系统的主要功能模块界面；

六、系统测试：对开发出的该系统进行测试；

七、系统总结：总结开发该系统的整个工作过程。

系统开发环境
1. vue技术

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动

Vue.js目前最火的的一个前端框架，三大主流前端框架之一。 Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

java技术">JAVA技术

Java编程语言具有跨平台、分布式、可移植等多种特性，很多平台Java都能运行，世界各地都能够运行Java编写的程序。1995年，开发出了JAVA编程语言。JAVA编程语言具有多种特性，例如：简单、安全、可移植、鲁棒性（Robust）、编写能效高、线程多等。在互联网飞速发展的时代，Java编程语言应用也越来越普遍[19]。它的特点具有：

一、面向对象：JAVA适用于分布式环境，JAVA能够完全面向对象，包括对象的设计及联系；

二、分布式：JAVA工作的同时，带动其他计算节点工作，只要有网络，就可以访问其他对象；

三、健壮性：JAVA能够自动处理垃圾和异常，并且机制类型强；

四、安全性：当指针和内存被删除时，非法的内存就可以避免。

MYSQL数据库

数据库在每个网站的开发中都是必不可少的，过去数据库只具有数据的保存和管理功能，但随着后来的不断更新和迭代，目前的数据库不仅能够进行数据的处理，而且还能够储存不计其数的数据[20]。

该流浪动物救助站所使用的就是MYSQL数据库，当初是微软公司开发出的MYSQL数据库。MYSQL数据库总共建立了十几个相对应的表，它们之间独立联系，数据库和程序是密不可分的[21]。

MYSQL数据库的特点包括：能够应用于多种操作系统中；查询SQL时优化了算法，搜索速度提高的不少；还可以进行数据库的管理、控制、优化等操作；一个数据库可以记录不计其数的数据。

B/S结构

当前比较流行的网络化结构模式是B/S（浏览器/服务器）结构，它能够在服务器上面集中系统的所有核心功能，使系统开发人员的工作变得简单，并且开发出的系统也更容易使用和后期维护。用于比较熟悉的浏览器有360浏览器、谷歌浏览器、QQ浏览器等，用于比较熟悉的数据库有sqlserver、mysql数据库等，上边这些数据库和浏览器都可以安装在客户端上。B/S结构没有什么限制，并且还不需要专门的安装软件，只要笔记本、电脑有网络就能够访问系统。采用B/S结构开发的程序，比较好维护，只需要在客户端就可处理，不需要非得在服务器上处理，并且跟用户的交互性比较好，刷新浏览器就可进行数据信息的实时更新[22]。B/S架构如图2-1所示：

图2-1 B/S模式架构图

ssm框架技术">SSM框架技术

该流浪动物救助站是基于Spring、SpringMVC、Mybatis框架开发出来的。

2004年，Spring 框架才第一次亮相，后面也进行了很多次的更新。Spring框架包括SpringCore、Spring AOP、Spring ORM、Spring DAO、Spring Web Flow、Spring Context和Spring Web MVC等七个模块，企业应用程序就是通过这七个模块气筒不同的平台来进行开发的，Spring Web MVC中的各个元素之间形成了松散耦合[23-25]。

系统分析
1. 可行性分析

开发者在进行开发系统之前，都需要进行可行性分析，保证该系统能够被成功开发出来。

技术可行性

开发该流浪动物救助站所采用的技术是vue和MYSQL数据库。计算机专业的学生在学校期间已经比较系统的学习了很多编程方面的知识，同时也接触了很多编程软件，所以在技术开发方面还是比较有信心的。

操作可行性

该流浪动物救助站的界面简洁清楚，操作简单，用户一看就会操作。操作界面上每一步都有提示，用户只要按照提示进行操作就可以了。该流浪动物救助站具有操作可行性。

经济可行性

我现在还是一名学生，还没有一份稳定的经济收入，所以我会将开发程序的成本控制在自己所能接受的范围内。我所使用的开发软件、数据库还有设计界面用的photoshop软件都是在网上免费下载的，另外程序编写阶段所用到的源代码也是在网上免费得到的，现在在网上能下载很多有用的、免费的东西，所以开发该系统基本不花钱，具有经济可行性。

法律可行性

我是通过图书馆、百度文库、百度网页等获得的开发该流浪动物救助站所需要用到的资料和软件，都是采用的合法渠道，另外源代码和论文内容都是我自己一字一字写出来的，没有抄袭别人的，具有法律可行性。

通过上述的技术可行性、操作可行性、经济可行性以及法律可行性分析，可以看出，该流浪动物救助站完全可以进行顺利开发。

系统性能分析
存储性：该流浪动物救助站的数据库功能比较强大，能够录入很多纷繁复杂的信息，且能够保证数据的实时性；

二、易学性：该流浪动物救助站使用起来非常简单，用户一看就会，不需要进行专门的培训，非常好上手，使用个一两次就能够熟练操作；

三、数据要求：录入的数据准确可靠，能够及时进行更新，可以独立保存，删除一些不需要的数据；

四、稳定性：该流浪动物救助站能够稳定的运行，界面清晰明了；

五、可靠性：该流浪动物救助站安装有拦截器，可以对病毒等进行拦截，并且还对信息进行了保护措施，用户可以放心使用。

系统功能分析
1. 角色需求

该流浪动物救助站主要为管理员和用户两类用户角色提供需求，管理员在后台可以对系统进行全面管理，用户在前台可以进行查看系统信息，注册登录，查询校园失物，评论，下载校园失物等操作。

用户静态结构如图3-1所示。

图3-1 用户静态结构图

系统流程分析
1. 注册流程

用户注册之后才可以登录系统，用户注册流程如图3-2所示：

图3-2 注册流程图

登录流程

用户需要登录系统之后，才可以进行校园失物评论、校园失物下载等操作。而管理员也只有登录系统之后，可以对系统各个方面的内容进行管理，不受任何限制。用户登录流程如图3-3所示。

图3-3 登录流程图

系统设计
1. 系统概要设计

本文通过B/S结构(Browser/Server,浏览器/服务器结构)开发的该流浪动物救助站，B/S结构的优点很多，例如：开发容易、强的共享性、便于维护等，只要有网络，用户可以随时随地进行使用。

系统工作原理如图4-1所示。

图4-1 系统工作原理图

系统结构设计

系统结构设计就像一个树状结构一样，一个树干有很多分支，大任务相当于树干，小任务相当于树枝，只有需求分析信息弄清楚之后，才能保证每个小任务都能实现目标，对初步设计好的系统再进行不断优化，最终得到一个具体现实的系统结构。

管理员功能模块和用户功能模块是该流浪动物救助站的两大部分，系统结构如图4-2所示。

流浪动物救助站

用户信息管理

公告信息管理

领养信息管理

求助信息管理

流浪动物管理

用户信息修改

用户信息新增

流浪动物添加

流浪动物删除

流浪动物修改

求助信息添加

求助信息修改

求助信息删除

公告信息添加

公告信息删改

公告信息删除

领养信息添加

领养信息修改

领养信息删除

论坛信息管理

论坛信息修改

论坛信息删除

论坛信息添加

图4-2 系统结构图

4.3 数据库设计

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

4.3.1 数据库概念设计

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

（1）下图是领养反馈实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\领养反馈.jpg$ 图4.1 领养反馈实体属性图

（2）下图是用户实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\用户.jpg$ 图4.2 用户实体属性图

（3）下图是求助信息实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\求助信息.jpg$ 图4.3 求助信息实体属性图

（4）下图是流浪动物实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\流浪动物.jpg$ 图4.4 流浪动物实体属性图

（5）下图是公告信息实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\公告信息.jpg$ 图4.5 公告信息实体属性图

（6）下图是字典表实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\字典表.jpg$ 图4.6 字典表实体属性图

（7）下图是员工实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\员工.jpg$ 图4.7 员工实体属性图

（8）下图是流浪动物领养实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\流浪动物领养.jpg$ 图4.8 流浪动物领养实体属性图

（9）下图是论坛实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\论坛.jpg$ 图4.9 论坛实体属性图

（10）下图是领养反馈留言实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\领养反馈留言.jpg$ 图4.10 领养反馈留言实体属性图

（11）下图是流浪动物留言实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\流浪动物留言.jpg$ 图4.11 流浪动物留言实体属性图

（12）下图是用户表实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\用户表.jpg$ 图4.12 用户表实体属性图

（13）下图是捐赠信息实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\liulangdongwujiuzu\捐赠信息.jpg$ 图4.13 捐赠信息实体属性图

数据库表设计

采用MYSQL数据库对该流浪动物救助站的数据进行存储，数据库中所包括的各个数据库表的详细信息如下所示：

表4.1字典表表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	dic_code	String	字段	是
3	dic_name	String	字段名	是
4	code_index	Integer	编码	是
5	index_name	String	编码名字	是
6	super_id	Integer	父字段id	是
7	beizhu	String	备注	是
8	create_time	Date	创建时间	是

表4.2论坛表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	forum_name	String	帖子标题	是
3	yonghu_id	Integer	用户	是
4	yuangong_id	Integer	员工	是
5	users_id	Integer	管理员	是
6	forum_content	String	发布内容	是
7	super_ids	Integer	父id	是
8	forum_state_types	Integer	帖子状态	是
9	insert_time	Date	发帖时间	是
10	update_time	Date	修改时间	是
11	create_time	Date	创建时间	是

表4.3捐赠信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	qiuzhu_id	Integer	求助	是
4	juanzheng_types	Integer	捐赠渠道	是
5	juanzheng_number	BigDecimal	捐赠金额	是
6	create_time	Date	创建时间	是

表4.4流浪动物领养表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	liulangdongwu_id	Integer	流浪动物	是
3	yonghu_id	Integer	用户	是
4	lingyang_yesno_types	Integer	审核状态	是
5	lingyang_yesno_text	String	审核结果	是
6	create_time	Date	创建时间	是

表4.5领养反馈表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	liulangdongwu_id	Integer	流浪动物	是
3	yonghu_id	Integer	用户	是
4	lingyangfankui_name	String	标题	是
5	lingyangfankui_photo	String	动物图片	是
6	lingyangfankui_video	String	视频	是
7	lingyangfankui_content	String	详情	是
8	create_time	Date	创建时间	是

表4.6领养反馈留言表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	lingyangfankui_id	Integer	流浪动物	是
3	yonghu_id	Integer	用户	是
4	lingyangfankui_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.7流浪动物表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	liulangdongwu_name	String	动物昵称	是
3	liulangdongwu_types	Integer	动物品种	是
4	liulangdongwu_photo	String	动物图片	是
5	liulangdongwu_sex_types	Integer	动物性别	是
6	liulangdongwu_jiangkang	String	健康状况	是
7	liulangdongwu_shizhang	String	疫苗情况	是
8	liulangdongwu_jueyu	String	绝育情况	是
9	lingyang_status_types	Integer	领养状态	是
10	liulangdongwu_content	String	动物详情	是
11	create_time	Date	创建时间	是

表4.8流浪动物留言表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	liulangdongwu_id	Integer	流浪动物	是
3	yonghu_id	Integer	用户	是
4	liulangdongwu_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.9公告信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	news_name	String	公告标题	是
3	news_types	Integer	公告类型	是
4	news_photo	String	公告图片	是
5	insert_time	Date	公告时间	是
6	news_content	String	公告详情	是
7	create_time	Date	创建时间	是

表4.10求助信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	qiuzhu_name	String	动物昵称	是
4	liulangdongwu_types	Integer	动物品种	是
5	qiuzhu_photo	String	动物图片	是
6	qiuzhu_content	String	求助详情	是
7	create_time	Date	创建时间	是

表4.11用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_name	String	用户姓名	是
3	yonghu_photo	String	头像	是
4	yonghu_phone	String	联系方式	是
5	yonghu_id_number	String	用户身份证号	是
6	yonghu_email	String	邮箱	是
7	yonghu_lingyang	String	领养需求	是
8	yonghu_address	String	住址	是
9	yonghu_delete	Integer	假删	是
10	create_time	Date	创建时间	是

表4.12员工表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yuangong_name	String	员工姓名	是
3	yuangong_photo	String	头像	是
4	yuangong_phone	String	联系方式	是
5	yuangong_email	String	邮箱	是
6	yonghu_delete	Integer	假删	是
7	create_time	Date	创建时间	是

表4.13用户表表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	username	String	用户名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

系统的实现
1. 功能模块的实现

5.1用户信息管理

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

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

图5.1 用户信息管理页面

5.2 流浪动物管理

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

图5.2 流浪动物管理页面

5.3领养信息管理

如图5.3显示的就是领养信息管理页面，此页面提供给管理员的功能有：根据领养信息进行条件查询，还可以对领养信息进行新增、修改、查询操作等等。

图5.3 领养信息管理页面

5.1公告信息管理

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

图5.4 公告信息管理页面

java">MPUtil.java

package com.utils;import java.util.Arrays;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;import org.apache.commons.lang3.StringUtils;import cn.hutool.core.bean.BeanUtil;import com.baomidou.mybatisplus.mapper.Wrapper;/*** Mybatis-Plus工具类*/
public class MPUtil {public static final char UNDERLINE = '_';//mybatis plus allEQ 表达式转换public static Map allEQMapPre(Object bean,String pre) {Map<String, Object> map =BeanUtil.beanToMap(bean);return camelToUnderlineMap(map,pre);}//mybatis plus allEQ 表达式转换public static Map allEQMap(Object bean) {Map<String, Object> map =BeanUtil.beanToMap(bean);return camelToUnderlineMap(map,"");}public static Wrapper allLikePre(Wrapper wrapper,Object bean,String pre) {Map<String, Object> map =BeanUtil.beanToMap(bean);Map result = camelToUnderlineMap(map,pre);return genLike(wrapper,result);}public static Wrapper allLike(Wrapper wrapper,Object bean) {Map result = BeanUtil.beanToMap(bean, true, true);			 return genLike(wrapper,result);}public static Wrapper genLike( Wrapper wrapper,Map param) {Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();int i=0;while (it.hasNext()) {if(i>0) wrapper.and();Map.Entry<String, Object> entry = it.next();String key = entry.getKey();String value = (String) entry.getValue();wrapper.like(key, value);i++;}return wrapper;}public static Wrapper likeOrEq(Wrapper wrapper,Object bean) {Map result = BeanUtil.beanToMap(bean, true, true);			 return genLikeOrEq(wrapper,result);}public static Wrapper genLikeOrEq( Wrapper wrapper,Map param) {Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();int i=0;while (it.hasNext()) {if(i>0) wrapper.and();Map.Entry<String, Object> entry = it.next();String key = entry.getKey();if(entry.getValue().toString().contains("%")) {wrapper.like(key, entry.getValue().toString().replace("%", ""));} else {wrapper.eq(key, entry.getValue());}i++;}return wrapper;}public static Wrapper allEq(Wrapper wrapper,Object bean) {Map result = BeanUtil.beanToMap(bean, true, true);			 return genEq(wrapper,result);}public static Wrapper genEq( Wrapper wrapper,Map param) {Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();int i=0;while (it.hasNext()) {if(i>0) wrapper.and();Map.Entry<String, Object> entry = it.next();String key = entry.getKey();wrapper.eq(key, entry.getValue());i++;}return wrapper;}public static Wrapper between(Wrapper wrapper,Map<String, Object> params) {for(String key : params.keySet()) {String columnName = "";if(key.endsWith("_start")) {columnName = key.substring(0, key.indexOf("_start"));if(StringUtils.isNotBlank(params.get(key).toString())) {wrapper.ge(columnName, params.get(key));}}if(key.endsWith("_end")) {columnName = key.substring(0, key.indexOf("_end"));if(StringUtils.isNotBlank(params.get(key).toString())) {wrapper.le(columnName, params.get(key));}}}return wrapper;}public static Wrapper sort(Wrapper wrapper,Map<String, Object> params) {String order = "";if(params.get("order") != null && StringUtils.isNotBlank(params.get("order").toString())) {order = params.get("order").toString();}if(params.get("sort") != null && StringUtils.isNotBlank(params.get("sort").toString())) {if(order.equalsIgnoreCase("desc")) {wrapper.orderDesc(Arrays.asList(params.get("sort")));} else {wrapper.orderAsc(Arrays.asList(params.get("sort")));}}return wrapper;}/*** 驼峰格式字符串转换为下划线格式字符串* * @param param* @return*/public static String camelToUnderline(String param) {if (param == null || "".equals(param.trim())) {return "";}int len = param.length();StringBuilder sb = new StringBuilder(len);for (int i = 0; i < len; i++) {char c = param.charAt(i);if (Character.isUpperCase(c)) {sb.append(UNDERLINE);sb.append(Character.toLowerCase(c));} else {sb.append(c);}}return sb.toString();}public static void main(String[] ages) {System.out.println(camelToUnderline("ABCddfANM"));}public static Map camelToUnderlineMap(Map param, String pre) {Map<String, Object> newMap = new HashMap<String, Object>();Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();while (it.hasNext()) {Map.Entry<String, Object> entry = it.next();String key = entry.getKey();String newKey = camelToUnderline(key);if (pre.endsWith(".")) {newMap.put(pre + newKey, entry.getValue());} else if (StringUtils.isEmpty(pre)) {newMap.put(newKey, entry.getValue());} else {newMap.put(pre + "." + newKey, entry.getValue());}}return newMap;}
}

java">NewsController.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("/news")
public class NewsController {private static final Logger logger = LoggerFactory.getLogger(NewsController.class);@Autowiredprivate NewsService newsService;@Autowiredprivate TokenService tokenService;@Autowiredprivate DictionaryService dictionaryService;//级联表service@Autowiredprivate YonghuService yonghuService;@Autowiredprivate YuangongService yuangongService;/*** 后端列表*/@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"));else if("员工".equals(role))params.put("yuangongId",request.getSession().getAttribute("userId"));if(params.get("orderBy")==null || params.get("orderBy")==""){params.put("orderBy","id");}PageUtils page = newsService.queryPage(params);//字典表数据转换List<NewsView> list =(List<NewsView>)page.getList();for(NewsView 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);NewsEntity news = newsService.selectById(id);if(news !=null){//entity转viewNewsView view = new NewsView();BeanUtils.copyProperties( news , view );//把实体数据重构到view中//修改对应字典表字段dictionaryService.dictionaryConvert(view, request);return R.ok().put("data", view);}else {return R.error(511,"查不到数据");}}/*** 后端保存*/@RequestMapping("/save")public R save(@RequestBody NewsEntity news, HttpServletRequest request){logger.debug("save方法:,,Controller:{},,news:{}",this.getClass().getName(),news.toString());String role = String.valueOf(request.getSession().getAttribute("role"));if(false)return R.error(511,"永远不会进入");Wrapper<NewsEntity> queryWrapper = new EntityWrapper<NewsEntity>().eq("news_name", news.getNewsName()).eq("news_types", news.getNewsTypes());logger.info("sql语句:"+queryWrapper.getSqlSegment());NewsEntity newsEntity = newsService.selectOne(queryWrapper);if(newsEntity==null){news.setInsertTime(new Date());news.setCreateTime(new Date());newsService.insert(news);return R.ok();}else {return R.error(511,"表中有相同数据");}}/*** 后端修改*/@RequestMapping("/update")public R update(@RequestBody NewsEntity news, HttpServletRequest request){logger.debug("update方法:,,Controller:{},,news:{}",this.getClass().getName(),news.toString());String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");//根据字段查询是否有相同数据Wrapper<NewsEntity> queryWrapper = new EntityWrapper<NewsEntity>().notIn("id",news.getId()).andNew().eq("news_name", news.getNewsName()).eq("news_types", news.getNewsTypes());logger.info("sql语句:"+queryWrapper.getSqlSegment());NewsEntity newsEntity = newsService.selectOne(queryWrapper);if("".equals(news.getNewsPhoto()) || "null".equals(news.getNewsPhoto())){news.setNewsPhoto(null);}if(newsEntity==null){newsService.updateById(news);//根据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());newsService.deleteBatchIds(Arrays.asList(ids));return R.ok();}/*** 批量上传*/@RequestMapping("/batchInsert")public R save( String fileName){logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);try {List<NewsEntity> newsList = 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){//循环NewsEntity newsEntity = new NewsEntity();
//                            newsEntity.setNewsName(data.get(0));                    //公告标题 要改的
//                            newsEntity.setNewsTypes(Integer.valueOf(data.get(0)));   //公告类型 要改的
//                            newsEntity.setNewsPhoto("");//照片
//                            newsEntity.setInsertTime(date);//时间
//                            newsEntity.setNewsContent("");//照片
//                            newsEntity.setCreateTime(date);//时间newsList.add(newsEntity);//把要查询是否重复的字段放入map中}//查询是否重复newsService.insertBatch(newsList);return R.ok();}}}}catch (Exception e){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 = newsService.queryPage(params);//字典表数据转换List<NewsView> list =(List<NewsView>)page.getList();for(NewsView 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);NewsEntity news = newsService.selectById(id);if(news !=null){//entity转viewNewsView view = new NewsView();BeanUtils.copyProperties( news , view );//把实体数据重构到view中//修改对应字典表字段dictionaryService.dictionaryConvert(view, request);return R.ok().put("data", view);}else {return R.error(511,"查不到数据");}}/*** 前端保存*/@RequestMapping("/add")public R add(@RequestBody NewsEntity news, HttpServletRequest request){logger.debug("add方法:,,Controller:{},,news:{}",this.getClass().getName(),news.toString());Wrapper<NewsEntity> queryWrapper = new EntityWrapper<NewsEntity>().eq("news_name", news.getNewsName()).eq("news_types", news.getNewsTypes());logger.info("sql语句:"+queryWrapper.getSqlSegment());NewsEntity newsEntity = newsService.selectOne(queryWrapper);if(newsEntity==null){news.setInsertTime(new Date());news.setCreateTime(new Date());newsService.insert(news);return R.ok();}else {return R.error(511,"表中有相同数据");}}}

java">ForumServiceImpl.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.ForumDao;
import com.entity.ForumEntity;
import com.service.ForumService;
import com.entity.view.ForumView;/*** 论坛 服务实现类*/
@Service("forumService")
@Transactional
public class ForumServiceImpl extends ServiceImpl<ForumDao, ForumEntity> implements ForumService {@Overridepublic 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<ForumView> page =new Query<ForumView>(params).getPage();page.setRecords(baseMapper.selectListView(page,params));return new PageUtils(page);}}

add-or-update.vue

<template><div class="addEdit-block"><el-formclass="detail-form-content"ref="ruleForm":model="ruleForm":rules="rules"label-width="80px":style="{backgroundColor:addEditForm.addEditBoxColor}"><el-row><el-col :span="12"><el-form-item class="input" v-if="type!='info'"  label="审核状态编码" prop="codeIndex"><el-input v-model="ruleForm.codeIndex"placeholder="审核状态编码" clearable  :readonly="ro.codeIndex"></el-input></el-form-item><div v-else><el-form-item class="input" label="审核状态编码" prop="codeIndex"><el-input v-model="ruleForm.codeIndex"placeholder="审核状态编码" readonly></el-input></el-form-item></div></el-col><el-col :span="12"><el-form-item class="input" v-if="type!='info'"  label="审核状态" prop="indexName"><el-input v-model="ruleForm.indexName"placeholder="审核状态" clearable  :readonly="ro.indexName"></el-input></el-form-item><div v-else><el-form-item class="input" label="审核状态" prop="indexName"><el-input v-model="ruleForm.indexName"placeholder="审核状态" readonly></el-input></el-form-item></div></el-col><!--<el-col :span="12"><el-form-item class="input" v-if="type!='info'"  label="备注" prop="beizhu"><el-input v-model="ruleForm.beizhu"placeholder="备注" clearable  :readonly="ro.beizhu"></el-input></el-form-item><div v-else><el-form-item class="input" label="备注" prop="beizhu"><el-input v-model="ruleForm.beizhu"placeholder="备注" readonly></el-input></el-form-item></div></el-col>--></el-row><el-form-item class="btn"><el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button><el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button><el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button></el-form-item></el-form></div>
</template>
<script>import styleJs from "../../../utils/style.js";// 数字，邮件，手机，url，身份证校验import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";export default {data() {let self = thisreturn {addEditForm:null,id: '',type: '',ro:{codeIndex : true,indexName : false,superId : false,beizhu : false,},ruleForm: {codeIndex: '',indexName: '',superId : '',beizhu : '',},rules: {/*beizhu: [{ required: true, message: '备注不能为空', trigger: 'blur' },{  pattern: /^[1-9]\d*$/,message: '备注只能为正整数',trigger: 'blur'}],*/}};},props: ["parent"],computed: {},created() {this.addEditForm = styleJs.addStyle();this.addEditStyleChange()this.addEditUploadStyleChange()},methods: {// 初始化init(id,type) {if (id) {this.id = id;this.type = type;}if(this.type=='info'||this.type=='else'){this.info(id);}else{//查询最大值 startthis.$http({url: `dictionary/maxCodeIndex`,method: "post",data: {"dicCode":"lingyang_yesno_types"}}).then(({ data }) => {if (data && data.code === 0) {this.ruleForm.codeIndex = data.maxCodeIndex;} else {this.$message.error(data.msg);}});//查询最大值 end}},// 多级联动参数info(id) {this.$http({url: `dictionary/info/${id}`,method: "get"}).then(({ data }) => {if (data && data.code === 0) {this.ruleForm = data.data;//解决前台上传图片后台不显示的问题let reg=new RegExp('../../../upload','g')//g代表全部} else {this.$message.error(data.msg);}});},// 提交onSubmit() {if((!this.ruleForm.indexName)){this.$message.error('审核状态不能为空');return}this.$refs["ruleForm"].validate(valid => {if (valid) {let ruleForm = this.ruleForm;ruleForm["dicCode"]="lingyang_yesno_types";ruleForm["dicName"]="审核状态";this.$http({url: `dictionary/${!this.ruleForm.id ? "save" : "update"}`,method: "post",data: ruleForm}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {this.parent.showFlag = true;this.parent.addOrUpdateFlag = false;this.parent.dictionaryCrossAddOrUpdateFlag = false;this.parent.search();this.parent.contentStyleChange();}});} else {this.$message.error(data.msg);}});}});},// 返回back() {this.parent.showFlag = true;this.parent.addOrUpdateFlag = false;this.parent.dictionaryCrossAddOrUpdateFlag = false;this.parent.contentStyleChange();},addEditStyleChange() {this.$nextTick(()=>{// inputdocument.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{el.style.height = this.addEditForm.inputHeightel.style.color = this.addEditForm.inputFontColorel.style.fontSize = this.addEditForm.inputFontSizeel.style.borderWidth = this.addEditForm.inputBorderWidthel.style.borderStyle = this.addEditForm.inputBorderStyleel.style.borderColor = this.addEditForm.inputBorderColorel.style.borderRadius = this.addEditForm.inputBorderRadiusel.style.backgroundColor = this.addEditForm.inputBgColor})document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{el.style.lineHeight = this.addEditForm.inputHeightel.style.color = this.addEditForm.inputLableColorel.style.fontSize = this.addEditForm.inputLableFontSize})// selectdocument.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{el.style.height = this.addEditForm.selectHeightel.style.color = this.addEditForm.selectFontColorel.style.fontSize = this.addEditForm.selectFontSizeel.style.borderWidth = this.addEditForm.selectBorderWidthel.style.borderStyle = this.addEditForm.selectBorderStyleel.style.borderColor = this.addEditForm.selectBorderColorel.style.borderRadius = this.addEditForm.selectBorderRadiusel.style.backgroundColor = this.addEditForm.selectBgColor})document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{el.style.lineHeight = this.addEditForm.selectHeightel.style.color = this.addEditForm.selectLableColorel.style.fontSize = this.addEditForm.selectLableFontSize})document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{el.style.color = this.addEditForm.selectIconFontColorel.style.fontSize = this.addEditForm.selectIconFontSize})// datedocument.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{el.style.height = this.addEditForm.dateHeightel.style.color = this.addEditForm.dateFontColorel.style.fontSize = this.addEditForm.dateFontSizeel.style.borderWidth = this.addEditForm.dateBorderWidthel.style.borderStyle = this.addEditForm.dateBorderStyleel.style.borderColor = this.addEditForm.dateBorderColorel.style.borderRadius = this.addEditForm.dateBorderRadiusel.style.backgroundColor = this.addEditForm.dateBgColor})document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{el.style.lineHeight = this.addEditForm.dateHeightel.style.color = this.addEditForm.dateLableColorel.style.fontSize = this.addEditForm.dateLableFontSize})document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{el.style.color = this.addEditForm.dateIconFontColorel.style.fontSize = this.addEditForm.dateIconFontSizeel.style.lineHeight = this.addEditForm.dateHeight})// uploadlet iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{el.style.width = this.addEditForm.uploadHeightel.style.height = this.addEditForm.uploadHeightel.style.borderWidth = this.addEditForm.uploadBorderWidthel.style.borderStyle = this.addEditForm.uploadBorderStyleel.style.borderColor = this.addEditForm.uploadBorderColorel.style.borderRadius = this.addEditForm.uploadBorderRadiusel.style.backgroundColor = this.addEditForm.uploadBgColor})document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{el.style.lineHeight = this.addEditForm.uploadHeightel.style.color = this.addEditForm.uploadLableColorel.style.fontSize = this.addEditForm.uploadLableFontSize})document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{el.style.color = this.addEditForm.uploadIconFontColorel.style.fontSize = this.addEditForm.uploadIconFontSizeel.style.lineHeight = iconLineHeightel.style.display = 'block'})// 多文本输入框document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{el.style.height = this.addEditForm.textareaHeightel.style.color = this.addEditForm.textareaFontColorel.style.fontSize = this.addEditForm.textareaFontSizeel.style.borderWidth = this.addEditForm.textareaBorderWidthel.style.borderStyle = this.addEditForm.textareaBorderStyleel.style.borderColor = this.addEditForm.textareaBorderColorel.style.borderRadius = this.addEditForm.textareaBorderRadiusel.style.backgroundColor = this.addEditForm.textareaBgColor})document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{// el.style.lineHeight = this.addEditForm.textareaHeightel.style.color = this.addEditForm.textareaLableColorel.style.fontSize = this.addEditForm.textareaLableFontSize})// 保存document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{el.style.width = this.addEditForm.btnSaveWidthel.style.height = this.addEditForm.btnSaveHeightel.style.color = this.addEditForm.btnSaveFontColorel.style.fontSize = this.addEditForm.btnSaveFontSizeel.style.borderWidth = this.addEditForm.btnSaveBorderWidthel.style.borderStyle = this.addEditForm.btnSaveBorderStyleel.style.borderColor = this.addEditForm.btnSaveBorderColorel.style.borderRadius = this.addEditForm.btnSaveBorderRadiusel.style.backgroundColor = this.addEditForm.btnSaveBgColor})// 返回document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{el.style.width = this.addEditForm.btnCancelWidthel.style.height = this.addEditForm.btnCancelHeightel.style.color = this.addEditForm.btnCancelFontColorel.style.fontSize = this.addEditForm.btnCancelFontSizeel.style.borderWidth = this.addEditForm.btnCancelBorderWidthel.style.borderStyle = this.addEditForm.btnCancelBorderStyleel.style.borderColor = this.addEditForm.btnCancelBorderColorel.style.borderRadius = this.addEditForm.btnCancelBorderRadiusel.style.backgroundColor = this.addEditForm.btnCancelBgColor})})},addEditUploadStyleChange() {this.$nextTick(()=>{document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{el.style.width = this.addEditForm.uploadHeightel.style.height = this.addEditForm.uploadHeightel.style.borderWidth = this.addEditForm.uploadBorderWidthel.style.borderStyle = this.addEditForm.uploadBorderStyleel.style.borderColor = this.addEditForm.uploadBorderColorel.style.borderRadius = this.addEditForm.uploadBorderRadiusel.style.backgroundColor = this.addEditForm.uploadBgColor})})},}};
</script>
<style lang="scss">
.editor{height: 500px;& /deep/ .ql-container {height: 310px;}
}
.amap-wrapper {width: 100%;height: 500px;
}
.search-box {position: absolute;
}
.addEdit-block {margin: -10px;
}
.detail-form-content {padding: 12px;
}
.btn .el-button {padding: 0;
}</style>

声明

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