NodeJS (Express) - маршрут app.delete не работает
Работа над пониманием основ CRUD с настройкой простых маршрутов из моего документа HTML5 в базу данных Postgres. Мои кнопки GET и POST работают, но мой DELETE не удаляется из моей базы данных. Я понимаю, что все маршруты очень похожи (и попытался переименовать их, чтобы посмотреть, попадет ли он в функцию обратного вызова, связанную с базой данных, но это не сработало). Может ли кто-нибудь сказать мне, почему моя форма HTML5 не работает с моим маршрутом для доступа к базе данных для УДАЛЕНИЯ? Спасибо!
Я буду включать только тот код, о котором я говорю, так как весь остальной код у меня работает хорошо. Начнем с показа дрянного HTML, затем index.js с маршрутами, а затем query.js с запросами к базе данных. (////// отделяем документы, в которых вытаскивают код :))
<h1>Let's DELETE ONE Human</h1>
<form action = "/users/:id" method = "delete">
ID:<input type = "number" name = "id">
<input type = "submit" name = "">
</form>
/////////////////////////////////////////////////////////////////
app.get('/', (request, response) => {
response.sendFile(path.join(__dirname + '/html/homepage.html'))
}, db.getUsers)
app.get('/newHuman.html', (request, response) => {
response.sendFile(path.join(__dirname + '/html/newHuman.html'))
})
app.get('/users', db.getUsers)
app.get('/users/:id', db.getUserById)
app.post('/users', db.createUser)
app.put('/users/:id', db.updateUser)
app.delete('/users/:id', db.deleteUser)
app.listen(port, () => {
console.info(`App running on port ${port}.`)
})
////////////////////////////////////////////////////////////////////////
const deleteUser = (request, response) => {
const id = parseInt(request.query.id)
pool.query('DELETE FROM users WHERE id = $1', [id], (error, results) => {
if (error) {
throw error
}
response.status(200).send(`User deleted with ID: ${id}`)
})
}
TL; DR
Как я могу отправить по правильному маршруту (даже если дважды выполнить POSTing) из моего HTML-кода, если у app.delete и app.put один и тот же маршрут? Пробовал переименовать маршрут, не сработало, но я знаю, что вам не нужно переименовывать, чтобы он работал. Вот маршруты:
app.put ('/ пользователи /: идентификатор', db.updateUser) app.delete ('/ пользователи /: идентификатор', db.deleteUser)
Привет, голеньки! Спасибо за отличный ответ. Если бы я должен был использовать POST для методов DELETE и PUT, как бы я мог указать маршрут, не меняя имена маршрутов? Как видите, POST подойдет, но маршрут для добавления и удаления будет иметь одно и то же имя. app.post ('/ users', db.createUser) app.put ('/ users /: id', db.updateUser) app.delete ('/ users /: id', db.deleteUser) Мысли? Спасибо!
Ответы 2
Метод HTML-формы поддерживает только методы GET и POST.
Либо вам нужно использовать GET или POST, либо вы можете использовать ajax или какую-либо библиотеку, такую как request или аксиомы, чтобы сделать запрос DELETE.
Например, если вы используете axios, попробуйте следующий код.
Игнорируйте импорт jQuery и axios, если вы уже импортировали их.
<!-- import jQuery -->
<script
src = "https://code.jquery.com/jquery-3.3.1.js"
integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = "
crossorigin = "anonymous"></script>
<!-- import axios -->
<script src = "https://unpkg.com/axios/dist/axios.min.js"></script>
<h1>Let's DELETE ONE Human</h1>
<form id='myFormId' action = "/users/:id" method = "delete">
ID:<input type = "number" name = "id" id='deleteId'>
<input type = "submit" name = "">
</form>
<script>
$( document ).ready(function() {
const myForm = $('#myFormId');
myForm.submit((event) => {
event.preventDefault();
const id = $('#deleteId').val();
const url = `/users/${id}`;
axios.delete(url)
.then(function (response) {
console.info(response);
})
.catch(function (error) {
console.info(error);
});
});
});
</script>
Когда я использовал GET или POST, проблема была такая же, как и при наличии DELETE в качестве метода html. Он попал в маршрут app.get для '/ users /: id', потому что он идентичен маршруту для app.delete. Как указать маршрут? Я попытался изменить название маршрута, но это не сработало.
Я обновил ответ примером запроса на удаление, используя библиотеку axios. Пожалуйста, проверь это.
Другой более простой способ сделать это - использовать модуль npm под названием переопределение метода.
В вашем основном файле точки входа для вашего сервера добавьте следующие строки:
const express = require('express');
const app = express();
const methodOverride = require('method-override');
app.use(methodOverride('_method'));
Теперь в HTML-форме вы можете легко использовать запросы PUT или DELETE: Например:
<h1>Let's DELETE ONE Human</h1>
<form id='myFormId' action = "/users/:id?_method=DELETE" method = "delete">
ID:<input type = "number" name = "id" id='deleteId'>
<input type = "submit" name = "">
</form>
Обратите внимание на атрибут действия формы, все, что вам нужно сделать, это добавить эту простую строку, и все готово!
Вы не можете использовать удаление в формах HTML5, потому что они официально не являются частью стандарта формы. Рассмотрите возможность использования POST в качестве туннеля, то есть внутреннего перенаправления почтовых операций на операцию удаления на стороне сервера. Подробнее см. softwareengineering.stackexchange.com/questions/114156/….