在线学籍管理系统

@TOC

springboot592在线学籍管理系统--论文

第一章 绪 论

1.1研究背景

近年来互联网技术飞速发展，给人们的生活带来了极大便利，也改变人们的生活方式，互联网拥有存储量大、可靠性高、使用方便等不可替代的优点，也正在逐步取代传统的信息管理模式[1]。由代码编程实现的各种管理工具和系统替代传统的人工操作，不但提升了可靠性还降低了人力成本，节省了时间，提升了工作效率。全球视域下信息技术逐步渗透到各个领域，多样化的数据信息为在线学籍管理带来了深刻变革，打破了传统的方式与载体，在线学籍管理的事务性工作面临新形势和新挑战[2]。

计算机技术快速发展的同时也促进信息化发展。当下在线学籍管理规模不断扩大，新型管理模式也正逐步推进，推动其信息化发展可以为其改革、进步提供保障。信息技术的改革已成为必然方向，管理人员应该抓住时代的机遇，与时俱进[3]。通过这种方式可以提升在线学籍管理工作的效率，促进新举措的实施，加速改革进程，改善管理服务能力。

在线学籍管理系统作为信息化建设的重要一环，在线学籍管理系统的开发与实现，能够使管理者的工作开展得更加有序。

1.2系统研究现状

我国信息技术虽然起步较晚，但发展速度迅猛，如今已经跻身世界信息大国的行列。现在我们的生活离不开信息技术，人们可以利用计算机、互联网进行网上购物、视频学习、互动交流，信息技术已经渗透到我们的生活中，随着计算机技术、网络技术的迅速发展，研究并实现在线学籍管理系统是现代理论和科学技术相结合的产物[4]。国内信息化发展趋势越来越快，我国信息化建设也随之迅速发展，通过信息系统对大量复杂数据进行管理代替传统人工管理，很大程度的提升管理效率。目前在线学籍管理系统基本实现了应用网络进行管理，使用各种技术、实现各种不同附加功能的管理系统数量众多。但随着近年来互联网技术的不断完善和更新，一些不适应当代信息化发展的技术正在被淘汰，而采用老旧技术实现的系统将出现维护困难的境况。因此符合现在社会发展的系统开发十分必要，在线学籍管理系统的设计和开发仍然有很大的进步空间。

国外部分发达国家的信息技术起步较早，以技术为基础引领的各行各业的变革产生时间也较早。信息化的理念由世界知名的美国麻省理工学院提出，接下来的三四十年随着网络技术的飞速发展，终于在全美形成了一系列非常完善成熟的信息化平台，自此美国国内大部分都实现了管理信息化[5]。虽然存在教育制度存在不同，但由于美国信息化管理的起步时间早，积累经验多，有关在线学籍管理系统的研究技术经验仍然值得世界学习。

1.3 研究意义

各行各业对互联网的运用正经历着质变，从技术支撑者的技术建构与技术运用转向产业需要为起点，通过重新构建在线学籍管理系统，实现制度上的发展变革[7][7]。本文将设计一个根据整理、归纳后进行精简的在线学籍管理系统。使用采取稳定、可靠且易于维护的开发技术进行系统的实现。系统可以直观、高效、便捷地实现对各个在线学籍进行管理，使工作人员有针对地安排和管理在线学籍，建立统一的在线学籍管理系统。

2 大学本科毕业设计（论文）

第二章 开发工具和开发技术

2.1开发工具

本系统开发使用到的工具包括Tomcat，MySQL和Vision，下边对它们进行简单的介绍。

（1）Tomcat；Java Web应用程序开发中常用的应用服务器，我们可以将自己开发好的项目部署到Tomcat中进行运行测试，重点是Tomcat体积很小，不需要复杂的安装和配置，下载之后可以直接使用，非常方便。

（2）MySQL数据库；一种项目开发中常用的关系型数据库，因为体积小、开源、免费、简单易学、安装简单等特点[8]，深受开发人员的喜爱，是大多数互联网公司的首选。将系统中的数据统一存储到这个数据库中，然后借助程序将这些数据读取出来，显示在页面上。

（3）Vision；Office办公组件之一，安装之后，可以用来绘制相应的图形，帮助我们更好的理解系统的情况，建立对系统清晰的认识，是开发中最常使用的建模工具。

2.2 开发技术

