Статьи

Введение в СРЕДНИЙ стек

Термин MEAN-стек относится к совокупности технологий на основе JavaScript, используемых для разработки веб-приложений. MEAN – это сокращение от MongoDB , ExpressJS , AngularJS и Node.js. MEAN представляет собой полный стек JavaScript от клиента к серверу и базе данных. В этой статье рассматриваются основы стека MEAN и показано, как создать простое приложение со списком корзин.

Вступление

Node.js – это среда исполнения JavaScript на стороне сервера. Это платформа, созданная на основе Google Chrome V8 JavaScript. Это помогает быстро создавать масштабируемые и параллельные приложения.

Express – это легковесная структура, используемая для создания веб-приложений в Node. Он предоставляет ряд надежных функций для создания одностраничных и многостраничных веб-приложений. Экспресс вдохновлен популярной платформой Ruby, Sinatra .

MongoDB – это система баз данных NoSQL без схемы. MongoDB сохраняет данные в двоичном формате JSON, что упрощает передачу данных между клиентом и сервером.

AngularJS – это JavaScript-фреймворк, разработанный Google. Он предоставляет некоторые удивительные функции, такие как двусторонняя привязка данных. Это полное решение для быстрой и удивительной разработки интерфейса.

В этой статье мы создадим простое приложение CRUD с использованием стека MEAN. Итак, давайте погрузимся.

Предпосылки

Прежде чем начать, нам нужно установить различные программные пакеты MEAN. Начните с установки Node.js со страницы загрузки . Далее установите загрузку и установите MongoDB . Страница установки MongoDB содержит руководства по настройке Mongo в различных операционных системах. Чтобы упростить ситуацию, мы начнем с стандартного проекта MEAN . Просто клонируйте репозиторий и установите зависимости, используя npm, как показано в следующем листинге.

git clone http://github.com/linnovate/mean.git cd mean npm install 

Это установит необходимые пакеты. Далее нам нужно установить порт по умолчанию, на котором MongoDB работает, на 27017 как указано в файле README на шаблоне. Откройте файл /etc/mongodb.conf и раскомментируйте строку port = 27017 . Теперь перезапустите сервер mongod как показано ниже.

 mongod --config /etc/mongodb.conf 

Далее из каталога проекта просто наберите grunt . Если все пойдет хорошо, вы увидите следующее сообщение:

 Express app started on port 3000 

Теперь, когда сервер работает, перейдите по http://localhost:3000/ в браузере, чтобы увидеть работающее шаблонное приложение.

Обзор Boilerplate

Теперь у нас есть полнофункциональное шаблонное приложение. Реализована аутентификация, в том числе с использованием входа в социальные сети. Мы не будем вдаваться в подробности, но будем создавать собственное маленькое приложение. Если вы посмотрите на структуру приложения, общая папка содержит наш внешний интерфейс AngularJS, а папка server содержит наш внутренний сервер NodeJS.

Создание представления списка

Во-первых, давайте начнем с создания нашего интерфейса с помощью AngularJS. Перейдите в public папку. Создайте новую папку с именем bucketList , где мы будем хранить наши файлы интерфейса. Внутри каталога bucketList создайте подкаталоги с именами controllers , routes , services и views . Внутри папки bucketList также создайте файл с именем bucketList.js содержащий следующий код.

 'use strict'; angular.module('mean.bucketList', []); 

Затем откройте mean/public/init.js и добавьте модуль mean.bucketList . Модифицированная часть должна выглядеть так:

 angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.router', 'mean.system', 'mean.articles', 'mean.auth', 'mean.bucketList']); 

Теперь перейдите к public/bucketList/routes и добавьте bucketList.js маршрута bucketList.js для обработки маршрутизации в нашем приложении. Код для этого показан ниже.

 'use strict'; //Setting up route angular.module('mean.bucketList').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { // states for my app $stateProvider .state('all bucket list', { url: '/bucketList', templateUrl: 'public/bucketList/views/list.html' }); } ]); 

Внутри public/bucketList/views/ создайте файл с именем list.html . Это наш вид, который будет отображать наш список сегментов. Содержимое этого файла показано ниже.

 <section data-ng-controller="BucketListController"> Welcome to the bucket list collection </section> 

Также создайте файл с именем bucketList.js внутри public/bucketList/controllers содержащий следующий код.

 'use strict'; angular.module('mean.bucketList').controller('BucketListController', ['$scope', '$stateParams', '$location', 'Global', function($scope, $stateParams, $location, Global) { $scope.global = Global; } ]); 

Затем запустите приложение, используя grunt . Убедитесь, что MongoDB работает, если это еще не сделано. Перейдите в браузере по http://localhost:3000/#!/bucketList , и вы должны увидеть созданный нами список. Если вам интересно о #! в URL это просто делается для разделения маршрутизации AngularJS и NodeJS.

Добавить в список ковшей

Давайте создадим представление, чтобы добавить вещи в наш список. Внутри public/bucketList/views добавьте новый HTML-файл с именем create.html содержащий следующий код.

 <section data-ng-controller="BucketListController"> <form class="form-horizontal col-md-6" role="form" data-ng-submit="create()"> <div class="form-group"> <label for="title" class="col-md-2 control-label">Title</label> <div class="col-md-10"> <input type="text" class="form-control" data-ng-model="title" id="title" placeholder="Title" required> </div> </div> <div class="form-group"> <label for="description" class="col-md-2 control-label">Description</label> <div class="col-md-10"> <textarea data-ng-model="description" id="description" cols="30" rows="10" placeholder="Description" class="form-control" required></textarea> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </section> 

