7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

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

Read Time: 4 mins

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.