@TOC
ssm114基于SSM框架的网上拍卖系统的设计与实现+vue
JAVA简介
Java主要采用CORBA技术和安全模型，可以在互联网应用的数据保护。它还提供了对EJB（Enterprise JavaBeans）的全面支持，java servlet API，JSP（java server pages），和XML技术。JAVA语言是一种面向对象的语言，它通过提供最基本的方法来完成指定的任务，开发者只需要知道一些概念就能够编写出一些应用程序。Java程序相对较小，其代码能够在小机器上运行。Java是一种计算机编程语言，具有封装、继承和多态性三个主要特性，广泛应用于企业Web应用程序开发和移动应用程序开发。
Java语言和一般编译器以及直译的区别在于，Java首先将源代码转换为字节码，然后将其转换为JVM的可执行文件，JVM可以在各种不同的JVM上运行。因此，实现了它的跨平台特性。虽然这使得Java在早期非常缓慢，但是随着Java的开发，它已经得到了改进。
2.3 Tomcat服务器
Tomcat属于一种轻型的服务器，当程序员需要开发或调试JSP 程序时，则通常会将该服务器作为首选。对于一个仅具有计算机基础知识的人来说，计算机系统具有一个好的Apache服务器，可以很好的对HTML 页面进行访问。Tomcat 虽然是Apache的扩展，但是它们都是可以独立运行的，二者是不互相干扰的。当配置正确的时候，Apache服务器为HTML 页面的运行提供技术支持，Tomcat 的任务则是运行Servle和JSP 页面。Tomca也具有一定的HTML页面处理功能。
2.4 MySQL数据库
数据库是系统开发过程中不可或缺的一部分。 在WEB应用方面，MySQL AB开发了一个具有很大优势的MySQL关系数据库管理系统。 MySQL可以将数据存储在不同的表中，这非常灵活，并且还可以提高系统在实际应用中的速度。 数据库访问最常用于标准SQL语言，MySQL用于SQL语言，因此它具有高度兼容性。数据库的操作是必不可少的，包括对数据库表的增加、删除、修改、查询等功能。现如今，数据库可以分为关系型数据库和非关系型数据库，Mysql属于关系性数据库，Mysql数据库是一款小型的关系型数据库，它以其自身特点：体积小、速度快、成本低等，Mysql数据库是目前最受欢迎的开源数据库。
在WEB应用技术中， Mysql数据库支持不同的操作系统平台，虽然在不同平台下的安装和配置都不相同，但是差别也不是很大，Mysql在Windows平台下两种安装方式，二进制版和免安装版。安装完Mysql数据库之后，需要启动服务进程，相应的客户端就可以连接数据库，客户端可通过命令行或者图形界面工具登录数据库。
2.5 SSM框架
当今流行的“SSM组合框架”是Spring + SpringMVC + MyBatis的缩写，受到很多的追捧，“组合SSM框架”是强强联手、各司其职、协调互补的团队精神。web项目的框架，通常更简单的数据源。Spring属于一个轻量级的反转控制框架(IoC)，但它也是一个面向表面的容器(AOP)。SpringMVC常常用于控制器的分类工作模式，与模型对象分开，程序对象的作用与自动取款机进行处理。这种解耦治疗使整个系统的个性化变得更加容易。MyBatis是一个良好的可持续性框架，支持普通SQL查询，同时允许对存储过程的高级映射进行数据的优化处理。大型Java Web应用程序的由于开发成本太高，开发后难以维护和开发过程中一些难以解决的问题，而采用“SSM组合框架”，它允许建立业务层次结构，并为这个问题提供良好的解决方案。
3 系统分析
3.1 可行性分析
3.1.1 技术可行性
技术可行性主要取决于系统设计和开发中使用的软硬件配置是否能满足应用要求，相关技术是否能保证系统设计完成后的正常运行。本网站在Windows操作系统中进行开发，并且目前PC机的性能已经可以胜任普通系统的web服务器。系统开发所使用的技术也都是自身所具有的，也是当下广泛应用的技术之一。
系统的开发环境和配置都是可以自行安装的，使用比较成熟的Mysql数据库进行对系统用户之间的数据交互，根据技术语言对数据库管理，结合需求进行修改维护，可以使得系统运行更具有稳定性和安全性，从而完成实现系统的开发。该系统目前采用比较成熟的JAVA技术，并利用其创建的脚本与结合创建动态网页。它可以在普通文本编辑器上编辑而无需编译，它可以直接在服务器上执行。它易于学习和操作，系统开发的基础是高度兼容和灵活的，从技术可行性上来分析系统开发时完全可行的。
3.1.2 经济可行性
网上拍卖系统的开发之前所做的市场调研及其他管理相关的系统，是没有任何费用的，都是通过开发者自己的努力，所有的工作的都是自己亲力亲为，在碰到自己比较难以解决的问题，大多是通过同学和指导老师的帮助进行相关信息的解决，所以对于系统的开发在经济上是完全可行的，没有任何费用支出的。
使用比较成熟的技术，系统是基于Java的开发，采用Mysql数据库。所以系统在开发人力、财力要求不高，具有经济可行性。
3.1.3 操作可行性
可操作性主要是对系统设计完成后，用户的使用体验度，通过界面导航菜单可以简单明了地进行查看所需的信息内容。对于系统的操作，不需要专业人员都可以直接进行功能模块的操作管理，所以在系统的可操作性是完全可以的。本系统的操作使用的也是界面窗口进行登录，所以操作人员只要会简单的电脑操作就完全可以的。
3.2 项目设计目标与原则
1、关于网上拍卖系统的基本要求
（1）功能要求：买家管理、拍卖者管理、竞拍商品管理、竞拍信息管理、竞拍结果管理、买家评论管理、留言板管理、等功能模块。
（2）性能：在不同操作系统上均能无差错实现在不同类型的用户登入相应界面后能不出差错、方便地进行预期操作。
（3）安全与保密要求：用户都必须通过身份验证才能进入系统，并且用户的权限也需要根据用户的类型进行限定。
（4）环境要求：支持多种平台，可在Windows系列、Vista系统等多种操作系统下使用。
2、设计原则
系统架构设计应反映用户与整个系统接口模块之间的有效交互，以确保系统中实时数据的可扩展性和安全性。只有系统设计才能实现这一目标。可以扩展功能模块以适应系统的未来发展。
在系统的所有功能模块中，必须要保证系统的数据安全性、易用性、柔软性和扩展性，下面分别对四个性能进行详细分析。
（1）数据的安全性
对于用户进行商品拍卖系统所牵扯到的数据信息，必须保证系统数据的安全性，因此在系统设计过程中必须要有多方面的考虑到系统的安全问题并进行解决处理。
（2）易用性
对于易用性主要是对于系统实现完成交付给用户，用户是否可以不用培训就能够进行系统管理操作，也就是常说的傻瓜操作，一定简单明了，任何人都可以上手对数据信息进行操作管理。
（3）柔软性
对于任何一个系统的实现都会涉及的服务种类繁多，所以在设计时一定确保系统可以随时更改并且可以随时处理。
（4）扩展性
互联网的不断发展，对于系统实现的所有的功能随着用户需求的不断提高，功能模块也将要不断扩展。
由于这是一个网上拍卖系统，系统的设计是为了更好地节省人员成本和各种成本，因此需要考虑系统开发成本和效益。
3.3 系统流程分析
3.3.1 操作流程
对于系统的安全性的第一关，就是用户想要进入系统，必须通过登录窗口，输入自己的登录信息才可以进行登录，用户输入的信息准确无误后才可以进入到操作系统界面，进行功能模块的相对应操作，如果用户输入的信息不正确，则窗口出现提示框，用户登录失败，返回到第一步进行重新输入，如图3-1所示。
图3-1注册流程图
3.3.2 添加信息流程
对于网上拍卖系统，需要随时添加所需要的数据信息，对于用户添加信息，需要根据添加界面，根据选框的内容进行填写所要添加的数据信息，信息输入完成后判断数据信息是否符合要求，符合要求则添加完成，用户所添加的信息不符合要求，则需要返回到第一步，重新输入数据信息，再进行判断操作，如图3-2所示。
图3-2 添加信息流程图
3.4 系统功能需求分析
任意一个新网站的开发都需要完整的任务需求分析，需求分析的质量好坏决定了一个网站开发的意义，俗话说好的开头是成功的一半，对于网上拍卖系统平台的设计与实现来说前期的分析更加显得尤为重要，任务分析决定了之后任务的开展和设计，只有完美的需求分析才能做出更好的让民众更为满意的网站，否则将会导致无法进行，更无法完成任务。
任务需求分析在整个系统开发的过程中是相当重要的一环，直接决定了开发过程中的软件质量，分析得是否完善，是否考虑到了每一步可能会出现的问题，这些都决定了软件能否正常运行，网站结构是否稳定，是否能让客户满意，需求分析决定了整个系统的框架、功能和要求。
4 系统设计
4.1系统结构设计
架构设计的目的是反映一个结构和其他元素之间的关系，抽象，通常用于指导大型软件系统。将一个巨大的任务细分为多个小任务的过程是系统架构的总体设计。完成小任务后，整个任务就可以完成了。具体的实现过程是分解系统，分析各部分的功能、接口和逻辑关系。页面是一个一个模块组建而成的，层次结构分明，思想运用的是面向对象，一个实体对应一个数据类型，还要对每个数据类添加一个实施类。
网上拍卖系统的实现主要包括拍卖者、买家和管理员三个用户角色，由于系统用户角色不同所使用的功能模块相应不同，管理员根据需求对系统功能模块进行维护管理操作。
根据我们对网上拍卖系统的功能要求进行分析，我们将本系统划分为以下几各主要的模块，如图4-1所示。
图4-1 系统结构图
4.2数据库设计
4.2.1 数据库E-R图设计
学习编程，我们都知道数据库设计是基于需要设计的系统功能，我们需要建立一个数据库关系模型，用于存储数据信息，这样当我们在程序中时，就没有必要为程序页面添加数据，从而提高系统的效率。数据库存储了很多信息，可以说是信息管理系统的核心和基础，数据库还提供了添加、删除、修改和检查，使系统能够快速找到自己想要的信息，而不是在程序代码中找到。数据库中信息表的每个部分根据一定的关系精确地组合，排列和组合成数据表。
通过网上拍卖系统的功能进行规划分成几个实体信息，实体信息将通过ER图进行说明，本系统的主要实体图如下：
(1)管理员数据E-R图，如图4-2所示：
图4-2 管理员信息实体属性图
(2)竞拍信息数据E-R图如图4-3所示：
图4-3 竞拍信息实体属性图
(3)竞拍结果信息数据E-R图如图4-4所示：
图4-4 竞拍结果信息实体属性图
(4)留言板信息数据E-R图如图4-5所示：
图4-5 留言板信息实体图
4.2.2 数据库表设计
将数据库概念设计的E-R图转换为关系数据库。在关系数据库中，数据关系由数据表组成，但是表的结构表现在表的字段上。
表1：config表
| 列名 | 数据类型 | 长度 | 约束 |
|---|---|---|---|
| id | bigint | 20 | PRIMARY KEY |
| name | varchar | 100 | DEFAULT NULL |
| value | varchar | 100 | DEFAULT NULL |
表2：jingpaijieguo表
| 列名 | 数据类型 | 长度 | 约束 |
|---|---|---|---|
| id | bigint | 20 | PRIMARY KEY |
| jingpaibianhao | varchar | 200 | DEFAULT NULL |
| shangpinmingcheng | varchar | 200 | DEFAULT NULL |
| shuliang | tinyint | 200 | DEFAULT NULL |
| jingpaijiage | varchar | 200 | DEFAULT NULL |
| jingpairiqi | varchar | 200 | DEFAULT NULL |
| maijiazhanghao | varchar | 200 | DEFAULT NULL |
| maijiaxingming | varchar | 200 | DEFAULT NULL |
| shoujihaoma | varchar | 200 | DEFAULT NULL |
| jingpaijieguo | varchar | 200 | DEFAULT NULL |
| paimaizhanghao | varchar | 200 | DEFAULT NULL |
| xingming | varchar | 200 | DEFAULT NULL |
表4：jingpaishangpin`表
| 列名 | 数据类型 | 长度 | 约束 |
|---|---|---|---|
| id | bigint | 20 | PRIMARY KEY |
| shangpinmingcheng | varchar | 200 | DEFAULT NULL |
| tupian | varchar | 200 | DEFAULT NULL |
| shuliang | int | 11 | DEFAULT NULL |
| qipaijia | varchar | 200 | DEFAULT NULL |
| paimaizhanghao | varchar | 200 | DEFAULT NULL |
| xingming | varchar | 200 | DEFAULT NULL |
表5：jingpaixinxi`表
| 列名 | 数据类型 | 长度 | 约束 |
|---|---|---|---|
| id | int | 11 | PRIMARY KEY |
| jingpaibianhao | varchar | 200 | |
| shangpinmingcheng | varchar | 200 | |
| paimaizhanghao | varchar | 200 | |
| xingming | varchar | 200 | |
| shuliang | varchar | 200 | |
| qipaijia | varchar | 200 | |
| jingpaijiage | varchar | 200 | |
| maijiazhanghao | varchar | 200 | |
| maijiaxingming | varchar | 200 | |
| shoujihaoma | varchar | 200 | |
表6：maijia表
| 列名 | 数据类型 | 长度 | 约束 |
|---|---|---|---|
| id | bigint | 20 | PRIMARY KEY |
| maijiazhanghao | varchar | 200 | |
| mima | varchar | 200 | |
| maijiaxingming | varchar | 200 | |
| touxiang | varchar | 200 | |
| xingbie | varchar | 200 | |
| shoujihaoma | varchar | 200 | |
| youxiang | varchar | 200 | |
表7：maijiapingjia表
| 列名 | 数据类型 | 长度 | 约束 |
|---|---|---|---|
| id | bigint | 20 | PRIMARY KEY |
| jingpaibianhao | varchar | 200 | |
| shangpinmingcheng | varchar | 200 | |
| shuliang | varchar | 200 | |
| jingpaijiage | varchar | 200 | |
| jingpairiqi | varchar | 200 | |
| maijiazhanghao | varchar | 200 | |
| maijiaxingming | varchar | 200 | |
| shoujihaoma | varchar | 200 | |
| maijiapingjia | varchar | 200 | |
| maijiapingfen | varchar | 200 | |
| paimaizhanghao | varchar | 200 | |
| xingming | varchar | 200 | |
表8：messages表
| 列名 | 数据类型 | 长度 | 约束 |
|---|---|---|---|
| id | bigint | 20 | PRIMARY KEY |
| userid | bigint | 20 | |
| username | varchar | 200 | |
5 系统的实现
5.1前台功能模块
用户进入网上拍卖系统平台可以查看首页、竞拍商品、留言反馈、个人中心、后台管理等操作，系统前台主界面如图5-1所示。
图5-1 系统前台主界面
个人中心：通过列表可以获取买家姓名、性别、手机号码、邮箱等信息，进行在线更新个人信息操作，如图5-2所示。
图5-2个人中心界面
竞拍商品页面：通过页面可以获取竞拍图片、数量、名称、起拍价、拍卖账号、拍卖账号、姓名、商品描述等信息，进行查看竞拍操作，如图5-3所示。
图5-3竞拍商品详情界面
留言反馈：通过页面可以在线输入留言内容等信息，进行在线留言反馈操作，如图5-4所示。
图5-4留言反馈界面
5.2买家后台功能模块
卖家通过登录进入后台页面可以进行查看个人中心、竞拍信息管理、竞拍结果管理、买家评价管理、留言板管理等信息，进行相对应操作。
竞拍信息管理：通过列表可以在线获取竞拍编号、商品名称、拍卖账号、姓名、数量、起拍价、竞拍价格、竞拍日期、买家账号、买家姓名、手机号码等信息，进行在线查看、评价、修改或删除操作，如图5-5所示。
图5-5竞拍信息管理界面
竞拍结果管理：通过列表可以在线获取竞拍编号、商品名称、数量、竞拍价格、竞拍日期、买家账号、买家姓名、手机号码、竞拍结果、拍卖账号、姓名等信息，进行在线查看详情操作，如图5-6所示。
图5-6竞拍结果管理界面
买家评价管理：通过列表可以在线获取竞拍编号、商品名称、数量、竞拍价格、竞拍日期、买家账号、买家姓名、手机号码、买家评价、买家评分、拍卖账号、姓名等信息，进行在线查看详情、修改或删除操作，如图5-7所示。
图5-7买家评价管理界面
留言板管理：通过列表可以在线获取用户名、留言内容、回复内容等信息，进行在线查看详情、删除操作，如图5-8所示。
图5-8留言板管理界面
5.3拍卖者后台功能模块
拍卖者通过登录进入后台页面可以进行查看个人中心、竞拍商品管理、竞拍信息管理、竞拍结果管理、买家评价管理等信息，进行相对应操作。
个人信息：通过列表可以在线输入拍卖账号、姓名、头像、性别、邮箱等信息，进行在线修改更新操作，如图5-9所示。
图5-9个人信息界面
竞拍商品管理：通过列表可以在线获取商品名称、图片、数量、起拍价、发布日期、姓名等信息，进行在线查看、新增、删除操作，如图5-10所示。
图5-10竞拍商品管理界面
竞拍信息管理：通过列表可以在线获取竞拍编号、商品名称、拍卖账号、姓名、数量、起拍价、竞拍价格、竞拍日期、买家账号、买家姓名、手机号码等信息，进行在线查看、评价、修改或删除操作，如图5-11所示。
图5-11竞拍信息管理界面
竞拍结果管理：通过列表可以在线获取竞拍编号、商品名称、数量、竞拍价格、竞拍日期、买家账号、买家姓名、手机号码、竞拍结果、拍卖账号、姓名等信息，进行在线查看、详情或删除操作，如图5-12所示。
图5-12竞拍结果管理界面
36
5.4管理员后台功能模块
管理员通过登录界面，进行在线填写用户名和密码，信息输入完成后选择提交，用户登录完成操作，如图5-13所示。
图5-13 登录界面
管理员通过登录进入后台页面可以进行查看个人中心、买家管理、拍卖者管理、竞拍商品管理、竞拍信息管理、竞拍结果管理、买家评论管理、留言板管理、管理员管理等信息，进行相对应操作。
买家管理，管理员根据需求可以在线查看系统已有的买家信息，买家账号、买家姓名、头像、性别、手机号码、邮箱等信息，并结合需求进行在线查看详情、新增、修改、删除操作，如图5-14所示。
图5-14买家管理界面
拍卖者管理，管理员根据需求可以在线查看系统已有的拍卖者信息，拍卖账号、买姓名、头像、性别、联系电话、邮箱、身份证号等信息，并结合需求进行在线查看详情、新增、修改、删除操作，如图5-15所示。
图5-15拍卖者管理界面
竞拍信息管理：通过列表可以在线获取竞拍编号、商品名称、拍卖账号、姓名、数量、起拍价、竞拍价格、竞拍日期、买家账号、买家姓名、手机号码等信息，进行在线查看、评价、修改或删除操作，如图5-16所示。
图5-16竞拍信息管理界面
竞拍结果管理：通过列表可以在线获取竞拍编号、商品名称、数量、竞拍价格、竞拍日期、买家账号、买家姓名、手机号码、竞拍结果、拍卖账号、姓名等信息，进行在线查看详情操作，如图5-17所示。
图5-17竞拍结果管理界面
买家评价管理：通过列表可以在线获取竞拍编号、商品名称、数量、竞拍价格、竞拍日期、买家账号、买家姓名、手机号码、买家评价、买家评分、拍卖账号、姓名等信息，进行在线查看详情、修改或删除操作，如图5-18所示。
图5-18买家评价管理界面
留言板管理：通过列表可以在线获取用户名、留言内容、回复内容等信息，进行在线查看详情、修改、在线回复、删除操作，如图5-19所示。
图5-19留言板管理界面
6 系统测试
系统测
PaimaizheServiceImpl.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.PaimaizheDao;
import com.entity.PaimaizheEntity;
import com.service.PaimaizheService;
import com.entity.vo.PaimaizheVO;
import com.entity.view.PaimaizheView;
@Service("paimaizheService")
public class PaimaizheServiceImpl extends ServiceImpl<PaimaizheDao, PaimaizheEntity> implements PaimaizheService {
@Override
public PageUtils queryPage(Map<String, Object> params) {
Page<PaimaizheEntity> page = this.selectPage(
new Query<PaimaizheEntity>(params).getPage(),
new EntityWrapper<PaimaizheEntity>()
);
return new PageUtils(page);
}
@Override
public PageUtils queryPage(Map<String, Object> params, Wrapper<PaimaizheEntity> wrapper) {
Page<PaimaizheView> page =new Query<PaimaizheView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,wrapper));
PageUtils pageUtil = new PageUtils(page);
return pageUtil;
}
@Override
public List<PaimaizheVO> selectListVO(Wrapper<PaimaizheEntity> wrapper) {
return baseMapper.selectListVO(wrapper);
}
@Override
public PaimaizheVO selectVO(Wrapper<PaimaizheEntity> wrapper) {
return baseMapper.selectVO(wrapper);
}
@Override
public List<PaimaizheView> selectListView(Wrapper<PaimaizheEntity> wrapper) {
return baseMapper.selectListView(wrapper);
}
@Override
public PaimaizheView selectView(Wrapper<PaimaizheEntity> wrapper) {
return baseMapper.selectView(wrapper);
}
}
JingpaixinxiController.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.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.JingpaixinxiEntity;
import com.entity.view.JingpaixinxiView;
import com.service.JingpaixinxiService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;
/**
* 竞拍信息
* 后端接口
* @author
* @email
* @date 2021-03-20 12:57:51
*/
@RestController
@RequestMapping("/jingpaixinxi")
public class JingpaixinxiController {
@Autowired
private JingpaixinxiService jingpaixinxiService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,JingpaixinxiEntity jingpaixinxi,
HttpServletRequest request){
String tableName = request.getSession().getAttribute("tableName").toString();
if(tableName.equals("paimaizhe")) {
jingpaixinxi.setPaimaizhanghao((String)request.getSession().getAttribute("username"));
}
if(tableName.equals("maijia")) {
jingpaixinxi.setMaijiazhanghao((String)request.getSession().getAttribute("username"));
}
EntityWrapper<JingpaixinxiEntity> ew = new EntityWrapper<JingpaixinxiEntity>();
PageUtils page = jingpaixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jingpaixinxi), params), params));
return R.ok().put("data", page);
}
/**
* 前端列表
*/
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,JingpaixinxiEntity jingpaixinxi, HttpServletRequest request){
EntityWrapper<JingpaixinxiEntity> ew = new EntityWrapper<JingpaixinxiEntity>();
PageUtils page = jingpaixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jingpaixinxi), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/lists")
public R list( JingpaixinxiEntity jingpaixinxi){
EntityWrapper<JingpaixinxiEntity> ew = new EntityWrapper<JingpaixinxiEntity>();
ew.allEq(MPUtil.allEQMapPre( jingpaixinxi, "jingpaixinxi"));
return R.ok().put("data", jingpaixinxiService.selectListView(ew));
}
/**
* 查询
*/
@RequestMapping("/query")
public R query(JingpaixinxiEntity jingpaixinxi){
EntityWrapper< JingpaixinxiEntity> ew = new EntityWrapper< JingpaixinxiEntity>();
ew.allEq(MPUtil.allEQMapPre( jingpaixinxi, "jingpaixinxi"));
JingpaixinxiView jingpaixinxiView = jingpaixinxiService.selectView(ew);
return R.ok("查询竞拍信息成功").put("data", jingpaixinxiView);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
JingpaixinxiEntity jingpaixinxi = jingpaixinxiService.selectById(id);
return R.ok().put("data", jingpaixinxi);
}
/**
* 前端详情
*/
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id){
JingpaixinxiEntity jingpaixinxi = jingpaixinxiService.selectById(id);
return R.ok().put("data", jingpaixinxi);
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody JingpaixinxiEntity jingpaixinxi, HttpServletRequest request){
jingpaixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(jingpaixinxi);
jingpaixinxiService.insert(jingpaixinxi);
return R.ok();
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody JingpaixinxiEntity jingpaixinxi, HttpServletRequest request){
jingpaixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(jingpaixinxi);
jingpaixinxiService.insert(jingpaixinxi);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody JingpaixinxiEntity jingpaixinxi, HttpServletRequest request){
//ValidatorUtils.validateEntity(jingpaixinxi);
jingpaixinxiService.updateById(jingpaixinxi);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
jingpaixinxiService.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<JingpaixinxiEntity> wrapper = new EntityWrapper<JingpaixinxiEntity>();
if(map.get("remindstart")!=null) {
wrapper.ge(columnName, map.get("remindstart"));
}
if(map.get("remindend")!=null) {
wrapper.le(columnName, map.get("remindend"));
}
String tableName = request.getSession().getAttribute("tableName").toString();
if(tableName.equals("paimaizhe")) {
wrapper.eq("paimaizhanghao", (String)request.getSession().getAttribute("username"));
}
if(tableName.equals("maijia")) {
wrapper.eq("maijiazhanghao", (String)request.getSession().getAttribute("username"));
}
int count = jingpaixinxiService.selectCount(wrapper);
return R.ok().put("count", count);
}
}
BaiduUtil.java
package com.utils;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.json.JSONObject;
/**
* 类说明 :
*/
public class BaiduUtil {
/**
* 根据经纬度获得省市区信息
* @param lon 纬度
* @param lat 经度
* @param coordtype 经纬度坐标系
* @return
*/
public static Map<String, String> getCityByLonLat(String key, String lng, String lat) {
String location = lat + "," + lng;
try {
//拼装url
String url = "http://api.map.baidu.com/reverse_geocoding/v3/?ak="+key+"&output=json&coordtype=wgs84ll&location="+location;
String result = HttpClientUtils.doGet(url);
JSONObject o = new JSONObject(result);
Map<String, String> area = new HashMap<>();
area.put("province", o.getJSONObject("result").getJSONObject("addressComponent").getString("province"));
area.put("city", o.getJSONObject("result").getJSONObject("addressComponent").getString("city"));
area.put("district", o.getJSONObject("result").getJSONObject("addressComponent").getString("district"));
area.put("street", o.getJSONObject("result").getJSONObject("addressComponent").getString("street"));
return area;
}catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 获取API访问token
* 该token有一定的有效期，需要自行管理，当失效时需重新获取.
* @param ak - 百度云官网获取的 API Key
* @param sk - 百度云官网获取的 Securet Key
* @return assess_token
*/
public static String getAuth(String ak, String sk) {
// 获取token地址
String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
String getAccessTokenUrl = authHost
// 1. grant_type为固定参数
+ "grant_type=client_credentials"
// 2. 官网获取的 API Key
+ "&client_id=" + ak
// 3. 官网获取的 Secret Key
+ "&client_secret=" + sk;
try {
URL realUrl = new URL(getAccessTokenUrl);
// 打开和URL之间的连接
HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
connection.setRequestMethod("GET");
connection.connect();
// 获取所有响应头字段
Map<String, List<String>> map = connection.getHeaderFields();
// 遍历所有的响应头字段
for (String key : map.keySet()) {
System.err.println(key + "--->" + map.get(key));
}
// 定义 BufferedReader输入流来读取URL的响应
BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
String result = "";
String line;
while ((line = in.readLine()) != null) {
result += line;
}
/**
* 返回结果示例
*/
System.err.println("result:" + result);
org.json.JSONObject jsonObject = new org.json.JSONObject(result);
String access_token = jsonObject.getString("access_token");
return access_token;
} catch (Exception e) {
System.err.printf("获取token失败！");
e.printStackTrace(System.err);
}
return null;
}
}
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="name">
<el-input v-model="ruleForm.name"
placeholder="名称" clearable :readonly="ro.name"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="名称" prop="name">
<el-input v-model="ruleForm.name"
placeholder="名称" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="24">
<el-form-item 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>
<div v-else>
<el-form-item v-if="ruleForm.value" label="值" prop="value">
<img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.value.split(',')" :src="item" width="100" height="100">
</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":"rgba(255, 255, 102, 1)","inputBorderRadius":"4px","inputFontSize":"14px","textareaBgColor":"rgba(255, 255, 255, 0.25)","btnSaveFontSize":"14px","textareaBorderRadius":"4px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"4px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"rgba(25, 169, 123, 1)","addEditBoxColor":"rgba(25, 169, 123, 0.11)","dateIconFontSize":"14px","btnSaveBgColor":"rgba(25, 169, 123, 1)","uploadIconFontColor":"rgba(25, 169, 123, 1)","textareaBorderColor":"rgba(25, 169, 123, 1)","btnCancelBgColor":"rgba(255, 255, 102, 1)","selectLableColor":"rgba(25, 169, 123, 1)","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"4px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"rgba(0, 0, 0, 1)","dateBorderColor":"rgba(25, 169, 123, 1)","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"rgba(25, 169, 123, 1)","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"rgba(25, 169, 123, 1)","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"4px","inputBgColor":"#fff","inputLableFontSize":"14px","uploadLableColor":"rgba(25, 169, 123, 1)","uploadBorderRadius":"4px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"rgba(25, 169, 123, 1)","inputBorderColor":"rgba(25, 169, 123, 1)","uploadBorderColor":"rgba(25, 169, 123, 1)","textareaFontColor":"rgba(0, 0, 0, 1)","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"4px","selectFontColor":"rgba(25, 169, 123, 1)","btnSaveBorderColor":"rgba(25, 169, 123, 1)","btnSaveBorderWidth":"1px"},
id: '',
type: '',
ro:{
name : false,
value : false,
},
ruleForm: {
name: '',
value: '',
},
rules: {
name: [
{ required: true, message: '名称不能为空', trigger: 'blur' },
],
value: [
],
}
};
},
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=='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() {
// ${column.compare}
// ${column.compare}
this.$refs["ruleForm"].validate(valid => {
if (valid) {
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;
this.addEditUploadStyleChange()
},
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>
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
