怎样建网站最快_免费服务器建站_如何做免费网络推广_长沙网站托管seo优化公司

前言

• 现在管理系统，像若依，表格查询一般会用Get请求，把页面的查询条件传递给后台。其中大部分页面会有日期时间范围查询
• 这时候，为了解决请求参数中的数组文件，前台就会在请求前拦截参数中的日期数组数据，然后转为beginXxx/endXxx，两个属性来传递给后台
• 这么做非常麻烦，前台要拦截，后台还要创建两个字段接收，并且分别获取，非常的别扭
• 其实前台传输组，后台的对象中，使用数组也能正常接收，不过是前台的Get请求传递的参数格式不正确而已
• 下面，我们将使用qs - npm库，来将传递给后台的数据序列化一下，传递给后台。更多转换规则，请查阅文档配置

前台代码

qs格式化前

<template><div class="pageHome"><el-form :model="searchForm" label-width="120px" inline><el-form-item label="姓名"><el-input v-model="searchForm.name" clearable></el-input></el-form-item><el-form-item label="出生年月"><el-date-pickerv-model="searchForm.birthday"type="daterange"value-format="yyyy-MM-dd"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="loadData">查询</el-button></el-form-item></el-form><el-table :data="tableData" border style="width: 50%" border><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-columnprop="birthday"label="出生年月"value-format="yyyy-MM-dd"width="180"></el-table-column></el-table></div>
</template>
<script>
import qs from "qs";
export default {data() {return {searchForm: {name: undefined,birthday: [],},tableData: [],};},methods: {// 加载表格数据loadData() {this.$axios.get("http://localhost:8888/getUser", { params: this.searchForm }).then((res) => {this.tableData = res.data;});},},
};
</script>
<style lang="scss" scoped>
.pageHome {width: 100%;height: 95vh;
}
</style>

qs格式化后

<template><div class="pageHome"><el-form :model="searchForm" label-width="120px" inline><el-form-item label="姓名"><el-input v-model="searchForm.name" clearable></el-input></el-form-item><el-form-item label="出生年月"><el-date-pickerv-model="searchForm.birthday"type="daterange"value-format="yyyy-MM-dd"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="loadData">查询</el-button></el-form-item></el-form><el-table :data="tableData" border style="width: 50%" border><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-columnprop="birthday"label="出生年月"value-format="yyyy-MM-dd"width="180"></el-table-column></el-table></div>
</template>
<script>
import qs from "qs";
export default {data() {return {searchForm: {name: undefined,birthday: [],},tableData: [],};},methods: {// 加载表格数据loadData() {let url = "http://localhost:8888/getUser";const params = qs.stringify(this.searchForm);if (params) {url = url + "?" + params;}this.$axios.get(url, {}).then((res) => {this.tableData = res.data;});},},
};
</script>
<style lang="scss" scoped>
.pageHome {width: 100%;height: 95vh;
}
</style>

后台代码

接口

@GetMapping("getUser")
public List<User> getUser(UserReqVO user) {List<User> users = Arrays.asList(new User("张三", 18, DateUtils.addDays(new Date(), -2)),new User("王五", 18, DateUtils.addDays(new Date(), -5)),new User("李四", 18, DateUtils.addDays(new Date(), -9)),new User("赵六", 18, new Date()));if (StringUtils.hasLength(user.getName())) {users = users.stream().filter(user1 -> user1.getName().contains(user.getName())).collect(Collectors.toList());}if (ArrayUtils.isNotEmpty(user.getBirthday())) {users = users.stream().filter(user1 -> user1.getBirthday().after(user.getBirthday()[0]) && user1.getBirthday().before(user.getBirthday()[1])).collect(Collectors.toList());}return users;
}

接收VO类

• 注意，这里要加上@DateTimeFormat注解，才可以正确的把前台传过来的字符串日期->Date[]类型

package com.tcc.vo;import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;import java.util.Date;@Data
public class UserReqVO {private String name;@DateTimeFormat(pattern = "yyyy-MM-dd")private Date[] birthday;
}