() translation by (you can also view the original English article)
Создание веб-приложений подразумевает необходимость использования различных технологий и инструментов, связанных с использованием баз данных, работой на стороне сервера, а также обработкой и отображением данных на стороне клиента на сервере. Перед началом нового проекта необходимо настроить все инструменты и структуру проекта, что в свою очередь требует много времени. Использование фреймворка или стека для этой задачи может ускорить разработку и облегчить работу разработчика.
Что такое MEAN
«MEAN - это полноценная платформа JavaScript для современных веб-приложений».
Именно так авторы стека MEAN определяют его на своем веб-сайте. Совершенно очевидно, что MEAN ориентирована на всех разработчиков JavaScript (как на стороне сервера, так и на стороне клиента), а также на то, что это платформа стека, которая, указывает на наличие нескольких компонентов, входящих в него.
Этими компонентами являются:
Как вы можете видеть, MEAN объединяет четыре наиболее часто используемых и признанных технологии разработки JavaScript, закладывая основу для простого создания сложных веб-приложений.
Установка
Стек MEAN может быть установлен двумя способами:
Установка средства MEAN с его сайта
Этот метод довольно прост. Вам просто нужно посетить сайт mean.io, а затем вы можете скачать фреймворк в виде zip-файла, нажав на большую зеленую кнопку.
Другой вариант, доступный здесь, - клонировать репозиторий Git. Просто откройте терминал и выполните следующую команду:
1 |
git clone https://github.com/linnovate/mean.git |
Установка MEAN с помощью Yeoman
Есть несколько генераторов Yeoman, написанных разными разработчиками. Использование генератора для установки MEAN выполняется в два этапа, сначала устанавливая генератор:
1 |
npm install -g generator-meanstack |
А затем используем yo для создания приложения:
1 |
yo meanstack |
В приведенном выше примере предполагается установка 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 для использования в других типах приложений.
Оставайтесь с нами во второй части!
