Vueでバックエンドに日付値を渡す方法

Vue は、人気のある JavaScript フレームワークとして、便利で高速なフロントエンド開発モデルを提供しますが、実際の開発では、多くの場合、Vue によってレンダリングされたデータを処理のためにバックエンドに渡す必要があります。日付の値。今日は、Vue の日付値をバックエンドに渡す方法について説明します。

1. なぜ日付値をバックエンドに渡す必要があるのですか?

実際の開発では、フロントエンドで日付の選択と入力を完了してから渡す必要があることがよくあります。選択または入力された日付値をバックエンドが処理します。たとえば、フロントエンドのフォームで日付を送信する必要がある場合、この日付をバックエンド インターフェイスに渡して処理し、データベースやその他の操作に保存する必要があります。

2. Vue の日付処理メソッド

Vue には、日付を処理するための便利なメソッドが多数用意されており、組み込みのフィルターまたはカスタム メソッドを通じて日付を処理できます。たとえば、フィルターを使用して日付を必要な形式にフォーマットできます:

<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>

この例では、一般的に使用される日付処理ライブラリである moment.js を使用して、フィルターを通じて日付をフォーマットします。 -DD」形式。このフィルターは他のコンポーネントで再利用できます。

3. 日付値の配信メソッド

Vue では、次の方法で日付値をバックエンドに渡すことができます:

1. GET リクエスト パラメーターの配信メソッド

比較的単純なシナリオの場合、GET リクエスト パラメーターを通じて日付値をバックエンドに渡すことができます。たとえば、選択した日付に基づいてユーザーのデータをクエリする必要がある場合、次の方法で日付値をバックエンドに渡すことができます:

<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>

この例では、v-model を通じてバインドします。入力タグの日付値を取得し、クエリ ボタンのクリック イベントで URL を連結し、日付値をクエリ パラメーターとして GET リクエストに渡します。

2. POST リクエスト パラメーターの配信メソッド

渡されるデータがより複雑な場合は、POST リクエスト パラメーターを通じて日付値をバックエンドに渡すことができます。このメソッドは渡すことができます。さらに詳しいデータ情報。

<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>

この例では、オブジェクト パラメータを作成し、ユーザーの名前、性別、誕生日などの情報を属性値として使用し、このオブジェクトを保存ボタンのクリック イベントで POST リクエスト パラメータとして送信します。 。 後部。

3. リクエスト本文配信メソッド

リクエスト本文配信メソッドは、通常、フォームやファイルなどの複雑なデータ オブジェクトを渡すために使用されます。このメソッドは、スルーで渡すことができます。 FormData オブジェクト。バックエンドがそれを処理できるようにします。

<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>

この例では、フォーム フォームの submit イベントを通じて submitForm メソッドをトリガーし、メソッド内で FormData オブジェクトを作成し、フォームの入力値を属性値としてオブジェクトに追加します。このオブジェクトを次のように使用します。 POST リクエストのリクエスト本文がバックエンドに送信されます。

4. 概要

Vue では、GET リクエスト パラメーター、POST リクエスト パラメーター、リクエスト本文を通じて日付値をバックエンドに渡すことができます。さまざまなシナリオに適した配信方法が異なるため、実際の状況に応じて選択する必要があります。同時に、一般的に使用されるデータ処理ライブラリをいくつか使用して、日付の書式設定などの操作を簡単に処理し、開発効率を向上させることもできます。この記事がお役に立てば幸いです!

以上がVueでバックエンドに日付値を渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。