Создание простого приложения CRUD с узлом, Express и MongoDB

Автор оригинала: Zell Liew.

Я наконец понял, как работать с узлом, Express и MongoDB. Я хочу написать комплексный учебник, чтобы вам не придется пройти через ту же головную боль, через которую я прошел.

Crud, Express and Mongodb

Crud, Express and Mongodb – это крупные слова для человека, который никогда не касался программирования на стороне серверов в своей жизни. Давайте быстро введем то, что они, прежде чем мы погрузиться в учебное пособие.

Экспресс является основой для создания веб-приложений на вершине Node.js Отказ Это упрощает процесс создания сервера, который уже доступен в узле. Если вам было интересно, узел позволяет использовать JavaScript в качестве языка сервера.

Монгодб это база данных Отказ Это место, где вы храните информацию для ваших сайтов (или приложений).

Crud это аббревиатура для создания, чтения, обновления и удаления Отказ Это набор операций, которые мы получаем серверы для выполнения ( Post , Get , поставить и Удалить запросы соответственно). Это то, что делает каждая операция:

Создать (пост) – Сделай что нибудь
Читать (получить) – Получить что-то
Обновление (поставить) – Измени что-нибудь
Удалить (удалить) – Удалите что-нибудь

Пост , Получить , Поставить и Удалить Запросы позволяют построить Отдых API Отказ

Если мы поставим Crud, Express и Mongodb вместе в одну диаграмму, это то, что он выглядел:

Crud, Express and Mongodb имеет больше смысла для вас сейчас?

Отлично. Давайте двигаться дальше.

Мы построим простое приложение вместе

Давайте построим простое приложение, которое позволяет вам отслеживать список цитат из персонажей Star Wars. Вот что похоже:

Добавьте CSS, чтобы сделать приложение лучше.

Бесплатно бесплатно, чтобы проверить Демо прежде чем продолжить с этим руководством.

Эта статья длинная! Не забудьте Возьмите исходный код, оставив свое имя и адрес электронной почты в этой форме Отказ Я также отправлю вам эту статью в PDF, чтобы вы могли прочитать его на досуге.

Кстати, я не собираюсь сосредоточиться на стилях, так как мы сосредоточимся к обучению Crud, Express и Mongodb в этом руководстве.

Предпосылки

Вам понадобится две вещи для начала работы с этим руководством:

Чтобы проверить, если у вас установлен узел, откройте свою командную строку и запустите следующий код:

$ node -v

Вы должны получить номер версии, если у вас установлен узел. Если вы этого не сделаете, вы можете установить узел либо, загрузив установщик из Сайт узла Или загрузка через менеджеров пакетов, таких как Домашний вид (Mac) и Шоколад (Windows).

Начиная

Начните с создания папки для этого проекта. Не стесняйтесь называть это все, что вы хотите. После того, как вы создали папку, перейдите к нему с помощью терминала и запустите NPM init Отказ

NPM init создает Package.json Файл, который помогает вам управлять зависимостями (которые мы будем устанавливать, как мы проходим по учебнику).

$ npm init

Просто нажмите Enter через все, что появляется. Я поговорю о тех, которые вы должны знать, как мы идем.

Бегущий узел впервые в вашей жизни

Самый простой способ использовать узел – запускать Узел Команда и укажите путь к файлу. Давайте создадим файл под названием server.js запустить узел с.

touch server.js

Далее положите это console.log Заявление на server.js Отказ Это позволяет нам знать, работает ли узел правильно.

// server.js
console.log('May Node be with you')

Теперь запустите Node Server.js В вашей командной строке, и вы должны увидеть это:

Зарегистрировано может быть с вами узел.

Отлично. Узел работает. Следующим шагом является научиться использовать Express.

Использование Express.

Во-первых, мы должны установить Express. Мы можем сделать это, запустив NPM установить команда. ( NPM установлен с узлом, поэтому вы используете команды, такие как NPM init и NPM установить ).

Беги NPM Install Express --save Команда в вашей командной строке.

--save Флаг экономит Экспресс как зависимость в Package.json Отказ Важно знать эти зависимости, потому что NPM может получить зависимости с другим NPM установить Команда, когда вам это нужно позже.

npm install express --save

Далее мы используем Express в server.js требуя этого.

const express = require('express');
const app = express();

Нам нужно создать сервер, к которому могут подключиться браузеры. Мы делаем это, используя Express’s слушать метод.

app.listen(3000, function() {
  console.log('listening on 3000')
})

Теперь запустите Node Server.js и перейдите к localhost: 3000 на вашем браузере. Вы должны увидеть сообщение, которое говорит не может получить/ Отказ

Это хороший знак. Это значит Теперь мы можем сообщить на наш экспресс-сервер через браузер Отказ Это где мы начнем Crud операции.

Crud – Read

Браузеры выполняют Читать Операция при посещении веб-сайта. Под капотом они отправляют Получить Запрос на сервер, чтобы выполнить эту операцию чтения.

