如何使用ssm实现大学生第二课堂

@TOC

10901ssm大学生第二课堂

第1章 绪论

1.1背景及意义

随着社会的快速发展,计算机的影响是全面且深入的。人们生活水平的不断提高,日常生活中人们对大学生第二课堂方面的要求也在不断提高,随着大学生第二课堂受到广大学生的关注,使得大学生第二课堂的开发成为必需而且紧迫的事情。大学生第二课堂主要是借助计算机,通过对大学生第二课堂所需的信息管理,增加学生的选择,同时也方便对广大学生信息的及时查询、修改以及对学生信息的及时了解。大学生第二课堂对学生带来了更多的便利,该系统通过和数据库管理系统软件协作来满足学生的需求。 计算机技术在现代管理中的应用,使计算机成为人们应用现代技术的重要工具。能够有效的解决获取信息便捷化、全面化的问题,提高效率。

1.2 国内外研究概况

随着国内经济形势的不断发展,中国互联网进入了一个难得的高峰发展时期,这使得中外资本家纷纷转向互联网市场。 然而,许多管理领域的不合理结构,人员不足以及管理需求的增加使得更多的人具备了互联网管理的意识。

在当今高度发达的信息中,信息管理改革已成为一种更加广泛和全面的趋势。 “大学生第二课堂”是基于Mysql数据库,在SSM程序设计的基础上实现的。为确保中国经济的持续发展,信息时代日益更新,蓬勃发展。同时,随着信息社会的快速发展,大学生第二课堂面临着越来越多的信息,因此很难获得他们对高效信息的需求,如何使用方便快捷的方式使查询者在广阔的海洋信息中查询,存储,管理和共享信息方面有效,对我们的工作和生活具有重要的现实意义。因此,国内外学术界对此进行了深入而广泛的研究,一个新的研究领域——大学生第二课堂诞生了。

1.3 研究的内容

目前许多人仍将传统的纸质工具作为信息管理的主要工具,而网络技术的应用只是起到辅助作用。在对网络工具的认知程度上,较为传统的office软件等仍是人们使用的主要工具,而相对全面且专业的大学生第二课堂的信息管理软件仍没有得到大多数人的了解或认可。本选题则旨在通过标签分类管理等方式,管理员;首页、个人中心、学生管理、专业类型管理、活动信息管理、活动类型管理、活动报名管理、活动成果管理、学分成绩管理、问卷调查管理、参与问卷管理、系统管理,学生;首页、个人中心、活动报名管理、活动成果管理、学分成绩管理、参与问卷管理,前台首页;首页、活动信息、活动成果、问卷调查、个人中心、后台管理等信息管理功能,从而达到对大学生第二课堂的高效管理。

第2章 相关技术

2.1 Java简介

Java技术它是一个容易让人学会和使用的一门服务器语言。它在编程的过程当中只需要很少的知识就能建立起一个真正的交互站点。对于这个教程来说它并不需要你完全去了解这种语言,只要能快速融入web站点就可以,还可以进行一些基本知识的编程就可以。

现代社会中,使用Java语言做动态网页是最常用的,主要是Java比较简单易懂,学生掌握的web 服务器编写脚本。Java语言技术在编程技术中具有一定的安全性和跨平台性功能,并且它可以直接支持分布式的网络应用和效率。在Java语言技术当中它的功能是方便简单的。对于这个语言技术来说它就像万花筒一样在进行开发的时候可以随机进行组合最后变成不同颜色的花瓣。随着现在互联网的快速发展和电子商务的不断发展,在各行各业的设施基础上都开始应用到了计算机,对于过去传统的的管理方式和学生需求都不能满足现在正常的供求关系,所以我们必须通过添加现在的新技术来满足学生的需求。从目前来看,Java技术已经在动态网页中应用的是比较广泛的一门技术。