Этот код присоединяет контроллер BucketListController . Также обратите внимание, что при отправке формы вызывается метод с именем create() . Далее, давайте создадим метод с именем create() в BucketListController . Следующий код должен быть добавлен в public/bucketList/controllers/bucketList.js , как показано ниже. Мы BucketList сервис BucketList в контроллер, который нам необходим для взаимодействия с серверной частью.

 'use strict'; angular.module('mean.bucketList').controller('BucketListController', ['$scope', '$stateParams', '$location', 'Global', 'BucketList', function ($scope, $stateParams, $location, Global, BucketList) { $scope.global = Global; $scope.create = function() { var bucketList = new BucketList({ title: this.title, description: this.description }); bucketList.$save(function(response) { $location.path('/bucketList'); }); }; } ]); 

Содержимое public/bucketList/services/bucketList.js показано ниже.

 'use strict'; angular.module('mean.bucketList').factory('BucketList', ['$resource', function($resource) { return $resource('bucketList); } ]); 

Нам также нужно добавить маршрут для добавления элементов в список сегментов. Измените public/bucketList/routes/bucketList.js , добавив еще одно состояние, как показано ниже.

 'use strict'; //Setting up route angular.module('mean.bucketList').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { // states for my app $stateProvider .state('all bucket list', { url: '/bucketList', templateUrl: 'public/bucketList/views/list.html' }) .state('add bucket list', { url: '/addBucketList', templateUrl: 'public/bucketList/views/create.html' }) } ]); 

Перезагрузите сервер и перейдите по http://localhost:3000/#!/addBucketList . Вы должны увидеть форму создания списка сегментов. К сожалению, это еще не функционально. Нам тоже нужно создать бэкэнд.

Создание Back-end

Список сегментов должен иметь название, описание и статус. Итак, создайте новый файл с именем bucketlist.js в server/models/bucketlist.js и добавьте следующий код.

 'use strict'; /** * Module dependencies. */ var mongoose = require('mongoose'), Schema = mongoose.Schema; /** * Bucket List Schema */ var BucketListSchema = new Schema({ created: { type: Date, default: Date.now }, title: { type: String, default: '', trim: true }, description: { type: String, default: '', trim: true }, status: { type: Boolean, default: false } }); mongoose.model('BucketList', BucketListSchema); 

Нам нужно настроить экспресс-маршрут, чтобы сервисные вызовы из AngularJS обрабатывались правильно. Создайте файл с именем server/routes/bucketList.js содержащий следующий код.

 'use strict'; var bucketList = require('../controllers/bucketList'); module.exports = function (app) { app.post('/bucketList', bucketList.create); }; 

POST запросы к /bucketList обрабатываются методом bucketList.create() . Этот метод принадлежит контроллеру сервера bucketList.js , который нам еще нужно создать. Содержимое server/controllers/bucketList.js должно выглядеть так:

 'use strict'; /** * Module dependencies. */ var mongoose = require('mongoose'), BucketList = mongoose.model('BucketList'); /** * Create an Bucket List */ exports.create = function(req, res) { var bucketList = new BucketList(req.body); bucketList.save(function(err) { if (err) { console.log(err); } else { res.jsonp(bucketList); } }); }; 

Нам еще многое предстоит почистить, но мы можем проверить, работает ли он так, как ожидалось. Когда пользователь отправляет форму AngularJS, он вызывает службу AngularJS, которая вызывает метод create() на стороне сервера, который затем вставляет данные в MongoDB.

После отправки формы мы можем проверить, правильно ли вставлены данные в Mongo. Чтобы проверить данные в MongoDB, откройте другой терминал и выполните следующие команды.

 mongo // Enter the MongoDB shell prompt show dbs; // Shows the existing Dbs use mean-dev; // Selects the Db mean-dev show collections; // Show the existing collections in mean-dev db.bucketlists.find() //Show the contents of bucketlists collection 

Создание представления списка ковшей

Сначала добавьте новый маршрут в server/routes/bucketList.js :

 app.get('/bucketList', bucketList.all); 

Этот новый маршрут вызывает метод all() контроллера. Добавьте этот метод в server/controllers/bucketList.js , как показано ниже. Этот код находит записи в коллекции bucketList и возвращает их.

 exports.all = function(req, res) { BucketList.find().exec(function(err, bucketList) { if (err) { console.log(err); } else { res.jsonp(bucketList); } }); }; 

Затем добавьте новый метод в public/bucketList/controllers/bucketList.js как показано ниже.

 $scope.getAllBucketList = function() { BucketList.query(function(bucketList) { $scope.bucketList = bucketList; }); }; 

Этот код выбирает данные из Mongo и сохраняет их в нашей переменной $scope.bucketList . Теперь нам просто нужно привязать его к нашему HTML. Это делается в public/bucketList/views/list.html :

 <section data-ng-controller="BucketListController" data-ng-init="getAllBucketList()"> <ul class="bucketList unstyled"> <li data-ng-repeat="item in bucketList"> <span>{{item.created | date:'medium'}}</span> / <span>{{item.title}}</span> <div>{{item.description}}</div> </li> </ul> <a href="/#!/addBucketList">Create One</a> </section> 

Перезагрузите сервер и перейдите по http://localhost:3000/#!/bucketList . Это должно отобразить элементы списка сегментов. Вы также можете попробовать добавить новые элементы, нажав на ссылку «Создать» под списком.

Вывод

В этой статье мы сосредоточились на создании простого приложения с использованием стека MEAN. Мы реализовали добавление записи в MongoDB и отображение записей из БД. Если вы заинтересованы в расширении этого примера, вы можете попробовать добавить операции обновления и удаления. Код из этой статьи доступен на GitHub .