Вы видите не может получить/ Потому что наш сервер ничего не отправил в браузер.

В Express мы обращаемся к Получить Запрос с получить Метод:

app.get(endpoint, callback)

конечная точка это запрошенная конечная точка. Это значение, которое приходит после вашего доменного имени. Вот некоторые примеры:

Когда вы посетите localhost: 3000 Вы на самом деле посещаете localhost: 3000/ Отказ В этом случае браузеры запрашивали на / Отказ
Вы читаете эту статью о https://zellwk.com/blog/crud-express-mongodb/ Отказ Доменное имя – zellwk.com Отказ Запрашиваемая конечная точка – это все, что приходит после zellwk.com (который является /блог/Crud-Express-MongoDB ).

Обратный вызов Сообщите серверу, что делать, когда запрашиваемая конечная точка соответствует указанному конечной точке. Требуется два аргумента: A Запрос Объект и A ответ объект.

// We normally abbreviate `request` to `req` and `response` to `res`.
app.get('/', function (req, res) {
  // do something here
})

На данный момент, давайте напишем Здравствуйте, мир Вернуться к браузеру. Мы делаем это, используя Отправить Метод, который поставляется с ответ объект:

app.get('/', function(req, res) {
  res.send('Hello World')
})

Я собираюсь начать писать в код ES6 и показать вам, как конвертировать в ES6 по пути. Во-первых, я заменяю Функция () с ES6 Arrow Функция Отказ Нижний код такой же, как указанный выше код:

app.get('/', (req, res) => {
  res.send('Hello World')
})

Теперь перезапустите свой сервер, выполнив следующее:

Остановите текущий сервер, ударив Ctrl + C в командной строке.
Беги Node Server.js очередной раз.

Тогда перейдите к localhost: 3000 на вашем браузере. Вы должны увидеть строку, которая говорит «Hello World».

Отлично.

Далее, давайте изменим server.js Итак, мы служим вверх index.html Страница обратно в браузер. Для этого мы используем SendFile Метод, который предоставлен res объект.

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html')
  // Note: __dirname is directory current directory you're in. Try logging it and see what you get!
  // Mine was '/Users/zellwk/Projects/demo-repos/crud-express-mongo' for this app.
})

В SendFile Метод выше, мы сказали экспресс служить index.html Файл, который можно найти в корне папки проекта. У нас еще нет этого файла. Давайте сделаем это сейчас.

touch index.html

Давайте положим текст в нашем index.html файл также:





  
  MY APP


   May Node and Express be with you.

Перезапустите свой сервер и обновите свой браузер. Вы должны быть в состоянии увидеть ваш HTML-файл сейчас.

Вот как экспресс обрабатывает Получить Запрос ( Читать Операция) в двух словах.

На данный момент вы, вероятно, поняли, что вам нужно перезапустить свой сервер всякий раз, когда вы делаете изменения в server.js Отказ Это процесс невероятно утомительно, поэтому давайте сделаем быстрый объем и оптимизировать его, используя инструмент под названием Номемон Отказ

Введите Nodemon

Nodemon перезагружает сервер автоматически Когда вы сохраняете файл, который используется server.js Отказ Мы можем установить Nodemon со следующей командой:

$ npm install nodemon --save-dev

Мы используем --save-dev Флаг здесь, потому что мы используем только Nodemon, когда мы разрабатываем вещи. Мы не будем использовать Nodemon на настоящем сервере. --save-dev Здесь добавляет Nodeman как DevDependency В Package.json файл.

NodeMod ведет себя как узел. Так что вы можете запустить odemon server.js И вы ожидаете увидеть то же самое. К сожалению, это только работает, если вы установили Nademon глобально с -G Флаг (и мы этого не делали).

У нас есть другие способы бегать на узелке. Например, вы можете выполнить Nademon прямо из node_modules папка. Это Super Unwweyty, но это работает:

./node_modules/.bin/nodemon server.js

Мы можем сделать вещи проще, добавив Сценарий ключ в Package.json файл. Это позволяет нам работать odemon server.js Без ./node_modules ... преамбула.

{
  // ...
  "scripts": {
    "dev": "nodemon server.js"
  }
  // ...
}

Теперь вы можете запустить NPM запустить dev спусковать odemon server.js Отказ

Использует NPM RUN DEV для запуска Neademon Server.js

Вернуться к главной теме. Мы собираемся покрыть Создать операция дальше.

Crud – создать

Браузеры могут выполнять только Создать Операция, если они отправляют Пост Запрос на сервер. Это Пост Запрос может быть запущен через JavaScript или через <ФОРМА> элемент.

Давайте выясним, как использовать <ФОРМА> Элемент для создания новых записей для этой приложения цитаты Star Wars. Мы рассмотрим, как отправлять запросы через JavaScript позже.

Чтобы отправить запрос пост через <ФОРМА> , вам нужно добавить <ФОРМА> Элемент для вашего index.html файл.

Вам нужны три вещи на этой форме элемент:

Действие атрибут
А Метод атрибут
Имя атрибуты на каждом элементы в форме

