Разверните свой собственный API REST за 30 минут, используя mLab и Heroku

 var express = require("express"); var path = require("path"); var bodyParser = require("body-parser"); var mongodb = require("mongodb"); var ObjectID = mongodb.ObjectID; var CONTACTS_COLLECTION = "contacts"; var app = express(); app.use(express.static(__dirname + "/public")); app.use(bodyParser.json()); // Create a database variable outside of the database connection callback to reuse the connection pool in your app. var db; // Connect to the database before starting the application server. mongodb.MongoClient.connect(process.env.MONGODB_URI, function (err, database) { if (err) { console.log(err); process.exit(1); } // Save database object from the callback for reuse. db = database; console.log("Database connection ready"); // Initialize the app. var server = app.listen(process.env.PORT || 8080, function () { var port = server.address().port; console.log("App now running on port", port); }); }); // CONTACTS API ROUTES BELOW // Generic error handler used by all endpoints. function handleError(res, reason, message, code) { console.log("ERROR: " + reason); res.status(code || 500).json({"error": message}); } /* "/contacts" * GET: finds all contacts * POST: creates a new contact */ app.get("/contacts", function(req, res) { db.collection(CONTACTS_COLLECTION).find({}).toArray(function(err, docs) { if (err) { handleError(res, err.message, "Failed to get contacts."); } else { res.status(200).json(docs); } }); }); app.post("/contacts", function(req, res) { var newContact = req.body; newContact.createDate = new Date(); if (!(req.body.firstName || req.body.lastName)) { handleError(res, "Invalid user input", "Must provide a first or last name.", 400); } db.collection(CONTACTS_COLLECTION).insertOne(newContact, function(err, doc) { if (err) { handleError(res, err.message, "Failed to create new contact."); } else { res.status(201).json(doc.ops[0]); } }); }); /* "/contacts/:id" * GET: find contact by id * PUT: update contact by id * DELETE: deletes contact by id */ app.get("/contacts/:id", function(req, res) { db.collection(CONTACTS_COLLECTION).findOne({ _id: new ObjectID(req.params.id) }, function(err, doc) { if (err) { handleError(res, err.message, "Failed to get contact"); } else { res.status(200).json(doc); } }); }); app.put("/contacts/:id", function(req, res) { var updateDoc = req.body; delete updateDoc._id; db.collection(CONTACTS_COLLECTION).updateOne({_id: new ObjectID(req.params.id)}, updateDoc, function(err, doc) { if (err) { handleError(res, err.message, "Failed to update contact"); } else { res.status(204).end(); } }); }); app.delete("/contacts/:id", function(req, res) { db.collection(CONTACTS_COLLECTION).deleteOne({_id: new ObjectID(req.params.id)}, function(err, result) { if (err) { handleError(res, err.message, "Failed to delete contact"); } else { res.status(204).end(); } }); }); 

Настройка статических файлов для веб-приложения

Теперь, когда наш API завершен, мы будем использовать его для создания нашего веб-приложения. Веб-приложение позволяет пользователям управлять контактами из браузера.

Создайте public папку в корневом каталоге вашего проекта и скопируйте файлы из общей папки примера приложения. Папка содержит шаблоны HTML и наш код AngularJS.

Просматривая файлы HTML, вы можете заметить, что в файле index.html есть какой-то нетрадиционный код HTML, например «ng-view»:

 <div class="container" ng-view> 

Эти расширения являются особенностями системы шаблонов AngularJS. Шаблоны позволяют нам повторно использовать код и динамически генерировать представления для конечного пользователя.

Создайте веб-приложение с AngularJS

Мы будем использовать AngularJS, чтобы связать все вместе. AngularJS поможет нам направлять запросы пользователей, отображать различные представления и отправлять данные в базу данных и из нее.

Наш код AngularJS находится в папке /public/js в файле app.js Чтобы упростить задачу, мы сосредоточимся исключительно на коде, который необходим для извлечения и отображения контактов при запросе маршрута по умолчанию для домашней страницы ( / ). Реализация этой функциональности требует, чтобы мы:

• Отобразите соответствующий вид и шаблон, используя AngularJS routeProvider ( index.html и list.html ).
• Получите контакты из базы данных, используя сервис AngularJS (GET /contacts ).
• Передайте данные из сервиса в представление с помощью контроллера AngularJS ( ListController ).

