Node.JS (Express) - MongoDB (Mongoose) Технологии веб-приложений на основе MVC


Node.JS (Express) - MongoDB (Mongoose)

Технологии создания веб-приложений с GUI на основе Node (Express) - MongoDB (Mongoose) с применением концепции MVC

Автор: Владимир Ткаченко

Источник: Обучение в интернет

Продолжение статьи Node.JS, Express и MongoDB. Продолжим рассмотрение методов взаимодействия СУБД MongoDB с приложениями, созданными на JS в среде Node.js. Исследуем концепцию MVC разработки современных веб-приложений на основе Node, Express и MongoDB с применением библиотеки Mongoose. Mongoose - это интерфейс для MongoDB. В данной работе взаимодействия веб-приложений Node.js с MongoDB будут основаны на Mongoose.

Что касается взаимодействия клиентской и серверной частей веб-приложения, то они будут осуществляться через графический интерфейс пользователя с применением AJAX запросов на основе jQuery - $.ajax(). Следует отметить, что в настоящее время наиболее перспективной технологией обмена данными между клиентом и сервером в режиме реального времени является WebSocket.

В данной статье рассмотрены основные современные Web-технологии и средства создания веб-приложений, к которым относятся: HTML5,(CSS3), JavaScript (jQuery), Bootstrap, JSON, AJAX, Node.js (Express), NoSQL (MongoDB), концепция MVC. В качестве веб-приложения рассмотрим Web коммуникационную систему рассылки СМС-сообщений через Интернет на платформе Node.js - MongoDB. Веб-приложение будем строить на основе конструкционного шаблона проектирования или паттерна MVC (Model-View-Controller) на Node.js (рис. 1).

Веб-приложения на основе Node, Express и MongoDB/Mongoose с концепцией MVC
Рис. 1. Скриншот структуры Client (WebBrowser)-WebServer-Web application-DatabaseServer(MongoDB/Mongoose) на основе паттерна MVC.

Создание директории для веб-приложения с базой данных "MVCdb" и коллекцией "employees"

Создадим для веб-приложения новый каталог, который назовем SMS-MVC. Создать скелет или каркас веб-приложения можно при выполнении в командной строке "npm i -g express" и дальнейшего выполнения команды, например, "express –e" с опцией –e или с применением другой опции (J, H и т.д.) при выполнении команды express. После завершения выполнения команд, каркас приложения будет выглядеть следующим образом (рис. 2).

Каркас веб-приложения
Рис. 2. Скриншот каркаса веб-приложения.

Затем выполним "npm install", после чего необходимые для каркаса модули будут установлены и добавлены в директорию node_modules. Далее после редактирования каркаса веб-приложения и установки библиотеки mongoose в директорию SMS-MVC
C:\SMS-MVC> npm install mongoose --save
файл "package.json" имеет вид:


{
  "name": "SMS-MVC",
  "version": "1.0.0",
  "description": "my first SMS-MVC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "mongoose": "^5.4.7",
   },
  "scripts": {
    "start": "node app.js"
  },
  "main": "app.js",
  "devDependencies": {},
  "author": "",
  "license": "ISC"
}		        

Что касается структуры веб-приложения (подкаталогов и входящих в нее файлов), то она после редактирования с учетом поставленной задачи имеет следующий вид:

Скриншот структуры веб-приложения
Рис. 3. Скриншот структуры веб-приложения в директории SMS-MVC.

Cоздание серверной части веб-приложения app.js с применением фреймворка express и библиотеки mongoose на основе паттерна MVC

В этой статье рассмотрим маршруты, ориентированные на CRUD-операции. Существует множество методов создания Node-приложений для работы с MongoDB, с помощью которых могут быть выполнены операции CRUD. В качестве образца для создания веб-приложения выбираем материалы, изложенные в Express и Mongoose сайта "METANIT.COM - Сайт о программировании", Mongoose v5.4.8: Getting Started и Writing и CRUD app with Node.js and MongoDB.

