SpringBoot+MyBatisPlus实现前端传递时间查询条件ajax请求后台并回显数据流程整理

场景

前端时间选择控件，选择时间后点击搜索，请求后台数据，后台根据时间查询数据库中

一天的记录数并回显给前端，前端进行显示。

实现

前端页面代码(部分)

        

            

                
条件搜索
                

                    
                        
                    
                
            
            

                
                    
                    
                        
                    
                    
                    
                    
                        
                    
                    
                

                            

                                

                                    

                                        创建时间
                                        

                                            
                                                
                                            
                                            
                                        
                                    
                                
                            
                        

                             重置
                             搜索
                        
            
        
        

            

                
今日看板
                    
                        
                            

                                

                                    今日物流数(单)
                                
                                

                                   

                                        
                                    
                                   

                                        同比昨日:
                                        -10%
                                    
                                
                            
                        

页面效果

JQuery部分代码

其中在左边菜单栏点击后会跳转到上面的页面，然后通过jquery控制，页面加载完之后执行ajax异步请求数据。

此时前端时间选择控件值为空，直接请求后台会取当前时间作为查询条件。

$(document).ready(function() {
 
  //搜索及刷新按钮事件
  $("#searchBtn,#refreshBt").click(function () {
    // 刷新表格数据，分页信息不会重置
  });
  //置空按钮事件
  $("#resetBtn").click(function () {
      $("#searchCondition input").each(function () {
          $(this).val("");
      })
      $("#searchCondition select").each(function () {
        $(this).val("");
      })
    });
    //首次进页面获取页面数据
    var createTime = $("#createTime").val();
    $.ajax({
        type: 'POST',
        url: "/wmsLogisticMonitoring/getWmsLogisticsMonitoringData",
        cache: false,  //禁用缓存
        data:JSON.stringify({"createTime":""+createTime+""}),
        contentType: "application/json",
        dataType: "json",
        success: function (result) {
            debugger
            var sumCount = result["sumCount"];
            $("#sumCount").html(sumCount);
        }
    });

    //置空按钮事件
    $("#resetBtn").click(function () {
        $("#searchCondition input").each(function () {
            $(this).val("");
        })
        $("#searchCondition select").each(function () {
            $(this).val("");
        })
    });
    //搜索按钮事件
    $("#searchBtn").click(function () {
        // 刷新表格数据，分页信息不会重置
        getData();
    });
    //点击按钮页面获取页面数据
    function getData() {
        var createTime = $("#createTime").val();
        $.ajax({
            type: 'POST',
            url: "/wmsLogisticMonitoring/getWmsLogisticsMonitoringData",
            cache: false,  //禁用缓存
            data:JSON.stringify({"createTime":""+createTime+""}),
            contentType: "application/json",
            dataType: "json",
            success: function (result) {
            
                var sumCount = result["sumCount"];
                $("#sumCount").html(sumCount);
            }
        });
    }

});//刷新方法结束

请求后台Controller代码

@Controller
@RequestMapping("/wmsLogisticMonitoring")
@EnableConfigurationProperties(ConfigProperties.class)
public class WmsLogisticsMonitoringController {

    @Resource
    private IBusLogisticsOrderService logisticsOrderService;



    @Autowired
    private ConfigProperties configProperties;

    @Description("获取物流监控页面")
    @RequestMapping("/toWmsLogisticsMonitoring.html")
    public String page(Model model) {
        return "logisticsMonitoring/logisticsMonitoring.html";
    }

    @Description("获取页面数据")
    @ResponseBody
    @RequestMapping("/getWmsLogisticsMonitoringData")
    public Map getWmsLogisticsMonitoringData(@RequestBody Map params)
    {
        Map result = new HashMap();
        String createTime = params.get("createTime");
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
       if(createTime==""||createTime==null){
            createTime= simpleDateFormat.format(new Date()).toString();
        }
        //查询今日物流单
        try {
            result=logisticsOrderService.getWmsLogisticsMonitoringData(createTime);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return result;
    }

}

Service具体实现代码

 

@Override
    public Map getWmsLogisticsMonitoringData(String createTime) throws ParseException {
        Map result = new HashMap();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        Date createTimeDate = simpleDateFormat.parse(createTime);
        SimpleDateFormat simpleDateFormat1 =new SimpleDateFormat("yyyy-MM-dd");
        //查询今日物流数
        QueryWrapper BusLogisticsOrderQueryWrapper =new QueryWrapper();
        BusLogisticsOrderQueryWrapper.eq("deleted_flag","0");
        BusLogisticsOrderQueryWrapper.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");
        Integer sumCount = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper);
        result.put("sumCount",sumCount);
        return result;
    }

效果