Сервер на Node.js - Начало

Сервер на Node.js - Начало

Содержание курса

  1. Начало
  2. Шаблонизация (часть первая)
  3. Шаблонизация (часть вторая)
  4. Шаблонизация (часть третья)

 

Всем привет. Данная статья является началом небольшого курса, в рамках которого мы напишем сервер для простенького бложика. Функционал будет примерно следующий:

  • Добавление / Редактирование / Удаление статей
  • Загрузка файлов
  • Пагинация (разбиение контента на несколько страниц)
  • Различные сортировки
  • Поиск по сайту
  • Регистрация / Авторизация
  • Комментирование

По ходу дела, возможно добавим что-то ещё. Функционал вполне стандартный и полученных вами знаний хватит для написания практически любого сайта. Реализовывать всё это, как вы наверное уже догадались из названия, мы будем на Node.js.

Конечно же, сайт состоит не из одного сервера, и для написания "визуальной" части вам понадобится знание HTML и CSS. Если вы в этом ни в зуб ногой, то для начала лучше потратить пару дней на изучение основ HTML/CSS.

Установка

Для начала вам необходимо установить Node.js. Скачать его можно с оф. сайта. У меня стоит версия 7.7.2. Чтобы избежать всяких проблем, советую вам поставить такую же. После установки перезагружаем ПК и проверяем ноду. Для этого открываем консоль (Win + R, в поле пишем cmd) и прописываем слово node . Если всё установилось корректно, то запустится процесс, в котором вы сможете выполнять арифметические операции:

Проверка Node.js

Для завершения процесса дважды нажмите Ctrl + C .

Создание проекта

Создайте отдельную папку для вашего проекта и перейдите в неё в консоли. Для этого воспользуйтесь конструкцией cd полный путь до вашей папки (полный путь можно скопировать из адресной строки проводника, вставить в консоль можно через ПКМ -> Вставить). 

Переход в нужную папку из консоли

Теперь установим необходимые модули. Для начала создайте в папке проекта файл package.json со следующим содержанием:

{
  "name": "appName",
  "version": "1.0.0"
}

Далее из консоли устанавливаете модули командой: npm install название модуля --save .  При этом все установленные вами модули будут прописываться в файле package.json.

Поочерёдно устанавливаем:

  • express - фреймворк для упрощения создания сервера.
  • url - модуль для работы с url

Установка модуля express

Установка модуля url

Также, по ссылке внизу, можно скачать мой файл package.json, скопировать его в вашу папку и в консоли набрать npm install . В этом случае все прописанные в нём модули установятся в автономном порядке и именно те версии, которые использовал я.

Написание сервера

Теперь приступим непосредственно к нашему серверу. Создаём файл server.js и прописываем в нём следующий код:

// Подключаемые модули
var express = require('express');
var url = require("url");


var app = express();  // Привязываем express к нашему "приложению"


// Блок переменных
var pathname = '';  // Переменная для хранения текущего url


// Обработчик запросов
app.use(function(req, res) {
  // Определяем текущий url
  pathname = url.parse(req.url).pathname;
  
  // Отправляем полученный url обратно на клиент
  res.send(pathname);
});


app.listen(3000);   // Установка порта

Для того, чтобы запустить наш сервер прописываем в консоли node server.js . Теперь мы можем с ним взаимодействовать по адресу http://localhost:3000.

