如何使用ssm实现个人消费管理系统+vue

233 篇文章 0 订阅
132 篇文章 0 订阅

@TOC

ssm744个人消费管理系统+vue

第1章 绪论

1.1选题动因

当前的网络技术,软件技术等都具备成熟的理论基础,市场上也出现各种技术开发的软件,这些软件都被用于各个领域,包括生活和工作的领域。随着电脑和笔记本的广泛运用,以及各种计算机硬件的完善和升级,市面上的电脑和笔记本的性能都得到提升,可以支持的软件也逐渐增多,因此,在计算机上安装软件来发挥其高效地信息处理的作用,则很受人们的青睐。对于个人消费管理系统信息来讲,通过手工形式处理,在面对庞大的信息数量时,就显得不适宜了,首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,为了解决上述问题,有必要建立个人消费管理系统,来规范个人消费管理系统信息管理流程,让管理工作可以系统化和程序化,同时,个人消费管理系统的有效运用可以帮助管理人员准确快速地处理信息。

1.2目的和意义

个人消费管理系统可以对个人消费管理系统信息进行集中管理,可以真正避免传统管理的缺陷。个人消费管理系统是一款运用软件开发技术设计实现的应用系统,在信息处理上可以达到快速的目的,不管是针对数据添加,数据维护和统计,以及数据查询等处理要求,个人消费管理系统都可以轻松应对。所以,个人消费管理系统的运用是让个人消费管理系统信息管理升级的最好方式。它可以实现信息处理的便利化要求,还可以规范信息处理的流程,让事务处理成为管理人员手中的一件简单事,而不是之前手工处理时的困难事。尽管个人消费管理系统具备较完善的功能,但是也需要管理人员利用闲暇时间提升自身素质以及个人能力,在操作个人消费管理系统时可以最大化运用个人消费管理系统提供的功能,让系统在满足高效率处理数据的同时,也能始终稳定运行,还可以确保数据的可靠性与数据处理的质量。

1.3论文结构安排

本文总共分为6个章节,每个章节都对本系统描述了不同的内容。接下来就对本文的研究内容进行阐述。

第1章:这个章节是论文的绪论部分。从选题的背景和意义的角度阐述即将开发的系统。

第2章:这个章节是技术介绍部分。从本系统需要运用的技术知识的角度阐述系统。

第3章:这个章节是系统分析部分。从分析系统可行性,分析系统功能和性能等角度阐述系统。

第4章:这个章节是系统设计部分。从系统功能结构的角度和数据库设计的角度阐述系统。

第5章:这个章节是系统实现部分。从系统功能模块运行效果的角度阐述系统。

第6章:这个章节是系统测试部分。从测试系统功能,系统测试方法的角度阐述系统。

第2章 开发环境与技术

开发个人消费管理系统需要搭建编程的环境,也需要通过调查,对各个相关技术进行分析,选取适合本系统开发的技术与工具。

2.1 MYSQL数据库

题目确定了是一个应用程序之后,就开始按部就班的进行设计与分析。本课题是需要数据库作为数据管理工具以及数据载体,从程序功能分析到数据分析,选择合适的关系型数据库是当下所选择的重要环节。关系型数据库可选择余地不多,本身甲骨文公司的两个,微软的两个,IBM的一个,也就是这五个了,功能和差异都不影响数据库的选择,因为这些数据库都能实现应用程序功能所需的,那么只能从其他的方面来综合考虑哪种数据库更合适。作为开发使用的电脑硬件上来讲,还是大一的时候买的,当初并没有太多的钱买好一点的电脑,只是作为学习用的,所以经过这么几年的使用,电脑老化了,性能下降也比较厉害,还有好多需要用的学习资料,本身面临毕业,选择学校机房也不是一个长久的打算,选择一个数据库适合自己的老旧笔记本电脑作为学习开发当前的应用,是最重要的。综合考虑的结果就是选用MySQL数据库作为应用数据库,因为MySQL数据库体积小,占用内存小,不影响电脑上其他用的软件运行,并且不需要因为安装维护MySQL数据库而重装系统,最终选择的数据库就是MySQL数据库。

2.2 Tomcat 介绍

