Получать СРЕДСТВО с Trello и Zapier

Ниже изображение на приборной панели mongolab. Он показывает базу данных с именем user-db . Есть несколько вещей, которые мы должны отметить на этой странице. Сначала URL-адрес Mongo, который мы собираемся передать в наше приложение, чтобы любые запросы к базе данных взаимодействовали с этим экземпляром. Чтобы использовать эту базу данных, нам также нужно создать пользователя для нее. Кроме того, имя пользователя и пароль для пользователя нашей базы данных важны, поскольку они необходимы для добавления этого экземпляра в наше приложение.

Код на стороне сервера

После того, как база данных была создана, нам нужно настроить ее так, чтобы мы могли сделать успешный вызов. Для начала мы изменим файл development.js который мы упоминали ранее, который находится внутри нашего каталога server/config . В случае успеха файл должен выглядеть так, как показано ниже.

 'use strict'; // Development specific configuration module.exports = { // MongoDB connection options mongo: { uri: 'mongodb:// : @ds029630.mongolab.com:29630/user-db' }, seedDB: true };  'use strict'; // Development specific configuration module.exports = { // MongoDB connection options mongo: { uri: 'mongodb:// : @ds029630.mongolab.com:29630/user-db' }, seedDB: true };  'use strict'; // Development specific configuration module.exports = { // MongoDB connection options mongo: { uri: 'mongodb:// : @ds029630.mongolab.com:29630/user-db' }, seedDB: true };  

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

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

 yo angular-fullstack:endpount user 

При появлении любых вопросов мы можем просто нажать клавишу ввода и использовать настройки по умолчанию. Результатом будет конечная точка пользователя, расположенная в api/users .

Кроме того, мы создали новую папку в каталоге server/api называется user . Внутри этого каталога angular-fullstack создал схему, в которую мы можем публиковать данные. Помните ли вы, когда вас спрашивали, включает ли Mongoose для моделирования данных или нет? Ну, вот где мы будем его использовать.

Mongoose — это модуль npm для моделирования данных. Взглянув на приведенный ниже код, мы увидим, что Schema была установлена ​​равной mongoose.Schema. В результате переменная UserSchema может использоваться для обработки данных. Внутри объекта newSchema({}) нам нужно изменить некоторые свойства. Мы собираемся удалить все текущие свойства (за исключением имени ) и добавить дополнительные поля с именами электронной почты , местоположения , причины и сообщения . Как и name , все эти свойства будут строками, поэтому конечный результат должен выглядеть следующим образом:

 var UserSchema = new Schema({ name: String, email: String, location: String, reason: String, message: String }); 

Большой! Мы создали конечную точку, внесли правильные изменения в нашу схему, и мы готовы к работе!

Ранее мы узнали, что мы можем использовать grunt serve для запуска приложения. Если все пойдет хорошо, Grunt откроет браузер и позволит нам вносить изменения в наши файлы без перезагрузки сервера. Важно отметить, что для этого обычно требуется запуск локального экземпляра MongoDB с помощью команды mongod , однако мы изменили файл development.js для ссылки на нашу базу данных, размещенную на MongoLab.com. Тем не менее, давайте продолжим и настроим клиентский код для нашего приложения.

Сторона клиента

Мы можем легко сгенерировать новый маршрут, запустив yo angular-fullstack:route <route-name> внутри нашего проекта. Тем не менее, мы будем упрощать работу с файлами внутри main каталога, с которым было установлено это приложение. В частности, мы собираемся внести изменения в контроллер для основного состояния, а также файл шаблона. По умолчанию generator-fullstack включает в себя некоторые вызовы API внутри этого контроллера. Хотя они и не нужны для этого примера, они показывают живые примеры http модуля Angular и помогают предоставить пользователям надежную отправную точку. Выбор сохранить или удалить этот код не имеет значения, однако нам нужно добавить некоторый код.

Обычно мы передаем HTTP-модуль в наш контроллер, но так как это приложение уже взаимодействует с нашим API, мы можем начать писать наш пост-вызов прямо сейчас.

sendForm() на код ниже, мы видим, что теперь внутри этого контроллера есть функция sendForm() .

 angular.module('yoTrelloApp') .controller('MainCtrl', function($scope, $http) { $scope.sendForm = function() { var data = ({ name: $scope.fullName, email: $scope.email, location: $scope.userLocation, reason: $scope.reason, message: $scope.message }); $http.post('/api/users', data) .success(function(data) { $scope.data = data; }); $scope.name = ''; $scope.email = ''; $scope.location = ''; $scope.reason = ''; $scope.message = ''; }; }); });