Разработка файла серверного приложения app.js, которое является главной точкой входа, выполнена с учетом концепции MVC. В файле app.js сначала подключаем библиотеки mongoose, express, body-parser и определяем jsonParser, импортируем объект router (employeeroute). Далее создаем объект приложения express с именем app и подключаем промежуточное ПО или middleware (bodyParser).

Затем подключаем Web application к базе данных mvcdb. Подключаем библиотеку express.static для обработки статических файлов из папки /public, при этом осуществляем замену директории public на client. Подключаем промежуточный обработчик уровня приложения app.use('/', employeeroute). Все, серверное приложение app.js готово к работе.


// Директива use strict
'use strict';
const mongoose = require("mongoose");
const express = require("express");
// Подключаем модуль body-parser.
const bodyParser = require("body-parser");
// jsonParser превращает строку текста JSON в объект Javascript
const jsonParser = bodyParser.json();
// Импорт маршрутов 
const employeeroute = require ('./routes/employeeroute'); 
//Создаем веб-сервер
const app = express();

// Для обработки запросов  подключаем middleware (bodyParser)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Подключаемся к базе данных mvcdb
mongoose.connect("mongodb://localhost:27017/mvcdb", { useNewUrlParser: true }, function(err){
    if(err) return console.log(err);
    app.listen(3000, function(){
        console.log("Cервер прослушивает входящие соединения!");
    });
});
app.use(express.static(__dirname + "/client"));
// Для импортированного файла (кода) employees.js задаем путь '/' к обработчику  
app.use('/', employeeroute);
			

Router - employeerouter.js

Файл employeerouter.js - это файл путей. В файле employeerouter.js сначала подключаем фреймворк Express для приложений Node.js. Затем Express используется для получения объекта router (const router = express.Router()). Далее подключаем модуль body-parser для обработки запросов HTTP POST и определяем jsonParser. Следующий шаг - импортируем объект employeecontroller. Далее для экземпляров объекта router задаем пути маршрутизации.

Затем объект router экспортируется, в результате чего он может использоваться файлом app.js (объект router импортируется в файл app.js). Следует отметить, что в рассматриваемом веб-приложении все маршруты, ориентированные на CRUD-операции (post, get, delete и put), помещены в единый файл employeerouter.js.


// директива use strict.
'use strict';
const express = require('express');
const router = express.Router();
// Подключаем модуль body-parser.
const bodyParser = require("body-parser");
const jsonParser = bodyParser.json();
// Импорт контроллеров
const employeecontroller = require('../controllers/employeecontroller');

// Маршрут добавления документа в MongoDB 
router.post ("/employees", employeecontroller.employeecreate);
// Маршрут чтения документов
router.get('/employees', employeecontroller.employeeread);
// Маршрут чтения документа по id
router.get("/employees/:id", employeecontroller.employeereadid);
// Маршрут удаления документов 
router.delete("/employees/:id", employeecontroller.employeedelete);
// Маршрут обновления документов   
router.put("/employees", jsonParser, employeecontroller.employeeput);
// Export the router
module.exports = router; 

Controller - employeecontroller.js

Контроллеры определяют логику работы веб-приложения. Контроллеры получают данные от роутеров из файла employeerouter.js, вызывают модель из файла employeemodel.js и обрабатывают входящие запросы и исходящие ответы. Исходящие ответы (данные) контроллеры передают приложению client.js. Следует отметить, что все контроллеры помещены в единый файл employeecontroller.js.

В файле employeecontroller.js сначала импортируем объект Employee. Затем создаем контроллеры управления запросами и объекты файла employeecontroller.js экспортируем, в результате чего они могут использоваться файлом employeerouter.js. Объекты контроллеров (employeecreate, employeeread, employeereadid, employeedelete, employeeput) импортируются в файл employeerouter.js.


// Директива use strict.
'use strict';
// Импорт модели
const Employee = require('../models/employeemodel');