Java语言具有非常多种的特性:(1)跨平台的无关性;(2)面向对象; (3)安全性得以保障;(4)支持多个任务;(5)多种编写方式,代码编写简单。对比其他的低级语言、高级语言,Java语言具有明显的显著优势以及未来开阔的前景,可以广泛的应用在个人笔记本电脑、大数据、大型游戏等等。

Java语言具有面向对象的特性,并且易于理解。关于对象,其实可以理解成每一种事物都是一种对象,包括我们人类自身都是一种对象。利用面向对象语言的基本特征来解决软件开发中的实际问题,为有效软件开发提供了技术支持。

2.2 SSM三大框架

1.Spring的优势: 通过Spring的IOC特性,将对象之间的依赖关系交给了Spring控制,方便解耦,简化了开发。

2.Spring MVC的优势: SpringMVC是使用了MVC设计思想的轻量级web框架,对web层进行解耦,使我们的开发更简洁。

3.Mybatis的优势:

数据库的操作(sql)采用xml文件配置,解除了sql和代码的耦合,提供映射标签,支持对象和和数据库orm字段关系的映射,支持对象关系映射标签,支持对象关系的组建提供了xml标签,支持动态的sql。

2.3 MyEclipse开发环境

MyEclipse支持广泛、兼容性高并且功能强大,是一个Eclipse 插件集合,普遍适应于JAVA和J2EE的系统开发,支持 JDBC,Hibernate,AJAX,Struts,Java Servlet,Spring,EJB3等市面上存在的几乎所有数据库链接工具和主流Eclipse产品 开发工具。

MyEclipse在业内是所熟知的开发工具,该平台在开发的过程中运用的就是该工具。MyEclipse又被称之为企业级的工作平台,它是以Eclipse IDE为基础的。MyEclipse可以帮助我们进行数据库的研发和J2EE的使用,除此之外,还可以提高系统的运营能力,这突出表现在服务器的整合过程中。MyEclipse的功能相当完备,能够为J2EE的集成提供必要的环境支持,从而完成编码、测试、调试及发布等功能。它可以支持JSP,HTML,SQL,Javascript,Struts, CSS等。

2.4 Tomcat服务器

Tomcat属于一种轻型的服务器,所以说在中小企业中并不具有普适性。但是当程序员需要开发或调试JSP 程序时,则通常会将该服务器作为首选。对于一个仅具有计算机基础知识的人来说,计算机系统具有一个好的Apache服务器,可以很好的对HTML 页面进行访问。Tomcat 虽然是Apache的扩展,但是它们都是可以独立运行的,二者是不互相干扰的。当配置正确的时候,Apache服务器为HTML 页面的运行提供技术支持,Tomcat 的任务则是运行Servle和JSP 页面。Tomca也具有一定的HTML页面处理功能。

2.5 MySQL数据库

Mysql的语言是非结构化的,学生可以在数据上进行工作。MySQL因为其速度、可靠性和适应性而备受关注。大多数人都认为在不需要事务化处理的情况下,MySQL是管理内容最好的选择。并且因为Mysql的语言和结构比较简单,但是功能和存储信息量很强大,所以得到了普遍的应用。

Mysql数据库在编程过程中的作用是很广泛的,为学生进行数据查询带来了方便。Mysql数据库的应用因其灵活性强,功能强大,所以在实现某功能时只需要一小段代码,而不像其他程序需要编写大段代码。总体来说,Mysql数据库的语言相对要简洁很多。

数据流程分析主要就是数据存储的储藏室,它是在计算机上进行的,而不是现实中的储藏室。数据的存放是按固定格式,而不是无序的,其定义就是:长期有固定格式,可以共享的存储在计算机存储器上。数据库管理主要是数据存储、修改和增加以及数据表的建立。为了保证系统数据的正常运行,一些有能力的处理者可以进行管理而不需要专业的人来处理。数据表的建立,可以对数据表中的数据进行调整,数据的重新组合及重新构造,保证数据的安全性。介于数据库的功能强大等特点,本系统的开发主要应用了Mysql进行对数据的管理。

第3章 系统分析

3.1 需求分析