Метод Рассказывает браузеры, какой запрос отправить. В этом случае мы используем Пост Потому что мы отправляем Пост запрос.

Действие Атрибут говорит браузеру, где отправлять Пост запрос. В этом случае мы отправляем Пост Запрос на /Цитаты Отказ

Мы можем справиться с этим Пост Запрос с пост Метод server.js Отказ путь путь должен быть значением, которое вы размещены в Действие атрибут.

app.post('/quotes', (req, res) => {
  console.log('Hellooooooooooooooooo!')
})

Перезапустите свой сервер (надеюсь, вы настроили Nademon, чтобы он автоматически перезагрузился) и обновляйте браузер. Затем введите что-то в <ФОРМА> элемент и отправьте форму. Далее посмотрите на вашу командную строку. Вы должны увидеть Hellooooooooooooooooo! в вашей командной строке.

В журналах Helloooooo в командной строке.

Отлично, мы знаем, что Экспресс обрабатывает форму для нас прямо сейчас. Следующий вопрос в том, как мы получаем входные значения с Express?

Оказывается, Express не обрабатывает данные чтения из <ФОРМА> Элемент на это собственное. Мы должны добавить другой пакет под названием Тело-парсер Чтобы получить эту функциональность.

npm install body-parser --save

Body-Parser – это промежуточное программное обеспечение Отказ Они помогают примирить Запрос объект, прежде чем мы их используем. Экспресс позволяет нам использовать промежуточное программное обеспечение с использовать метод.

const express = require('express')
const bodyParser= require('body-parser')
const app = express()

// Make sure you place body-parser before your CRUD handlers!
app.use(bodyParser.urlencoded({ extended: true }))

// All your handlers here...
app.get('/', (req, res) => {/*...*/})
app.post('/quotes', (req, res) => {/*...*/})

URLENCODED Метод в организме Body-Parser сообщает Body-Parser для извлечения данных из <ФОРМА> Элемент и добавьте их в Тело Недвижимость в Запрос объект.

Вы должны быть в состоянии увидеть значения из <ФОРМА> Элемент внутри req .body сейчас. Попробуйте сделать console.log И посмотрите, что это такое!

app.post('/quotes', (req, res) => {
  console.log(req.body)
})

Вы должны увидеть объект, аналогичный следующему:

Хм.

Мастер Йода говорил! Давайте убедимся, что мы помним слова Йоды. Это важно. Мы хотим иметь возможность получить его в следующий раз, когда мы загрузим нашу индексную страницу.

Введите базу данных, MongoDB.

Монгодб

MongoDB – это база данных. Мы можем хранить информацию в этой базе данных, чтобы запомнить слова Йоды. Затем мы можем получить эту информацию и отображать людям, которые просматривают наше приложение.

Я обычно пользуюсь Мангуст (который является основой для MongoDB), когда я использую MongoDB. Я научу вам использовать базовый MongoDB в этой статье. Если вы хотите выучить мангуста, подумайте об чтении Моя статья о мангусе Отказ

Во-первых, нам нужно установить MongoDB через NPM.

npm install mongodb --save

После установки мы можем подключиться к MongoDB через Mongoclient Способ подключения, как показано в коде ниже:

const MongoClient = require('mongodb').MongoClient

MongoClient.connect('mongodb-connection-string', (err, client) => {
  // ... do something here
})

Следующая часть – получить правильную ссылку в нашу базу данных. Большинство людей хранят свои базы данных о облачных услугах, таких как Монгодб Атлас Отказ Мы собираемся сделать так же хорошо. (Это бесплатно).

Настройка Mongodb Atlas

Идти вперед и Создайте учетную запись на Mongodb Atlas Отказ Как только вы закончите, вам нужно создать «организацию». Это как название компании. Вы можете назвать это все, что вы хотите. (Вы можете изменить его позже).

Вам также необходимо выбрать облачную службу. Идите вперед с Mongodb Atlas в этом случае.

Далее вам нужно установить разрешения для пользователей. MongoDB ATLAS автоматически заполнит ваш текущий адрес электронной почты в качестве пользователя. Так что просто продолжайте на следующий шаг.

Вы должны в конечном итоге с экраном, который выглядит так:

Далее необходимо создать базу данных в Mongodb Atlas. Есть несколько шагов, чтобы сделать это.

Во-первых, вам нужно создать новый проект. Вы можете сделать это, идя под «контекст» в верхнем левом меню. Нажмите на выпадку. Затем выберите новый проект.

Далее вам нужно будет назвать ваш проект. Назовите это все, что вы хотите. Я собираюсь назвать это Звездные войны Отказ

Затем вам нужно добавить участников. Опять же, вы уже добавлены, поэтому выйдите вперед и нажмите «Создать проект», чтобы двигаться дальше.

Вы должны в конечном итоге с экраном, который говорит, создайте кластер.

Нажмите на «Построить кластер». Вы должны увидеть этот экран:

