Давайте станем стройными и злыми с помощью MEAN STACK!

В этом руководстве я шаг за шагом расскажу вам, как создать потрясающее приложение для обмена списками покупок, которое включает аутентификацию, сохранение пользовательского контента в вашей MongoDB с помощью Mongoose, все клиентские (интерфейсные) и серверные. -внутренняя (внутренняя) маршрутизация и некоторые интересные CSS-трюки с использованием UI-Bootstrap (Bootstrap для приложений Angular).

Что такое ЗНАЧЕНИЕ?

TL; DR - › MEAN Tech Stack: MongoDB, ExpressJS, AngularJS, NodeJS

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

Примечание. MEAN может означать разные технологические стеки для разных разработчиков, поэтому часто бывает полезно уточнить, что кто-то имеет в виду, когда говорит MEAN. Также возможно объединить вышеуказанный стек MEAN с другими технологиями, такими как React.

MongoDB: база данных NoSql, в которой хранятся данные в объектно-подобных документах. Поскольку данные хранятся в объектах, это означает, что объекты могут иметь все виды различных типов данных или даже иметь иерархию с вложенными объектами и т. Д. Некоторые документы в коллекции могут различаться и иметь некоторые или даже не иметь одинаковых типов свойств. как другие документы, хранящиеся в той же коллекции. Это полностью отличается от баз данных SQL, таких как MySql, где поля данных определены заранее схемой, и все они имеют фиксированную длину и тип. Mongoose (ORM для MongoDB) добавляет уровень абстракции, позволяющий выполнять запросы к MongoDB в очень английском стиле. (Мы узнаем подробности по мере реализации MongoDB.) Официальный сайт здесь. Подробнее о Mongoose здесь.

ExpressJS: сервер, построенный на основе NodeJS, позволяющий писать код на стороне сервера исключительно на Javascript без необходимости изучать какой-либо другой язык сценариев. Базовая настройка Express занимает буквально несколько минут. Node уже позволяет вам запустить сервер, но Express упрощает процесс с помощью более легкого кода. Express также позволяет использовать промежуточное программное обеспечение, которое, помимо прочего, упрощает управление различными маршрутами. Вкратце: он делает за вас большую часть тяжелой работы с точки зрения сложного кода узла и позволяет быстро настроить сервер, используя его простую структуру. Официальный сайт здесь.
Полезное знакомство с Express здесь.

AngularJS: широко популярный интерфейсный фреймворк MVC Javascript, созданный гениями Google. Есть много преимуществ использования Angular, но одно из моих любимых - это двусторонняя привязка данных, при которой в любое время данные изменяются где угодно, а ссылки на эти данные будут автоматически обновляться повсюду в приложении. Официальный сайт здесь.

NodeJS: серверная (внутренняя) платформа JS (хотя технически не определена как платформа). NodeJS позволяет создавать базовый веб-сервер и сетевые инструменты, а также набор готовых модулей, позволяющих обрабатывать основные функции. Люди, создавшие NodeJS, определяют его как среду выполнения JavaScript, основанную на движке JavaScript V8 в Chrome. NodeJS использует управляемую событиями неблокирующую модель ввода-вывода, что делает его легким и эффективным. Экосистема пакетов NodeJS, NPM, является крупнейшей экосистемой библиотек с открытым исходным кодом в мире ’. Перейдите «сюда для получения дополнительной информации.

MVC Framework: простой способ разбить код Javascript на раздел модели, который управляет данными, раздел просмотра, который отображает контент в браузере, и раздел контроллера, который содержит логику обработки изменений в данные и в результате управлять представлением.

Шаги по созданию MEAN веб-приложения

Хватит скучных вещей, давайте нырнем, ладно?

Что мы построим:

Ознакомьтесь с действующим развернутым веб-приложением здесь

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

Основные шаги, которые мы рассмотрим:

  1. Настройка узла / экспресс-сервера
  2. Настройка MongoDB / Mongoose для базы данных
  3. Создание внешнего интерфейса с помощью AngularJS и UI-Boostrap (CSS)

Некоторые предположения и предварительные условия перед началом:

  1. Вы должны знать, как использовать текстовый редактор, такой как SublimeText3 или Atom.
  2. Будьте удобны с Терминалом / CLI (строка cmd)
  3. Установите Node глобально в системе (перейдите на сайт Node, следуйте инструкциям)
  4. Иметь базовое понимание основ JavaScript, HTML, CSS.

Шаг 1. Настройка Node / Express Server