大学生第二课堂主要是为了提高工作人员的工作效率和更方便快捷的满足学生,更好存储所有数据信息及快速方便的检索功能,对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑学生的可操作性,遵循开发的系统优化的原则,经过全面的调查和研究。

系统所要实现的功能分析,对于现在网络方便的管理,系统要实现学生可以直接在平台上进行查看所有数据信息,根据需求可以进行在线添加,删除或修改大学生第二课堂信息,这样既能节省时间,不用再像传统的方式耽误时间,真的很难去满足学生的各种需求。所以大学生第二课堂的开发不仅能满足学生的需求,还能减少原有不必要的工作量,大大提高了管理员的工作效率。

3.2 系统可行性分析

3.2.1技术可行性:技术背景

本企业网站在Windows操作系统中进行开发,并且目前PC机的性能已经可以胜任普通网站的web服务器。系统开发所使用的技术也都是自身所具有的,也是当下广泛应用的技术之一。

系统的开发环境和配置都是可以自行安装的,系统使用Java开发工具,使用比较成熟的Mysql数据库进行对系统前台及后台的数据交互,根据技术语言对数据库,结合需求进行修改维护,可以使得网站运行更具有稳定性和安全性,从而完成实现网站的开发。

(1)硬件可行性分析

系统管理及信息分析的设计对于所使用的计算机没有什么硬性的要求,计算机只要可以正常的使用进行代码的编写及页面设计就可行,主要是对于服务器有些要求,对于平台搭建完成要上传的服务器是有一定的要求的,服务器必须选择安全性比较高的,然后就是在打开网站必须顺畅,不能停顿太长时间;性价比高;安全性高。

(2)软件可行性分析

提供一个共同的机制类似的借口动态模型,设计更集中。此外,代码复用,也可以很好的体现。因此,考虑到系统的实际情况,选择Java作为本系统开发技术。通过上述分析,该系统的设计实现在软件方面是可行的。

因此,我们进行了两个方面的可行性研究,可以看出,该系统的开发是没有问题的。

3.2.2经济可行性

在大学生第二课堂开发之前所做的市场调研及其他相关的管理系统,都是没有任何费用的,都是通过开发者自己的努力,所有工作都是自己亲力亲为,在碰到自己比较难以解决的问题,大多是通过同学和指导老师的帮助进行相关信息的解决,所以对于大学生第二课堂的开发在经济上是完全可行的,没有任何费用支出的。

使用比较成熟的技术,系统是基于SSM框架的开发,采用Mysql数据库。所以系统在开发人力、财力要求不高,具有经济可行性。

3.2.3操作可行性:

可操作性主要是对大学生第二课堂设计完成后,学生的使用体验度,以及管理员可以通过系统随时管理相关的数据信息,并且对于管理员、学生二个权限角色,都可以简单明了的进入到自己的系统界面,通过界面导航菜单可以简单明了地操作功能模块,方便学生信息的操作需求和数据信息,对于系统的操作,不需要专业人员都可以直接进行功能模块的操作管理,所以在系统的可操作性是完全可以的。本系统的操作过程使用的也是界面窗口进行登录,所以操作人员只要会简单的电脑操作就完全可以的。

3.3 项目设计目标与原则

1、关于大学生第二课堂的基本要求

(1)功能要求:可以管理首页、个人中心、学生管理、专业类型管理、活动信息管理、活动类型管理、活动报名管理、活动成果管理、学分成绩管理、问卷调查管理、参与问卷管理、系统管理等功能模块。

(2)性能:在不同操作系统上均能无差错实现在不同类型的学生登入相应界面后能不出差错、方便地进行预期操作。

(3)安全与保密要求:学生都必须通过注册、登录才能进入系统。

(4)环境要求:支持Windows系列、Vista系统等多种操作系统使用。

2、开发目标

大学生第二课堂的主要开发目标如下:

(1)实现管理系统信息关系的系统化、规范化和自动化;

(2)减少维护人员的工作量以及实现学生对信息的控制和管理;