刚开始学习Java语言的时候,是不知道还有Tomcat这些东西的,各种语法各种输出在控制台进行输出结果,当Java网站开发的时候就不可避免的学习到了Tomcat服务器。Tomcat准确的来讲不算是服务器,可以说是vue引擎或者一个容器,这些都是学术上或者原理上都比较贴切的,但是实际工作中Tomcat就是作为一个web服务器来用的,因为可以实现网站的发布和运行。因为工作原理的原因,Tomcat一般作为中小型企业和并发量并不突出的一种轻量级的服务器存在的,比如某些行业的应用系统,本身客户端就不多,需要的连接也不多,一般都用Tomcat的。Tomcat里面可以配置多个网站,配置文件后缀是config的文档,类似于XML的结构,比较清晰明了。每当Java发布新的版本的时候,Tomcat也会为了匹配Java的版本进行升级,目前Tomcat版本已经到版本10了。Tomcat标识是一只有点发黄的小猫咪,当Tomcat配置成功一般测试的时候能看到这个小猫咪就算是成功的,才能进行下一步的配置。Tomcat服务器在Java网站开发中还是挺合适的。

2.3 vue技术

vue技术可以让初学者尽快上手进行编写动态网站,不需要变成高级的Java编程人员才可以书写代码,从学习的效率还有编写的效率上都有很大的提升。让着重于网页开发者与着重于后台逻辑开发进行分离合作开发变成了一种可能,降低了学习成本,不需要考虑程序运行解释编译阶段的话,vue网页本身就可以理解成一个普通的Servlet。vue结构上面,主要分为两个方面,一个是专属的vue引擎,通俗的讲就是可以实现vue编译后运行解释的一个东西,另一个就是web服务器。vue运行编译需要vue引擎和web服务器进行配合以及相互协作,当然他们的分工也是很明确的,这样才可以真正的运行起来。vue容器和引擎有Tomcat,这个Tomcat其实也还有Apache静态解释代码的部分,虽然看起来运行效果差不多,但是其实是两个截然不同的工具,在文件系统里目录也是不一样的,当然如果有特殊需求也是可以进行特殊的配置的,配置上面还是比较灵活的。虽然Tomcat部署了网站之后就可以运行网页让客户访问,但是Tomcat也只是vue引擎而非web服务器。比如JRUN和Resin都算是vue引擎,而web服务器的职责比较单一,就是处理客户端请求还有返回给客户显示请求处理后的数据而已。vue引擎则可以运行纯HTML编写的网站,也可以运行vue编写的动态网站,在效率上也只是比单纯的web服务器而已,但是从纯web服务器无法运行动态网站上来讲,vue引擎在功能上还是强大了很多,提升一点点效率反而算不了什么,对于必须实现的功能这些要素上,选择了vue技术。

2.4 SSM框架

SSM框架不是一个框架的名称,而是三个框架的首字母缩写,分别是Spring框架、SpringMVC框架、MyBatis框架。是目前Java开发者中学习的首选框架。

Spring框架继承了JavaEE和EJB框架的优点,在依赖注入方面去掉了臃肿的配置,在面向切面方面也简化了代码数量,提高了代码品质。依赖注解进行配置,让所有的依赖都可以通过程序的自动配置和寻找,减少了代码写作数量,提高了代码阅读性。

SpringMVC框架与Spring只是一个公司的,在底层代码结构上可以复用,但是最主要的功能是对数据提交请求进行过滤,并且对数据的返回进行过滤,不限于页面是vue技术,也可以是其他的技术,更容易大型开发的集合技术。

MyBatis框架摒弃了Hibernate框架的配置臃肿方面,有时候Hibernate框架业务比较复杂的时候,代码量反而增加,性能下降,无法对底层的数据库语句优化,而MyBatis框架则有效的解决了这个方面,可以通过Java语句,对数据库操作语句进行优化,代码更简洁,执行效率更高,并且可以生产一些模块化代码,解决了开发过程中容易出现的实体映射方面的操作。

第3章 系统分析

用户的需求以及与本系统相似的在市场上存在的其它系统可以作为系统分析中参考的资料,分析人员可以根据这些信息确定出本系统具备的功能,分析出本系统具备的性能等内容。

3.1可行性分析

尽管系统是根据用户的要求进行制作,但是在确定制作前,有必要分析其可行性。

3.1.1操作可行性分析

