前端后端交互-ElementUI(日期选择器)-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端后端交互-ElementUI(日期选择器)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

日期选择器

页面效果

页面效果

组件源码

<!-- 
    daterange: 范围选择类型
    format: 绑定后表单中显示的格式
    value-format: 传递时显示的格式
 -->
<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>

数据绑定

<!--  v-model="rangeTime" --> 
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);
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.RegionMapper">
<!-- IPage<RegionFormDTO> selectPageVo(Page<RegionFormDTO> page, RegionFormVO regionFormVO);  -->
<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;
}