(3)方便查询信息及管理信息等;

(4)通过网络操作,提高改善处理问题和操作人员工作的效率;

(5)考虑到学生多样性特点,要求界面和操作简便易懂。

3、设计原则

本大学生第二课堂采用SSM框架,Mysql数据库开发,充分保证了系统稳定性、完整性。

大学生第二课堂的设计与实现的设计思想如下:

  1. 操作简单方便、系统界面安全良好、简单明了的页面布局、方便查询相关信息。

2、即时可见:对大学生第二课堂信息的处理将立马在对应地点可以查询到,从而实现“即时发布、即时见效”的系统功能。

3.4系统流程分析

3.4.1操作流程

系统登录流程图,如图所示:

图3-1登录流程图

3.4.2添加信息流程

添加信息流程图,如图所示:

图3-2添加信息流程图

3.4.3删除信息流程

删除信息流程图,如图所示:

图3-3删除信息流程图

第4章 系统设计

4.1 系统体系结构

大学生第二课堂的结构图4-1所示:

管理员

服务器和程序

学生

图4-1 系统结构

登录系统结构图,如图4-2所示:

大学生第二课堂登录界面

用户登录

密码正确

管理员界面

学生界面

图4-2 登录结构图

系统结构图,如图4-3所示。

图4-3系统结构图

4.2开发流程设计

系统流程的分析是通过调查系统所涉及问题的识别、可行性、可操作性、系统分析处理能力等具体环节来调节、整理系统的设计方案以确保系统能达到理想的状态。这些操作都要从注册、登录处着眼进行一系列的流程测试保证数据库的完整,从而把控系统所涉及信息管理的安全、保证信息输入、输出正常转换。然后,通过实际操作完成流程图的绘制工作。

大学生第二课堂的开发对管理模块和系统使用的数据库进行分析,编写代码,系统测试,如图4-4所示。

图4-4开发系统流程图

4.3 数据库设计原则

学习编程,我们都知道数据库设计是基于需要设计的系统功能,我们需要建立一个数据库关系模型,用于存储数据信息,这样当我们在程序中时,就没有必要为程序页面添加数据,从而提高系统的效率。数据库存储了很多信息,可以说是信息管理系统的核心和基础,数据库还为系统提供了添加、删除、修改和检查等操作模块,使系统能够快速找到自己想要的信息,而不是在程序代码中找到。数据库中信息表的每个部分根据一定的关系精确地组合,排列和组合成数据表。

通过大学生第二课堂的功能进行规划分成几个实体信息,实体信息将通过ER图进行说明,本系统的主要实体图如下:

管理员信息属性图如图4-5所示。

图4-5 管理员信息实体属性图

学生信息实体属性图如图4-6所示。

图4-6学生信息实体属性图

活动信息实体属性图如图4-7所示。

图4-7活动信息实体属性图

活动报名信息实体属性图如图4-8所示。

图4-8活动报名信息实体属性图

活动成果信息实体属性图如图4-9所示。

图4-9活动成果信息实体属性图

4.4 数据表

将数据库概念设计的E-R图转换为关系数据库。在关系数据库中,数据关系由数据表组成,但是表的结构表现在表的字段上。

表4-1 allusers表

列名数据类型长度约束
idint11NOT NULL
usernamevarchar50default NULL
pwdvarchar50default NULL
cxvarchar50default NULL

表4-2:canyuwenjuan表

列名数据类型长度约束
idint11NOT NULL
addtimevarchar50default NULL
xuehaovarchar50default NULL
xingmingvarchar50default NULL
biaotivarchar50default NULL
huifuwenjianvarchar50default NULL
yijianjianyivarchar50default NULL

表4-3:huodongbaoming表

列名数据类型长度约束
idint11NOT NULL
addtimevarchar50default NULL
xuehaovarchar50default NULL
xingmingvarchar50default NULL
huodongmingchengvarchar50default NULL
huodongleixingvarchar50default NULL
baomingriqivarchar50default NULL
lianxidianhuavarchar50default NULL
sfshvarchar50default NULL
shhfvarchar50default NULL