开发本系统需要用到的工具,本人都比较熟悉,因此可以使用这些工具,完整开发个人消费管理系统。此外,个人消费管理系统在功能上,基本都是完成信息的处理,涵盖了添加,修改,删除等,而且操作者面对的都是各个功能操作界面,并不是编码后台,所以一般的使用者都可以通过操作界面轻松完成信息的加工处理。因此,本系统操作可行。

3.1.2经济可行性分析

开发本系统,并没有投入资金购买开发工具。因为使用的开发工具都是事先在百度上下载安装在本人电脑上的,随着软件开发技术的成熟,系统功能实现的编码也都模块化,很容易通过各大软件开发类网站获取,并通过小部分代码改动,运用到本系统中,这些都不需要资金投入,同时,本系统开发的结构选用B/S,成本可以忽略不计。

3.1.3技术可行性分析

本系统需要的软件包括Eclipse,Tomcat,Mysql等,这些工具都接触并使用过,至于JAVA,B/S,vue,Html等技术,图书馆都有对应的书籍可以参考学习,加上平时课堂上学习的编程小项目对这些技术都有讲解,另外,本人也从课程设计作业中锻炼了编程能力。所以在技术上,可以完成个人消费管理系统的编程开发。

通过上面的分析,已经确定了本系统在经济上的可行,本系统在技术上的可行,本系统在操作上的可行。由此,可以得出在目前的条件下,对于个人消费管理系统的设计与实现是可以进行下去的。

3.2系统流程分析

本系统在处理数据时,其内部的操作逻辑也需要使用相应的工具进行展示。

在本系统的数据录入页面,对于操作者提供的每条数据都有相应的检验规则,比如数据信息不能有非法字符,或者本来应该是汉字的数据,不能用字母代替,还有对数据内容的长度等进行规范,这样的可以确保数据准确性的检验规则,在编码时,就提前编写好了。数据添加的流程见下图。如果数据已经保存进入数据库,则说明操作者提供的数据内容和格式都是符合要求的。

图3.1 添加信息流程图

很多时候,面对系统中的大量数据,难免会发现一些错误,因此需要及时纠正错误,本系统也提供数据后期的修改功能,其流程见下图。但是更新的数据也需要通过数据有效性检验。能够最终写入数据库则说明修改的数据是符合要求的。

图3.2 修改信息流程图

面对数据库里面大量数据,在系统的前台,要想快速获取需要的信息,就需要使用查询功能。其流程见下图。该功能需要操作者提前输入关键词,当系统的后台数据库保存了与关键词匹配的数据时,就会及时显示出来,整个过程耗时很短。

图3.3 查询信息流程图

3.3系统性能分析

分析个人消费管理系统对于性能的需求主要还是从下面的5个角度来分析,它们分别是系统的实用性,系统的适应性,系统的易操作性,系统的安全性和系统的易维护性。

性能需求一:系统的实用性,本系统主要是让管理人员集中处理相关信息,可以提供方便快捷的信息添加,信息编辑等操作。在提高信息管理人员的工作效率的同时,也可以降低管理成本,并大大减少管理人员日常繁琐的工作量。

性能需求二:系统的适应性,本系统对于运行环境的要求并不高,可以被广泛运用在生活中。因为使用者只要在日常使用的计算机,或者是随身携带的笔记本上搭建运行环境都能运行本系统,另外系统提供的基础功能包括添加,修改等都能随时操作。

性能需求三:系统的易操作性,本系统提供的功能跟同类型系统一样,也具备简单的增删改操作,操作流程的逻辑也符合广大使用者的使用需求,使用者使用本系统管理数据会非常顺手。

性能需求四:系统的安全性,本系统在数据保存与管理上安全系数要达标,在设计与编码阶段,通过对用户进行权限分配,把系统的功能依照不同用户的角色进行分配,在首次进入系统时,通过编写安全验证的代码模块,引导不同用户进入不同的操作界面。还可以对用户基础信息包括登录的账号密码等进行加密保存,可以利用当下常用的技术成熟的MD5加密技术实现。

性能需求五:系统的易维护性,本系统在后期运行中,会根据使用者的操作,产生许多数据信息,为了便于维护,就要求这些数据可以通过工具从数据库中导出来,对于一些阶段性数据,可以进行批量删除,以此达到轻负荷处理数据的目标,让本系统可以变得更加轻盈。

