Использование Vue.js и Django Rest Framework для обмена данными: практические примеры и советы

Vue.js и Django Rest Framework — это две популярные технологии, используемые для разработки современных веб-приложений. Vue.js — это фреймворк для разработки пользовательских интерфейсов, а Django Rest Framework — это набор инструментов для создания API на основе Django.

Если вы планируете разрабатывать веб-приложение с использованием Vue.js и Django Rest Framework, то вам потребуется обмениваться данными между фронтендом и бэкендом. В этой статье мы рассмотрим несколько примеров обмена данными между Vue.js и Django Rest Framework.

1. Получение данных из API Django Rest Framework в Vue.js

Для получения данных из API Django Rest Framework в Vue.js можно использовать библиотеку Axios. Вот пример кода:

import axios from 'axios'

export default {
  data () {
    return {
      items: []
    }
  },
  mounted () {
    axios.get('http://localhost:8000/api/items/')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

В этом примере мы отправляем GET-запрос на эндпоинт /api/items/ и получаем данные в формате JSON. Затем мы сохраняем полученные данные в свойстве items.

2. Отправка данных из Vue.js в API Django Rest Framework

Для отправки данных из Vue.js в API Django Rest Framework можно использовать тот же метод Axios, но с методом POST. Вот пример кода:

import axios from 'axios'

export default {
  data () {
    return {
      newItem: {
        name: '',
        description: ''
      }
    }
  },
  methods: {
    addItem () {
      axios.post('http://localhost:8000/api/items/', this.newItem)
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

В этом примере мы отправляем POST-запрос на эндпоинт /api/items/ и передаем объект newItem в качестве данных. Объект newItem содержит свойства name и description, которые пользователь заполняет в форме. После успешной отправки запроса мы выводим ответ в консоль.

3. Обновление данных в API Django Rest Framework из Vue.js

Для обновления данных в API Django Rest Framework из Vue.js можно использовать метод PUT или PATCH. Вот пример кода:

import axios from 'axios'

export default {
  data () {
    return {
      item: {
        id: 1,
        name: '',
        description: ''
      }
    }
  },
  mounted () {
    axios.get(`http://localhost:8000/api/items/${this.item.id}/`)
      .then(response => {
        this.item = response.data
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    updateItem () {
      axios.put(`http://localhost:8000/api/items/${this.item.id}/`, this.item)
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

В этом примере мы получаем данные об элементе с id, сохраненным в свойстве item, из API Django Rest Framework с помощью метода GET. Затем мы используем полученные данные для заполнения формы. После того, как пользователь внес изменения и нажал кнопку «Сохранить», мы отправляем PUT-запрос на эндпоинт /api/items/:id/ и передаем объект item в качестве данных. После успешной отправки запроса мы выводим ответ в консоль. Обратите внимание, что вместо метода PUT можно использовать метод PATCH для частичного обновления данных.