Что же делает наш сервер? Он выводит на страницу текущий url адрес (http://localhost:3000/test, http://localhost:3000/test/long-url).

Вы можете подумать: "И всё? Что за убожество?!", но терпение...

Для завершения работы сервера в консоли нужно нажать Ctrl + C .

Давайте наконец напишем что-то дельное.

// Подключаемые модули
var express = require('express');
var url = require("url");


var app = express();  // Создаем объект приложения


// Блок переменных
var pathname = '';  // Переменная для хранения текущего url
var result;         // Переменная для хранения результата вызываемых ф-й

// База данных
var bd = [
  {url: '/', content: '<h3>Главная страница</h3><a href="/post-1.html">Статья №1</a><br><a href="/post-2.html">Статья №2</a>'},
  {url: '/about', content: '<h3>О нас</h3>'},
  {url: '/contacts', content: '<h3>Наши контакты</h3>'},
  {url: '/post-1.html', content: '<h3>Статья №1</h3>'},
  {url: '/post-2.html', content: '<h3>Статья №2</h3>'}
];


// Обработчик запросов
app.use(function(req, res) {
  // Определяем текущий url
  pathname = url.parse(req.url).pathname;

  // Проверяем url
  result = find(bd , pathname);
  if(result != -1) {
    res.send(bd[result].content);                     // Если страница найдена, то отправить её на клиент
  } else {
    res.status(404).send('Страница не найдена...');   // Иначе, отправить ошибку 404
  }
});

app.listen(3000);   // Установка порта


// Функция поиска в массиве
function find(array, value) {
  for (var i = 0; i < array.length; i++) {
    if (array[i].url == value) return i;
  }
  return -1;
}

Что мы сделали:

  • добавили базу данных, состоящую из соответствий "url - содержание". (пока роль БД выполняет простой массив - настоящую мы подключим позже)
  • написали функцию поиска по этой БД
  • добавили в обработчик запросов функционал, который проверяет: есть ли в БД запрашиваемый url. Если есть, то на клиент возвращается соответствующее содержание, иначе - выводиться ошибка 404 ('Не найдено')

Снова запускаем наш сервер и смотрим: http://localhost:3000, http://localhost:3000/about, http://localhost:3000/contacts. Уже что-то!

Если запросим несуществующую страницу: http://localhost:3000/wrong-url, то получим нашу ошибку. По сути, это уже какой-никакой сайт, только возвращать нужно не коротенькие надписи, а полноценные странички. Но этим мы займёмся в следующий раз.

А пока давайте подробно разберём как же всё работает. Большая часть понятна из комментариев, но разберём некоторые моменты:

В самом начале мы подключаем наши модули при помощи require и привязываем их к переменным.

Что касается обработчика, то мы вызываем у нашего express объекта функцию use() , которая реагирует на любые запросы клиента (POST, GET и т.д.). При каком-либо запросе срабатывает переданная в качестве параметра ф-я: 

function(req, res) {
  // Определяем текущий url
  pathname = url.parse(req.url).pathname;

  // Проверяем url
  result = find(bd , pathname);
  if(result != -1) {
    res.send(bd[result].content);                     // Если страница найдена, то отправить её на клиент
  } else {
    res.status(404).send('Страница не найдена...');   // Иначе, отправить ошибку 404
  }
}

Она в свою очередь принимает 2 аргумента:

  • req - содержит все данные, передаваемые из клиента на сервер
  • res - через него отправляются данные с сервера на клиент.

Если очень интересно, то можете посмотреть их содержимое, добавив в обработчик console.log(req); . Там так много всего, что даже в консоли не поместится. Но вот, например, что касается url: console.log(req.url);

И вот мы извлекаем из req необходимый нам url, проверяем его через БД и возвращаем на клиент либо содержимое, либо ошибку. Отправить данные на клиент можно через res.send(); . Если при этом мы хотим указать статус этих данных, то пишем res.status().send();

  • Статус 404 - ошибка, означающая что запрашиваемый контент не найден.
  • Статус 500 - внутренняя ошибка сервера
  •  и т.д.

В самом конце мы прописываем порт, на котором нужно "слушать" запросы. Именно его мы потом указываем в наше url (http://localhost:3000).

На этом всё, если что-то не понято - спрашивайте в комментариях. Свои претензии и пожелания пишите туда же.

P.S. исходники можно найти здесь.

TEXT.RU - 100.00%

Поделиться ссылкой:

Добавить комментарий

Зарегистрируйтесь или Войдите, чтобы оставить комментарий.

Системное сообщение