第4章 系统设计

市面上设计比较好的系统都有一个共同特征,就是主题鲜明突出。通过对页面简洁清晰的布局,让页面的内容,包括文字语言,或者视频图片等元素可以清晰表达出系统的主题。让来访用户无需花费过多精力和时间找寻需要的内容。

4.1界面设计原则

一般来说,大部分用户使用系统,有些是想从系统中获取需要的信息,有些则是使用系统提供的服务。所以,为了改善用户体验,提高系统的使用率,在对系统界面设计时,需要按照下面的原则进行。

第一点,对用户进行分析,了解用户使用系统的目的,以及使用系统的方式,考虑大部分用户的阅读习惯,设计Z字形或F型结构可以方便用户获取信息。

第二点:设计有效的导航,这个包括每个页面上都有导航条的显示,有时也可以在页面的底部设计导航条,当用户进入具体页面时,要设计相应的位置提示,在页面中比较特殊的位置,需要设计返回链接,可以返回上个页面,也可以返回首页等。

第三点:对整个系统要运用统一的设计方案,包括色彩方案的一致性,页面模板的相似性等,对相同操作和专业术语的描述在整个系统中也应该保持一致。

第四点:设计的界面要保证传达的内容清晰准确。要避免在同一个页面设计非常多的内容,另外可以准确对系统内容进行分类,把页面中用户视觉集中的位置,用来显示重要信息。

作为初学者,并没有那么多的设计经验,但是可以运用上面提到的界面设计原则设计出比较好的系统,可以让用户产生良好的使用体验。

4.2功能结构设计

为了让系统的编码可以顺利进行,特意对本系统功能进行细分设计,设计的系统功能结构见下图。

个人消费管理系统

用户信息管理

公告信息管理

消费类型管理

消费记录管理

用户信息修改

用户信息新增

消费记录添加

消费记录删除

消费记录修改

公告类型添加

公告类型修改

公告类型删除

公告信息添加

公告信息删改

公告信息删除

消费类型添加

消费类型修改

消费类型删除

个人中心管理

个人信息修改

个人中心添加

公告类型管理

图4.1 系统功能结构图

4.3 数据库设计

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

4.3.1 数据库概念设计

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

(1)下图是用户实体和其具备的属性。

C:\Users\Administrator\Desktop\img\gerenxiaofeiguanli\用户.jpg 图4.1 用户实体属性图

(2)下图是公告信息实体和其具备的属性。

C:\Users\Administrator\Desktop\img\gerenxiaofeiguanli\公告信息.jpg 图4.2 公告信息实体属性图

(3)下图是字典表实体和其具备的属性。

C:\Users\Administrator\Desktop\img\gerenxiaofeiguanli\字典表.jpg 图4.3 字典表实体属性图

(4)下图是消费记录实体和其具备的属性。

C:\Users\Administrator\Desktop\img\gerenxiaofeiguanli\消费记录.jpg 图4.4 消费记录实体属性图

(5)下图是用户表实体和其具备的属性。

C:\Users\Administrator\Desktop\img\gerenxiaofeiguanli\用户表.jpg 图4.5 用户表实体属性图

4.3.2 数据库物理设计

作为程序后台的支持,本数据库也需要设计数据存储的结构。而数据存储结构的设计就包括了数据表结构的设计和创建。数据表结构包括了字段,数据类型,还有字段的取值范围等信息。而E-R模型中的实体就是一张表,实体的特征就可以作为该表中的字段,根据本程序信息存储要求,设计每个字段需要的类型,还有该字段的取值范围等。每当设计完成一张数据表,就需要及时保存在数据库里面,并对该设计的数据表准确命名,要求设置的数据表的名称尽量不要是中文,而且要方便记忆。因为在程序编码阶段,通过SQL语句可以把程序里面的数据写入在各个数据表里面,而这个环节需要使用到数据表的名称。如果数据表名称是中文的话,可能会乱码并影响程序运行。下面就以表格形式展示设计的结果。

表4.1字典表表

序号列名数据类型说明允许空
1IdIntid
2dic_codeString字段
3dic_nameString字段名
4code_indexInteger编码
5index_nameString编码名字
6super_idInteger父字段id
7beizhuString备注
8create_timeDate创建时间

