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;
}
相关推荐
满分观察网友z11 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
咖啡啡不加糖11 分钟前
暴力破解漏洞与命令执行漏洞
java·后端·web安全
编程猪猪侠12 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z13 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
风象南14 分钟前
SpringBoot敏感配置项加密与解密实战
java·spring boot·后端
西西木科技丨Shopify开发机构19 分钟前
如何在 Shopify 中建立重定向
前端·html
DKPT24 分钟前
Java享元模式实现方式与应用场景分析
java·笔记·学习·设计模式·享元模式
汪子熙26 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1127 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆31 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js