Выберите бесплатный кластер (вариант левого) и продолжите. Теперь вы должны увидеть экран, чтобы настроить кластер. Прокрутить вниз. Убедитесь, что вы видите эти две вещи:

Кластерный уровень Sandbox M0
Ежемесячная оценка бесплатная

Нажмите на Create Cluster Далее. Вы должны увидеть «Ваш кластер создан».

Вы должны ждать примерно 5 минут для создания кластера. Когда кластер готов, вы увидите это:

Теперь нам нужно подключить приложение Star Wars с этим кластером.

Подключение к MongoDB ATLAS

Нажмите на кнопку Connect.

Модаль должен всплывать.

Вам нужно белить свой IP-адрес, прежде чем вы сможете подключиться к вашему кластеру. Это функция безопасности, встроенная в Mongodb Atlas. Продолжай и нажмите «Добавить текущий IP-адрес».

Далее вам нужно создать пользователя MongoDB. Это имя пользователя и пароль отличается от того, который вы использовали для войти в MongoDB ATLAS. Это имя пользователя и пароль используется только для базы данных.

Убедитесь, что вы помните пользователя MongoDB и пароль. Мы будем использовать его для подключения к базе данных.

Затем нажмите на выбрать метод подключения. Выберите «Подключиться к вашему приложению» и скопируйте строку подключения.

Строка подключения должна выглядеть что-то подобное:

'mongodb+srv://:@-rmp3c.mongodb.net/test?retryWrites=true&w=majority'

Вам нужно заменить 2 вещи здесь:

Заменить <Имя пользователя> С вашей базой данных имени пользователя
Заменить <пароль> С паролем пользователя базы данных

Тест В строке соединения указывает на Тест база данных. Вам нужно было бы заменить Тест С именем вашей базы данных, если вы используете Mongoose. Вы можете оставить это как Тест Если вы используете Mongocleient, как то, что мы делаем в этом руководстве.

Поместите эту соединительную строку внутри Mongoclient.connect Отказ

MongoClient.connect(connectionString, (err, client) => {
  // ... do something here
}))

Мы знаем, что мы подключились к базе данных, если нет ошибок. Давайте создадим console.log Заявление, которое говорит «подключен к базе данных». Это поможет нам знать, что мы подключены к базе данных, когда мы перезагрузим сервер.

MongoClient.connect(connectionString, (err, client) => {
  if (err) return console.error(err)
  console.log('Connected to Database')
})

Вы должны увидеть что-то вроде этого:

Вы можете удалить предупреждение амортизации, добавив опцию в Mongoclient.connect

MongoClient.connect(connectionString, {
  useUnifiedTopology: true
}, (err, client) => {
  if (err) return console.error(err)
  console.log('Connected to Database')
})

Соединение без амортизации предупреждение.

Монгодб поддерживает обещания. Если вы хотите использовать обещания вместо обратных вызовов, вы можете написать Mongoclient.connect как это. Это ведет себя точно так же, как код выше.

MongoClient.connect(connectionString, { useUnifiedTopology: true })
  .then(client => {
    console.log('Connected to Database')
  })
  .catch(error => console.error(error))

Читать Эта статья Если вы хотите узнать о обещаниях в JavaScript.

Изменение базы данных

Нам нужно изменить базу данных из Тест к чему-то другому. Вы можете назвать это все, что вы хотите. Я выбрал имя моей новой базы данных Звездные войны-цитаты Потому что это помогает мне помнить, что я строю.

MongoClient.connect(connectionString, { useUnifiedTopology: true })
  .then(client => {
    console.log('Connected to Database')
    const db = client.db('star-wars-quotes')
  })

Mongodb и сервер

Нам нужны дБ переменная от соединения до доступа MongoDB. Это означает, что нам нужно поставить обработчики экспресс-запроса в Mongoclient Тогда вызов.

MongoClient.connect(/* ... */)
  .then(client => {
    // ...
    const db = client.db('star-wars-quotes')
    app.use(/* ... */)
    app.get(/* ... */)
    app.post(/* ... */)
    app.listen(/* ... */)
  })
  .catch(console.error)

Наконец, мы можем наконец хранить цитату Йоды в базу данных сейчас!

Crud – создать (продолжение)

Нам нужно создать Коллекция Прежде чем мы сможем хранить элементы в базу данных. Вот простая аналогия, которая поможет вам очистить условия в MongoDB:

Представьте себе базу данных – это комната.
Номер содержит коробки ( Коллекции ).

Как базы данных, вы можете назвать коллекции все, что вы хотите. В этом случае давайте храним цитаты в Цитаты коллекция. Мы используем db.collection указать коллекцию.

MongoClient.connect(/* ... */)
  .then(client => {
    // ...
    const db = client.db('star-wars-quotes')
    const quotesCollection = db.collection('quotes')

    // ...
  })

Мы можем использовать Вставить Способ добавить элементы в коллекцию MongoDB.

app.post('/quotes', (req, res) => {
  quotesCollection.insertOne(req.body)
    .then(result => {
      console.log(result)
    })
    .catch(error => console.error(error))
})