表4.2公告信息表

序号列名数据类型说明允许空
1IdIntid
2news_nameString公告标题
3news_typesInteger公告类型
4news_photoString公告图片
5insert_timeDate添加时间
6news_contentString公告详情
7create_timeDate创建时间

表4.3消费记录表

序号列名数据类型说明允许空
1IdIntid
2xiaofeijilu_nameString标题
3xiaofeijilu_typesInteger消费类型
4xiaofeijilu_new_moneyBigDecimal消费金额
5yonghu_idInteger用户
6xiaofeijilu_textString消费详情
7insert_timeDate添加时间
8create_timeDate创建时间

表4.4用户表

序号列名数据类型说明允许空
1IdIntid
2yonghu_nameString用户姓名
3yonghu_photoString头像
4yonghu_phoneString联系方式
5yonghu_emailString邮箱
6yonghu_deleteInteger假删
7insert_timeDate添加时间
8create_timeDate创建时间

表4.5用户表表

序号列名数据类型说明允许空
1IdIntid
2usernameString用户名
3passwordString密码
4roleString角色
5addtimeDate新增时间

第5章 系统实现

这个环节需要使用前面的设计方案,包括对系统模块的设计,还有对程序后台的数据支持的数据库的设计等。不过这部分内容还是强调系统编码人员的开发能力,要把前面设计的内容通过编码的形式以一个完整的,可以运行的系统呈现出来。

功能模块的实现

5.1用户信息管理

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

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

图5.1 用户信息管理页面

5.2 消费记录管理

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

图5.2 消费记录管理页面

5.3消费类型管理

如图5.3显示的就是消费类型管理页面,此页面提供给管理员的功能有:根据消费类型进行条件查询,还可以对消费类型进行新增、修改、查询操作等等。

图5.3 消费类型管理页面

5.1公告信息管理

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

图5.4 公告信息管理页面

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);

    @Autowired
    private NewsService newsService;


    @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 = 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转view
            NewsView 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, 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<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("../../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){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常,请联系管理员");
        }
    }






}

ConfigController.java

package com.controller;


import java.util.Arrays;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;

/**
 * 登录相关
 */
@RequestMapping("config")
@RestController
public class ConfigController{
	
	@Autowired
	private ConfigService configService;

	/**
     * 列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,ConfigEntity config){
        EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
    	PageUtils page = configService.queryPage(params);
        return R.ok().put("data", page);
    }
    
	/**
     * 列表
     */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,ConfigEntity config){
        EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
    	PageUtils page = configService.queryPage(params);
        return R.ok().put("data", page);
    }

    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        ConfigEntity config = configService.selectById(id);
        return R.ok().put("data", config);
    }
    
    /**
     * 详情
     */
    @IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") String id){
        ConfigEntity config = configService.selectById(id);
        return R.ok().put("data", config);
    }
    
    /**
     * 根据name获取信息
     */
    @RequestMapping("/info")
    public R infoByName(@RequestParam String name){
        ConfigEntity config = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
        return R.ok().put("data", config);
    }
    
    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody ConfigEntity config){
//    	ValidatorUtils.validateEntity(config);
    	configService.insert(config);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody ConfigEntity config){
//        ValidatorUtils.validateEntity(config);
        configService.updateById(config);//全部更新
        return R.ok();
    }

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
    	configService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
}

PoiUtil.java
package com.utils;

import org.apache.commons.io.FileUtils;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;

import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;

/**
 * 文件导入到处
 */
public class PoiUtil {
    /**
     * 导入
     *
     * @param url
     * @return
     * @throws Exception
     */
    public static List<List<String>> poiImport(String url) throws Exception {
        List<List<String>> list = new ArrayList<>();
        // 创建Excel 读取文件内容
        HSSFWorkbook workbook = new HSSFWorkbook(FileUtils.openInputStream(new File(url)));
        /**
         * 第一种方式读取Sheet页
         */
//      HSSFSheet sheet = workbook.getSheet("Sheet0");
        /**
         * 第二种方式读取Sheet页
         */
        HSSFSheet sheet = workbook.getSheetAt(0);//获取工作表
        for (int i = 0; i < sheet.getLastRowNum()+1; i++) {
            HSSFRow row = sheet.getRow(i);//获取行
            List<String> rowlist = new ArrayList<>();//行数据
            for (int j = 0; j < row.getLastCellNum(); j++) {
                HSSFCell cell = row.getCell(j);
                cell.setCellType(Cell.CELL_TYPE_STRING);
                String value = cell.getStringCellValue();
                rowlist.add(value);//行中数据添加到行中
            }
            list.add(rowlist);//将行数据添加到list中
        }
        return list;
    }






