Статья2
11 сентябрь 2017

Статья2

NodeJS. Навигация по страницам.

Всем привет! В этой статье мы рассмотрим, как сделать навигацию по страницам на платформе NodeJS.

Сейчас, если вы попытаетесь перейти на какую-нибудь страницу, написав ее название в URL нашего сайта, то ничего не произойдет. Все дело в том, что мы пока не сделали роутинг(навигацию) по страницам. Давайте в этой статье как раз и рассмотрим, как можно реализовать такой функционал, наверное, самым простым, но рабочим способом.

Я сразу приведу код, а затем мы его подробно разберем:

var server = http.createServer(function(req, res) { 
 
if(req.url === '/home' || req.url === '/') { 
   res
.writeHead(200, {'Content-Type': 'text/html'}); 
   fs
.createReadStream(__dirname + '/index.html').pipe(res); 
 
} else if(req.url === 'contact') { 
   res
.writeHead(200, {'Content-Type': 'text/html'}); 
   fs
.createReadStream(__dirname + '/contact.html').pipe(res); 
 
} else if(req.url === '/api/users') { 
   
var users = [{name: 'John', age: 27}, {name: 'David', age: 37}]; 
   res
.writeHead(200, {'Content-Type': 'application/json'}); 
   res
.end(JSON.stringify(users)); 
 
} else { 
   res
.writeHead(404, {'Content-Type': 'text/html'}); 
   fs
.createReadStream(__dirname + '/404.html').pipe(res); 
 
} 
});

Итак, давайте разбираться. На самом деле, здесь нет ничего сложно, хоть код и получился достаточно громоздким. Мы используем свойство req.url, чтобы получить данные из адресной строки браузера. Дальше мы проверяем, находится ли там слово home или просто /, и, если да, то направляем пользователя на страницу index.html, которая лежит у нас на сервере, с помощью потокового вывода. Конечно же, не забываем указать нужный заголовок. То же самое мы делаем с другими страницами(страницы контактов и 404 вы можете создать любые. Например, можно просто скопировать все из index.html и поменять заголовок и основной текст). Если ничего не найдено, то в конце мы отправляем пользователя на страницу 404.html, указав браузеру заголовок 404.

Интереснее то, что происходит в строке с API. Здесь мы создали что-то вроде очень простого API. У нас есть массив с пользователями, каждый из которых представляет отдельный объект, который мы приводим к строке с помощью метода JSON.stringify() и отправляем с помощью метода end().

Как вы видите, здесь нет ничего сложного, но каждый раз писать такой большой код для каждой страницы достаточно утомительно. Хорошо, что есть специальный пакет, который позволит нам это дело очень сильно облегчить. Но о нем мы поговорим уже в следующей статье.

Спасибо за внимание!

Комментарии

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