В этом разделе мы рассмотрим: установку зависимостей NPM, которые вам понадобятся, настройку ваших файловых каталогов, настройку промежуточного программного обеспечения и Маршрутизация и подготовка сервера Express Server к работе.

Часть A. Установка зависимостей NPM

  1. Создайте в корневой папке файл с именем package.json.
  2. В package.json убедитесь, что у вас есть все зависимости, перечисленные ниже. Не стесняйтесь менять имя, версию, описание и т. Д. На все, что вам нравится, поскольку все они необязательны. Включите сценарии и зависимости точно так, как написано в приведенном ниже коде. Обратите внимание, что некоторые зависимости не имеют решающего значения, и я не буду подробно рассказывать, как их использовать в этом руководстве, например, все модули тестирования (Sinon, Supertest, Mocha, Chai).

3. В Терминале перейдите в корневую папку и введите: npm install (это загрузит все ваши модули в новую папку, которая автоматически создаст в вашем корне под названием node_modules. (Примечание: если вы когда-нибудь захотите загрузить или попробовать новый модуль npm просто введите npm install - -save «введите здесь имя модуля»

Часть Б. Настройка файловых каталогов

  1. В корневой папке создайте следующие папки: клиент, сервер
  2. В корневой папке создайте следующий файл: index.js

Часть C. Запустите Express Server

  1. В папке сервера ›Создать папку: config› Создать файлы в config: helpers.js, middleware.js, routes.js

2. В папке сервера ›создайте файл server.js.

3. В файле server.js вы запускаете экспресс-сервер, настраиваете маршруты и экспортируете сервер.

  • Вам потребуется экспресс, промежуточное ПО, маршруты

Часть D. Настройка промежуточного программного обеспечения

В файле config / middleware.js :

  • Требуется morgan, bodyParser
  • Морган используется для промежуточного программного обеспечения
  • bodyParser используется для разбора
  • express.static будет использоваться для обслуживания начальной домашней страницы из папки клиента.

Часть E. Настройка маршрутизации

В routes.js вы можете определить всю маршрутизацию на стороне сервера и экспортировать их.

Анатомия маршрута:
- Укажите CRUD (получить, опубликовать, поместить, удалить)
- Определите URL-адрес, по которому будет поступать вызов api (например, интерфейсное приложение может выполнить запрос на получение для URL: / api / signup)
- Определите функцию, которая что-то сделает и вернет ответ.
(Лучшая практика: требуется файл, в котором все функции будут использоваться как методы, чтобы вы могли просто указать имя метода, см. ниже код для ясности)

Примечание. В приведенном ниже примере мне требуются userHandler и listHandler. Вам нужно будет создать папку / users и / lists в папке сервера, а также файлы userHandler и listHandler.js. Я расскажу о деталях после того, как мы запустим сервер.

Для тестирования в дополнение ко всем маршрутам в приведенном ниже коде добавьте следующее:
app.get ('/ test', function (req, res) {
res.json ('эй, эй эй, я живу! ')
});

Часть F: настройка index.html
В папке клиента ›создайте index.html

Просто создайте базовую html-страницу с любым текстом в теле для тестирования.

Часть G: настройка MongoDB с помощью Mongoose

Установите для вашего mongoURI значение mongod: // localhost / ANY-NAME-YOU-LIKE
Подключите db: mongoose.connect (mongoURI);
Установите для порта любые доступные номера портов (1337, 8080, 3000, и т. д.)
Прослушайте порт и запишите сообщение консоли, чтобы убедиться, что вы можете видеть в терминале, когда ваш сервер включен.

Пример кода:

Часть H. Протестируйте Express Server!

1) Сохраните весь свой код!

2) перейти в Терминал, открыть 2 вкладки (Cmd T) и перейти в корневой каталог для вашего приложения

3) введите mongod (примечание: поскольку это первый раз, вам может действительно потребоваться перейти на сайт MongoDB, следуйте инструкциям о том, как правильно установить Mongo глобально в вашей системе, чтобы вы могли запустить команду mongod без каких-либо проблем / ошибок .)

Самая сложная часть MongoDB - это первоначальная установка.

После запуска mongod вы должны увидеть что-то вроде этого:

4) На второй вкладке терминала введите npm start

