Создание панели администратора с помощью Bootstrap 4 и AngularJS

Когда я был любителем веб-разработки, я был категорически против Bootstrap, главным образом потому, что он меня до чертиков сбивал с толку. Скептически относясь к чтению документации и принятию новых вещей, в 18 лет я предпочел писать более 600 строк CSS, которые создавали бы неряшливые компоненты с абсолютным позиционированием, вместо того, чтобы баловаться преимуществами и простотой стилевого фреймворка Bootstrap. Я был молод и наивен, поэтому увидел определение класса вроде:

class="btn-sm btn-danger float-right ml-2"

вызвали беспокойство, и ПОСЛЕДНЕЕ, что я хотел сделать, это поискать в Интернете, что это означает (вы можете представить, как боялся читать документацию и как тяжело, должно быть, была жизнь ?!). Но теперь я стал старше (и мудрее) и гораздо больше настроен на то, чтобы заниматься чем-то новым, и понял, что Bootstrap - один из самых полезных и удобных приемов в книге веб-разработки, который поможет создать ваше приложение и функционирует очень быстро.

Этот пост направлен на то, чтобы выделить ресурсы и методы, которые я использовал для создания чистой и гибкой административной панели инструментов с использованием Angular 1 и Bootstrap 4. Вместо того, чтобы сосредоточиться на содержании панели инструментов, я опишу компоненты и методологии, лежащие в основе создания эффективной панели мониторинга для разнообразие целей.

Шаг 1. Навигация

Боковая навигация необходима для создания административной панели. Боковое меню должно быть главным меню для пользовательских функций, которые: 1. позволяют простой переход по страницам приложения и 2. дает пользователям возможность создавать / редактировать / удалять содержимое информационной панели. Боковая навигация должна быть гибким способом динамического изменения содержимого в контейнере основного представления или открытия дополнительных пунктов меню.

Шаг 2: пользовательский интерфейс и цветовая схема

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

Я также большой сторонник компонентов сетки блочного типа на веб-страницах. Примеры, такие как блочные конструкции из трех столбцов, адаптивные сетки и новые компоненты платы Bootstrap, предлагают отличные способы разметки компонентов приложения и представления данных в интуитивно понятном виде. Ниже приведены некоторые веб-страницы, использующие эти конструкции (включая пример административной панели!).

Помимо выбора цвета, расположение и общая компоновка компонентов важны для создания наглядной информационной панели и эффективного отображения данных.

Шаг 3: формы

Теперь, когда у нас есть меню с возможностью навигации и хорошая цветовая схема, мы можем приступить к созданию веб-форм для отправки пользовательского контента в базу данных. В веб-разработке форма - это стандартный инструмент для ввода новых данных в виде команд CREATE или UPDATE. В моем примере, используя M.E.A.N. stack , это достигается с помощью HTTP-запросов к файлу Express API routes.js, который обрабатывает всю целостность данных, форматирование и доступ к базе данных. Не существует единого / правильного способа расшифровать AngularJS и все различные службы, которые можно использовать для обработки данных, поэтому мой пример направлен на упрощение процесса привязки данных и доступа к базе данных.

Конвейер данных: ввод данных пользователем | Контроллер | Экспресс-маршрут | MongoDB

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

Обратите внимание на директиву ng-click = «addName ()» AngularJS . Этот вызов функции обрабатывается в контроллере и позволяет нам обрабатывать отправку формы, заменяя стандартный html-метод кнопок отправки и обработчиков форм. Нам нужно будет настроить функцию приема в нашем контроллере AngularJS, которая извлекает входные данные, отображаемые директивой ng-model.

ngModel отвечает за: привязку представления к модели, что требуется для других директив, таких как input, textarea или select.
- Справочник по Angular API

Мы получаем доступ к этому вызову функции в нашем контроллере с помощью $ scope.addName. Некоторые люди выступают за обработку HTTP-запросов от фабрики или службы, определенной в отдельном модуле Angular, но можно обрабатывать запросы непосредственно с контроллера, что я выбрал для простоты демонстрации.

Сервисы $ scope и $ http необходимо добавить в контроллер, определив их в определении функции «function ($ scope, $ http)».

ПРИМЕЧАНИЕ. Обработка HTTP-запросов в контроллере проста, но не всегда является наилучшей практикой. Лучше всего хранить всю логику внутреннего API отдельно от чего-либо в представлении и / или контроллере. Это решение предполагает использование службы для обработки вызовов API и может выглядеть примерно так:

В контроллере вы должны вызвать директиву factory с помощью: addName.create ($ scope.candyForm), который вызывает функцию create и связывается с обработчиком маршрута Express. Такой стиль управления данными сохраняет логику базы данных и функциональные возможности пользовательского интерфейса модульными и отдельными, что считается лучшей практикой для современных веб-приложений.

Следующим шагом в конвейере является обработка вызова API в файле Express routes.js. Вызов: $ http.post ('/ api / addName', $ scope.nameForm) передает данные текстовой формы «nameForm» в представление как req.body.text HTTP-запроса к маршруту «/ api / addName». Мое определение маршрута выглядит так:

Я использую mongoose.js как вспомогательную библиотеку для всего MongoDB. Я настоятельно рекомендую использовать mongoose или аналогичную библиотеку, чтобы упростить схемы MongoDB и обработку объектов. Я построил базовую схему пользователя, которая принимает строку (имя), в которой я могу хранить вводимый текст из формы страницы, и извлекать из нее, чтобы изменить переменную области headerText (чтобы убедиться, что наш конвейер работает). Этот простой обработчик маршрута создает новый объект User и сохраняет данные формы как атрибут User.name, а затем отправляет это имя в переменную res для возврата в функцию контроллера. Если все работает правильно, функция .success (в контроллере) должна получить ответ от обработчика маршрута и установить для переменной области headerText значение User.name из базы данных. ‹H3› должно заполниться именем из текстового поля (я набрал Некоторое произвольное имя для целей тестирования), текстовое поле должно быть очищено, и в базе данных должен появиться новый пользователь.

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

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