Автор оригинала: Codementor Team.
Эта статья является второй частью создания приложения CRUD с Express и MongoDB. Мы собираемся глубоко рисковать в последние две операции, которые не были покрыты первой частью – обновление и удалением.
Примечание: это первоначально опубликовано автором на его блог Отказ Этот пост был отредактирован для ясности, а некоторые детали могут появиться отличаться от исходного поста.
Без дальнейшего ADO давайте начнем вторую часть.
Crud – Update.
Обновить Операция используется, когда вы хотите что-то изменить. Это может быть вызвано только браузерами через Поставить запрос. Как Пост Запрос, Поставить Запрос может быть запущен через JavaScript или через <ФОРМА> элемент.
Давайте попробуем запускать Поставить Запрос через JavaScript на этот раз мы уже узнали, как запустить запрос через <ФОРМА> Элемент во время прохождения пост-запроса в Предыдущая статья Отказ
Для целей этого учебника мы собираемся создать кнопку, которая при нажатии на нажатие, заменит последнюю цитату, написанную Master yoda с цитатой, написанной DARTH VADAR.
Для этого мы впервые добавляем кнопку в файл index.ejs:
Replace last quote written by Master Yoda with a quote written by Darth Vadar
Мы также собираемся создать внешний файл JavaScript для выполнения Поставить Запрос, когда кнопка нажала. Согласно конвенциям Express, этот файл размещен в папке, называемой публичной:
$ mkdir public $ touch public/main.js
Тогда мы должны сказать Express, чтобы сделать эту общедоступную папку доступной для публики, используя встроенные промежуточные программы Express.Static
app.use(express.static('public'))
Как только это сделано, мы можем добавить файл main.js в файл index.ejs:
Далее мы собираемся отправить Поставить Запрос, когда нажата кнопка:
// main.js
var update = document.getElementById('update')
update.addEventListener('click', function () {
// Send PUT Request here
})
Самый простой способ вызвать Поставить Запрос в современных браузерах – использовать Fetch API Отказ Он поддерживается только на Firefox, Chrome и Opera, так что вы можете использовать Polyfill Если вы хотите использовать Fetch на реальном проекте.
Мы собираемся отправить запрос на следующую выборку на сервер. Посмотрите на это, и я объясню, что это означает:
fetch('quotes', {
method: 'put',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
'name': 'Darth Vader',
'quote': 'I find your lack of faith disturbing.'
})
})
Готов понять, почему запрос Fetch написан таким образом?
Приветствует два параметра. Первый параметр это путь. В этом случае мы отправляем запрос на /цитата , который будет обрабатываться на нашем сервере.
Второй параметр , Варианты , является дополнительным объектом, который позволяет управлять несколькими различными настройками. Те, которые мы использовали выше, являются Метод , Заголовки и Тело Отказ
Метод простой. Мы устанавливаем Метод к поставить Потому что мы отправляем запрос на поставку.
Заголовки Здесь относится к HTTP заголовки Вы хотите отправить на сервер. Это объект с несколькими парами ключа-значений.
Тело Относится к содержимому, которое вы отправляете на сервер.
Одна вещь, которую вы можете заметить, это то, что мы установили Content-Type к Приложение/JSON Отказ Мы также преобразовали цитату Дарта Вадар в JSON в организме с Json.stringify Отказ Мы делаем эти шаги, потому что мы отправляем цитату Дарта Вадар в формате JSON (стандартный формат для отправки информации в Интернете) на сервер.
К сожалению, наш сервер еще не читает данные JSON. Мы можем научить его читать данные JSON, используя bodyparser.json () промежуточное программное обеспечение:
app.use(bodyParser.json())
Как только мы сделали все выше, мы сможем справиться с этим запросом, используя поставить Метод:
app.put('/quotes', (req, res) => {
// Handle put request
})
Затем следующий шаг, чтобы научиться искать последнюю цитату Master yoda и изменить его в цитату Дарта Вадаром в MongoDB.
Обновление коллекции в Mongodb
Коллекции MongoDB поставляются с методом под названием Yinkoneanduppdate Это позволяет нам изменить один элемент из базы данных. Требуется четыре параметра – Запрос , Обновить , Варианты и а Обратный вызов Отказ
db.collections('quotes').findOneAndUpdate(
query,
update,
options,
callback
)
Первый параметр , Запрос Позволяет отфильтровать коллекцию через пары ключевых значений, приведенных ему. Мы можем отфильтровать коллекцию кавычек для кавычек Master Yoda, установив имя в Йоду.
{
name: 'Yoda'
}
Второй параметр , обновите, рассказывает MongoDB Что делать с Обновить запрос. Он использует операторы обновления MongoDB, такие как $ set , $ Inc и $ push Отказ Мы будем использовать $ set Оператор с тех пор, как мы меняем цитаты Йоды в цитаты Дарта Вадар:
{
$set: {
name: req.body.name,
quote: req.body.quote
}
}
Третий параметр , Варианты , является необязательным параметром, который позволяет вам определить дополнительные вещи. Поскольку мы ищем последнюю цитату Йода, мы настроим Сортировать в пределах вариантов до {_id: -1} Отказ Это позволяет MongoDB искать по базе данных, начиная с новейшей записи.
{
sort: {_id:-1}
}
Есть возможность того, что в нашей базе данных нет каких-либо цитат. Mongodb ничего не делает по умолчанию, когда это произойдет. Мы можем заставить его создать новую запись, если мы установим Упсерт Опция, что означает вставку (или сохранить), если нет записей, к true:
{
sort: {_id: -1},
upsert: true
}
Окончательный параметр – это функция обратного вызова Это позволяет вам сделать что-то, когда Mongodb заменил окончательную цитату Йода с цитатой Darth Vadar. В этом случае мы можем отправить результаты обратно в запрос Fetch.
(err, result) => {
if (err) return res.send(err)
res.send(result)
}
Вот весь Yinkoneanduppdate Команда мы записали на предыдущие несколько шагов:
app.put('/quotes', (req, res) => {
db.collection('quotes')
.findOneAndUpdate({name: 'Yoda'}, {
$set: {
name: req.body.name,
quote: req.body.quote
}
}, {
sort: {_id: -1},
upsert: true
}, (err, result) => {
if (err) return res.send(err)
res.send(result)
})
})
Теперь, когда кто-то нажимает на кнопку обновления, браузер отправит Поставить Запрос через привлечение на наш экспресс-сервер. Затем сервер отвечает, отправив измененную цитату обратно в Fetch. Затем мы можем справиться с ответом внутри, цепляется извлекать с Тогда метод. Это возможно, потому что Fetch возвращает Обещание объект.
Правильный путь к Проверьте, успешно ли Fetch разрешена это использовать Хорошо Способ на объекте ответа. Вы можете тогда return res.json () Если вы хотите прочитать данные, которые были отправлены с сервера:
fetch({ /* request */ })
.then(res => {
if (res.ok) return res.json()
})
.then(data => {
console.log(data)
})
Если вы работаете над модным веб-приложением, это часть, в которой вы используете JavaScript для обновления DOM, чтобы пользователи могли немедленно увидеть новые изменения. Обновление DOM отсутствует из объема этой статьи, поэтому мы просто собираемся обновить браузер, чтобы увидеть изменения.
fetch({ /* request */ })
.then(res => {
if (res.ok) return res.json()
})
.then(data => {
console.log(data)
window.location.reload(true)
})
Вот это для Создать Операция! Давайте перейдем к финалу – Удалить Отказ
Crud – Удалить
Удалить Операция может быть вызвана только через Удалить запрос. Это похоже на Обновить Запрос, так что просто, если вы понимаете, что мы сделали ранее.
Для этой части, давайте учимся удалять первую цитату Дарта Vader. Для этого мы сначала придется добавить кнопку для index.ejs файл.
Delete Darth Vadar's first quote
Затем мы проверим Удалить Запрос через привлечение, когда нажата кнопка Удаления:
var del = document.getElementById('delete')
del.addEventListener('click', function () {
fetch('quotes', {
method: 'delete',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'name': 'Darth Vader'
})
})
.then(res => {
if (res.ok) return res.json()
}).
then(data => {
console.log(data)
window.location.reload()
})
})
Затем мы можем обрабатывать событие на нашей стороне сервера с Удалить Метод:
app.delete('/quotes', (req, res) => {
// Handle delete event here
})
Удаление записи в MongoDB
Коллекции MongoDB поставляются с методом под названием Yinkoneandddelete Это позволяет нам удалить один элемент из базы данных. Это требует трех параметров – Запрос , Варианты и а Обратный вызов Отказ Эти параметры точно такие же, как и те, которые мы использовали в Yinkoneanduppdate При обновлении записи в MongoDB. Единственная разница вот в том, что нет в разных вариантах.
db.collections('quotes').findOneAndDelete(
query,
options,
callback
)
Помните, что мы пытаемся удалить первую цитату Дарта Vader. Для этого мы отфильтровали коллекцию кавычек по имени, «Дарт Вадир». Запрос Параметр, следовательно:
{
name: req.body.name
}
Мы можем пропустить Варианты Параметр, так как мы не должны поменять порядок сортировки. Затем мы можем отправить ответ на запрос Fetch в функции обратного вызова.
(err, result) => {
if (err) return res.send(500, err)
res.send('A darth vadar quote got deleted')
})
Полный код для обработчика удаления выглядит следующим образом:
app.delete('/quotes', (req, res) => {
db.collection('quotes').findOneAndDelete({name: req.body.name},
(err, result) => {
if (err) return res.send(500, err)
res.send('A darth vadar quote got deleted')
})
})
Теперь, когда кто-то нажал на кнопку удаления, браузер отправит Удалить Запрос через привлечение на наш экспресс-сервер. Затем сервер отвечает, отправив либо ошибку, либо сообщение.
Как и прежде, мы можем перезагрузить сайт, когда Fetch успешно завершена.
fetch({ /* request */ })
.then(res => {
if (res.ok) return res.json()
})
.then(data => {
console.log(data)
window.location.reload(true)
})
Вот это для Удалить Операция!
Обертывание
Теперь вы узнали все, что вам нужно знать о создании простых приложений с узлом и MongoDB. Теперь идите и создайте больше приложений, молодой падаван. Да пребудет с тобой сила.
Авторское био.
Zell – внештатный веб-разработчик из Сингапура. Он проводит все свое свободное время, выяснение, как легко использовать инструменты и рамки, и делится всем, что он узнал на его Блог Отказ Он также создал как CSS, так и для JavaScript, таких как Изучение Сьюзи и Автоматизация вашего рабочего процесса