给我一个前后端传日期的demo要求前端用Vue后端用Springboot

前端代码：

<template>
  <div>
    <label for="date">选择日期：</label>
    <input type="date" id="date" v-model="date" @change="sendDate">
    <p>后端返回的日期为：{{backDate}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: '',
      backDate: ''
    }
  },
  methods: {
    sendDate() {
      axios.post('/api/date', { date: this.date })
        .then(response => {
          this.backDate = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

后端代码：

@RestController
@RequestMapping("/api")
public class DateController {

    @PostMapping("/date")
    public String getDate(@RequestBody DateParam dateParam) {
        SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
        Date date = null;
        try {
            date = formatter.parse(dateParam.getDate());
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return formatter.format(date);
    }

    static class DateParam {
        private String date;

        public String getDate() {
            return date;
        }

        public void setDate(String date) {
            this.date = date;
        }
    }
}

这个demo实现了前端选择日期后，将日期传到后端，后端将日期格式化后返回给前端。前端使用Vue，后端使用Springboot，前后端通过axios进行数据交互。