Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Введение в стек MEAN

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Что такое MEAN

«MEAN - это полноценная платформа JavaScript для современных веб-приложений».

Именно так авторы стека MEAN определяют его на своем веб-сайте. Совершенно очевидно, что MEAN ориентирована на всех разработчиков JavaScript (как на стороне сервера, так и на стороне клиента), а также на то, что это платформа стека, которая, указывает на наличие нескольких компонентов, входящих в него.

Этими компонентами являются:

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

Установка

Стек MEAN может быть установлен двумя способами:

  • Используя веб-сайт mean.io
  • Используя различные генераторы Yeoman.

Установка средства MEAN с его сайта

Этот метод довольно прост. Вам просто нужно посетить сайт mean.io, а затем вы можете скачать фреймворк в виде zip-файла, нажав на большую зеленую кнопку.

Другой вариант, доступный здесь, - клонировать репозиторий Git. Просто откройте терминал и выполните следующую команду:

Установка MEAN с помощью Yeoman

Есть несколько генераторов Yeoman, написанных разными разработчиками. Использование генератора для установки MEAN выполняется в два этапа, сначала устанавливая генератор:

А затем используем yo для создания приложения:

В приведенном выше примере предполагается установка meanstack генератора, а также что Yeoman уже установлен. Для получения списка генераторов MEAN, проверьте эту ссылку и отфильтруйте по «mean». Для получения информации об установке Yeoman, проверьте сайт Yeoman.

Адди Османи написал очень интересный пост в блоге о стеке MEAN и генераторах Yeoman для него. Я настоятельно рекомендую прочитать его, чтобы узнать, как установить стек с помощью генераторов.

Для целей этой статьи я буду использовать подход клонирования Git.

После установки

После установки просто перейдите cd в папку, где вы установили стек MEAN, и выполните команду grunt (у вас должен быть установлен grunt-cli). Эта команда запустит сервер, прослушивающий порт 3000, поэтому открыв http://localhost:3000 в браузере вы увидите это:

Что мы получили после установки

Стек MEAN на самом деле является полнофункциональным приложением для блога. Он имеет аутентификацию с использованием различных методов: Facebook, GitHub, Twitter или Google, а также простой электронной почты и пароля.

Бьюсь об заклад, вам до сих пор интересно увидеть код ... Итак, давайте посмотрим. Структура папок стека MEAN должна выглядеть следующим образом:

Серверная часть

Сервер разделен на две папки и один файл:

  • Папка app - содержит контроллеры, модели и представления, которые составляют приложение
  • Папка config - содержит файлы, которые управляют поведением частей приложения
  • server.js - это точка входа в приложение

Давайте рассмотрим их по очереди:

Файл server.js

Это файл, запускающий все приложение. Если вы не хотите использовать grunt, вы можете использовать команду node server, js, чтобы запустить сервер.

Файл server.js отвечает за:

  • Загрузка конфигурации. Загружаются файлы для настройки самого приложения, аутентификации и подключения к базе данных.
  • Подгрузка моделей. Происходит путем прохождения через папку моделей и загрузки всех файлов внутри этой папки (или ее подкаталогов).
  • Автозагрузка passport
  • Инициализация приложения express
  • Настройка приложения express
  • Настройка маршрутов express приложения
  • Начинается прослушивание выбранного порта

Папка config

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

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

Папка app

Внутри папки app находится весь код со стороны сервера. Эта папка содержит подпапки для контроллеров, моделей и представлений, которые составляют приложение сервера MVC, а также папку для обслуживаемых маршрутов.

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

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

Папка includes содержит нижнюю и верхнюю части страниц, которые вставляются во все страницы, принадлежащие приложению. Папка layout содержит базовый HTML-код для макета  Этот макет расширен в файл index.html из папки views.

Папка users содержит шаблоны для входа, регистрации и аутентификации.

В корневой папке views рядом с файлом index.html есть файлы, содержащие разметку для 404 и 500 ошибок.

Клиентская часть

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

Особое внимание следует уделить папке js, которая содержит Angular код для приложения на стороне клиента, код инициализации, некоторые директивы и код фильтра (в настоящее время пустые файлы), а также контроллеры и службы для статей и части заголовка приложения. Папка views содержит разметку для создания, редактирования, отображения и просмотра статьи.

Наконец, папка lib содержит код самой библиотеки Angular.

Тестирование приложений

Папка test содержит файлы для тестирования приложения. В основном есть файлы для тестирования серверной части с помощью Mocha и файлы для тестирования клиентской части с использованием Karma.

Предоставляемые инструменты

При использовании стека MEAN вы, как разработчик, также имеете доступ к npm, bower и grunt, которые должны быть установлены,

Так же стоит отменить, что предоставляется JSHint, и весь код JavaScript очищается. Кроме того, используя Grunt, можно наблюдать за изменениями в проекте и автоматически его пересобирать.

Вывод

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

Оставайтесь с нами во второй части!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.