脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue java时间段搜索

Vue+java实现时间段的搜索示例

 更新时间：2022年06月26日 11:11:23   作者：月明aniu  
本文主要介绍了Vue+java实现时间段的搜索示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

实现效果如图：

在这里插入图片描述

标红的是需要注意的地方！
Vue操作：
1，如图：

在这里插入图片描述

2，如图：(数据初始化)

在这里插入图片描述

2.0初始化今天的日期和时间的样式：

2.1今天的日期：

// 时间范围–start
// daterangeLastInTime: [],
// daterangeLastInTime: [new Date(2022, 2, 10, 0, 0), new Date(2022, 2, 10, 23, 59)],
daterangeLastInTime: [this.parseTime(new Date(new Date().toLocaleDateString()).getTime()),this.parseTime(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1))],

2.2，时间的样式：

     //时间样式(出现上面的效果图)
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

4，如图：把时间放入对应的值

在这里插入图片描述

5，重置操作需要注意：

在这里插入图片描述

6，查询参数中，需要有值(为了向后端传数据需要)：

在这里插入图片描述

JAVA操作：
1，实体类中需要有对应的值接收参数

在这里插入图片描述

2，xml文件中，在list方法中需要处理：

在这里插入图片描述

代码如下：

            <!-- 开始时间检索 创建时间-->
            <if test="searchStartTime != null and searchStartTime!='' and searchEndTime != null and searchEndTime!=''">
                and  a.create_at BETWEEN to_date(#{searchStartTime},'yyyy-MM-dd HH24:mi:ss') AND to_date(#{searchEndTime},'yyyy-MM-dd HH24:mi:ss')
            </if>

到此这篇关于Vue+java实现时间段的搜索示例的文章就介绍到这了,更多相关Vue java时间段搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue3 定义使用全局变量的示例详解

    vue3 定义使用全局变量的示例详解

    全局变量（函数等）可以在任意组件内访问,可以当组件间的传值使用,这篇文章给大家介绍vue3 定义使用全局变量的示例详解,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 实例详解ztree在vue项目中使用并且带有搜索功能

    实例详解ztree在vue项目中使用并且带有搜索功能

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。这篇文章主要介绍了ztree在vue项目中使用并且带有搜索功能,需要的朋友可以参考下
    2018-08-08
  • Vue组件之间的通信方式(推荐!)

    Vue组件之间的通信方式(推荐!)

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下
    2022-06-06
  • vue中数据不响应的问题及解决

    vue中数据不响应的问题及解决

    这篇文章主要介绍了vue中数据不响应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue项目退出登录清除store数据的三种方法

    vue项目退出登录清除store数据的三种方法

    最近使用vue做用户的登录/退出,在开发过程中遇到的一些问题,记录下来,下面这篇文章主要给大家介绍了关于vue项目退出登录清除store数据的三种方法,需要的朋友可以参考下
    2022-09-09
  • vue2更改data里的变量不生效时,深层更改data里的变量问题

    vue2更改data里的变量不生效时,深层更改data里的变量问题

    这篇文章主要介绍了vue2更改data里的变量不生效时,深层更改data里的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue Router路由守卫超详细介绍

    Vue Router路由守卫超详细介绍

    路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧
    2023-01-01
  • vue项目中极验验证的使用代码示例

    vue项目中极验验证的使用代码示例

    这篇文章主要介绍了vue项目中极验验证的使用代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Vue系列：通过vue-router如何传递参数示例

    Vue系列：通过vue-router如何传递参数示例

    本篇文章主要介绍了Vue系列：通过vue-router如何传递参数示例，具有一定的参考价值，有兴趣的可以了解一下。
    2017-01-01
  • Vue3用Proxy替代defineProperty的原因

    Vue3用Proxy替代defineProperty的原因

    vue的人都知道,vue3里面使用了proxy替换了defineProperty,本文主要介绍了Vue3用Proxy替代defineProperty的原因,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12

最新评论