Попробуйте отправлять <ФОРМА> из браузера. Вы должны увидеть большой страшный вид Результат в терминале.

Если вы видите это, поздравляю! Вы успешно добавляете цитату в базу данных.

Вы можете проверить элементы внутри базы данных, перейдя на «Коллекции» в Mongodb Atlas.

Вы должны увидеть документ в вашей базе данных. (Каждая запись базы данных называется документом).

Если вы вернетесь в браузер, вы увидите, что он все еще пытается что-то загрузить.

Браузер все еще пытается загрузить страницу.

Это происходит, потому что браузер ожидает что-то обратно с сервера.

В этом случае нам не нужно отправлять информацию о браузере. Давайте попросим браузер перенаправить обратно в / вместо. Мы делаем это с res.redirect Отказ

app.post('/quotes', (req, res) => {
  quotesCollection.insertOne(req.body)
    .then(result => {
      res.redirect('/')
    })
    .catch(error => console.error(error))
})

Перенаправлено. Браузер больше не ждет, чтобы что-то загрузить.

Ура!

Поскольку у нас есть некоторые цитаты в коллекции, давайте покажем их нашим пользователю, когда они приземляются на странице!

Показывая цитаты пользователей (чтение операции)

Нам нужно делать две вещи, чтобы показать цитаты от Mongodb Atlas для наших пользователей.

Получить цитаты от Mongodb Atlas.
Рендеринг цитат в HTML с шаблоном двигателя

Давайте пойдем на один шаг за раз.

Получение цитаты из MongoDB

Мы можем получить цитаты, которые мы хранили в Mongodb с Найти метод. Этот метод от MLAB с помощью Найти Метод, который доступен в Коллекция метод.

app.get('/', (req, res) => {
  const cursor = db.collection('quotes').find()
  console.log(cursor)
  // ...
})

Найти Метод возвращает Курсор Что не имеет смысла, если вы попытались войти в систему.

Но это Курсор Объект содержит все цитаты из нашей базы данных! Он имеет кучу метода, который позволяет нам получить наши данные. Например, мы можем использовать Toarray преобразовать данные в массив.

app.get('/', (req, res) => {
  db.collection('quotes').find().toArray()
    .then(results => {
      console.log(results)
    })
    .catch(error => console.error(error))
  // ...
})

Большой! Мы видим, что цитаты, которые мы добавили! (Вы видите так много одних и тех же цитат, потому что я добавил их все при написании этого учебника 😆).

Далее мы хотим создать HTML, который содержит все наши цитаты.

Рендеринг HTML.

Мы не можем служить на index.html Файл и ожидайте, что цитаты магически появляются, потому что нет способа добавить динамический контент в файл HTML.

Вместо этого мы можем сделать, это использовать двигатель шаблона для генерации HTML. Популярные шаблонные двигатели включают Мопс , Встроенный JavaScript и Nunjucks Отказ

Я широко писал о том, как и почему шаблонные двигатели в Отдельный пост Отказ Возможно, вы захотите проверить, если вы понятия не имеете, какие шаблонные двигатели.

Я использую Nunjucks как мой шаблонный двигатель выбора. Не стесняйтесь проверить пост, чтобы узнать, почему.

Для этого учебника мы будем использовать Встроенный JavaScript (EJS) как наш шаблон двигатель, потому что это самый простой для начала. Вы найдете его знакомым от Get-Go, поскольку вы будете писать HTML и JavaScript.

Использование EJS.

Во-первых, нам нужно установить EJS.

npm install ejs --save

Далее нам нужно установить Просмотр двигателя к EJS Отказ Это говорит express Мы используем EJS в качестве двигателя шаблона. Вам может потребоваться разместить его перед любым app.use , app.get или app.post методы.

app.set('view engine', 'ejs')

// Middlewares and other routes here...

Теперь мы можем генерировать HTML, который содержит цитаты Отказ Этот процесс называется рендеринг HTML.

Мы будем использовать оказывать Метод встроен в экспресс ответ Отказ Необходимо следовать следующему синтаксису:

res.render(view, locals)

Вид это имя файла, которое мы рендерируем. Этот файл должен быть размещен внутри Виды папка.
Местные жители данные передаются в файл.

Давайте создадим представление. Мы сделаем index.ejs Файл внутри папки Views.

mkdir views
touch views/index.ejs

Мы скопируем/вставьте все из index.html в index.ejs Отказ





  
    
    Star Wars Quote App
  

  
    May Node and Express be with you.

Далее мы будем использовать res.render Чтобы сделать это index.ejs файл.

app.get('/', (req, res) => {
  db.collection('quotes').find().toArray()
    .then(/* ... */)
    .catch(/* ... */)
  res.render('index.ejs', {})
})

Если вы обновите страницу, вы все еще должны увидеть то же самое. Ничто не должно измениться, ничего не должно сломаться.

Давайте поставим цитаты в index.ejs Отказ Для этого нам нужно пройти цитаты в оказывать метод.