表4-4:huodongxinxi表

列名数据类型长度约束
idint11NOT NULL
addtimevarchar50default NULL
huodongmingchengvarchar50default NULL
huodongleixingvarchar50default NULL
huodongmubiaovarchar50default NULL
zhubandanweivarchar50default NULL
yujirenshuvarchar50default NULL
huodongneirongvarchar50default NULL
huodongdidianvarchar50default NULL
huodongriqivarchar50default NULL
beizhuvarchar50default NULL
tupianvarchar50default NULL
  1. 系统详细设计

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-8所示。

图5-8参与问卷管理界面图

轮播图;该页面为轮播图管理界面。管理员可以在此页面进行首页轮播图的管理,通过新建操作可在轮播图中加入新的图片,还可以对以上传的图片进行修改操作,以及图片的删除操作,如图5-9所示。

图5-9轮播图管理界面图

5.2学生功能模块

学生登录进入大学生第二课堂可以查看首页、个人中心、活动报名管理、活动成果管理、学分成绩管理、参与问卷管理等内容,如图5-10所示。

图5-10学生功能界面图

活动成果管理,在活动成果管理页面可以查看学号、姓名、活动名称、活动类型、活动过程、相关附件、发布日期、图片、审核回复、审核状态、审核等信息进行详情、修改,如图5-11所示。

图5-11活动成果管理界面图

参与问卷管理,在参与问卷管理页面可以查看学号、姓名、标题、回复文件、意见建议等信息,并可根据需要对参与问卷管理进行详情、删除等操作,如图5-12所示。

图5-12参与问卷管理界面图

5.3前台首页功能模块

大学生第二课堂 ,在大学生第二课堂可以查看首页、活动信息、活动成果、问卷调查、个人中心、后台管理等内容,如图5-13所示。

图5-13系统首页界面图

学生登录,通过登录填写账号、密码等信息进行登录操作,如图5-14所示。

图5-14学生登录界面图

活动信息,在活动信息页面可以查看活动名称、活动类型、活动目标、主办单位、预计人数、活动地点、活动日期、图片等信息进行报名,如图5-15所示。

图5-15活动信息界面图

活动成果,在活动成果页面可以查看学号、姓名、活动名称、活动类型、活动过程、相关附件、发布日期等信息进行点击下载如图5-16所示。

图5-16活动成果界面图

ZhuanyeleixingServiceImpl.java
package com.service.impl;

import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;


import com.dao.ZhuanyeleixingDao;
import com.entity.ZhuanyeleixingEntity;
import com.service.ZhuanyeleixingService;
import com.entity.vo.ZhuanyeleixingVO;
import com.entity.view.ZhuanyeleixingView;