// Добавление документа в MongoDB
exports.employeecreate = function (req, res) {
    if(!req.body) return res.sendStatus(400);
    const employeeName = req.body.name;
    const employeePhone_number = req.body.phone_number;
    const employee = new Employee({name: employeeName, phone_number: employeePhone_number});
    employee.save(function(err){
        if(err) return console.log(err);
		res.send(employee);
    });
};
// Чтение документов
exports.employeeread = function (req, res) {
    Employee.find({}, function(err, employees){
        if(err) return console.log(err);
        res.send(employees)
    });
};
 // Чтение документа по id
exports.employeereadid =  function(req, res){
    const id = req.params.id;
    Employee.findById(req.params.id, function(err, employee){
        if(err) return console.log(err);
        res.send(employee);
    });
};
 // Удаление документа 
exports.employeedelete = function(req, res){
    const id = req.params.id;
    Employee.findByIdAndDelete(id, function(err, employee){
        if(err) return console.log(err);
        res.send(employee);
    });
};
 // Обновление документа   
exports.employeeput = function(req, res){
    if(!req.body) return res.sendStatus(400);
    const id = req.body.id;
    const employeeName = req.body.name;
    const employeePhone_number = req.body.phone_number;
    const newEmployee = {name: employeeName, phone_number: employeePhone_number};
     Employee.findOneAndUpdate({_id: id}, newEmployee, {new: true}, function(err, employee){
        if(err) return console.log(err); 
        res.send(employee);
    });
};				

Model - employeemodel.js

Модель - это средство для манипуляции с данными документов на основе схемы, которые представляют концепцию управления приложением. Схема - это свойство mongoose.Schema, а модель - это метод mongoose.model(), который принимает два параметра, один из которых схема. Файл employeemodel.js создает модель, с помощью которой на основе employeeSchema осуществляются CRUD-операции взаимодействия веб-приложения на основе Node.js с MongoDB.

В файле employeemodel.js сначала подключаем библиотеку mongoose. Затем определяем схему модели с двумя свойствами: name и phone_number. Далее создаем модель Employee и выполняем экспорт модели, в результате чего модель может использоваться файлом employeecontroller.js (объект Employee импортируется в файл employeecontroller.js)


// Директива use strict.
'use strict';
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// Определяем схему с двумя свойствами: name и phone_number 
const employeeSchema = new Schema({name: String, phone_number: Number}, {versionKey: false});
// Создаем модель, с помощью которой на основе employeeSchema создаем документы 
// Экспортировать модель
const Employee = module.exports = mongoose.model('Employee', employeeSchema);				
				

Представление - index.html

Представление отвечает за отображение данных в Web браузере пользователя. В рассматриваемом веб-приложении в качестве модуля представления (views) используется Client, директория для обработки статических файлов. В директорию Client помещен файл index.html. Клиентская часть веб-приложения или скрипт client.js для файла index.html помещен в подкаталог js, который помещен в директорию Client. В рассматриваемом веб-приложении применяем коды графического интерфейса пользователя index.html и клиентской части приложения client.js, которые использовались в проекте: Технологии создания веб-приложений на основе Node, Express и MongoDB.

Запуск веб-приложения на локальном сервере

В командной строке запустим сервер баз данных MongoDB, который находится в папке bin и называется mongod:
C:\mongodb>bin\mongod

Затем запустим серверное приложение app.js на выполнение во второй командной строке, для этого перейдем в каталог SMS-MVC, в котором он помещен:
C:\SMS-MVC>node app.js

Введем в адресную строку браузера локальный адрес веб-приложения http://localhost:3000/, в результате чего в окне браузера будет отображаться веб-страница index.html с пустой таблицей данных о сотрудниках и средствами управления базой данных MongoDB (mvcdb).

Используя средства управления графического интерфейса пользователя, можно выполнять основные операции CRUD, которые изложены в Node.JS, Express и MongoDB.

В дальнейшем будет рассмотрено хранение данных в облаке mLab или Atlas MongoDB Cloud и взаимодействие облачных БД с приложениями, созданными на JS в среде Node.js.