Создание простого приложения CRUD с Express и MongoDB (часть 1)

Автор оригинала: Codementor Team.

Это Первоначально опубликовано автором в своем блоге. Этот пост был отредактирован для ясности, а некоторые детали могут появиться отличаться от исходного поста.

Если вы знаете меня, вы бы знали, что начал узнавать о Интернете, не пройдя через какие-либо вычислительные курсы в университете ранее. Я не посмел долгое время выходить на серверное программирование на сервере в течение длительного времени из-за моего фона.

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

Через год я наконец понял, как работать с этими инструментами. Затем я решил написать всеобъемлющее учебное пособие, чтобы вам не придется пройти те же головную боль, через которую я прошел.

Crud, Express и Mongodb

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

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

Монгодб это база данных. Это место, где вы храните информацию для ваших веб-сайтов (или приложений). MongoDB и RETHINKDB часто сравниваются , может быть еще одна интересная тема для Devs, чтобы узнать больше о.

Crud это аббревиатура для создания, чтения, обновления и удаления. Это набор операций, которые мы получаем серверы для выполнения (post, get, put и delete соответственно). Это то, что делает каждую операцию:

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

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

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

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

Что мы строите

Мы собираемся создать приложение приложения Simple списка, которое позволяет отслеживать вещи в списке (например, как список Todo).

Ну, список тодо – это скучно. Как насчет того, чтобы мы составляем список цитат из звездных воротных персонажей? Потрясающе, не так ли? Не стесняйтесь сделать быстрый взгляд на Демо прежде чем продолжить с учебником. Также Это где Вы можете найти готовый код для приложения.

Кстати, что мы строим, не сексуальное приложение для одиноких страниц. Я не собираюсь подчеркивать на стилях.

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

1. Вы не боитесь печатать команды в оболочку. Проверьте Эта статья Если вы в настоящее время.
2. Вам нужно иметь Узел установлены.

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

    $ npm init

Начиная

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

Эта команда создает Package.json Файл, который помогает вам управлять зависимостями, которые мы устанавливаем позже в руководстве.

    $ npm init

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

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

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

    $ touch server.js

Когда выполнение server.js Файл, мы хотим убедиться, что он работает правильно. Чтобы сделать это, просто напишите console.log Заявление в server.js :

    console.log('May Node be with you')

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

Отлично. Давайте перейдем и узнаем, как использовать Express сейчас.

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

Сначала мы должны установить Express, прежде чем мы сможем использовать его в нашем приложении. Установка экспресс довольно легко. Все, что нам нужно сделать, это запустить команду установки с помощью узел пакета Manager (NPM), который поставляется в комплекте с узлом.

Запустите NPM Install Express --save Команда в вашей командной строке:

    $ npm install express --save

Как только вы закончите, вы должны увидеть, что NPM сохранил экспресс как зависимость в Package.json Отказ

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

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

Первое, что мы хотим сделать, это создать сервер, к которому могут подключаться браузеры. Мы можем сделать это с помощью слушать Способ предоставляется Express:

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

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

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

Crud – Read

Читать Операция выполняется браузерами, когда вы посещаете веб-страницу. Под капотом браузеры отправляют Получить Запрос на сервер для выполнения операции чтения. Причина, по которой мы видим ошибку «Невозможно получить/», потому что мы еще не отправим что-нибудь обратно в браузер с нашего сервера.

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

    app.get(path, callback)

Первый аргумент, путь , это путь запроса Get. Это все, что приходит после вашего доменного имени.

Когда мы посещаем localhost: 3000 Наши браузеры на самом деле ищут localhost: 3000/ Отказ Аргумент пути в этом случае это / Отказ

Второй аргумент является функцией обратного вызова Это говорит о сервере, что делать, когда путь соответствует. Принимает два аргумента, объект запроса и объекта ответа:

    app.get('/', function (request, response) {
      // do something here
    })

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

    app.get('/', function(req, res) {
      res.send('Hello World')
    })
    // Note: request and response are usually written as req and res respectively.

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

    app.get('/', (req, res) => {
      res.send('hello world')
    })

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

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

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