@Service("zhuanyeleixingService")
public class ZhuanyeleixingServiceImpl extends ServiceImpl<ZhuanyeleixingDao, ZhuanyeleixingEntity> implements ZhuanyeleixingService {
	

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<ZhuanyeleixingEntity> page = this.selectPage(
                new Query<ZhuanyeleixingEntity>(params).getPage(),
                new EntityWrapper<ZhuanyeleixingEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<ZhuanyeleixingEntity> wrapper) {
		  Page<ZhuanyeleixingView> page =new Query<ZhuanyeleixingView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<ZhuanyeleixingVO> selectListVO(Wrapper<ZhuanyeleixingEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public ZhuanyeleixingVO selectVO(Wrapper<ZhuanyeleixingEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<ZhuanyeleixingView> selectListView(Wrapper<ZhuanyeleixingEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public ZhuanyeleixingView selectView(Wrapper<ZhuanyeleixingEntity> wrapper) {
		return baseMapper.selectView(wrapper);
	}

}

MD5Util.java
package com.utils;

import cn.hutool.crypto.digest.DigestUtil;

public class MD5Util {
    
	/**
	 * @param text明文
	 * @param key密钥
	 * @return 密文
	 */
	// 带秘钥加密
	public static String md5(String text) {
		// 加密后的字符串
		String md5str = DigestUtil.md5Hex(text);
		return md5str;
	}

}

TokenServiceImpl.java

package com.service.impl;


import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Service;

import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.dao.TokenDao;
import com.entity.TokenEntity;
import com.entity.TokenEntity;
import com.service.TokenService;
import com.utils.CommonUtil;
import com.utils.PageUtils;
import com.utils.Query;


/**
 * token
 */
@Service("tokenService")
public class TokenServiceImpl extends ServiceImpl<TokenDao, TokenEntity> implements TokenService {

	@Override
	public PageUtils queryPage(Map<String, Object> params) {
		Page<TokenEntity> page = this.selectPage(
                new Query<TokenEntity>(params).getPage(),
                new EntityWrapper<TokenEntity>()
        );
        return new PageUtils(page);
	}

	@Override
	public List<TokenEntity> selectListView(Wrapper<TokenEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public PageUtils queryPage(Map<String, Object> params,
			Wrapper<TokenEntity> wrapper) {
		 Page<TokenEntity> page =new Query<TokenEntity>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
	}

	@Override
	public String generateToken(Long userid,String username, String tableName, String role) {
		TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("userid", userid).eq("role", role));
		String token = CommonUtil.getRandomString(32);
		Calendar cal = Calendar.getInstance();   
    	cal.setTime(new Date());   
    	cal.add(Calendar.HOUR_OF_DAY, 1);
		if(tokenEntity!=null) {
			tokenEntity.setToken(token);
			tokenEntity.setExpiratedtime(cal.getTime());
			this.updateById(tokenEntity);
		} else {
			this.insert(new TokenEntity(userid,username, tableName, role, token, cal.getTime()));
		}
		return token;
	}

	@Override
	public TokenEntity getTokenEntity(String token) {
		TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("token", token));
		if(tokenEntity == null || tokenEntity.getExpiratedtime().getTime()<new Date().getTime()) {
			return null;
		}
		return tokenEntity;
	}
}

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="leixing">
          <el-input v-model="ruleForm.leixing" 
              placeholder="类型" clearable  :readonly="ro.leixing"></el-input>
        </el-form-item>
        <div v-else>
          <el-form-item class="input" label="类型" prop="leixing">
              <el-input v-model="ruleForm.leixing" 
                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>
// 数字,邮件,手机,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 {
	  addEditForm: {"btnSaveFontColor":"#fff","selectFontSize":"14px","btnCancelBorderColor":"#DCDFE6","inputBorderRadius":"4px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"4px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"4px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(245, 247, 250, 1)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"#DCDFE6","btnCancelBgColor":"#ecf5ff","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"4px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"#DCDFE6","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"4px","inputBgColor":"#fff","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"4px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"#DCDFE6","inputBorderColor":"#DCDFE6","uploadBorderColor":"#DCDFE6","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"4px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
      id: '',
      type: '',
      ro:{
	leixing : false,
      },
      ruleForm: {
        leixing: '',
      },
      rules: {
          leixing: [
          ],
      }
    };
  },
  props: ["parent"],
  computed: {
  },
  created() {
	this.addEditStyleChange()
	this.addEditUploadStyleChange()
  },
  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=='cross'){
        var obj = this.$storage.getObj('crossObj');
        for (var o in obj){
          if(o=='leixing'){
            this.ruleForm.leixing = obj[o];
	    this.ro.leixing = true;
            continue;
          }
        }
      }
      // 获取用户信息
      this.$http({
        url: `${this.$storage.get('sessionTable')}/session`,
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var json = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 多级联动参数
    info(id) {
      this.$http({
        url: `huodongleixing/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() {
      // ${column.compare}

      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: `huodongleixing/${!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.huodongleixingCrossAddOrUpdateFlag = 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.huodongleixingCrossAddOrUpdateFlag = 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、付费专栏及课程。

余额充值