Задать вопрос
logdog90
@logdog90
vue

Как исправить ошибку 404 при PUT-запросе?

Подскажите пожалуйста, почему при PUT-запрос, вылазит ошибка?
631382821843a875767533.png
Что я делаю не так?

table.vue
<template>
    <div class="pt-6">
        <table class="w-1/2 mx-auto border-0 m-0 p-0 border-collapse border-spacing-0 text-base">
            <thead class="bg-sky-500/75 text-white text-center uppercase">
                <th class="p-3">Фамилия</th>
                <th class="p-3">Имя</th>
                <th class="p-3">Номер</th>
                <th class="p-3">Изменить</th>
                <th class="p-3">Удалить</th>
            </thead>
            <tbody>
                <tr class="border-b-1 border-b-grey hover:bg-sky-500/10 hover:cursor-pointer transition duration-500 ease-out hover:ease-in"
                    v-for="employee in GET_EMPLOYEES" :key="employee.id">
                    <td data-label="Фамилия" class="p-2">{{ employee.lastname }}</td>
                    <td data-label="Имя" class="p-2">{{ employee.firstname }}</td>
                    <td data-label="Номер" class="p-2">{{ employee.number }}</td>
                    <td data-label="Изменить" class="p-2">
                        <button 
                            class="focus:outline-0"
                            @click="editModal(employee)"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-pencil-square fill-lightGreen hover:fill-darkGreen transition duration-500" viewBox="0 0 16 16">
                                <path
                                    d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                <path fill-rule="evenodd"
                                    d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                            </svg>
                        </button>
                    </td>
                    <td data-label="Удалить" class="p-2 flex justify-center items-center">
                        <button 
                            class="focus:outline-0"
                            @click="deleteEmployee(employee)"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-trash fill-red-500 hover:fill-red-700 transition duration-500 ease-out"
                                viewBox="0 0 16 16">
                                <path
                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                <path fill-rule="evenodd"
                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                            </svg>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <employee-create-button />
        <employee-modal-update />

    </div>
</template>

<script>
import EmployeeCreateButton from './EmployeeCreateButton.vue';
import EmployeeModalUpdate from './EmployeeModalUpdate.vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'

export default {
    name: 'EmployeesTable',
    components: {
        EmployeeCreateButton,
        EmployeeModalUpdate
    },
    props: ['search'],

    async mounted() {
        await this.getEmployees()
    },

    methods: {
        ...mapActions(['getEmployees', 'updateEmployee', 'deleteEmployee']),
        ...mapMutations(['SET_SHOW_UPDATE_MODAL', 'SET_EMPLOYEE_DATA']),

        editModal(employee) {
            this.SET_SHOW_UPDATE_MODAL()
            this.SET_EMPLOYEE_DATA(employee)
        }
    },

    computed: {
        ...mapGetters(['GET_EMPLOYEES']),
    }

}
</script>


store.js
import axios from 'axios';

export default ({
    state: {
        isOpenCreateModal: false,
        isOpenUpdateModal: false,
        isOpenDeleteModal: false,
        employees: null,
        employee: {
            id: '',
            lastname: '',
            firstname: '',
            number: ''
        }
    },

    getters: {
        SHOW_CREATE_MODAL: (state) => state.isOpenCreateModal,
        SHOW_UPDATE_MODAL: (state) => state.isOpenUpdateModal,
        SHOW_DELETE_MODAL: (state) => state.isOpenDeleteModal,
        GET_EMPLOYEES: (state) => state.employees,
        GET_ID: (state) => state.employee.id,
        GET_LASTNAME: (state) => state.employee.lastname,
        GET_FIRSTNAME: (state) => state.employee.firstname,
        GET_NUMBER: (state) => state.employee.number,
    },

    mutations: {
        SET_SHOW_CREATE_MODAL: (state) => state.isOpenCreateModal = true,
        SET_HIDE_CREATE_MODAL: (state) => state.isOpenCreateModal = false,
        SET_SHOW_UPDATE_MODAL: (state) => state.isOpenUpdateModal = true,
        SET_HIDE_UPDATE_MODAL: (state) => state.isOpenUpdateModal = false,
        SET_SHOW_DELETE_MODAL: (state) => state.isOpenDeleteModal = true,
        SET_HIDE_DELETE_MODAL: (state) => state.isOpenDeleteModal = false,
        SET_EMPLOYEES: (state, data) => state.employees = data,
        SET_EMPLOYEE: (state, employee) => state.employee = employee,
        SET_ID: (state, employee) => state.employee.id = employee,
        SET_LASTNAME: (state, employee) => state.employee.lastname = employee,
        SET_FIRSTNAME: (state, employee) => state.employee.firstname = employee,
        SET_NUMBER: (state, employee) => state.employee.number = employee,
        SET_ADD_EMPLOYEE: (state, employee) => {
            state.employees.unshift({
                lastname: employee.lastname,
                firstname: employee.firstname,
                number: employee.number
            })
        },
        SET_EMPLOYEE_DATA: (state, employee) => {
            state.employee.id = employee.id
            state.employee.lastname = employee.lastname
            state.employee.firstname = employee.firstname
            state.employee.number = employee.number
        },

        UPDATE_EMPLOYEE: (state, update) => {
            const idx = state.employees.findIndex(employee => employee.id === update.id)

            if (idx !== -1) {
                state.employees.splice(idx, 1, update)
            }
        }
    },

    actions: {
        async getEmployees({ commit }) {
            const response = await axios.get('http://127.0.0.1:8000/api/v1/employees/')
            commit('SET_EMPLOYEES', response.data)
        },

        async createEmployee({ commit }, employee) {
            const response = await axios.post('http://127.0.0.1:8000/api/v1/employees/', employee)
            commit('SET_ADD_EMPLOYEE', response.data)
        },

        async updateEmployee({ commit }, employee) {
            const response = await axios.put(`http://127.0.0.1:8000/api/v1/employees/${employee.id}/`, employee)
            commit('UPDATE_EMPLOYEE', response.data)
        },

        async deleteEmployee({ dispatch }, employee) {
            const response = await axios.delete(`http://127.0.0.1:8000/api/v1/employees/${employee.id}/`, employee)
            dispatch('getEmployees', response.data)
        }
    }
})
  • Вопрос задан
  • 133 просмотра
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
logdog90
@logdog90 Автор вопроса
Прошу прощения не дописал ещё компонент модального окна!

