Bagaimana untuk menghantar nilai tarikh ke belakang dalam vue

Vue, sebagai rangka kerja JavaScript yang popular, memberikan kami model pembangunan bahagian hadapan yang mudah dan pantas Walau bagaimanapun, dalam pembangunan sebenar, kami selalunya perlu menghantar data yang diberikan oleh Vue ke bahagian belakang untuk diproses, seperti. nilai tarikh. Hari ini kita akan bercakap tentang cara menghantar nilai tarikh dalam Vue ke bahagian belakang.

1 Mengapakah nilai tarikh perlu dihantar ke bahagian belakang

Dalam pembangunan sebenar, selalunya perlu melengkapkan pemilihan dan input tarikh pada bahagian hadapan, dan kemudian lulus dipilih atau masukkan nilai tarikh ke Bahagian belakang mengendalikan pemprosesan. Sebagai contoh, jika kita perlu menyerahkan tarikh dalam borang di bahagian hadapan, maka tarikh ini perlu dihantar ke antara muka bahagian belakang untuk diproses, disimpan dalam pangkalan data atau operasi lain.

2. Kaedah pemprosesan tarikh dalam Vue

Vue menyediakan banyak kaedah mudah untuk memproses tarikh Kami boleh memproses tarikh melalui penapis terbina dalam atau kaedah tersuai. Contohnya, kami boleh menggunakan penapis untuk memformat tarikh ke dalam format yang kami perlukan:

<template>
  <div>
    {{ date | format('YYYY-MM-DD') }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '2021-09-01'
    }
  },
  filters: {
    format(value, formatStr) {
      return moment(value).format(formatStr)
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan moment.js, pustaka pemprosesan tarikh yang biasa digunakan, untuk memformat tarikh melalui penapis 'YYYY-MM Borang -DD'. Penapis ini boleh digunakan semula dalam komponen lain.

3. Kaedah penghantaran nilai tarikh

Dalam Vue, kita boleh menghantar nilai tarikh ke hujung belakang dengan cara berikut:

1. DAPATKAN kaedah penghantaran parameter permintaan

Untuk senario yang lebih mudah, kami boleh menghantar nilai tarikh ke bahagian belakang melalui parameter permintaan GET. Contohnya, jika kami perlu menanyakan data pengguna berdasarkan tarikh yang dipilih, kami boleh menghantar nilai tarikh ke hujung belakang dengan cara berikut:

<template>
  <div>
    <input type="date" v-model="date">
    <button @click="search">查询</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    }
  },
  methods: {
    search() {
      const url = `/user?date=${this.date}`
      // axios发送GET请求
    }
  }
}
</script>

Dalam contoh ini, kami mengikatnya melalui model v daripada nilai tarikh teg input, kemudian gabungkan URL dalam peristiwa klik butang pertanyaan dan hantar nilai tarikh sebagai parameter pertanyaan kepada permintaan GET.

2. Kaedah lulus parameter permintaan POST

Jika data yang dihantar lebih kompleks, nilai tarikh boleh dihantar ke bahagian belakang melalui parameter permintaan POST Lebih banyak maklumat data.

<template>
  <div>
    <input type="date" v-model="birthday">
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      birthday: ''
    }
  },
  methods: {
    save() {
      const params = {
        name: '张三',
        gender: '男',
        birthday: this.birthday
      }
      // axios发送POST请求
    }
  }
}
</script>

Dalam contoh ini, kami mencipta param objek dan menggunakan nama pengguna, jantina, hari lahir dan maklumat lain sebagai nilai atribut, dan kemudian menghantar objek ini sebagai parameter permintaan POST dalam peristiwa klik pada butang simpan .

3. Kaedah penghantaran badan permintaan

Kaedah penghantaran badan permintaan biasanya digunakan untuk menghantar objek data yang kompleks, seperti borang, fail, dll. Kaedah ini boleh melalui objek FormData , supaya bahagian belakang boleh memprosesnya.

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>姓名</label>
      <input type="text" v-model="name">
      <label>生日</label>
      <input type="date" v-model="birthday">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      birthday: ''
    }
  },
  methods: {
    submitForm() {
      const formData = new FormData()
      formData.append('name', this.name)
      formData.append('birthday', this.birthday)
      // axios发送POST请求
    }
  }
}
</script>

Dalam contoh ini, kami mencetuskan kaedah submitForm melalui acara serah borang borang, cipta objek FormData dalam kaedah, tambah nilai input borang pada objek sebagai nilai atribut, dan kemudian gunakan objek ini sebagai Badan permintaan permintaan POST dihantar ke bahagian belakang.

4. Ringkasan

Dalam Vue, kita boleh menghantar nilai tarikh ke bahagian belakang melalui parameter permintaan GET, parameter permintaan POST dan kandungan permintaan. Kaedah penghantaran yang berbeza sesuai untuk senario yang berbeza, dan anda perlu memilih mengikut situasi sebenar. Pada masa yang sama, kami juga boleh menggunakan beberapa pustaka pemprosesan data yang biasa digunakan untuk mengendalikan operasi dengan mudah seperti pemformatan tarikh dan meningkatkan kecekapan pembangunan. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menghantar nilai tarikh ke belakang dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!