本系统在后台使用Java语言实现跨平台的处理，以B/S的结构方式以及springboot框架进行开发，数据库使用MySQL。

2.2.1 Java语言

Java 语言是一门受众很广的语言，来自SunMicrosystems公司，Java可运行在很多平台，相较于C++语言，不仅吸收了C++很多优点，还摈弃了里面许多晦涩难懂的概念，Java的优点很多，可面向对象开发，平台多样性以及可移植性很高，目前市面上很多大型网站项目都使用Java编写，由此可知Java的受欢迎程度很高。

2.2.2 Spring Boot框架

Spring Boot是由Pivota公司的团队在Spring框架的基础上所开发出的一个轻量级应用框架，其设计目的是为了简化使用传统Spring框架开发时初始搭建、配置、开发、测试和部署等复杂的流程，满足快速、敏捷开发的需要[[49]。传统Spring框架开启某些特性或引入第三方依赖时，需要配置大量的XML文件，比较繁琐且非常容易出错。而SpringBoot的理念则是“约定大于配置”，它集成了大量第三方依赖的配置，再配合内部自动装配的机制，仅需在Maven工程的POM文件中添加相关依赖即可实现开箱即用的效果，这使得开发人员更加专注于实现业务逻辑，而不是繁琐的配置。此外，Spring Boot内置了S ervlet容器如Tomcat和Jetty，项目可以直接通过} ar命令在本地启动，无需打包成wa:文件再部署到服务器上，大大减少了测试和部署的成本。目前，Spring Boot己经成为了后端服务器应用开发的主流技术[[50]，其特点和优势总结如下:

(1)简化配置，遵循“约定大于配置”的理念，减少了样板代码、注释和XML配置文件的编写。

(2)内置Servlet容器，可在本地独立运行项目，方便测试和部署。

(3)自动装配，可以非常方便地与Spring生态系统中其他框架或第三方依赖集成。

(4)便于快速构建项目，尤其适合构建基于微服务架构的系统。

2.2.3 MySQL数据库技术

数据库在软件项目中扮演着操作管理数据的角色同时还能够保证数据的独立性、一致性和安全性，并为系统访问数据提供有效方式不仅如此数据库还能大大减少程序员开发程序时间。在日常能够接触实用的一般有两类数据库，一类是以(Oracle，DB2，SQL Server，MySQL )为代表的关系型数据库和以(NoSql、MongeDB)为代表的非关系型数据库，两类数据库各有各的优缺点。其中非关系型数据库又分为网络数据库和层级数据库。-网络数据库是指在计算机网络系统中应用数据库技术然后借助网络技术将存储于数据库中的大量信息及时发布出去；在成熟的数据库技术的帮助下，计算机网络实现了对网络中的各种数据的有效管理，用户与网络中的数据库数据交互也借此得以进行。IMS也是最早研制成功的数据库系统。关系数据结构、关系操作集合、关系完整性约束构成了关系模型。作为数据库另外一种区分方式的存储介质被大家分为磁盘和内存这 两种。例如：关系型数据库就存储在磁盘中，非关系型数据库则存储在内存中。典型的关系型数据库有：Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL、SQLite。小型关系型数据库：Microsoft Access，SQLite；中型关系型数据库：SQL Server，Mysql；大型关系型数据库：Oracle，DB2。

大家常用的其他关系形数据库系统大多是MySQL AB公司开发的，其中MySQL也是由这家开发的，所应用的分布式数据库管理系统是客户机/服务器体系结构得益于此结构，而且用这个系统建造的数据库具有很强的适用性，用C和C++编写的系统让他拥有很强的适用性所以他可以在大部分操作系统上使用并能和php结合。不同的API函数针对不同的语言(C,C++,JAVA等)来处理不同数据；为了更好地支持多CPU多线程通过使用核心线程来实现；提供的存储机制分为事务和非事务存储机制；MySQL采用双重许可，不管是从MySQL AB公司获得正式的商业许可又或是许可条款下以免费软件或开放源码软件的方式使用MySQL软件都是被允许的。

MySQL作为数据库拥有很多优点，其中由于是开放源码，所以使用成本特别低，而它体积小的特点决定了速度快的特性。因此，My Sql具有开放性，多线程支持多种API，可跨数据库连接，国际化，数据库体积巨大等特点。简单的来说 ，MySql是一个开放的、快速的、多线程的、多用户的数据库服务器。

选用MySQL作为数据库的其中一个原因就是支持多线程，支持多线程的特点为利用系统资源提供了便捷并因此大大提高了系统运行速度和效率，而且连接数据库的方式多样包括但不局限于TCP/IP、ODBC和JDBC等途径；但是没有东西是完美无缺的，即便MySQL也如此，虽说它有着众多优点但其功能不够强大，规模也相对较小，无法应对大型数据哭的处理。但是对于本系统来说，选用MySQL作为数据库，其功能性能已绰绰有余，如果要进行二次开发的数据库表结构空间的扩展也是完全可行的。综上所述，MySQL是作为本系统数据库的最优选择。

2.2.4 B/S架构

B/S结构就是指系统客户端与服务器分离，客户端通过浏览器访问服务端进行操作[10]。

B/S结构目前广泛应用于绝大部分系统搭建中，这种结构摒弃C/S结构客户端服务端不分离的缺点，具有更多的优势：

（1）跨平台性：B/S的标准由标准化组织确立，适用于绝大多数的系统搭建，通用于应用之间[12]。

（2）低维护成本：客户端和服务器端分离，减轻了两端的压力，尤其是客户端，对客户端设备，硬件、软件要求都比较低，并且系统需要升级或维护时，只需要在服务器端升级或维护就可以，使相应的费用减少[13]。

第三章 需求分析

在软件的命周期中，需求分析是其中关键的一环。需求分析过程中不仅要对系统应该实现的功能提出准确和完善的请求，还要考虑需求的可行性。需求分析对设计和实现一个系统具有决定性的重大意义[11]。只有充分完整的需求分析才能为后续的系统开发过程和实现成果奠定基础。

3.1 需求描述

根据日常实际需要，一方面需要在系统中实现基础信息的管理，同时还需要结合实际情况的需要，提供在线学籍管理功能，方便在线学籍管理工作的展开，综合考虑，本套系统应该满足如下要求：

首先，在系统中需要实现对基础信息，包括登录注册、个人信息修改等信息的管理，这些是系统的基础信息，和系统中其他内容密切相关。

然后，系统中需要实现对管理员、教师和学生的管理，允许管理员对教师和学生信息进行必要的设置，同时要避免管理员对个人信息进行操作，保障教师和学生的信息安全。

3.2 系统角色需求分析

综合在线学籍管理经历和对网上信息归纳整理的结果，在实际应用中，将用户分为三种：管理员、教师和学生三个角色。其中教师和学生可以操作的内容是有限的，管理员可以进行的操作最多。了解系统管理员、教师和学生的分类以及可以进行的操作，对于接下来实现相关的功能具有重要的意义。

3.3 系统功能需求分析

(1)系统的通用功能包括用户登录和密码修改，是三个角色共同需要使用的功能，用例分析如图3-1所示。

图3-1系统通用功能用例分析图

(2)管理员可以对系统首页、个人中心、学生管理、教师管理、院校管理、专业管理、班级信息管理、课程信息管理、学生成绩管理、学生学籍管理等进行基本的信息管理。其用例分析如图3-2所示。

图3-2管理员用例图

(3) 教师可以实现对注册登录、首页、个人中心、班级信息管理、课程信息管理、学生成绩管理、学生学籍管理等信息进行操作，用例分析如图3-3所示。

图3-3教师用例图

(4) 学生可以实现对注册登录、首页、个人中心、课程信息管理、学生成绩管理等信息进行操作，用例分析如图3-4所示。

图3-4学生用例图

3.4 非功能性需求分析

在系统的需求分析中除了保证系统功能需求分析准确完整，还应考虑与其相辅相成的各种其他因素，这样才能确保系统后续设计能够更加完善、清晰，确保系统实现后的有较高的使用价值。

3.4.1 先进性

为保证系统的先进性开发过程中应尽量使用先进的软件开发技术、设计方法、体系架构，符合当下的应用需求和保证性能可靠。

3.4.2 安全性

本系统中涉及三种用户角色，根据管理员、教师和学生角色类型合理划分其页面访问权限。系统允许管理员对教师和学生进行必要的设置，同时要避免管理员对个人重要信息进行操作，保障教师和学生的信息安全。

3.4.3 易用性

系统使用方便、界面友好是提高用户使用体验的重要因素。系统实现其主体功能同时，界面设计要简洁大方、使用方便、美观清晰。系统的每一项反馈都要逻辑严密，弹窗信息也是简洁明了[12]。

3.4.4 可扩展性

可扩展性要求软件的设计要留有可升级接口和升级空间，便于今后根据新的模式需求进行功能的拓展。

3.4.5 可修改性

可修改性要求使用科学的方法设计软件，形成良好的结构和完备的文档[13]。它的前提要保证系统设计逻辑清晰，软件结构简单明了，代码编写过程中有良好的注释习惯，便于后续对系统性能进行调整。

3.5 系统流程分析

3.5.1 登录流程

每个用户都有专属的密码和账号，在输入合法的账号和密码之后即可进入系统。登录流程如图3-5所示：

图3-5登录流程图

3.5.2 添加信息流程

管理层人员有添加信息功能。添加信息流程如图3-6所示：

图3-6 添加信息流程图

3.5.3 删除流程

用户可以选择把自己发布的信息删掉，选择要删除的信息确认之后，删除信息的操作就完成了。删除信息流程图如图3-7所示。

图3-7 删除信息流程图

3.6本章小结

本章首先对整个系统进行了详细的需求描述，然后按照这些要求对系统的角色和功能进行了详细的分析，并对这些要求进行了详细的说明。同时为保证需求分析的全面性，还对系统的一些非功能性需求进行描述和对系统流程进行分析，为以后的系统的开发提供了一个比较完善的参考依据。

32

第四章 系统设计

4.1系统总体设计

在线学籍管理系统的建设可以为在线学籍管理提供帮助，通过对一些基础信息管理实现针对性的安排，可以按照用户的角色权限使不同用户角色看到不一样的信息界面。现根据需求阶段的分析，我们可以大致确定系统需要包含的功能如下图所示：

系统总体结构图如下，见图4-1。

图4-1系统总体结构图

4.2数据库设计

数据库能直观反映表现系统的需求，数据库的设计能否切实符合系统的需求关系到整个系统最终的呈现结果。通过之前的分析梳理，明确了系统中需要包含的功能和要求。系统中除了涉及对数据库的增加、删除、查寻、修改的基础操作较多，还要理清实体间的对应关系，据此完成表结构的设计与实现。

4.2.1 数据库逻辑设计

为了更直观阐明数据库的设计，使用 Vision 绘制的在线学籍管理系统数据模型E-R实体属性图。根据系统需求设计了以下几个主要实体。

课程信息实体属性图，如图4-2所示。

图4-2课程信息实体属性图

班级信息实体属性图，如图4-3所示。

图4-3班级信息实体属性图

学生学籍实体属性图，如图4-4所示。

图4-4学生学籍实体属性图

学生成绩实体属性图，如图4-5所示。

图4-5学生成绩实体属性图

4.2.2数据库表设计

在关系数据E-R图中，分析并创建数据表，数据表用来记录信息，数据表关系由多个数据表组成，下面介绍的是数据表各个字段信息如下表所示。

表4-1：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-2：课程信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
kechengmingcheng	varchar	200	课程名称
fengmian	longtext	4294967295	封面
keshi	varchar	200	课时
banji	varchar	200	班级
zhuanye	varchar	200	专业
shangkedidian	varchar	200	上课地点
shangkeshijian	longtext	4294967295	上课时间
xueqi	varchar	200	学期
nianxian	varchar	200	年限
kechengxiangqing	longtext	4294967295	课程详情
jiaoshigonghao	varchar	200	教师工号
jiaoshixingming	varchar	200	教师姓名

表4-3：教师

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
jiaoshigonghao	varchar	200	教师工号
mima	varchar	200	密码
touxiang	longtext	4294967295	头像
jiaoshixingming	varchar	200	教师姓名
xingbie	varchar	200	性别
lianxidianhua	varchar	200	联系电话
youxiang	varchar	200	邮箱

表4-4：配置文件

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值

表4-5：班级信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
banjimingcheng	varchar	200	班级名称
banjirenshu	varchar	200	班级人数
yuanxiao	varchar	200	院校
zhuanye	varchar	200	专业
jiaoshigonghao	varchar	200	教师工号
jiaoshixingming	varchar	200	教师姓名

表4-6：专业

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
zhuanye	varchar	200	专业

表4-7：院校

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yuanxiao	varchar	200	院校

表4-8：学生学籍

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xuehao	varchar	200	学号
xueshengxingming	varchar	200	学生姓名
xingbie	varchar	200	性别
banji	varchar	200	班级
zhuanye	varchar	200	专业
shoujihaoma	varchar	200	手机号码
zhuzhi	varchar	200	住址
jiguan	varchar	200	籍贯
zhengzhimianmao	varchar	200	政治面貌
ruxueriqi	date		入学日期
danganwenjian	longtext	4294967295	档案文件
gerenjianjie	longtext	4294967295	个人简介
jiaoshigonghao	varchar	200	教师工号

表4-9：学生成绩

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
kechengmingcheng	varchar	200	课程名称
xueqi	varchar	200	学期
nianxian	varchar	200	年限
chengji	float		成绩
xuehao	varchar	200	学号
xueshengxingming	varchar	200	学生姓名
jiaoshigonghao	varchar	200	教师工号
jiaoshixingming	varchar	200	教师姓名

表4-10：学生

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xuehao	varchar	200	学号
mima	varchar	200	密码
xueshengxingming	varchar	200	学生姓名
touxiang	longtext	4294967295	头像
xingbie	varchar	200	性别
shoujihaoma	varchar	200	手机号码
jiguan	varchar	200	籍贯
zhuzhi	varchar	200	住址
banji	varchar	200	班级
zhuanye	varchar	200	专业

表4-11：用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
username	varchar	100	用户名
password	varchar	100	密码
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

4.3本章小结

这一章着重介绍了整个系统的设计流程。确定了系统的功能结构，并在此基础上完成了数据库的设计。

第五章 详细设计与实现

系统用户登录，在登录页面选择需要登录的角色，在正确输入用户名和密码后，进入操作系统进行操作；如图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-10所示：

图5-10学生学籍管理界面

5.2教师模块实现

教师进入主页面，主要功能包括对首页、个人中心、班级信息管理、课程信息管理、学生成绩管理、学生学籍管理等进行操作。教师主页面如图5-11所示：

图5-11教师主界面

教师点击班级信息管理。在班级信息页面输入班级名称、院校和选择专业进行查询班级信息列表，并根据需要对班级详情信息进行详情操作；如图5-12所示：

图5-12班级信息管理界面

教师点击课程信息管理。在课程信息页面输入课程名称、班级和选择专业进行查询或删除课程信息列表，并根据需要对课程详情信息进行详情操作；如图5-13所示：

图5-13课程信息管理界面

5.3学生模块实现

学生进入主页面，主要功能包括对首页、个人中心、课程信息管理、学生成绩管理等进行操作。学生主页面如图5-14所示：

图5-14学生主界面

学生点击课程信息管理。在课程信息页面输入课程名称、班级和选择专业进行查询课程信息列表，并根据需要对课程详情信息进行详情操作；如图5-15所示：

图5-15课程信息管理界面

5.4本章小结

本章主要基于前面系统设计的内容，详细介绍了管理员、教师和学生三个角色对在线学籍管理系统的主要功能界面进行详细介绍和展示。

MybatisPlusConfig.java

package com.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import com.baomidou.mybatisplus.mapper.MetaObjectHandler;
import com.baomidou.mybatisplus.plugins.PaginationInterceptor;

/**
 * mybatis-plus配置
 */
@Configuration
public class MybatisPlusConfig {

    /**
     * 分页插件
     */
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }
    
}

