场景
前端时间选择控件，选择时间后点击搜索，请求后台数据，后台根据时间查询数据库中
一天的记录数并回显给前端，前端进行显示。
实现
前端页面代码(部分)
<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>页面效果
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;
}效果
标签：function,MyBatisPlus,SpringBoot,回显,result,sumCount,new,createTime,页面 From： https://blog.51cto.com/BADAOLIUMANGQZ/6147503