前端：vue+elementUI

后端：springboot+spring家族

前端、后端通信方式：axios(ajax框架)

---------------------------------------------------------------------------------------------------------------------------------

最近在做项目中遇到后端Date、Timestamp类型转换错误的问题，错误提醒：字符串无法转换为Date类型、TimeStamp类型。

前短请求为post提交表单。

之前用过spring这个问题是通过注册自定义的转换器实现的，心里琢磨着springboot号称是‘零配置’,这种转换肯定有默认的配置，，，后来研究了下这个问题，认为springboot springmvc配置了jsonConverter，推荐的是前后端使用json进行数据交换，前端表单提交后，springmvc会把表单反序列化为对象（jackson提供序列化、反序列化），请求数据会相应的封装后端对应的对象或者属性。

如果前端就是使用的属性：属性值这种方式，那springmvc则会查找相应的转换器，如果没有找到，则会报转换错误的信息。

下面以例子说明：

json:

前端部分代码：

export function postRequestJSON(url, data) {
  return service({
    url: url,
    method: 'post',
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      Accept: 'application/json;charset=UTF-8'
    },
    data: data
  })
}

<el-form v-model="form" ref="form">
  <el-date-picker  type="date" v-model="form.dateParam" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期"></el-date-picker>
    <el-time-picker v-model="form.timeParam" format="HH:mm:ss" value-format="HH:mm:ss" placeholder="请选择时间"></el-time-picker>
    <el-date-picker type="datetime" v-model="form.timestampParam" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" 
    placeholder="请选择日期和时间"></el-date-picker>
    <el-button type="primary" @click="click">click</el-button>

  </el-form>

 

click() {
  request.postRequestFORM('/equ/outstore/test', this.form).then(response => {
    this.$message('success execute')
  })
}

后端接收请求部分：

@RequestMapping("/test1")
public void test1(@RequestBody TestBean testBean){
    System.out.println("Date:"+testBean.getDateParam());
    System.out.println("Time:"+testBean.getTimeParam());
    System.out.println("Timestamp:"+testBean.getTimestampParam());
}

前端日期、时间、日期时间分别对应后端的Date、Time、Timestamp类型。

--前端 日期时间的值格式要求为timestamp（一串数字对应number），如果为yyyy-MM-dd HH:mm:ss的格式则jackson默认反序列化的时候会报不支持的format格式。

--后端 @RequestBody注解作用请自行google.

另一种方式(根据属性名称去赋值到后端的对象的属性或者属性)：

前端部分代码

export function postRequestFORM(url, data) {
  return service({
    url: url,
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/json'
    },
    data: data,
    transformRequest: [function(data) {
      data = qs.stringify(data, { allowDots: true }) // , {arrayFormat: 'brackets'}
      return data
    }]
  })
}

<el-form v-model="form" ref="form">
  <el-date-picker  type="date" v-model="form.dateParam" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期"></el-date-picker>
    <el-time-picker v-model="form.timeParam" format="HH:mm:ss" value-format="HH:mm:ss" placeholder="请选择时间"></el-time-picker>
    <el-date-picker type="datetime" v-model="form.timestampParam" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择日期和时间">
    	</el-date-picker> 
    	<el-button type="primary" @click="click">click</el-button> 
    	</el-form>

后端部分代码：

 

@RequestMapping("/test")
public void test(TestBean testBean){
    System.out.println("Date:"+testBean.getDateParam());
    System.out.println("Time:"+testBean.getTimeParam());
    System.out.println("Timestamp:"+testBean.getTimestampParam());
}

转换器代码：

 

@Configuration
public class StrConverterconfigration implements WebMvcConfigurer {

    /**
     * str转date
     * @return
     */
    @Bean
    public Converter<String, Date> stringToDateConvert() {
        return new Converter<String, Date>() {
            @Override
            public Date convert(String source) {
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                Date date = null;
                try {
                    date = sdf.parse(source);
                } catch (Exception e) {
                    e.printStackTrace();
                }
                return date;
            }
        };
    }

    /**
     *str转timestamp
     * @retun
     */
    @Bean
    public Converter<String, Timestamp> stringToTimeStampConvert() {
        return new Converter<String, Timestamp>() {
            @Override
            public Timestamp convert(String source) {
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                Timestamp date = null;
                try {
                    date = Timestamp.valueOf(source);
                } catch (Exception e) {
                    e.printStackTrace();
                }
                return date;
            }
        };
    }

}

 

请求信息：

 

附request.js链接。

本文完。

勤助手-教育机构好助手。一款专注中小机构教学管理的软件。

网址：https://www.qinzs.com

注册可免费使用