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;
}
相关推荐
麦兜*23 分钟前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
天上掉下来个程小白26 分钟前
MybatisPlus-06.核心功能-自定义SQL
java·spring boot·后端·sql·微服务·mybatisplus
知了一笑33 分钟前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室1 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~1 小时前
重学前端004 --- html 表单
前端·html
今天背单词了吗9801 小时前
算法学习笔记:17.蒙特卡洛算法 ——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·笔记·考研·算法·蒙特卡洛算法
Dcs1 小时前
从 C 到 Rust:一位开发者的 `tmux` 全面移植之旅
java
TE-茶叶蛋2 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
Maybyy2 小时前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈2 小时前
CSS中的Element语法
前端·css