Vueでバックエンドに日付値を渡す方法-フロントエンドQ&A-php.cn

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

王林

リリース： 2023-05-18 09:54:37

オリジナル

2286 人が閲覧しました

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 では、次の方法で日付値をバックエンドに渡すことができます:

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 リクエストに渡します。

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 リクエストパラメータとして送信します。。後部。

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

リクエスト本文配信メソッドは、通常、フォームやファイルなどの複雑なデータオブジェクトを渡すために使用されます。このメソッドは、スルーで渡すことができます。 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 サイトの他の関連記事を参照してください。