前端输入日期范围，后端处理并返回符合该日期范围的数据

前端处理：

<el-date-picker 
v-model="date" type="daterange" range-separator="-" 
start-placeholder="开始日期" end-placeholder="结束日期" 
value-format="yyyy-MM-dd">
</el-date-picker>

此时获取到的数据date包含起始日期与结束日期，需要先将两个日期分开分别传入后端。

---

在传入后端前进行判定，若date不为空，用start和end分别代表起始日期和结束日期。

 if(this.date === '') {
    this.start = ''  //起始日期
    this.end = ''    //结束日期
 }else {
    this.start = this.date[0]
    this.end = this.date[1]
 }

 

---

访问后端

  this.$request.get("/project/getSelect", {
    params: {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        start: this.start,
        end: this.end,
    }
  })

---

后端处理

使用queryWapper.between() 获取日期在start和end之间的数据。

@ApiOperation("分页条件查询，获取全部项目信息")
@GetMapping("/getSelect")
public Result getSelect(
    @RequestParam Integer pageNum,
    @RequestParam Integer pageSize,
    @RequestParam ("start") String start,
    @RequestParam ("end") String end
) {
    QueryWrapper<Project> queryWrapper = new QueryWrapper<>();
    queryWrapper.between((StrUtil.isNotBlank(start)),"date",start,end);
    Page<Project> projectInfos = projectService.page(new Page<>(pageNum,pageSize),queryWrapper);
    return Result.success(projectInfos);
    }

---

测试，成功