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

前言

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

前台代码

qs格式化前

html 复制代码
<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格式化后

html 复制代码
<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>

后台代码

接口

java 复制代码
@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[]类型
java 复制代码
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;
}
相关推荐
群联云防护小杜29 分钟前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
程序猿小D1 小时前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的个人财务管理系统,推荐!
java·数据库·mysql·spring·毕业论文·ssm框架·个人财务管理系统
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript
良辰未晚2 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas