springboot617基于web的多媒体素材管理系统–论文
绪 论
1.1选题背景与意义
1.1 研究背景
在新世纪的今天,计算机已经发展到一定的规模,带动了国内经济和科学技术的快速发展,科学技术的发展大大提高了生产效率,使人们的物质生活需求得到了很大的满足。现在各种类型的网站系统都很流行,将传统的管理模式转移到线上来实现,可以大大提高管理效率。基于以上情况,多媒体素材管理系统逐渐出现在人们的视野中,也将成为未来发展的一个潜在增长点。
1.2 研究意义
在日新月异的21世纪,全球进入快速运转的科技时代,我国也在各位科学家不懈努力下实现了科技社会化、信息技术底层化、网络运用全民化。我们处在一个“互联网+”的时代,信息化的建设成为了当代的发展基石以及重要组成部分。随着多媒体素材管理的常态化,同时也出现了多样化的人员管理方式。而多媒体素材管理系统就可以实现管理人员及用户的日常管理,实现进行更高效的信息互换、让用户的动态变得透明公开,让管理人员更好地实现对多媒体素材管理的动态监管、真正的实现快速、便捷、高效的管理以降低管理成本、减轻管理人员的负担,保证管理技术以及运用互联网技术的能力的快速提升,提高综合管理和竞争能力。在保证人们的安全的同时,真正达到更好的为国家经济建设和社会安全做贡献的目的。
1.3 系统主要功能
因我国地域辽阔、人口众多,并且多媒体素材信息也逐步增加。如果多媒体素材管理还是沿用传统的、人工的操作,那管理难度是十分巨大的、效率也会不尽人意;而如今我国的信息科学技术已趋于成熟,我们的生活、工作、学习已离不开互联网,为了更好的提升多媒体素材管理,并且在保证用户的安全前提下使人们生活有序、有效开展,需要一套操作简单、能高效导出并录入数据、安全性高、可用性强的多媒体素材管理系统。
此篇论文中包括管理员、教师和用户三个不同的角色,根据不同的身份以及工作机制,赋予不同的权限。该多媒体素材管理系统的功能如下列所示:
- 用户之间的使用权限设定:根据业务管理的需求以及多媒体素材管理体系,在使用前将每个角色的固定标签设定好,明晰每个角色权限,并将状态控制功能添加到用户状态上,最终达到本系统角色控制基础形成的目标。
- 用户登录功能:用户可以根据自己的角色选择相应的账号进行登录,在输入合法的账号和密码后就可进入系统,根据自己的权限选择想要进行的操作。
- 查看个人资料功能:用户登录系统之后可以点击右上角头像查看自己的个人资料,包括用户名、密码、姓名、性别、头像等,在核查发现错误之后还可以进行修改,用户还可在该模块进行密码的修改。
- 系统管理功能:在模块的功能又可以细化成以下几个部分
- 用户管理:管理员、教师和用户可以在该模块进行用户信息的管理与修改。
- 角色管理:管理员、教师和用户可以在该模块对用户进行权限的修改与设置。
- 素材信息管理:管理员和教师可以在该模块进行素材信息的管理,例如素材信息的修改、删除,添加新的素材信息,用户对素材信息进行评论等。
- 资源信息管理:管理员和教师可以在该模块进行资源信息的管理,例如管理员对资源信息的修改、删除,添加新的资源信息,用户对资源信息进行评论等。
- 系统管理功能:多媒体素材管理的管理员可以在本模块对关于我们、轮播图管理和公告信息进行管理。
1.4 拟解决的主要问题
- 与多媒体素材管理工作契合的工作流结构
目前,多媒体素材的人员管理工作中,一般采用纸质表单结合手工传递的方式或者Word、Excel填写在线发放的方式[3],进行信息的收集,在信息收集完成之后再交由各级管理人员进行审批、签字,存在工作耗时较长、难以全面收集所需信息、工作步骤冗杂繁琐、中间环节易出错等缺点,因此采用与网络系统结合的工作流模式,让用户在固定时间进行信息的填写,之后按照已经设定好的规则进行工作流程的运行,自动在完成上一级任务后执行下一步指令,这样的操作方式比较灵活,而且减少了管理者手动完成操作信息的步骤,提高了工作效率,缩减了工作完成所需要的时间,并且可以保证任务完成的精确性与科学性。
- 科学、有效的信息收集机制
在保证信息的全面收集的同时还需要兼顾所收集信息的科学性与适用性。使用互联网固然可以提高收集信息的效率,但如果所收集的信息只是为了表面上数据的增加那就造成了极大的资源浪费,虚假的形式主义会造成用户精力的大量流失、并且降低信誉值,因此在确定信息收集内容的时候要着重筛选对多媒体素材管理起到促进作用的信息。例如本系统所收集的多媒体素材信息就可以很好的掌控多媒体素材管理的日常动态,为多媒体素材管理工作的成功打下了基础。
- 准确、可行的效果评价标准
当前对我国的多媒体素材管理效果的评价已有一定的标准,例如用户人数的多少、多媒体素材管理所花费的物资及钱财数量,而作为多媒体素材管理系统,其效果体现在以下几个方面:1)使用网络收集用户基础信息减少了填写信息的步骤,用户可在重合的时间分别进行信息的填写,缩短了信息收集所需的时间;2)使用网络进行销售记录,减少了虚假信息的产生,使结果更加真实有效;3)通过系统进行记录,并且更好的留痕,为以后的检查工作提供了可靠地证明。
2 相关概念和技术介绍
2.1 JAVA技术介绍
Java语言擅长开发互联网类应用和企业级应用,现在已经相当的成熟,而且也是目前使用最多的编程语言之一。Java语言具有很好的面向对象性,可以符合人的思维模式进行设计,封装是将对象的属性和方法尽可能地隐藏起来,使得外界并不知道是如何实现的,外界能通过接口进行访问,继承是指每个类都会有一个父类,所有的子类都有父类的方法,可以进行继承,但是只有final修饰的类不能被继承,通过继承可以使得代码得到重新利用,能够提高软件的开发效率,也是多态的前提。
Java就像C语言、C#语言等,也是一种程序开发语言,而它的特点就是面向对象。作为一种程序开发与设计的语言,它有很多特性,主要特性就是面向对象、夸平台以及可以分布式运行。Java语言项目不但安全性高、稳定性强,而且可以并发运行。
为了提高开发的速度及效率,必须做到代码的重复使用和简化程序的复杂度,要达到上述的要求java语言通过封装、继承与多态等方式实现,这样可以很大程度上达到信息的封装,提高代码复用率,减少冗余度,提高效率。在Java中难能可贵的一点就是它的垃圾回收机制,它使得以往程序中大量存在的内存泄漏的问题得到了较好的缓解。所谓的内存泄漏就是程序向操作系统申请了一块存储空间,比如定义了一个变量,但是由于某种原因,这个变量一直没有使用,但是仍然占用着系统的内存空间,可能一两个这样的变量对程序和操作系统造不成什么大的影响,但是试想如果这样的变量定义的多了系统的内存空间就会一步步减少,从而造成机器的性能降低甚至宕机。但是在Java中有垃圾回收机制的存在,这种机制极大地避免了内存泄漏的出现,在Java虚拟机中,垃圾回收机制会对长时间没有引用变量指向的对象实施垃圾回收,简单的说就是将这个对象销毁,以避免内存泄漏的情况出现。
2.2 SpringBoot框架
Spring Boot是由Pivotal的开发团队在2013年开发的一个免费、轻量级、开源的系统框架。SpringBoot的主要设计思想是约定大于配置,因此SpringBoot在设计时几乎达到零配置。SpringBoot集成了业界的开源框架。
SpringBoot是一个非常强大的后台框架,因为SpringBoot的开发基本上不需要写配置文件,所以利用SpringBoot来构建网站的后台环境,在SpringBoot的YML配置文件中写项目启动端口,项目就可以启动了。项目的Java和静态文件由SpringBoot管理。
2.4 B/S架构
B/S(Browser/Server,浏览器/服务器)模式,是一种架构模式,属于WEB发展后的所出现的一种网络构造,而WEB又是主要的浏览器应用商品软件。B/S架构模式不仅将系统的重新开发、维修及利用等简单化,更将其重点放到了服务器上[8]。它使客户端得到了统一,服务器上集中了系统功能的最关键部分。
B/S架构的工作模式是浏览器发出请求后服务器进行相应的响应。Internet上文本、图片、动画等信息主要由Web服务器产生,而用户主要是通过浏览器访问这些信息。在Web服务器上下载程序时,如果在下载过程中遇到某些与数据库相关的指令,可以将这些指令交给数据库服务器来解释、进行执行。B/S架构工作流程图如2-1所示:
图2-1 B/S架构工作流程图
2.5 MySQL数据库
MySQL是一个关系型数据库管理系统,具有体积小、速度快、成本低等特点。MySQL数据库的功能强大,是可以处理存储着成千上万条记录的大型数据库;并且它是可以定制的,因为它采用了GPL协议,使用者可以通过修改源代码来开发自己的MySQL系统;MySQL支持多种操作系统,包括AIX、FreeBSD、Linux、Solaris等;它还可以提供用于管理、检索、升级数据库操作的处理工具;最重要的是MySQL是一个开源的、不收取任何费用的、适用范围较广产品,使用者可以直接在互联网上下载然后使用。MySQL工作架构图如图2-2所示:
图2-2 MySQL工作架构图
3 系统需求分析
在对一个软件进行设计与开发之前,需要对该系统进行深层次的调查、分析、研究。良好的需求分析不仅能使开发人员快速、准确地理解开发任务,还能提高开发效率,还能好地完成工作[6]。对系统进行需求分析是必不可少的,这是软件生存周期上一个很重要的部分,在这个阶段需要确定该系统需要实现什么功能,然后做成一个数据规范、图表清晰的文档,为接下来的系统设计工作提供一定的基础。
3.1 问题定义
问题定义也是软件开发中一个重要的环节,在这个阶段我们要清楚的找到以下问题的答案:开发这个系统的原因是什么,开发这个系统所需要的具备什么样的技术支持,需要获得什么样的物资基础,取得哪个方面的国家政策支持等。所采用的多媒体素材管理系统就可以很好的促进多媒体素材管理工作的完成、而且可以使得整体管理水平得到有效的提升。因为使用该系统的主要是管理员、教师和用户,所以要准确的进行角色的定位,然后对不同的角色给予不同的使用权限,表现如下:
1.使用角色的明晰
多媒体素材管理是一个人数众多、规模庞大、工作机制复杂的机构,需要对管理范围内的人员进行清楚的角色定位。
2.使用角色的权限赋予
角色权限分配应灵活,尽量满足用户对于权限的使用需求以及适应工作变动[3]。管理权限级别由下往上的增加,上一级的管理人员可以对下一级管理人员进行部分权限的限制与赋予,不同级别的管理者也可能拥有相同的管理权限。
3.系统所需要达到的性能要求
1 实用性:可以满足同一时间不同人员的登录,系统操作简单,界面明了干净。
1 可操作性:对每个角色在进行操作权限之后,后期还可以对其权限进行修改,可以增加或删除使用角色等。
1 及时性:在对系统进行修改之后可以实时的系统的同步变化。
1 安全性:在系统出现故障之时可以在较短时间内进行修复,并且保证用户信息的绝密性,防止信息泄露的发生。
1 效率:可以满足各大使用群体的需求,解决使用者的问题
3.2 可行性分析
可行性分析是需求分析中一个关键的部分,在进行可行性分析之后可以了解到系统实现所具备的条件,以此来判断系统实现的难度。本篇论文主要进行以下几个方面的分析:
- 经济切实性
该系统并没有独特、十分创新的地方,所需要的硬件设备可以从学校已经在使用或者目前闲置的存量里面选取;系统的后期维护和升级也比较容易,学校从事这个专业的老师或者学生就可完成,而学校所派发的日常经费就可满足需求;在系统开发完成之后还可将系统进行出租或者售卖,也可产生一定的经济效益;并且该系统所使用的MySQL数据库是免费的。
- 使用可行性
该系统在的开发,从设计的功能以及使用者的角度出发进行设计,可以更有针对性的对多媒体素材管理进行有效的监管,也符合多媒体素材管理工作的需要,并且操作简单,覆盖范围广,这就提高了使用者主动适应并使用该系统的几率。
- 技术可行性
该系统的设计所选用的都是经过时间筛选、比较成熟的技术,Spring boot都是当前使用率较高、可靠性和安全性有一定保障的开发框架,MySQL数据库是拥有强大服务器支撑的系统,这就让系统开发的效率、质量得到了一定的保障。
3.3 系统各部分功能需求分析
3.3.1 系统总体需求分析
多媒体素材管理系统的设计与实现,最主要的是满足使用者的使用需求,并且可以向使用者提供一些与系统配套的服务。本篇论文主要从实际出发,采用以对象为设计重点的设计方法,因此在进行系统总体的需求分时借助用例图可以更好的阐述各个功能模块之间的关系,以及明确系统使用者之间的联系。本系统的设计包含管理员、教师和用户三个角色。
3.3.2 系统管理需求分析
本系统的系统管理用例需求如图3-1所示。系统管理可细化为若干个更低级的功能,每个功能均可进行不同的操作。
图3-1 系统管理用例图
3.4 系统流程分析
3.4.1 登录流程
每个用户都有专属的密码和账号,在输入合法的账号、密码以及验证之后即可进入系统。登录流程如图3-2所示:
图3-2 登录流程图
3.4.2 添加信息流程
管理员、教师和用户可以添加信息,内容没有问题之后按下确定键就添加成功了。添加信息的流程图如图3-3所示:
图3-3 添加信息流程图
3.4.3 删除信息流程
用户可以选择把自己发布的信息删掉,选择要删除的文章确认之后,删除信息的操作就完成了。删除信息流程图如图3-4所示:
图3-4 添加信息流程图
4 系统功能的设计与实现
4.1 总体设计思路
该系统采用了B/S架构,对使用网络没有特别的要求,使用者可以随时访问该系统。该系统运行原理如图4-1所示:
图4-1 系统工作原理图
4.2 系统功能结构设计
完成了设计思路的构想,接下来就是按照实际要求完成所需功能。该系统功能结构图如图4-2所示:
图4-2 系统功能结构图
4.3 数据库设计
4.3.1 数据库E-R图设计
E-R图即实体-联系图,主要作用是提供了解显示数据类型存在的联系的途径,是藐视现实世界的概念模型,其关键要素是实体型、属性、联系。以下是本系统主要的实体图,如下图所示。
(1)资源信息实体图
图4-3资源信息实体图
(2)素材信息实体图
图4-4素材信息实体图
(3)公告信息实体图
图4-5公告信息实体图
(4)信息交流实体图
图4-6信息交流实体图
(5)用户实体图
图4-7用户实体图
(6)教师实体图
图4-6教师实体图
4.3.2 数据库表结构设计
该系统采用的数据库是MySQL,根据该系统的数据存储特点进行数据库关系表的设计。下面是该系统中关键部分关系表的详细信息。
表4-1:信息交流
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
title | varchar | 200 | 帖子标题 | ||
content | longtext | 4294967295 | 帖子内容 | ||
parentid | bigint | 父节点id | |||
userid | bigint | 用户id | |||
username | varchar | 200 | 用户名 | ||
avatarurl | longtext | 4294967295 | 头像 | ||
isdone | varchar | 200 | 状态 |
表4-2:资源信息评论表
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
refid | bigint | 关联表id | |||
userid | bigint | 用户id | |||
avatarurl | longtext | 4294967295 | 头像 | ||
nickname | varchar | 200 | 用户名 | ||
content | longtext | 4294967295 | 评论内容 | ||
reply | longtext | 4294967295 | 回复内容 |
表4-3:资源类型
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
ziyuanleixing | varchar | 200 | 资源类型 |
表4-4:素材信息评论表
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
refid | bigint | 关联表id | |||
userid | bigint | 用户id | |||
avatarurl | longtext | 4294967295 | 头像 | ||
nickname | varchar | 200 | 用户名 | ||
content | longtext | 4294967295 | 评论内容 | ||
reply | longtext | 4294967295 | 回复内容 |
表4-5:用户
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
yonghuming | varchar | 200 | 用户名 | ||
mima | varchar | 200 | 密码 | ||
xingming | varchar | 200 | 姓名 | ||
xingbie | varchar | 200 | 性别 | ||
touxiang | longtext | 4294967295 | 头像 | ||
shouji | varchar | 200 | 手机 | ||
youxiang | varchar | 200 | 邮箱 |
表4-6:资源信息
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
ziyuanmingcheng | varchar | 200 | 资源名称 | ||
ziyuanleixing | varchar | 200 | 资源类型 | ||
tupian | longtext | 4294967295 | 图片 | ||
yinpin | longtext | 4294967295 | 音频 | ||
shipin | longtext | 4294967295 | 视频 | ||
ziyuanwenjian | longtext | 4294967295 | 资源文件 | ||
xuekemingci | varchar | 200 | 学科名词 | ||
tuxingfuhao | varchar | 200 | 图形符号 | ||
fabushijian | datetime | 发布时间 | |||
ziyuanjieshao | longtext | 4294967295 | 资源介绍 | ||
userid | bigint | 用户id |
表4-7:配置文件
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
name | varchar | 100 | 配置参数名称 | ||
value | varchar | 100 | 配置参数值 |
表4-8:用户表
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
username | varchar | 100 | 用户名 | ||
password | varchar | 100 | 密码 | ||
role | varchar | 100 | 角色 | 管理员 | |
addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP |
表4-9:关于我们
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
title | varchar | 200 | 标题 | ||
subtitle | varchar | 200 | 副标题 | ||
content | longtext | 4294967295 | 内容 | ||
picture1 | longtext | 4294967295 | 图片1 | ||
picture2 | longtext | 4294967295 | 图片2 | ||
picture3 | longtext | 4294967295 | 图片3 |
表4-10:token表
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
userid | bigint | 用户id | |||
username | varchar | 100 | 用户名 | ||
tablename | varchar | 100 | 表名 | ||
role | varchar | 100 | 角色 | ||
token | varchar | 200 | 密码 | ||
addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP | ||
expiratedtime | timestamp | 过期时间 | CURRENT_TIMESTAMP |
表4-11:素材信息
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
sucaibianhao | varchar | 200 | 素材编号 | ||
sucaimingcheng | varchar | 200 | 素材名称 | ||
sucaileixing | varchar | 200 | 素材类型 | ||
tupian | longtext | 4294967295 | 图片 | ||
sucaiwenjian | longtext | 4294967295 | 素材文件 | ||
fabushijian | datetime | 发布时间 | |||
sucaijieshao | longtext | 4294967295 | 素材介绍 | ||
userid | bigint | 用户id |
表4-12:素材类型
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
sucaileixing | varchar | 200 | 素材类型 |
表4-13:收藏表
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
userid | bigint | 用户id | |||
refid | bigint | 商品id | |||
tablename | varchar | 200 | 表名 | ||
name | varchar | 200 | 名称 | ||
picture | longtext | 4294967295 | 图片 | ||
type | varchar | 200 | 类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注) | 1 | |
inteltype | varchar | 200 | 推荐类型 | ||
remark | varchar | 200 | 备注 |
表4-14:公告信息
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
title | varchar | 200 | 标题 | ||
introduction | longtext | 4294967295 | 简介 | ||
picture | longtext | 4294967295 | 图片 | ||
content | longtext | 4294967295 | 内容 |
表4-15:教师
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
---|---|---|---|---|---|
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
gonghao | varchar | 200 | 工号 | ||
mima | varchar | 200 | 密码 | ||
jiaoshixingming | varchar | 200 | 教师姓名 | ||
xingbie | varchar | 200 | 性别 | ||
touxiang | longtext | 4294967295 | 头像 | ||
nianling | varchar | 200 | 年龄 | ||
youxiang | varchar | 200 | 邮箱 | ||
dianhua | varchar | 200 | 电话 |
5 系统详细功能的实现
5.1系统功能实现
当人们打开系统的网址后,首先看到的就是首页界面。在这里,人们能够看到系统的导航条,通过导航条导航进入各功能展示页面进行操作。系统首页界面如图5-1所示:
图5-1 系统首页界面
系统注册:在系统注册页面的输入栏中输入用户注册信息进行注册操作,系统注册页面如图5-2所示:
图5-2系统注册页面
资源信息:在资源信息页面的输入栏中输入资源名称、资源类型进行查询,可以查看到资源信息详细信息,并根据需要进行评论操作;资源信息页面如图5-3所示:
图5-3资源信息详细页面
素材信息:在素材信息页面的输入栏中输入素材编号、素材名称、素材类型进行查询,可以查看到素材详细信息,并进行评论操作,素材信息页面如图5-4所示:
图5-4素材信息详细页面
信息交流:在信息交流页面输入标题、类型、内容等信息进行修改或重置操作,信息交流页面如图5-5所示:
图5-5信息交流详细页面
个人中心:在个人中心页面可以对个人中心、我的发布、我的收藏进行详细操作;
我的发布:在我的发布页面可以查看标题、发布时间等信息,并进行修改或删除操作;如图5-6所示:
图5-6我的发布界面
我的收藏:在我的收藏页面的输入栏中输入标题进行查询操作;如图5-7所示:
图5-7我的收藏界面
5.2后台模块实现
后台用户登录,在登录页面选择需要登录的角色,在正确输入用户名和密码后,进入操作系统进行操作;如图5-8所示。
图5-8 后台登录界面
5.2.1管理员模块实现
管理员进入主页面,主要功能包括对个人中心、用户管理、教师管理、资源类型管理、资源信息管理、素材类型管理、素材信息管理、信息交流、系统管理等进行操作。管理员主页面如图5-9所示:
图5-9 管理员主界面
管理员点击用户管理。在用户页面输入用户名、姓名、性别进行查询、新增或删除用户列表,并根据需要对用户详情信息进行修改或删除操作;如图5-10所示:
图5-10用户管理界面
管理员点击教师管理。在教师页面输入工号、教师姓名、性别进行查询、新增或删除教师列表,并根据需要对教师详情信息进行修改或删除操作;如图5-11所示:
图5-11教师管理界面
管理员点击资源信息管理。在资源信息页面输入资源名称、资源类型进行查询、新增或删除资源信息列表,并根据需要对资源详情信息进行详情、查看评论、修改或删除操作;如图5-12所示:
图5-12资源信息管理界面
管理员点击素材信息管理。在素材信息页面输入素材编号、素材名称、素材类型进行查询、新增或删除素材信息列表,并根据需要对素材详情信息进行详情、查看评论、修改或删除操作;如图5-13所示:
图5-13素材信息管理界面
管理员点击信息交流。在信息交流页面输入帖子标题进行查询或删除信息交流列表,并根据需要对信息交流详情信息进行详情、查看评论、修改或删除操作;如图5-14所示:
图5-14信息交流界面
管理员点击系统管理。在公告信息页面输入标题进行查询、新增或删除公告信息列表,并根据需要对公告详情信息进行详情、修改或删除操作,还可对关于我们、轮播图管理进行相应操作;如图5-15所示:
图5-15系统管理界面
5.2.2教师模块实现
教师进入系统可以对个人中心、资源信息管理、素材信息管理等功能进行操作。教师主页面如图5-16所示:
图5-16教师主界面
教师点击资源信息管理。在资源信息页面输入资源名称、资源类型进行查询、新增或删除资源信息列表,并根据需要对资源详情信息进行详情、查看评论、修改或删除操作;如图5-17所示:
图5-17资源信息管理界面
教师点击素材信息管理。在素材信息页面输入素材编号、素材名称、素材类型进行查询、新增或删除素材信息列表,并根据需要对素材详情信息进行详情、查看评论、修改或删除操作;如图5-18所示:
图5-18素材信息管理界面
SucaixinxiController.java
package com.controller;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
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.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;
import com.entity.SucaixinxiEntity;
import com.entity.view.SucaixinxiView;
import com.service.SucaixinxiService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;
import java.io.IOException;
import com.service.StoreupService;
import com.entity.StoreupEntity;
/**
* 素材信息
* 后端接口
* @author
* @email
* @date 2023-01-29 09:44:47
*/
@RestController
@RequestMapping("/sucaixinxi")
public class SucaixinxiController {
@Autowired
private SucaixinxiService sucaixinxiService;
@Autowired
private StoreupService storeupService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,SucaixinxiEntity sucaixinxi,
HttpServletRequest request){
if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
sucaixinxi.setUserid((Long)request.getSession().getAttribute("userId"));
}
EntityWrapper<SucaixinxiEntity> ew = new EntityWrapper<SucaixinxiEntity>();
PageUtils page = sucaixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, sucaixinxi), params), params));
return R.ok().put("data", page);
}
/**
* 前端列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,SucaixinxiEntity sucaixinxi,
HttpServletRequest request){
EntityWrapper<SucaixinxiEntity> ew = new EntityWrapper<SucaixinxiEntity>();
PageUtils page = sucaixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, sucaixinxi), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/lists")
public R list( SucaixinxiEntity sucaixinxi){
EntityWrapper<SucaixinxiEntity> ew = new EntityWrapper<SucaixinxiEntity>();
ew.allEq(MPUtil.allEQMapPre( sucaixinxi, "sucaixinxi"));
return R.ok().put("data", sucaixinxiService.selectListView(ew));
}
/**
* 查询
*/
@RequestMapping("/query")
public R query(SucaixinxiEntity sucaixinxi){
EntityWrapper< SucaixinxiEntity> ew = new EntityWrapper< SucaixinxiEntity>();
ew.allEq(MPUtil.allEQMapPre( sucaixinxi, "sucaixinxi"));
SucaixinxiView sucaixinxiView = sucaixinxiService.selectView(ew);
return R.ok("查询素材信息成功").put("data", sucaixinxiView);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
SucaixinxiEntity sucaixinxi = sucaixinxiService.selectById(id);
return R.ok().put("data", sucaixinxi);
}
/**
* 前端详情
*/
@IgnoreAuth
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id){
SucaixinxiEntity sucaixinxi = sucaixinxiService.selectById(id);
return R.ok().put("data", sucaixinxi);
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody SucaixinxiEntity sucaixinxi, HttpServletRequest request){
sucaixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(sucaixinxi);
sucaixinxi.setUserid((Long)request.getSession().getAttribute("userId"));
sucaixinxiService.insert(sucaixinxi);
return R.ok();
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody SucaixinxiEntity sucaixinxi, HttpServletRequest request){
sucaixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(sucaixinxi);
sucaixinxiService.insert(sucaixinxi);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
@Transactional
public R update(@RequestBody SucaixinxiEntity sucaixinxi, HttpServletRequest request){
//ValidatorUtils.validateEntity(sucaixinxi);
sucaixinxiService.updateById(sucaixinxi);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
sucaixinxiService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
/**
* 提醒接口
*/
@RequestMapping("/remind/{columnName}/{type}")
public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request,
@PathVariable("type") String type,@RequestParam Map<String, Object> map) {
map.put("column", columnName);
map.put("type", type);
if(type.equals("2")) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
Date remindStartDate = null;
Date remindEndDate = null;
if(map.get("remindstart")!=null) {
Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindStart);
remindStartDate = c.getTime();
map.put("remindstart", sdf.format(remindStartDate));
}
if(map.get("remindend")!=null) {
Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindEnd);
remindEndDate = c.getTime();
map.put("remindend", sdf.format(remindEndDate));
}
}
Wrapper<SucaixinxiEntity> wrapper = new EntityWrapper<SucaixinxiEntity>();
if(map.get("remindstart")!=null) {
wrapper.ge(columnName, map.get("remindstart"));
}
if(map.get("remindend")!=null) {
wrapper.le(columnName, map.get("remindend"));
}
if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
wrapper.eq("userid", (Long)request.getSession().getAttribute("userId"));
}
int count = sucaixinxiService.selectCount(wrapper);
return R.ok().put("count", count);
}
}
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;
}
}
DiscusssucaixinxiController.java
package com.controller;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
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.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;
import com.entity.DiscusssucaixinxiEntity;
import com.entity.view.DiscusssucaixinxiView;
import com.service.DiscusssucaixinxiService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;
import java.io.IOException;
/**
* 素材信息评论表
* 后端接口
* @author
* @email
* @date 2023-01-29 09:44:48
*/
@RestController
@RequestMapping("/discusssucaixinxi")
public class DiscusssucaixinxiController {
@Autowired
private DiscusssucaixinxiService discusssucaixinxiService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,DiscusssucaixinxiEntity discusssucaixinxi,
HttpServletRequest request){
EntityWrapper<DiscusssucaixinxiEntity> ew = new EntityWrapper<DiscusssucaixinxiEntity>();
PageUtils page = discusssucaixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, discusssucaixinxi), params), params));
return R.ok().put("data", page);
}
/**
* 前端列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,DiscusssucaixinxiEntity discusssucaixinxi,
HttpServletRequest request){
EntityWrapper<DiscusssucaixinxiEntity> ew = new EntityWrapper<DiscusssucaixinxiEntity>();
PageUtils page = discusssucaixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, discusssucaixinxi), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/lists")
public R list( DiscusssucaixinxiEntity discusssucaixinxi){
EntityWrapper<DiscusssucaixinxiEntity> ew = new EntityWrapper<DiscusssucaixinxiEntity>();
ew.allEq(MPUtil.allEQMapPre( discusssucaixinxi, "discusssucaixinxi"));
return R.ok().put("data", discusssucaixinxiService.selectListView(ew));
}
/**
* 查询
*/
@RequestMapping("/query")
public R query(DiscusssucaixinxiEntity discusssucaixinxi){
EntityWrapper< DiscusssucaixinxiEntity> ew = new EntityWrapper< DiscusssucaixinxiEntity>();
ew.allEq(MPUtil.allEQMapPre( discusssucaixinxi, "discusssucaixinxi"));
DiscusssucaixinxiView discusssucaixinxiView = discusssucaixinxiService.selectView(ew);
return R.ok("查询素材信息评论表成功").put("data", discusssucaixinxiView);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
DiscusssucaixinxiEntity discusssucaixinxi = discusssucaixinxiService.selectById(id);
return R.ok().put("data", discusssucaixinxi);
}
/**
* 前端详情
*/
@IgnoreAuth
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id){
DiscusssucaixinxiEntity discusssucaixinxi = discusssucaixinxiService.selectById(id);
return R.ok().put("data", discusssucaixinxi);
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody DiscusssucaixinxiEntity discusssucaixinxi, HttpServletRequest request){
discusssucaixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(discusssucaixinxi);
discusssucaixinxiService.insert(discusssucaixinxi);
return R.ok();
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody DiscusssucaixinxiEntity discusssucaixinxi, HttpServletRequest request){
discusssucaixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(discusssucaixinxi);
discusssucaixinxiService.insert(discusssucaixinxi);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
@Transactional
public R update(@RequestBody DiscusssucaixinxiEntity discusssucaixinxi, HttpServletRequest request){
//ValidatorUtils.validateEntity(discusssucaixinxi);
discusssucaixinxiService.updateById(discusssucaixinxi);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
discusssucaixinxiService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
/**
* 提醒接口
*/
@RequestMapping("/remind/{columnName}/{type}")
public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request,
@PathVariable("type") String type,@RequestParam Map<String, Object> map) {
map.put("column", columnName);
map.put("type", type);
if(type.equals("2")) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
Date remindStartDate = null;
Date remindEndDate = null;
if(map.get("remindstart")!=null) {
Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindStart);
remindStartDate = c.getTime();
map.put("remindstart", sdf.format(remindStartDate));
}
if(map.get("remindend")!=null) {
Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindEnd);
remindEndDate = c.getTime();
map.put("remindend", sdf.format(remindEndDate));
}
}
Wrapper<DiscusssucaixinxiEntity> wrapper = new EntityWrapper<DiscusssucaixinxiEntity>();
if(map.get("remindstart")!=null) {
wrapper.ge(columnName, map.get("remindstart"));
}
if(map.get("remindend")!=null) {
wrapper.le(columnName, map.get("remindend"));
}
int count = discusssucaixinxiService.selectCount(wrapper);
return R.ok().put("count", count);
}
}
add-or-update.vue
<template>
<div class="addEdit-block" style="width: 100%;">
<el-form
:style='{"borderRadius":"6px","padding":"30px"}'
class="add-update-preview"
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="140px"
>
<template >
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="input" v-if="type!='info'" label="标题" prop="title">
<el-input v-model="ruleForm.title" placeholder="标题" clearable :readonly="ro.title"></el-input>
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' v-else class="input" label="标题" prop="title">
<el-input v-model="ruleForm.title" placeholder="标题" readonly></el-input>
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="input" v-if="type!='info'" label="副标题" prop="subtitle">
<el-input v-model="ruleForm.subtitle" placeholder="副标题" clearable :readonly="ro.subtitle"></el-input>
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' v-else class="input" label="副标题" prop="subtitle">
<el-input v-model="ruleForm.subtitle" placeholder="副标题" readonly></el-input>
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="upload" v-if="type!='info' && !ro.picture1" label="图片1" prop="picture1">
<file-upload
tip="点击上传图片1"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.picture1?ruleForm.picture1:''"
@change="picture1UploadChange"
></file-upload>
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="upload" v-else-if="ruleForm.picture1" label="图片1" prop="picture1">
<img v-if="ruleForm.picture1.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;" v-bind:key="index" :src="ruleForm.picture1.split(',')[0]" width="100" height="100">
<img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.picture1.split(',')" :src="$base.url+item" width="100" height="100">
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="upload" v-if="type!='info' && !ro.picture2" label="图片2" prop="picture2">
<file-upload
tip="点击上传图片2"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.picture2?ruleForm.picture2:''"
@change="picture2UploadChange"
></file-upload>
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="upload" v-else-if="ruleForm.picture2" label="图片2" prop="picture2">
<img v-if="ruleForm.picture2.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;" v-bind:key="index" :src="ruleForm.picture2.split(',')[0]" width="100" height="100">
<img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.picture2.split(',')" :src="$base.url+item" width="100" height="100">
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="upload" v-if="type!='info' && !ro.picture3" label="图片3" prop="picture3">
<file-upload
tip="点击上传图片3"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.picture3?ruleForm.picture3:''"
@change="picture3UploadChange"
></file-upload>
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="upload" v-else-if="ruleForm.picture3" label="图片3" prop="picture3">
<img v-if="ruleForm.picture3.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;" v-bind:key="index" :src="ruleForm.picture3.split(',')[0]" width="100" height="100">
<img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.picture3.split(',')" :src="$base.url+item" width="100" height="100">
</el-form-item>
</template>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' v-if="type!='info'" label="内容" prop="content">
<editor
style="min-width: 200px; max-width: 600px;"
v-model="ruleForm.content"
class="editor"
action="file/upload">
</editor>
</el-form-item>
<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' v-else-if="ruleForm.content" label="内容" prop="content">
<span :style='{"fontSize":"14px","lineHeight":"40px","color":"rgba(90, 67, 74, 1)","fontWeight":"500","display":"inline-block"}' v-html="ruleForm.content"></span>
</el-form-item>
<el-form-item :style='{"padding":"0","margin":"0"}' class="btn">
<el-button :style='{"border":"0","cursor":"pointer","padding":"0","margin":"0 20px 0 0","outline":"none","color":"rgba(255, 255, 255, 1)","borderRadius":"4px","background":"rgba(90, 67, 74, 1)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}' v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
<el-button :style='{"border":"2px solid rgba(90, 67, 74, 1)","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"rgba(90, 67, 74, 1)","borderRadius":"4px","background":"rgba(255, 255, 255, 1)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}' v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
<el-button :style='{"border":"2px solid rgba(90, 67, 74, 1)","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"rgba(90, 67, 74, 1)","borderRadius":"4px","background":"rgba(255, 255, 255, 1)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}' v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 数字,邮件,手机,url,身份证校验
import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
export default {
data() {
let self = this
var validateIdCard = (rule, value, callback) => {
if(!value){
callback();
} else if (!checkIdCard(value)) {
callback(new Error("请输入正确的身份证号码"));
} else {
callback();
}
};
var validateUrl = (rule, value, callback) => {
if(!value){
callback();
} else if (!isURL(value)) {
callback(new Error("请输入正确的URL地址"));
} else {
callback();
}
};
var validateMobile = (rule, value, callback) => {
if(!value){
callback();
} else if (!isMobile(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
};
var validatePhone = (rule, value, callback) => {
if(!value){
callback();
} else if (!isPhone(value)) {
callback(new Error("请输入正确的电话号码"));
} else {
callback();
}
};
var validateEmail = (rule, value, callback) => {
if(!value){
callback();
} else if (!isEmail(value)) {
callback(new Error("请输入正确的邮箱地址"));
} else {
callback();
}
};
var validateNumber = (rule, value, callback) => {
if(!value){
callback();
} else if (!isNumber(value)) {
callback(new Error("请输入数字"));
} else {
callback();
}
};
var validateIntNumber = (rule, value, callback) => {
if(!value){
callback();
} else if (!isIntNumer(value)) {
callback(new Error("请输入整数"));
} else {
callback();
}
};
return {
id: '',
type: '',
ro:{
title : false,
subtitle : false,
content : false,
picture1 : false,
picture2 : false,
picture3 : false,
},
ruleForm: {
title: '',
subtitle: '',
content: '',
picture1: '',
picture2: '',
picture3: '',
},
rules: {
title: [
{ required: true, message: '标题不能为空', trigger: 'blur' },
],
subtitle: [
],
content: [
{ required: true, message: '内容不能为空', trigger: 'blur' },
],
picture1: [
],
picture2: [
],
picture3: [
],
}
};
},
props: ["parent"],
computed: {
},
created() {
},
methods: {
// 下载
download(file){
window.open(`${file}`)
},
// 初始化
init(id,type) {
if (id) {
this.id = id;
this.type = type;
}
if(this.type=='info'||this.type=='else'){
this.info(id);
}else if(this.type=='logistics'){
this.logistics=false;
this.info(id);
}else if(this.type=='cross'){
var obj = this.$storage.getObj('crossObj');
for (var o in obj){
if(o=='title'){
this.ruleForm.title = obj[o];
this.ro.title = true;
continue;
}
if(o=='subtitle'){
this.ruleForm.subtitle = obj[o];
this.ro.subtitle = true;
continue;
}
if(o=='content'){
this.ruleForm.content = obj[o];
this.ro.content = true;
continue;
}
if(o=='picture1'){
this.ruleForm.picture1 = obj[o];
this.ro.picture1 = true;
continue;
}
if(o=='picture2'){
this.ruleForm.picture2 = obj[o];
this.ro.picture2 = true;
continue;
}
if(o=='picture3'){
this.ruleForm.picture3 = obj[o];
this.ro.picture3 = true;
continue;
}
}
}
},
// 多级联动参数
info(id) {
this.$http({
url: `aboutus/info/${id}`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.ruleForm = data.data;
//解决前台上传图片后台不显示的问题
let reg=new RegExp('../../../upload','g')//g代表全部
this.ruleForm.content = this.ruleForm.content.replace(reg,'../../../springboot4rpbc/upload');
} else {
this.$message.error(data.msg);
}
});
},
// 提交
onSubmit() {
if(this.ruleForm.picture1!=null) {
this.ruleForm.picture1 = this.ruleForm.picture1.replace(new RegExp(this.$base.url,"g"),"");
}
if(this.ruleForm.picture2!=null) {
this.ruleForm.picture2 = this.ruleForm.picture2.replace(new RegExp(this.$base.url,"g"),"");
}
if(this.ruleForm.picture3!=null) {
this.ruleForm.picture3 = this.ruleForm.picture3.replace(new RegExp(this.$base.url,"g"),"");
}
var objcross = this.$storage.getObj('crossObj');
//更新跨表属性
var crossuserid;
var crossrefid;
var crossoptnum;
if(this.type=='cross'){
var statusColumnName = this.$storage.get('statusColumnName');
var statusColumnValue = this.$storage.get('statusColumnValue');
if(statusColumnName!='') {
var obj = this.$storage.getObj('crossObj');
if(statusColumnName && !statusColumnName.startsWith("[")) {
for (var o in obj){
if(o==statusColumnName){
obj[o] = statusColumnValue;
}
}
var table = this.$storage.get('crossTable');
this.$http({
url: `${table}/update`,
method: "post",
data: obj
}).then(({ data }) => {});
} else {
crossuserid=this.$storage.get('userid');
crossrefid=obj['id'];
crossoptnum=this.$storage.get('statusColumnName');
crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");
}
}
}
this.$refs["ruleForm"].validate(valid => {
if (valid) {
if(crossrefid && crossuserid) {
this.ruleForm.crossuserid = crossuserid;
this.ruleForm.crossrefid = crossrefid;
let params = {
page: 1,
limit: 10,
crossuserid:this.ruleForm.crossuserid,
crossrefid:this.ruleForm.crossrefid,
}
this.$http({
url: "aboutus/page",
method: "get",
params: params
}).then(({
data
}) => {
if (data && data.code === 0) {
if(data.data.total>=crossoptnum) {
this.$message.error(this.$storage.get('tips'));
return false;
} else {
this.$http({
url: `aboutus/${!this.ruleForm.id ? "save" : "update"}`,
method: "post",
data: this.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.aboutusCrossAddOrUpdateFlag = false;
this.parent.search();
this.parent.contentStyleChange();
}
});
} else {
this.$message.error(data.msg);
}
});
}
} else {
}
});
} else {
this.$http({
url: `aboutus/${!this.ruleForm.id ? "save" : "update"}`,
method: "post",
data: this.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.aboutusCrossAddOrUpdateFlag = false;
this.parent.search();
this.parent.contentStyleChange();
}
});
} else {
this.$message.error(data.msg);
}
});
}
}
});
},
// 获取uuid
getUUID () {
return new Date().getTime();
},
// 返回
back() {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.aboutusCrossAddOrUpdateFlag = false;
this.parent.contentStyleChange();
},
picture1UploadChange(fileUrls) {
this.ruleForm.picture1 = fileUrls;
},
picture2UploadChange(fileUrls) {
this.ruleForm.picture2 = fileUrls;
},
picture3UploadChange(fileUrls) {
this.ruleForm.picture3 = fileUrls;
},
}
};
</script>
<style lang="scss" scoped>
.amap-wrapper {
width: 100%;
height: 500px;
}
.search-box {
position: absolute;
}
.el-date-editor.el-input {
width: auto;
}
.add-update-preview .el-form-item /deep/ .el-form-item__label {
padding: 0 10px 0 0;
color: #666;
font-weight: 600;
width: 140px;
font-size: 14px;
line-height: 40px;
text-align: right;
}
.add-update-preview .el-form-item /deep/ .el-form-item__content {
margin-left: 140px;
}
.add-update-preview .el-input /deep/ .el-input__inner {
border: 2px solid #797979;
border-radius: 4px;
padding: 0 12px;
outline: none;
color: rgba(90, 67, 74, 1);
width: 300px;
font-size: 14px;
height: 40px;
}
.add-update-preview .el-select /deep/ .el-input__inner {
border: 2px solid #797979;
border-radius: 4px;
padding: 0 10px;
outline: none;
color: rgba(90, 67, 74, 1);
width: 200px;
font-size: 14px;
height: 40px;
}
.add-update-preview .el-date-editor /deep/ .el-input__inner {
border: 2px solid #797979;
border-radius: 4px;
padding: 0 10px 0 30px;
outline: none;
color: rgba(90, 67, 74, 1);
width: 200px;
font-size: 14px;
height: 40px;
}
.add-update-preview /deep/ .el-upload--picture-card {
background: transparent;
border: 0;
border-radius: 0;
width: auto;
height: auto;
line-height: initial;
vertical-align: middle;
}
.add-update-preview /deep/ .upload .upload-img {
border: 2px dashed #797979;
cursor: pointer;
border-radius: 6px;
color: #797979;
width: 150px;
font-size: 32px;
line-height: 150px;
text-align: center;
height: 150px;
}
.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
border: 2px dashed #797979;
cursor: pointer;
border-radius: 6px;
color: #797979;
width: 150px;
font-size: 32px;
line-height: 150px;
text-align: center;
height: 150px;
}
.add-update-preview /deep/ .el-upload .el-icon-plus {
border: 2px dashed #797979;
cursor: pointer;
border-radius: 6px;
color: #797979;
width: 150px;
font-size: 32px;
line-height: 150px;
text-align: center;
height: 150px;
}
.add-update-preview .el-textarea /deep/ .el-textarea__inner {
border: 2px solid #797979;
border-radius: 4px;
padding: 12px;
outline: none;
color: rgba(90, 67, 74, 1);
width: 400px;
font-size: 14px;
height: 120px;
}
</style>