(Помните: package.json мы определили сценарий для «start», чтобы в основном это был «node index.js», и он запустит наш экспресс-сервер.

Если все работает нормально, вы должны увидеть что-то вроде ниже:

Теперь просто откройте браузер Chrome и введите: localhost: 1337
Это должно вызвать вашу статическую html-страницу!
Также перейдите по URL-адресу и введите localhost: 1337 / test, и вы должны увидеть наше тестовое сообщение. : "Эй Эй Эй"

ПРАЗДНУЙТЕ!

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

ШАГ 2. Настройка MongoDB

Создание схем

Мы собираемся использовать Mongoose (ORM), который будет настраивать наши схемы и управлять нашими данными с помощью нашей MongoDB.

Для этого шага нам нужно придумать схему, которая будет сервером в качестве нашего документа по умолчанию (объекта Mongo) с типами значений свойств.

В нашем примере проекта, приложения «Список корзин для покупок», нам нужно хранить два разных типа данных: список и пользователь.

Схема списка будет содержать такую ​​информацию, как имя списка, срок выполнения списка, элементы списка и т. Д. Схема пользователя будет содержать всю информацию о пользователе, такую ​​как имя пользователя, адрес электронной почты, пароль и т. Д.

Создайте файлы listModel.js и userModel.js в соответствующих списках и папках пользователей. Каждый файл должен включать мангуста.

Пользовательский файл также должен включать bcrypt, который мы будем использовать для аутентификации. Я включил пару методов bcrypt (поставляется с библиотекой bcrypt), чтобы помочь с этим: comparePassword и preSave. Метод comparePassword просто сравнивает введенный пароль для входа с хешированным паролем, который мы сохранили в коллекции User, а метод preSave просто хеширует пароль с солью перед сохранением. Аутентификация немного выходит за рамки этого руководства, но вы можете узнать больше о bcrypt и аутентификации здесь.

После создания схем каждая модель должна быть экспортирована.

Общая форма создания схемы

var nameOfSchema = new mongoose.Schema ({propertyName: keyValueType,…})

См. Пример кода ниже.

userModel.js

listModel.js

Настройка обработчиков для маршрутов

Если вы помните, когда мы настраивали маршруты, у нас был каждый маршрут, запускающий вызов функции (посмотрите на второй аргумент в get ниже, вызываемая ссылка на функцию - listHandler.getLists)

Пример:

В файл routes.js мы включаем userHandler.js и listHandler.js с инструкциями require следующим образом, что позволяет нам иметь доступ ко всем их методам (таким как listHandler.getLists) ... если это сбивает с толку, это сделает гораздо больше смысла, когда вы видите файл listHandler.js, поскольку он показывает вам, что мы экспортируем все методы как часть объекта listHandler.

listHandler.js

У нашего обработчика списка будет несколько важных методов, которые вызываются на основе определенных запросов CRUD. Поскольку мы будем получать доступ к нашей MongoDB, нам потребуются наши модели User и List. Я также добавил дополнительный файл helpers.js, чтобы просто отправить сообщение об ошибке, когда это необходимо.

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

  1. addList: используется для передачи нового списка в нашу базу данных списков.
  2. updateList: используется, когда нам нужно обновить список. В нашем примере мы обновляем наш список, когда пользователь нашего краудсорсингового приложения со списком покупок хочет выбрать чей-то другой список покупок, чтобы взять на себя «задание» и стать доставщиком, поэтому мы обновляем список, чтобы назначить deliveryrer_id. Обратите внимание на использование List.findOne, который является способом Mongoose для запроса MongoDB.
  3. deleteList: удаляет список.
  4. getOneList: находит определенный список по идентификатору.
  5. getLists: получает все списки, в которых переданный идентификатор совпадает.
  6. getAllLists: возвращает все списки в db.
  7. getJobs: возвращает все списки, соответствующие переданному идентификатору поставщика.
  8. updateStatus: при необходимости присваивает deliveryrer_id идентификатору списка.

userHandler.js

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

Метод регистрации очень прост: принимает электронную почту и новый объект пользователя (созданный на странице регистрации), а затем проверяет электронную почту в БД и, если не найден, создает новый документ в модели пользователя с информацией о пользователе. Если пользователь найден, отправьте сообщение об ошибке.

Пример кода ниже:

Файл helpers.js должен находиться в папке конфигурации

ШАГ 3. Настройте интерфейс с помощью AngularJS

Настройка HTML-страницы

  1. Создайте index.html, если вы еще этого не сделали, и сохраните его в папке клиента.
  2. Чтобы «придать угловой» внешний вид, вы можете добавить ng-app = »Any-app-name» к начальному тегу ‹html›.
  3. Внутри тела добавьте div с атрибутом ng-view, он будет использоваться для отображения любых представлений, которые мы будем отображать. Примечание. Мы используем Angular Router для маршрутизации во внешнем интерфейсе, но если мы хотим, чтобы рендеринг нескольких различных представлений происходил одновременно, лучше всего использовать ui-router.
  4. Любыми элементами можно управлять с помощью контроллера (мы немного поговорим о контроллерах), например, у вас может быть ‹body ng-controller =” AppController ”›

Вот пример кода, просто обратите внимание, что есть некоторые атрибуты ui-bootstrap, такие как uib-accordian-group, о которых вы можете узнать здесь.

Настройка App.js и маршрутизации на стороне клиента

  1. Добавьте файл app.js в папку клиента.
  2. Здесь мы, по сути, создаем основной модуль рендеринга, который будет зависеть от других модулей представления.

Создаем исходный модуль (назовем его «толпа»).
В приведенном ниже примере «Crowdcart» - это имя приложения, второй массив аргументов - это список всех зависимостей, которые связаны между собой представлениями:

3. Затем мы настраиваем маршрутизацию на стороне клиента с помощью файла .config.

В приведенном ниже примере. Когда принимает определенный маршрут, второй аргумент - это объект, содержащий templateUrl, который должен отображаться вместе с сопровождающим его контроллером. В приведенном ниже примере в строке 16 показан AuthController, этот контроллер находится в модуле «Crowdcart.auth» (см. Строку 3 фрагмента кода выше). Мы подробно рассмотрим как файл html, так и файлы модуля контроллера.

4. Каждый модуль будет иметь определение своего контроллера и фабрики, однако, поскольку наше основное приложение определено в app.js, любые контроллеры / фабрики также должны быть определены в этом файле.

Ниже у нас есть главный контроллер приложения, фабрика и директива запуска, которые управляют аутентификацией:

Настроить аутентификацию

  1. Создайте папку аутентификации в папке клиента
  2. Добавьте файлы в папку auth: auth.js, signin.html, signup.html

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

signin.html

signup.html

auth.js

Я хочу потратить немного времени здесь, в auth.js, и объяснить, что происходит.

  1. Он похож на app.js в том, что мы определяем имя нашего модуля как 1-й аргумент angular.module.
  2. Добавьте любые зависимости в качестве второго аргумента. (Здесь мы включаем нечто, называемое $ scope, которое является КЛЮЧОМ для двусторонней привязки данных Angular. Тот же объект $ scope будет использоваться в файлах html, и если что-то изменится в свойствах объекта, они будут изменены где-нибудь еще. $ window и $ location также являются специальными ключевыми терминами Angular, которые вы можете найти, чтобы узнать больше, но, по сути, $ window дает вам доступ к хранению в окне на стороне клиента (локальное хранилище, см. ниже в примере кода ), а $ location дает вам доступ к пути (см. ниже в строке 26, чтобы увидеть, как он используется).

Файлы заданий настройки

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

  1. В нашу папку вакансий должны быть добавлены следующие файлы: jobs.js, findjobs.html, myjobs.html
  2. jobs.js содержит модуль и контроллер для этих HTML-представлений.

Изучите, как используется $ scope между jobs.js, где мы определяем контроллер, и html-файлами. Это ключевой вывод, на который стоит обратить внимание.

jobs.js

myjobs.html

Ключевые выводы ниже:

  1. Строка 15: ng-repeat похожа на _Each, где выполняется итерация по data.jobs. Посмотрите на приведенный выше фрагмент кода в строке 13: $ scope.data.jobs. Строка 13 заполняется всеми заданиями после вызова функции Jobs.getJobs, которая ссылается на фабрику, называемую методом Jobs, который является вызовом API для получения данных заданий со стороны сервера (определено в services.js - см. Services.js). фрагмент, чтобы понять, как работает фабрика Джобса).

Фабрика вакансий, расположенная в services.js

  1. добавить services.js в папку служб в папке клиента

Папка списков

Теперь, когда мы определили модуль Jobs и представления html, вы гораздо лучше понимаете, как можно использовать $ scope для двусторонней привязки данных.

Я намеренно пропустил последнюю папку, "Списки", поскольку это очень большая папка и по сути имеет очень похожий код на приведенный выше пример папки "Задания". Вы можете получить доступ ко всему коду, включая папку Lists, на моей странице github.

ЗАКЛЮЧЕНИЕ

Проверьте мой проект на github на предмет всех файлов, включая папку отсутствующих списков, которые я не включил сюда.

Вот ссылка на мое приложение на Heroku, чтобы вы могли попробовать, прежде чем создавать его!

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

Получайте удовольствие от стека MEAN, создавая отличные приложения, и оставьте мне не очень скучный пост с вашими вопросами / комментариями! :-) :-) :-)