Отлично. Давайте изменим наше приложение, чтобы мы служим index.html Вместо этого верните страницу в браузер. Для этого мы используем SendFile Метод, который предоставлен res объект.

    app.get('/', (req, res) => {
      res.sendFile(__dirname + '/index.html')
      // Note: __dirname is directory that contains the JavaScript source code. 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 файл также:

    

    
    
      
      
    
    
      May Node and Express be with you.
    
    

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

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

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

Введите Nodemon

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

    $ npm install nodemon --save-dev

Примечание. Причина, по которой мы используем --save-dev Флаг здесь – потому что мы используем только для узел, когда мы развиваемся. Этот флаг спасет Nodemon как DevDependency В вашем Package.json файл.

Движение дальше, у Nodemon ведет себя точно так же, как узел, что означает, что мы можем запустить наш сервер, позвонив odemon server.js Отказ Однако мы не можем сделать это в командной строке прямо сейчас, потому что Nodemon не установлен с -G флаг.

Есть еще один способ бежать на уземе – мы можем выполнить Neademon из node_modules папка. Код выглядит так:

    $ ./node_modules/.bin/nodemon server.js

Это горстка для печата. Один из способов сделать это проще, состоит в том, чтобы создать Сценарий ключ в Package.json Отказ

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

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

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

Crud – создать

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

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

Для этого вы сначала должны создать <ФОРМА> Элемент и добавьте его к вашему index.html файл. Вам нужно иметь три вещи на этой форме элемента:

1. Действие атрибут
2. А Метод атрибут
3. И Имя Атрибуты на все <Ввод > Элементы в форме

    

      
      
      Submit
    

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

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

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

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

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

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

    $ npm install body-parser --save

Express позволяет нам добавлять Hindwaresares, как Body-Parser в наше приложение с использовать метод. Вы послушаете термин промежуточный программный программный программный программный программный программный программный посуду при работе с Express. Эти вещи в основном плагины, которые изменяют объект запроса или ответа, прежде чем они будут обрабатываться нашим приложением. Убедитесь, что вы размещаете Body-Parser перед вашими трудоустройствами!

    const express = require('express')
    const bodyParser= require('body-parser')
    const app = express()
    
    app.use(bodyParser.urlencoded({extended: true}))
    
    // All your handlers here...

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

Теперь вы сможете увидеть все в поле «Форма» в пределах req .body объект. Попробуйте сделать console.log И посмотрите, что это такое!

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

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

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

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

Монгодб

Сначала мы должны установить Mongodb через NPM, если мы хотим использовать его в качестве нашей базы данных.

    npm install mongodb --save

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

    const MongoClient = require('mongodb').MongoClient
    
    MongoClient.connect('link-to-mongodb', (err, database) => {
      // ... start the server
    })

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

Итак, продолжайте и создайте аккаунт с монголаб. (Это бесплатно). Как только вы закончите, создайте новое развертывание Mongodb и установите план на песочница Отказ

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

Наконец, возьмите URL Mongodb и добавьте его на Mongoclient.connect метод. Убедитесь, что вы используете свой пользователь базы данных и пароль!

    MongoClient.connect('your-mongodb-url', (err, database) => {
      // ... do something here
    })

Далее мы хотим запустить наши серверы только тогда, когда база данных подключена. Следовательно, давайте переместим app.listen в соединить метод. Мы также собираемся создать дБ Переменная, чтобы позволить нам использовать базу данных при обработке запросов из браузера.

    var db
    
    MongoClient.connect('your-mongodb-url', (err, database) => {
      if (err) return console.log(err)
      db = database
      app.listen(3000, () => {
        console.log('listening on 3000')
      })
    })

Мы закончили настроить MongoDB. Теперь давайте создадим Цитаты Коллекция для хранения цитат для нашего приложения.

Кстати, Коллекция – это названное место для хранения вещей Отказ Вы можете создать столько коллекций, сколько хотите. Это могут быть такие вещи, как «продукты», «цитаты», «продукты», или любые другие этикетки, которые вы выберете.

Мы можем создать Цитаты Сбор, используя строку Цитаты При звонке MongoDB db.collection () метод. Создавая коллекцию кавычек, мы также можем сохранить нашу первую запись в Mongodb с Сохранить метод одновременно.

Как только мы закончим, мы должны где-то перенаправлять пользователя (Или они будут застрять на нашему серверу, чтобы двигаться). В этом случае мы собираемся перенаправить их обратно в / , что заставляет их браузеры перезагружать.

    app.post('/quotes', (req, res) => {
      db.collection('quotes').save(req.body, (err, result) => {
        if (err) return console.log(err)
    
        console.log('saved to database')
        res.redirect('/')
      })
    })

Теперь, если вы ввели что-то в <ФОРМА> Элемент, вы сможете увидеть запись в вашей коллекции Mongodb.

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

Показывая цитаты пользователей

Мы должны сделать две вещи, чтобы показать цитаты, хранящиеся в Mongolab для наших пользователей.

1. Получить цитаты из Монголаба
2. Используйте шаблон двигатель для отображения цитат

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

Мы можем получить цитаты из Монголаба, используя Найти Метод, который доступен в Коллекция метод.

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

Найти Метод возвращает Курсор (Объект Mongo), который, вероятно, не имеет смысла, если вы console.log это из.

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

Toarray Метод принимает функцию обратного вызова, которая позволяет нам делать вещи с цитатами, которые мы восстановили из монголаба. Давайте попробуем делать console.log () По итогам и посмотрите, что мы получаем!

    db.collection('quotes').find().toArray(function(err, results) {
      console.log(results)
      // send HTML file populated with quotes here
    })

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

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

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

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

Мы можем использовать EJS, сначала установив его, затем установить Просмотр двигателя в выражении EJS Отказ

    $ npm install ejs --save

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

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

    res.render(view, locals)

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

Второй параметр, местные жители , это объект, который передает данные в представление.

Давайте сначала создадим index.ejs Файл в пределах Виды Папка, поэтому мы можем начать заполнять данные.

    mkdir views
    touch views/index.ejs

Теперь поместите следующий код в index.ejs Отказ

    

      <% for(var i=0; i
        

          <%= quotes[i].name %>
          <%= quotes[i].quote %>
        
      <% } %>
    

Посмотрите, что я имею в виду, когда я говорю, вы найдете это знакомым? В EJS вы можете написать JavaScript в … <% и %> Теги. Вы также можете выводить JavaScript как строки, если вы используете <% = и %> Теги.

Здесь вы можете увидеть, что мы в основном зацикливаемся через Цитаты Массив и создание строк с цитаты [я] .name и цитаты [я] .Quote Отказ

Еще одна вещь, прежде чем мы перейдем к index.ejs файл. Не забудьте скопировать <ФОРМА> элемент из index.html Файл в этот файл тоже. Полный index.ejs Файл до сих пор должен быть:

    

    
    
      
      
    
    
      May Node and Express be with you.
    
      

      <% for(var i=0; i
        

          <%= quotes[i].name %>
          <%= quotes[i].quote %>
        
      <% } %>
      
    
      

        
        
        Submit
      
    
    

Наконец, мы должны сделать это index.ejs файл при обработке Получить запрос. Здесь мы устанавливаем результаты (массив) как Цитаты Массив, который мы использовали в index.ejs выше.

    app.get('/', (req, res) => {
      db.collection('quotes').find().toArray((err, result) => {
        if (err) return console.log(err)
        // renders index.ejs
        res.render('index.ejs', {quotes: result})
      })
    })

Теперь обновите свой браузер, и вы сможете увидеть цитаты Master Yoda.

Гм. У вас есть только одна цитата, если вы следили за учебным поступлением на шаг до этого момента. Причина, по которой у меня есть несколько кавычек, заключается в том, что я молча добавил больше, как работал над приложением.

Обертывание

Мы покрывали много земли всего за 3000 слов. Вот несколько пуль, чтобы суммировать все это. У тебя есть…

• Создал экспресс-сервер
• Научился выполнять создание и чтение операций
• Научился сохранить и читать с MongoDB
• Научился использовать шаблон двигателя, такой как встроенные JS.

Есть еще две операции, но мы оставим его на следующий пост. Поймай тебя там!

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

Авторское био.

Zell – внештатный веб-разработчик из Сингапура. Он проводит все свое свободное время, выяснение, как легко использовать инструменты и рамки, и делится всем, что он узнал на его Блог Отказ Он также создал как CSS, так и для JavaScript, таких как Изучение Сьюзи и Автоматизация вашего рабочего процесса