Пошаговое руководство по простому приложению для доски объявлений в полном СРЕДНЕМ. День 9 СРЕДНЕГО

Подключение. Это то, что мы сделали сегодня. Мы, наконец, связали полную цепочку от представлений наших клиентов к нашей базе данных.

Давайте обновим. Мы находимся в стеке MEAN, поэтому вот наша базовая настройка приложения.

  • Наша клиентская сторона/интерфейс управляется AngularJS, M в MEAN.
  • Наша серверная сторона написана на JavaScript с использованием сервера Node.js с помощью Express для наших запросов/ ответы. Это E и N в MEAN.
  • Наконец, наша база данных представляет собой MongoDB с помощью mongoose для создания моделей и подключения к нашему серверу БД и т. д., M в СРЕДНЕМ.

Как все это связано друг с другом? Ну, поначалу определенно сложно уложить в голове, но это действительно круто. Я надеюсь, что вы присоединитесь к поездке. Вот основные звенья цепи. В качестве примера мы будем использовать базовое приложение доски объявлений. Он очень простой, но демонстрирует все основные элементы стека. Вот что он делает.

  • Вы можете добавить сообщение и указать имя автора.

  • Затем вы можете добавить комментарий к определенным сообщениям.

  • Наконец, вы можете удалить сообщение или комментарий.

Давайте рассмотрим процесс добавления сообщения в нашу базу данных, а затем просмотра его в нашем html (частичный, угловой даааа).

  1. Отправьте форму (ng-submit), созданную с помощью ng-model.
  2. вызвать функцию контроллера createMessage, которая, в свою очередь, вызывает функцию createMessage фабрики. createMessage фабрики принимает 2 параметра: $scope.message и setMessages (функция обратного вызова, которая извлекает сообщения из фабрики и устанавливает их в $ объем.сообщений)
  3. createMessage (сообщение, обратный вызов) фабрики отправляет запрос post ($http.post) на наш маршрут API/сообщений на нашем сервере, который вызывает функция сообщения в нашем серверном контроллере.
  4. Функция сообщения принимает запрос от нашего внешнего интерфейса и сохраняет новое сообщение в нашу базу данных mongo (с помощь мангуста), который затем отвечает либо ошибкой, либо успехом. (Важно отметить, что даже на почтовый запрос нужно что-то ответить, потому что наш обратный вызов ждет его. У меня были некоторые проблемы с этим)
  5. После получения данных от apiнаш factory.createMessage вызывает factory.index (который отправляет запрос на получение в API и извлекает все сообщений и их комментариев) с обратным вызовом setMessages, который, в свою очередь, устанавливает полученные сообщения в $scope.messages. (Я писал об этом обратном вызове вчера и сделал для него схему здесь).
  6. Затем наша часть сообщений отображает все сообщения в $scope.messages с их комментариями. (Наши партиалы контролируются в myApp.config с помощью $routeProvider…).

Итак, это основной цикл события в стеке MEAN. Надеюсь, это немного поможет. Это в значительной степени то, что мы сделали сегодня. Мы подключили нашу базу данных к нашему внешнему интерфейсу, существенно уменьшив наш сервер до простого API и отвечать на запросы с помощью json. Кажется, я начинаю понимать, как выглядят настоящие веб-приложения.

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

Это все на данный момент. Не стесняйтесь проверить этот вчерашний пост о обратных вызовах и о том, как контроллеры angularJS взаимодействуют с фабриками.

Спасибо за прочтение, и вы можете продолжить следить за моим путешествием здесь.

Удачного кодирования!