modal.vue
<template>
    <transition name="fade">
        <div class="fixed top-0 left-0 w-full h-full z-10 flex justify-center items-center transition duration-300 ease-out"
            v-if="SHOW_UPDATE_MODAL"
        >
            <div 
                class="fixed top-0 left-0 w-full h-full bg-bgOverLey"
                @click="SET_HIDE_UPDATE_MODAL"
            >
            </div>
            <div class="z-20 px-3 py-14 w-1/3 bg-white shadow-shadowForm relative rounded-lg model-content">
                <button 
                    class="absolute top-1 right-1 focus:outline-0"
                    @click="SET_HIDE_UPDATE_MODAL"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                        class="bi bi-x fill-grey hover:fill-closeColor transition duration-1000 ease-out"
                        viewBox="0 0 16 16">
                        <path
                            d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                    </svg>
                </button>
                <form class="modal-form" @submit.prevent="updateEmployee(employee)">
                    <div class="py-2">
                        <input 
                            type="text" 
                            placeholder="Фамилия" 
                            class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                            v-model="lastname"
                        >
                        <input 
                            type="text" 
                            placeholder="Имя" 
                            class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                            v-model="firstname"
                        >
                        <input 
                            type="number" 
                            placeholder="Внутрнний" 
                            class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                            v-model="number"
                        >
                    </div>
                    <button 
                        class="focus:outline-0 bg-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out"
                    >Изменить</button>
                </form>
            </div>
        </div>
    </transition>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'

export default {
    name: 'EmployeeModalUpdate',

    methods: {
        ...mapMutations(['SET_HIDE_UPDATE_MODAL', 'SET_ID', 'SET_LASTNAME', 'SET_FIRSTNAME', 'SET_NUMBER', 'SET_EMPLOYEES']),
        ...mapActions(['updateEmployee']),

        // Редактировать

    },

    computed: {
        ...mapGetters(['SHOW_UPDATE_MODAL']),


        employee() {
            return this.$store.state.employee
        },

        id: {
            get() {
                return this.$store.getters.GET_ID
            },
            set(employee) {
                return this.SET_ID(employee)
            }
        },

        lastname: {
            get() {
                return this.$store.getters.GET_LASTNAME
            },
            set(employee) {
                return this.SET_LASTNAME(employee)
            }
        },

        firstname: {
            get() {
                return this.$store.getters.GET_FIRSTNAME
            },
            set(employee) {
                return this.SET_FIRSTNAME(employee)
            }
        },

        number: {
            get() {
                return this.$store.getters.GET_NUMBER
            },
            set(employee) {
                return this.SET_NUMBER(employee)
            }
        },

    },
}
</script>

<style lang="sass">
.fade-enter-active
    opacity: 0

.fade-leave-active
    opacity: 0
</style>


Проблема решена. В файле store.js, в аргументе нужно было передать id

store.js
actions: {
    async updateEmployee({ commit }, id, employee) {
        const response = await axios.put(`http://127.0.0.1:8000/api/v1/employees/${id}/`, employee )
        commit('SET_EMPLOYEES', response.data)
    }
}


А также в компоненте form.vue, когда submit-им форму, тоже передаём этот аргумент

form.vue
<form class="modal-form" @submit.prevent="updateEmployee(id, employee)">
        <div class="py-2">
            <input type="text" placeholder="Фамилия" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="lastname">
            <input type="text" placeholder="Имя" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="firstname">
            <input type="number" placeholder="Внутрнний" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="number">
        </div>
        <button
            class="focus:outline-0 bg-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out">Изменить</button>
    </form>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик VUE (Senior, Middle+)
SOFT DIVISION • Ярославль
от 150 000 до 300 000 ₽
Fullstack-разработчик (Python, Vue, Nuxt)
Finder
от 200 000 до 300 000 ₽
Fullstack разработчик (Laravel+Vue)
Данафлекс • Казань
от 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сверстать тапалку по типу NOTCOIN или BLUM
18 мая 2024, в 09:30
5000 руб./за проект
Доделать фронтенд некоммерческой платформы для студентов МГУ
18 мая 2024, в 08:49
5000 руб./за проект
Адаптировать готовый шаблон на react по макету из Figma
18 мая 2024, в 08:16
100000 руб./за проект
Ещё заказы