    // 导出
    public static void poiExport(List<List<String>> list, String url) throws Exception {
        //创建Excel工作薄
        HSSFWorkbook workbook = new HSSFWorkbook();
        //创建一个工作表shheet
        HSSFSheet sheet = workbook.createSheet();
        for (int i = 0; i < list.size(); i++) {
            HSSFRow row = sheet.createRow(i);
            List<String> dataList = list.get(i);
            for (int j = 0; j < dataList.size(); j++) {
                HSSFCell cell = row.createCell(j);
                cell.setCellValue(dataList.get(j));
            }

        }
        FileOutputStream stream = FileUtils.openOutputStream(new File(url));
        workbook.write(stream);
        stream.close();
    }


    public static void main(String[] args) {
        try {
            //导入
            List<List<String>> lists = PoiUtil.poiImport("C:/Users/Administrator/Desktop/工作1.xls");
            System.out.println();


            //导出

            PoiUtil.poiExport(lists, "C:/Users/Administrator/Desktop/工作1.xls");

//
//            List<List<String>> list = new ArrayList<>();
//            ArrayList<String> dataList = new ArrayList<>();
//            dataList.add("标题1");
//            dataList.add("标题2");
//            dataList.add("标题3");
//            list.add(dataList);
//            // 追加数据
//            for (int i = 1; i < 10; i++) {// 这里的int 起始是1 也就是第二行开始
//                ArrayList<String> dataList111 = new ArrayList<>();
//                dataList111.add("内容" + i);
//                dataList111.add("内容1111111121222222222333333333377777777411111111477777777" + i);
//                dataList111.add("内容" + i);
//                list.add(dataList111);
//            }
//            PoiUtil.poiExport(list, "C:/Users/Administrator/Desktop/工作1.xls");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

add-or-update.vue
<template>
    <div class="addEdit-block">
        <el-form
                class="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 = this
            return {
                addEditForm:null,
                id: '',
                type: '',
                ro:{
                    codeIndex : true,
                    indexName : false,
                    superId : false,
                    beizhu : false,
                },
                ruleForm: {
                    codeIndex: '',
                    indexName: '',
                    superId : '',
                    beizhu : '',
                },
                rules: {
                    /*beizhu: [
                        { required: true, message: '备注不能为空', trigger: 'blur' },
                        {  pattern: /^[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{
                    //查询最大值 start
                    this.$http({
                        url: `dictionary/maxCodeIndex`,
                        method: "post",
                        data: {"dicCode":"xiaofeijilu_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"]="xiaofeijilu_types";
                        ruleForm["dicName"]="消费类型";
                        this.$http({
                            url: `dictionary/${!this.ruleForm.id ? "save" : "update"}`,
                            method: "post",
                            data: ruleForm
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "操作成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.parent.showFlag = true;
                                        this.parent.addOrUpdateFlag = false;
                                        this.parent.dictionaryCrossAddOrUpdateFlag = false;
                                        this.parent.search();
                                        this.parent.contentStyleChange();

                                    }
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                });
            },
            // 返回
            back() {
                this.parent.showFlag = true;
                this.parent.addOrUpdateFlag = false;
                this.parent.dictionaryCrossAddOrUpdateFlag = false;
                this.parent.contentStyleChange();
            },
            addEditStyleChange() {
                this.$nextTick(()=>{
                    // input
                    document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputFontColor
                el.style.fontSize = this.addEditForm.inputFontSize
                el.style.borderWidth = this.addEditForm.inputBorderWidth
                el.style.borderStyle = this.addEditForm.inputBorderStyle
                el.style.borderColor = this.addEditForm.inputBorderColor
                el.style.borderRadius = this.addEditForm.inputBorderRadius
                el.style.backgroundColor = this.addEditForm.inputBgColor
            })
                document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputLableColor
                el.style.fontSize = this.addEditForm.inputLableFontSize
            })
                // select
                document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectFontColor
                el.style.fontSize = this.addEditForm.selectFontSize
                el.style.borderWidth = this.addEditForm.selectBorderWidth
                el.style.borderStyle = this.addEditForm.selectBorderStyle
                el.style.borderColor = this.addEditForm.selectBorderColor
                el.style.borderRadius = this.addEditForm.selectBorderRadius
                el.style.backgroundColor = this.addEditForm.selectBgColor
            })
                document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectLableColor
                el.style.fontSize = this.addEditForm.selectLableFontSize
            })
                document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
                    el.style.color = this.addEditForm.selectIconFontColor
                el.style.fontSize = this.addEditForm.selectIconFontSize
            })
                // date
                document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateFontColor
                el.style.fontSize = this.addEditForm.dateFontSize
                el.style.borderWidth = this.addEditForm.dateBorderWidth
                el.style.borderStyle = this.addEditForm.dateBorderStyle
                el.style.borderColor = this.addEditForm.dateBorderColor
                el.style.borderRadius = this.addEditForm.dateBorderRadius
                el.style.backgroundColor = this.addEditForm.dateBgColor
            })
                document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateLableColor
                el.style.fontSize = this.addEditForm.dateLableFontSize
            })
                document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
                    el.style.color = this.addEditForm.dateIconFontColor
                el.style.fontSize = this.addEditForm.dateIconFontSize
                el.style.lineHeight = this.addEditForm.dateHeight
            })
                // upload
                let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
                document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
                document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.uploadHeight
                el.style.color = this.addEditForm.uploadLableColor
                el.style.fontSize = this.addEditForm.uploadLableFontSize
            })
                document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
                    el.style.color = this.addEditForm.uploadIconFontColor
                el.style.fontSize = this.addEditForm.uploadIconFontSize
                el.style.lineHeight = iconLineHeight
                el.style.display = 'block'
            })
                // 多文本输入框
                document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
                    el.style.height = this.addEditForm.textareaHeight
                el.style.color = this.addEditForm.textareaFontColor
                el.style.fontSize = this.addEditForm.textareaFontSize
                el.style.borderWidth = this.addEditForm.textareaBorderWidth
                el.style.borderStyle = this.addEditForm.textareaBorderStyle
                el.style.borderColor = this.addEditForm.textareaBorderColor
                el.style.borderRadius = this.addEditForm.textareaBorderRadius
                el.style.backgroundColor = this.addEditForm.textareaBgColor
            })
                document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
                    // el.style.lineHeight = this.addEditForm.textareaHeight
                    el.style.color = this.addEditForm.textareaLableColor
                el.style.fontSize = this.addEditForm.textareaLableFontSize
            })
                // 保存
                document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
                    el.style.width = this.addEditForm.btnSaveWidth
                el.style.height = this.addEditForm.btnSaveHeight
                el.style.color = this.addEditForm.btnSaveFontColor
                el.style.fontSize = this.addEditForm.btnSaveFontSize
                el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
                el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
                el.style.borderColor = this.addEditForm.btnSaveBorderColor
                el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
                el.style.backgroundColor = this.addEditForm.btnSaveBgColor
            })
                // 返回
                document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
                    el.style.width = this.addEditForm.btnCancelWidth
                el.style.height = this.addEditForm.btnCancelHeight
                el.style.color = this.addEditForm.btnCancelFontColor
                el.style.fontSize = this.addEditForm.btnCancelFontSize
                el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
                el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
                el.style.borderColor = this.addEditForm.btnCancelBorderColor
                el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
                el.style.backgroundColor = this.addEditForm.btnCancelBgColor
            })
            })
            },
            addEditUploadStyleChange() {
                this.$nextTick(()=>{
                    document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
            })
            },
        }
    };
</script>
<style lang="scss">
.editor{
        height: 500px;

    & /deep/ .ql-container {
          height: 310px;
      }
    }
    .amap-wrapper {
        width: 100%;
        height: 500px;
    }
    .search-box {
        position: absolute;
    }
    .addEdit-block {
        margin: -10px;
    }
    .detail-form-content {
        padding: 12px;
    }
    .btn .el-button {
        padding: 0;
    }</style>

声明

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值