BanjixinxiServiceImpl.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.BanjixinxiDao;
import com.entity.BanjixinxiEntity;
import com.service.BanjixinxiService;
import com.entity.vo.BanjixinxiVO;
import com.entity.view.BanjixinxiView;

@Service("banjixinxiService")
public class BanjixinxiServiceImpl extends ServiceImpl<BanjixinxiDao, BanjixinxiEntity> implements BanjixinxiService {
	
	
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<BanjixinxiEntity> page = this.selectPage(
                new Query<BanjixinxiEntity>(params).getPage(),
                new EntityWrapper<BanjixinxiEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<BanjixinxiEntity> wrapper) {
		  Page<BanjixinxiView> page =new Query<BanjixinxiView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<BanjixinxiVO> selectListVO(Wrapper<BanjixinxiEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public BanjixinxiVO selectVO(Wrapper<BanjixinxiEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<BanjixinxiView> selectListView(Wrapper<BanjixinxiEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

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


}

AlipayConfig.java

package com.config;

import java.io.FileWriter;
import java.io.IOException;

/* *
 *类名：AlipayConfig
 *功能：基础配置类
 *详细：设置帐户有关信息及返回路径
 *修改日期：2017-04-05
 *说明：
 *以下代码只是为了方便商户测试而提供的样例代码，商户可以根据自己网站的需要，按照技术文档编写,并非一定要使用该代码。
 *该代码仅供学习和研究支付宝接口使用，只是提供一个参考。
 */

public class AlipayConfig {
}

add-or-update.vue

<template>
	<div class="addEdit-block" style="width: 100%;">
		<el-form
			:style='{"padding":"30px 15px","boxShadow":"0 0px 0px #999","borderRadius":"0px","flexWrap":"wrap","background":"none","display":"flex","justifyContent":"space-between"}'
			class="add-update-preview"
			ref="ruleForm"
			:model="ruleForm"
			:rules="rules"
			label-width="120px"
		>
			<template >
				<el-form-item :style='{"margin":"0 0 30px 0","flexWrap":"wrap","textAlign":"left","background":"none","display":"block","width":"100%","justifyContent":"flex-start"}' class="input" v-if="type!='info'"  label="名称" prop="name">
					<el-input v-model="ruleForm.name" placeholder="名称" clearable readonly></el-input>
				</el-form-item>
				<el-form-item :style='{"margin":"0 0 30px 0","flexWrap":"wrap","textAlign":"left","background":"none","display":"block","width":"100%","justifyContent":"flex-start"}' v-else class="input" label="名称" prop="name">
					<el-input v-model="ruleForm.name" placeholder="名称" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{"margin":"0 0 30px 0","flexWrap":"wrap","textAlign":"left","background":"none","display":"block","width":"100%","justifyContent":"flex-start"}' class="upload" v-if="type!='info' && !ro.value" label="值" prop="value">
					<file-upload
						tip="点击上传值"
						action="file/upload"
						:limit="3"
						:multiple="true"
						:fileUrls="ruleForm.value?ruleForm.value:''"
						@change="valueUploadChange"
					></file-upload>
				</el-form-item>
				<el-form-item :style='{"margin":"0 0 30px 0","flexWrap":"wrap","textAlign":"left","background":"none","display":"block","width":"100%","justifyContent":"flex-start"}' class="upload" v-else-if="ruleForm.value" label="值" prop="value">
					<img v-if="ruleForm.value.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;" v-bind:key="index" :src="ruleForm.value.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.value.split(',')" :src="$base.url+item" width="100" height="100">
				</el-form-item>
			</template>
			<el-form-item :style='{"padding":"0","margin":"20px 0 0"}' class="btn">
				<el-button :style='{"cursor":"pointer","padding":"0 30px","margin":"0 20px 0 0","borderColor":"#1fbfae","color":"#1fbfae","outline":"none","borderRadius":"0px","background":"#e9faf8","borderWidth":"4px","width":"auto","lineHeight":"40px","fontSize":"14px","borderStyle":"solid double solid double","height":"44px"}'  v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
				<el-button :style='{"cursor":"pointer","padding":"0 24px","margin":"0","borderColor":"#dc333b","color":"#dc333b","outline":"none","borderRadius":"0px","background":"#fbeced","borderWidth":"4px","width":"auto","lineHeight":"40px","fontSize":"14px","borderStyle":"solid double solid double","height":"44px"}' v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
				<el-button :style='{"cursor":"pointer","padding":"0 24px","margin":"0","borderColor":"#dc333b","color":"#dc333b","outline":"none","borderRadius":"0px","background":"#fbeced","borderWidth":"4px","width":"auto","lineHeight":"40px","fontSize":"14px","borderStyle":"solid double solid double","height":"44px"}' 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:{
				name : false,
				value : false,
			},
			
			
			ruleForm: {
				name: '',
				value: '',
			},
		
			
			rules: {
				name: [
					{ required: true, message: '名称不能为空', trigger: 'blur' },
				],
				value: [
				],
			}
		};
	},
	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=='name'){
							this.ruleForm.name = obj[o];
							this.ro.name = true;
							continue;
						}
						if(o=='value'){
							this.ruleForm.value = obj[o];
							this.ro.value = true;
							continue;
						}
				}
				


			}
			
			
			
			
		},
    // 多级联动参数

    info(id) {
      this.$http({
        url: `config/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.value!=null) {
		this.ruleForm.value = this.ruleForm.value.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: "config/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: `config/${!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.configCrossAddOrUpdateFlag = false;
						 this.parent.search();
						 this.parent.contentStyleChange();
					       }
					     });
					   } else {
					     this.$message.error(data.msg);
					   }
					 });

				       }
				} else { 
				} 
			});
		 } else {
			 this.$http({
			   url: `config/${!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.configCrossAddOrUpdateFlag = 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.configCrossAddOrUpdateFlag = false;
      this.parent.contentStyleChange();
    },
    valueUploadChange(fileUrls) {
	    this.ruleForm.value = 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;
	  	  text-shadow: 0 1px 10px #fff;
	  	  color: #666;
	  	  background: none;
	  	  font-weight: 500;
	  	  display: block;
	  	  width: 120px;
	  	  font-size: 14px;
	  	  line-height: 40px;
	  	  text-align: right;
	  	}
	
	.add-update-preview .el-form-item /deep/ .el-form-item__content {
	  margin-left: 120px;
	}
	
	.add-update-preview .el-input /deep/ .el-input__inner {
	  	  border-radius: 0px;
	  	  padding: 0 12px;
	  	  box-shadow: 0 0 0px #4b681d;
	  	  outline: none;
	  	  color: #666;
	  	  background: #fff;
	  	  width: 400px;
	  	  font-size: 14px;
	  	  border-color: #2adbcb;
	  	  border-width: 4px;
	  	  border-style: solid double solid double;
	  	  height: 40px;
	  	}
	
	.add-update-preview .el-select /deep/ .el-input__inner {
	  	  border-radius: 0px;
	  	  padding: 0 10px;
	  	  box-shadow: 0 0 0px #4b681d;
	  	  outline: none;
	  	  color: #666;
	  	  width: 400px;
	  	  font-size: 14px;
	  	  border-color: #2adbcb;
	  	  border-width: 4px;
	  	  border-style: solid double solid double;
	  	  height: 40px;
	  	}
	
	.add-update-preview .el-date-editor /deep/ .el-input__inner {
	  	  border: 0px solid #333;
	  	  border-radius: 0px;
	  	  padding: 0 10px 0 30px;
	  	  box-shadow: 0 0 0px #4b681d;
	  	  outline: none;
	  	  color: #666;
	  	  width: 400px;
	  	  font-size: 14px;
	  	  border-color: #2adbcb;
	  	  border-width: 4px;
	  	  border-style: solid double solid double;
	  	  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 solid #ddd;
	  	  cursor: pointer;
	  	  border-radius: 0px;
	  	  color: #2adbcb;
	  	  width: 200px;
	  	  font-size: 32px;
	  	  border-color: #2adbcb;
	  	  border-width: 4px;
	  	  line-height: 90px;
	  	  border-style: solid double solid double;
	  	  text-align: center;
	  	  height: 100px;
	  	}
	
	.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
	  	  border: 2px solid #ddd;
	  	  cursor: pointer;
	  	  border-radius: 0px;
	  	  color: #2adbcb;
	  	  width: 200px;
	  	  font-size: 32px;
	  	  border-color: #2adbcb;
	  	  border-width: 4px;
	  	  line-height: 90px;
	  	  border-style: solid double solid double;
	  	  text-align: center;
	  	  height: 100px;
	  	}
	
	.add-update-preview /deep/ .el-upload .el-icon-plus {
	  	  border: 2px solid #ddd;
	  	  cursor: pointer;
	  	  border-radius: 0px;
	  	  color: #2adbcb;
	  	  width: 200px;
	  	  font-size: 32px;
	  	  border-color: #2adbcb;
	  	  border-width: 4px;
	  	  line-height: 90px;
	  	  border-style: solid double solid double;
	  	  text-align: center;
	  	  height: 100px;
	  	}
	
	.add-update-preview .el-textarea /deep/ .el-textarea__inner {
	  	  border-radius: 0px;
	  	  padding: 12px;
	  	  box-shadow: 0 0 0px #4b681d;
	  	  outline: none;
	  	  color: #666;
	  	  width: 500px;
	  	  font-size: 14px;
	  	  min-height: 120px;
	  	  border-color: #2adbcb;
	  	  border-width: 4px;
	  	  border-style: solid double solid double;
	  	  height: auto;
	  	}
</style>