怎么用Vue+java实现时间段的搜索

本文小编为大家详细介绍“怎么用Vue+java实现时间段的搜索”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么用Vue+java实现时间段的搜索”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

实现效果如图:

怎么用Vue+java实现时间段的搜索  vue 第1张

标红的是需要注意的地方!
Vue操作:
1,如图:

怎么用Vue+java实现时间段的搜索  vue 第2张

2,如图:(数据初始化)

怎么用Vue+java实现时间段的搜索  vue 第3张

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,如图:把时间放入对应的值

怎么用Vue+java实现时间段的搜索  vue 第4张

5,重置操作需要注意:

怎么用Vue+java实现时间段的搜索  vue 第5张

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

怎么用Vue+java实现时间段的搜索  vue 第6张

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

怎么用Vue+java实现时间段的搜索  vue 第7张

2,xml文件中,在list方法中需要处理:

怎么用Vue+java实现时间段的搜索  vue 第8张

代码如下:

            <!-- 开始时间检索 创建时间-->
            <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实现时间段的搜索”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论

有免费节点资源,我们会通知你!加入纸飞机订阅群

×
天气预报查看日历分享网页手机扫码留言评论电报频道链接