app.get('/', (req, res) => {
  db.collection('quotes').find().toArray()
    .then(results => {
      res.render('index.ejs', { quotes: results })
    })
    .catch(/* ... */)
})

В index.ejs мы можем использовать переменные размещения между <% = и %> Теги. Давайте попробуем положить Цитаты в HTML:



   ... 
   ... 
  <%= quotes %>

Вы должны увидеть это:

Мы видим много [Объект объекта] Потому что каждая цитата внутри Результаты это объект JavaScript. EJS не может преобразовать этот объект в HTML автоматически.

Нам нужно петить через цитаты. Мы можем сделать это с для петля. В EJS мы пишем для цикла, например, как мы пишем JavaScript для петля. Единственное различие в том, что нам нужно поставить для Список петлей между <% и %> Отказ

 Quotes 


  
  <% for(var i = 0; i < quotes.length; i++) {%>
    
      
      <%= quotes[i].name %>:
      
      <%= quotes[i].quote %>
    
  <% } %>

Мы используем Обновить операция, когда мы хотим что-то изменить. Это может быть вызвано с помощью Поставить запрос. Как Пост , Поставить может быть вызван либо через JavaScript или через <ФОРМА> элемент.

Давайте переключаем вещи и используйте JavaScript, так как вы уже знаете, как использовать <ФОРМА> элементы.

Для этой операции обновления мы создадим кнопку, которая заменяет первую цитату Йода на что-то, написанное Darth Vadar.

Для этого нам нужно добавить кнопка в index.ejs файл:


  Darth Vadar invades!
  
    Replace first Yoda's quote with a quote written by Darth Vadar

Мы также создадим внешний файл JavaScript для выполнения Поставить запрос. Согласно экспресс-конвенциям, этот JavaScript хранится в папке под названием публичный

$ mkdir public
$ touch public/main.js

Тогда мы должны сказать Express, чтобы сделать это публичный Папка доступна для общественности с помощью встроенного промежуточного программного обеспечения под названием Express.Static

app.use(express.static('public'))

Теперь мы можем добавить main.js Файл к index.ejs файл:

Мы отправим Поставить Запрос при нажатии кнопки. Это означает, что нам нужно слушать Нажмите мероприятие.

Далее мы собираемся отправить Поставить Запрос, когда нажата кнопка:

// main.js
const update = document.querySelector('#update-button')

update.addEventListener('click', _ => {
  // Send PUT Request here
})

Отправка запроса на поставку

Самый простой способ вызвать Поставить Запрос в современных браузерах – использовать Fetch API Отказ

Fetch имеет следующий синтаксис:

fetch(endpoint, options)

В этом случае, скажем, мы хотим отправить запрос на /Цитаты Отказ Мы настроим конечная точка к /Цитаты Отказ

update.addEventListener('click', _ => {
  fetch('/quotes', {/* ... */})
})

Нам нужно отправить Поставить Запрос на этот раз. Мы можем сделать это, установив метод Fetch для поставить Отказ

update.addEventListener('click', _ => {
  fetch('/quotes', {
    method: 'put'
  })
})

Современные приложения Отправьте данные JSON на серверы. Они также получают данные JSON обратно на серверы. JSON означает для объекта JavaScript. Они как объекты JavaScript, но каждое свойство и значение записываются между двумя кавычками.

Вот пример данных JavaScript:

const data = {
  name: 'Darth Vadar',
  quote: 'I find your lack of faith disturbing.'
}

И что выглядит его json Counterpart. (Обратите внимание, как все обернуто между двумя " ).

{
  "name": "Darth Vadar",
  "quote": "I find your lack of faith disturbing."
}

Нам нужно сообщить серверу, мы отправляем данные JSON, установив Content-Type Заголовки к Приложение/JSON Отказ

update.addEventListener('click', _ => {
  fetch('/quotes', {
    method: 'put',
    headers: { 'Content-Type': 'application/json' },
  })
})

Далее нам нужно преобразовать данные, которые мы отправляем в JSON. Мы можем сделать это с Json.stringify Отказ Эти данные передаются через Тело имущество.

update.addEventListener('click', _ => {
  fetch('/quotes', {
    method: 'put',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: 'Darth Vadar',
      quote: 'I find your lack of faith disturbing.'
    })
  })
})

Принимая запрос на поставку

Наш сервер еще не принимает данные JSON. Мы можем научить его читать JSON, добавив Тело-парсер ‘s JSON промежуточное ПО.

app.use(bodyParser.json())

Далее мы можем справиться с Поставить Запрос с поставить метод. Вы должны иметь возможность увидеть значения, которые мы отправляем из запроса Fetch.

app.put('/quotes', (req, res) => {
  console.log(req.body)
})

Следующим шагом является изменить первую цитату Йоды на эту цитату Darth Vadar.

Изменение цитаты Йоды

Коллекции MongoDB поставляются с методом под названием Yinkoneanduppdate Отказ Этот метод позволяет нам найти и изменить один элемент в базе данных. Он имеет следующий синтаксис:

