前端后端交互-ElementUI(日期选择器)

日期选择器

• 页面效果

  页面效果

• 组件源码

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

• 数据绑定

   
  rangeTime: [], 
  

  // 条件表单对象
  regionFormVO: {
      regionId: null,
      regionName: undefined,
      cityName: undefined,
      addressName: undefined,
      createTime: undefined,
      endTime: undefined,
  },
  

  <!-- 数据重组 -->
  onSubmit() {
      const data = this.regionFormVO
      if (data != null) {
  		// 将绑定后的值绑定
          data.createTime = this.rangeTime[0]
          data.endTime = this.rangeTime[1]
          console.log("data: ", data);
          // 重新组装提交的数据
          this.fetchData(this.currentPage, this.pageSize, data)
      }
      this.fetchData(this.currentPage, this.pageSize, this.regionFormVO)
  },
  

  // 异步请求
  fetchData(currentPage, pageSize, regionFormVO) {
      getListPage(currentPage, pageSize, regionFormVO).then(async response => {
          const { data: res } = await response
          console.log(res);
          this.currentPage = res.current
          this.pageSize = res.size
          this.tableData = res.records
          this.total = res.total
      })
  },
  

后端处理

• 控制器

  package com.example.controller;
  
  @Slf4j
  @Api(tags = "区域信息")
  @RestController
  @CrossOrigin
  @RequestMapping("/region")
  public class RegionController {
      @Autowired
      private RegionService regionService;
  
      @ApiOperation("获取分页列表")
      @PostMapping("/list/{currentPage}/{pageSize}")
      public ResultModel<RegionFormDTO> listPage(
              @ApiParam(value = "当前页码", required = true)
              @PathVariable("currentPage") Integer currentPage,
              @ApiParam(value = "每页记录数", required = true)
              @PathVariable("pageSize") Integer pageSize,
              @ApiParam(value = "查询对象")
              @RequestBody RegionFormVO regionFormVO) {
          log.info("regionFormVO: {}",regionFormVO.toString());
          Page<RegionFormDTO> pageParam = new Page<>(currentPage, pageSize);
          IPage<RegionFormDTO> pageModel = regionService.selectListPage(pageParam, regionFormVO);
          return ResultModel.success(pageModel);
      }
  }
  

• mapper

  @Mapper
  public interface RegionMapper extends BaseMapper<Region> {
      IPage<RegionFormDTO> selectPageVo(Page<RegionFormDTO> page, RegionFormVO regionFormVO);
  }
  
  

  
  DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="com.example.mapper.RegionMapper">
  
  <select id="selectPageVo" resultType="regionFormDTO" parameterType="regionFormVO">
      SELECT r.regionId, r.regionName, c.cityName, a.addressName, createTime, endTime
      FROM region r
      JOIN city c ON r.regionId = c.regionId
      JOIN address a ON c.cityId = a.cityId
      <where>
          <if test="regionFormVO.regionName != null and regionFormVO.regionName != ''">
              or r.regionName LIKE #{regionFormVO.regionName}
          if>
          <if test="regionFormVO.cityName != null and  regionFormVO.cityName != ''">
              or c.cityName LIKE #{regionFormVO.cityName}
          if>
          <if test="regionFormVO.addressName != null and regionFormVO.addressName != ''">
              or a.addressName LIKE #{regionFormVO.addressName}
          if>
          <if test="regionFormVO.createTime != null and regionFormVO.createTime!='' and  regionFormVO.endTime != null and regionFormVO.endTime !=''">
              or createTime BETWEEN #{regionFormVO.createTime} AND #{regionFormVO.endTime}
          if>
      where>
  select>
  mapper>
  
  

• service

  public interface RegionService extends IService<Region> {
      IPage<RegionFormDTO> selectListPage(Page<RegionFormDTO> pageParam, RegionFormVO regionFormVO);
  }
  
  

  @Service
  public class RegionServiceImpl extends ServiceImpl<RegionMapper, Region> implements RegionService {
      @Override
      public IPage<RegionFormDTO> selectListPage(Page<RegionFormDTO> pageParam, RegionFormVO regionFormVO) {
          return baseMapper.selectPageVo(pageParam, regionFormVO);
      }
  }
  
  

• 请求日志

  请求日期范围

  日志解析

说明

• 数据库的日期类型是datetime

• 在真正的实体类上对应的是

  @Data
  @EqualsAndHashCode(callSuper = false)
  @Accessors(chain = true)
  @ApiModel(value = "Region对象", description = "")
  public class Region implements Serializable {
      private static final long serialVersionUID = 1L;
      @TableId(value = "regionId", type = IdType.AUTO)
      private Integer regionId;
      @TableField("regionName")
      private String regionName;
      @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
      private Date createTime;
      @TableField("endTime")
      @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
      private Date endTime;
  }
  

• 使用vo时使用String类型,在测试过程中Date反复报错