如何在vue js中将日期插入数据库后显示成功消息

<template>
  <div>
    <form @submit="submitForm">
      <input type="date" v-model="date">
      <button type="submit">提交</button>
    </form>
    <div v-if="showSuccessMessage">{{ successMessage }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      date: '',
      showSuccessMessage: false,
      successMessage: '',
    };
  },
  methods: {
    submitForm(event) {
      event.preventDefault();
      
      // 发送POST请求将日期数据发送到后端服务器
      axios.post('/api/insert-date', { date: this.date })
        .then(response => {
          // 插入操作成功
          this.showSuccessMessage = true;
          this.successMessage = response.data.message;
        })
        .catch(error => {
          // 插入操作失败
          console.error(error);
        });
    },
  },
};
</script>