quotesCollection.findOneAndUpdate(
  query,
  update,
  options
)
  .then(result => {/* ... */})
  .catch(error => console.error(error))

Запрос Давайте фильтроваем коллекцию с парами ключа-значений. Если мы хотим фильтровать цитаты, написанные Йода, мы можем установить {name: 'yoda'} как запрос.

quotesCollection.findOneAndUpdate(
  { name: 'Yoda' },
  update,
  options
)
  .then(result => {/* ... */})
  .catch(error => console.error(error))

Обновить рассказывает MongoDB, что менять. Он использует MongoDB Обновление операторов как $ set , $ Inc и $ push Отказ

Мы будем использовать $ set Оператор с тех пор, как мы меняем цитаты Йоды в цитаты Дарта Вадар:

quotesCollection.findOneAndUpdate(
  { name: 'Yoda' },
  {
    $set: {
      name: req.body.name,
      quote: req.body.quote
    }
  },
  options
)
  .then(result => {/* ... */})
  .catch(error => console.error(error))

Варианты Сообщает Mongodb определить дополнительные варианты для этого запроса на обновление.

В этом случае возможно, что цитаты Yoda не существуют в базе данных. Мы можем заставить MongoDB создать новую цитату Дарта Вадар, если цитаты Yoda не существуют. Мы делаем это, установив Упсерт к правда Отказ Упсерт Средства: вставить документ, если документы не могут быть обновлены.

quotesCollection.findOneAndUpdate(
  { name: 'Yoda' },
  {
    $set: {
      name: req.body.name,
      quote: req.body.quote
    }
  },
  {
    upsert: true
  }
)
  .then(result => {/* ... */})
  .catch(error => console.error(error))

Наконец, давайте воспозим Результат в командную строку.

app.put('/quotes', (req, res) => {
  quotesCollection.findOneAndUpdate(/* ... */)
    .then(result => {
      console.log(result)
     })
    .catch(error => console.error(error))
}

Попробуйте нажать кнопку «Заменить первую цитату Йоды» в браузере. Вы должны увидеть этот результат в вашей командной строке. Это говорит, что мы изменили одну из цитаты Yoda.

Если вы обновите браузер, вы должны увидеть цитату Дарта Вейдера в качестве первой цитаты.

Проверка HTML после запроса на поставку.

Делает Yinkoneanduppdate выглядеть сложно вам? Ну, это сложно. Вот почему я использую мангуст вместо MongoDB. Вы можете узнать больше о Mongoose в Эта статья Отказ

Наконец, нам нужно ответить на JavaScript, который отправил Поставить запрос. В этом случае мы просто отправим Успех сообщение.

app.put('/quotes', (req, res) => {
  quotesCollection.findOneAndUpdate(/* ... */)
    .then(result => {
       res.json('Success')
     })
    .catch(error => console.error(error))
}

Далее мы можем справиться с ответом с сервера через Тогда объект. (Мы делаем это, потому что Fetch возвращает обещание). Однако выбор немного отличается от большинства обещаний. Вам нужно использовать другой Тогда объект, чтобы получить ответ с сервера.

Вот что вы должны сделать:

fetch({ /* request */ })
  .then(res => {
    if (res.ok) return res.json()
  })
  .then(response => {
    console.log(response)
  })

Вы должны увидеть Успех Сообщение с сервера в консоли.

Я написал Статья о Petch API Если вам интересно, почему нам нужно два Тогда звонки. Дайте это чтение! Это поможет цементировать ваше понимание.

Если вы работаете над вообразованием WebApp, вы можете использовать JavaScript для обновления DOM, поэтому пользователи немедленно видят новые изменения.

Однако обновление DOM не имеет возможности этой статьи, поэтому мы просто собираемся обновить браузер, чтобы увидеть изменения.

fetch({ /* request */ })
  .then(res => {
    if (res.ok) return res.json()
  })
  .then(response => {
    window.location.reload(true)
  })

Если вы хотите научиться использовать JavaScript для обновления DOM, я предлагаю пройти через мой Учите JavaScript курс. Я даже учу тебя, как сделать ваш интерфейс быстро и жрать! (Проверьте компонент TodoList).

Вот это для Обновить Операция! Давайте перейдем к удалению.

Crud – Удалить

Удалить Операция может быть вызвана через Удалить запрос. Это похоже на Обновить Запрос, поэтому это должно быть просто, если вы понимаете, что мы сделали выше.

Для этого давайте удалим первую цитату Дарта Vader.

Во-первых, нам нужно добавить кнопку удаления на index.ejs Отказ


  Remove Darth Vadar!
  
    Delete one Darth Vadar's quote. Does nothing if there are no more Darth
    Vadar's quote

Добавляет кнопку удаления в файл index.ejs.

Затем мы проверим Удалить Запрос через Fetch Когда пользователь нажимает кнопку Удалить.

const deleteButton = document.querySelector('#delete-button')

deleteButton.addEventListener('click', _ => {
  fetch('/quotes', {
    method: 'delete',
  })
})

Поскольку мы удаляем цитату Дарта Вейдера, нам нужно только отправить имя Дарта Вейдера на сервер.

deleteButton.addEventListener('click', _ => {
  fetch(/* ... */, {
    method: 'delete',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: 'Darth Vadar'
    })
  })
    .then(res => {
      if (res.ok) return res.json()
    })
    .then(data => {
      window.location.reload()
    })
})