Код выглядит следующим образом:

 angular.module("contactsApp", ['ngRoute']) .config(function($routeProvider) { $routeProvider .when("/", { templateUrl: "list.html", controller: "ListController", resolve: { contacts: function(Contacts) { return Contacts.getContacts(); } } }) }) .service("Contacts", function($http) { this.getContacts = function() { return $http.get("/contacts"). then(function(response) { return response; }, function(response) { alert("Error retrieving contacts."); }); } }) .controller("ListController", function(contacts, $scope) { $scope.contacts = contacts.data; }); 

Далее мы рассмотрим каждую часть кода и то, что он делает.

Пользовательские запросы маршрутизации с AngularJS routeProvider

Модуль routeProvider помогает нам настраивать маршруты в AngularJS.

 angular.module("contactsApp", ['ngRoute']) .config(function($routeProvider) { $routeProvider .when("/", { templateUrl: "list.html", controller: "ListController", resolve: { contacts: function(Contacts) { return Contacts.getContacts(); } } }) }) 

Маршрут домашней страницы состоит из нескольких компонентов:

• templateUrl , который указывает, какой шаблон отображать
• служба Contacts , которая запрашивает все контакты с сервера API
• ListController , который позволяет нам добавлять данные в область и получать к ним доступ из наших представлений.

Используйте AngularJS Services для отправки запросов на сервер API

Служба AngularJS генерирует объект, который может использоваться остальной частью приложения. Наш сервис действует как оболочка на стороне клиента для всех наших конечных точек API.

Маршрут домашней страницы использует функцию getContacts для запроса данных о контактах.

 .service("Contacts", function($http) { this.getContacts = function() { return $http.get("/contacts"). then(function(response) { return response; }, function(response) { alert("Error retrieving contacts."); }); } 

Наши сервисные функции используют встроенный AngularJS $http сервис для генерации HTTP-запросов. Модуль также возвращает обещание, которое можно изменить, чтобы добавить дополнительные функции (например, ведение журнала).

Обратите внимание, что в сервисе $http мы используем относительные URL-пути (например, /contacts ), а не абсолютные, как app-name.herokuapp.com/contacts .

Расширьте наши возможности с помощью контроллеров AngularJS

Пока что мы настроили наш маршрут, определили шаблон для отображения и получили наши данные, используя наш сервис Contacts . Чтобы связать все вместе, мы создадим контроллер.

 .controller("ListController", function(contacts, $scope) { $scope.contacts = contacts.data; }) 

Наш контроллер добавляет данные о контактах из нашего сервиса в область домашней страницы в виде переменной с именем contacts . Это позволяет нам получать доступ к данным непосредственно из шаблона ( list.html ). Мы можем перебирать данные контактов с помощью встроенной в AngularJS директивы ngRepeat :

 <div class="container"> <table class="table table-hover"> <tbody> <tr ng-repeat="contact in contacts | orderBy:'lastName'" style="cursor:pointer"> <td> <a ng-href="#/contact/{{contact._id}}">{{ contact.firstName }} {{ contact.lastName }}</a> </td> </tr> </tbody> </table> </div> 

Завершение проекта

Теперь, когда мы понимаем, как мы реализовали маршрут домашней страницы в AngularJS, реализацию остальных маршрутов веб-приложения можно найти в файле /public/js/app.js исходного проекта. Все они требуют определения маршрута в routeProvider , одной или нескольких сервисных функций для выполнения соответствующих HTTP-запросов и контроллера для расширения области действия.

После того, как вы завершили Angular-код, снова разверните приложение:

 $ git add server.js $ git add public $ git commit -m 'second commit' $ git push heroku master 

Теперь, когда компонент веб-приложения завершен, вы можете просмотреть свое приложение, открыв веб-сайт из интерфейса командной строки:

 $ heroku open 

Резюме

В этом уроке вы узнали, как:

• создать RESTful API-сервер в Express и Node.js.
• подключите базу данных MongoDB к серверу API для запроса и сохранения данных.
• создать богатое веб-приложение, используя AngularJS.

Мы надеемся, что вы узнали о силе стека MEAN, позволяющей разрабатывать общие компоненты для современных веб-приложений.

Примечания по масштабированию

Если вы работаете с производственным приложением MEAN в Heroku, вам необходимо масштабировать как свое приложение, так и базу данных по мере увеличения трафика и увеличения объема данных. Обратитесь к статье « Оптимизация параллелизма приложений Node.js» для получения рекомендаций по масштабированию приложения. Чтобы обновить базу данных, см. Дополнительную документацию mLab .

Необязательные следующие шаги

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