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

桃扇骨 2023-10-18 18:19 16阅读 0赞

## 场景 ##

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

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

## 实现 ##

前端页面代码(部分)

<div class="ibox float-e-margins">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>条件搜索</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table my-minus-1 mb-minus-1">
                        <tbody>
                        <tr>
                            <td>
                                <div class="row" id="searchCondition">
                                    <div class="col-sm-2">
                                        <div class="form-group" id="data_1">
                                            <label class="col-form-label">创建时间</label>
                                            <div class="input-group date col-lg-8">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                                <input type="text" id="createTime" name="createTime" class="form-control"  >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr class="text-center">
                            <td colspan="4">
                                <button id="resetBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-reply"></i> 重置</button>
                                <button id="searchBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-search"></i> 搜索</button>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="ibox-content">
                <div class="ibox-title">
                    <h1>今日看板</h1>
                        <tr>
                            <td>
                                <div class="widget lazur-bg p-xl">
                                    <h2>
                                        今日物流数(单)
                                    </h2>
                                    <ul class="list-unstyled m-t-md">
                                       <li>
                                            <label id="sumCount"></label>
                                        </li>
                                       <li>
                                            <label>同比昨日:</label>
                                            -10%
                                        </li>
                                    </ul>
                                </div>
                            </td>

### 页面效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 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<String,Object> getWmsLogisticsMonitoringData(@RequestBody Map<String, String> params)
        {
            Map<String, Object> result = new HashMap<String, Object>();
            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<String, Object> getWmsLogisticsMonitoringData(String createTime) throws ParseException {
            Map<String, Object> result = new HashMap<String, Object>();
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
            Date createTimeDate = simpleDateFormat.parse(createTime);
            SimpleDateFormat simpleDateFormat1 =new SimpleDateFormat("yyyy-MM-dd");
            //查询今日物流数
            QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper =new QueryWrapper<BusLogisticsOrder>();
            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;
        }

## 效果 ##

![Image 1][]![20190509101414961.gif][]

###     ###

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190509101336224.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20190509101414961.gif]: https://img-blog.csdnimg.cn/20190509101414961.gif