Затем мы можем обрабатывать событие на нашей стороне сервера с Удалить Метод:

app.delete('/quotes', (req, res) => {
  // Handle delete event here
})

Удаление документа из MongoDB

Коллекции MongoDB имеют метод под названием DELETEONE Отказ Это позволяет нам удалить документ из базы данных. Требуется в два параметра: Запрос и Варианты Отказ

quotesCollection.remove(
  query,
  options
)
  .then(result => {/* ... */})
  .catch(error => console.error(error))

Запрос Работает как Запрос в Yinkoneanduppdate Отказ Это позволяет нам фильтровать коллекцию для записей, которые мы ищем. В этом случае мы можем установить Имя Дарту Вадар.

quotesCollection.remove(
  { name: 'Darth Vadar' },
  options
)
  .then(result => {/* ... */})
  .catch(error => console.error(error))

Однако, поскольку мы уже передаем имя Дарт Вадар От Fetch нам больше не нужно жесткокодировать его в экспресс. Мы можем просто использовать req.body.name Отказ

app.delete('/quotes', (req, res) => {
  quotesCollection.remove(
    { name: req.body.name },
    options
  )
})

В этом случае нам не нужно менять какие-либо варианты, поэтому мы можем опускать Варианты Отказ

app.delete('/quotes', (req, res) => {
  quotesCollection.deleteOne(
    { name: req.body.name }
  )
})

Затем мы можем отправить ответ на JavaScript в Тогда вызов.

app.delete('/quotes', (req, res) => {
  quotesCollection.deleteOne(
    { name: req.body.name }
  )
    .then(result => {
      res.json(`Deleted Darth Vadar's quote`)
    })
    .catch(error => console.error(error))
})

Теперь, когда вы нажимаете кнопку Удалить, браузер отправит Удалить Запрос через привлечение на наш экспресс-сервер. Затем сервер отвечает, отправив либо ошибку, либо сообщение.

Что если нет больше цитат Дарта Вейдера?

Если больше нет кавычек Дарта Вейдера, Результат.deletedCount будет 0 Отказ Мы можем отправить сообщение, которое говорит, что говорит браузеру, что нет больше цитатов Darth Vadar для удаления.

app.delete('/quotes', (req, res) => {
  quotesCollection.deleteOne(/* ... */)
    .then(result => {
      if (result.deletedCount === 0) {
        return res.json('No quote to delete')
      }
      res.json(`Deleted Darth Vadar's quote`)
    })
    .catch(error => console.error(error))
})

Если JavaScript получает Нет цитата для удаления Ответ, мы можем сказать пользователю, чтобы удалить цитату No Darth Vadar.

Для этого давайте добавим элемент, где мы можем сообщить пользователям об этом сообщении.

Если мы получим Нет цитата для удаления мы можем изменить TextContent этого .Мессаж девочка

const messageDiv = document.querySelector('#message')

deleteButton.addEventListener('click', _ => {
  fetch(/* ... */)
    .then(/* ... */)
    .then(response => {
      if (response === 'No quote to delete') {
        messageDiv.textContent = 'No Darth Vadar quote to delete'
      } else {
        window.location.reload(true)
      }
    })
    .catch(/* ... */)
})

Сообщение, если цитаты не могут быть удалены.

Вот это для Удалить Операция!

Сделать это лучше …

Последний шаг – заставить приложение выглядеть немного лучше, посыпая некоторые стили!

Обертывание

Мы много охватываем в этом мега-уроке. Вот список вещей, которые мы сделали вместе:

Понял, что экспресс, узел и Mongodb используются для
Понял Круд
Выполненные операции создают, чтение, обновление и удаление
Создан аккаунт ATLAS для Mongodb
Сохранить, прочитать, обновлять и удалить из MongoDB
Показать переменные данные с шаблонами

Теперь вы узнали все, что вам нужно знать о создании простых приложений с узлом, Express и MongoDB. Теперь идите и создайте больше приложений, молодой падаван. Да пребудет с тобой сила.

Возьмите исходный код

Вы можете получить исходный код, оставив свое имя и адрес электронной почты в этой форме. Я также отправлю вам эту статью в PDF, чтобы вы могли прочитать его на досуге.

дальнейшее чтение

Вот несколько дополнительных чтений, если вам интересно продолжить узел, Express, Mongodb Travel

Экспресс статей

Монгодб Статьи

Mongoose 101.

Тестирование связанных Статьи

Спасибо за прочтение. Эта статья была первоначально опубликована на мой блог Отказ Подпишись на Моя рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.