JavaVue-Get请求 数组参数(qs格式化前端数据)

前言

• 现在管理系统，像若依，表格查询一般会用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-picker
          v-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-column
        prop="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-picker
          v-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-column
        prop="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;
}