Основы Node JS & Express ( III ).
Разбираемся, что такое npm и для чего он нужен. Устанавливаем Express и шаблонизатор EJS. Делаем полную подготовительную работу и начинаем создавать свой собственный сайт на NodeJS.
Все материалы по JavaScript
Пакетный менеджер npm.
npm - это менеджер пакетов для JavaScript и крупнейший в мире реестр программного обеспечения.Говоря простыми словами - это программное обеспечение, которое позволяет нам устанавливать различные библиотеки, зависимости между ними, подключать к нашему проекту различные дополнительные модули и выгружать свой собственный код в какой-либо репозиторий.
npm полностью бесплатный и скачивается вместе с установкой Node.JS.
Установить нужные пакеты или библиотеку очень просто. В поиск на сайте npm вводите название нужной библиотеки и получаете полное руководство по установке.
Для установки нужно в КС (командной строке) перейти в папку проекта и набрать:
npm install package_name
package_name - название пакета, или библиотеки.
Удалить:
npm uninstall package_name
Нажать Enter.
Файл package.json.
Когда вы работаете над проектом и захотите отправить свой код какому-либо другому программисту, то вам не нужно будет отправлять все библиотеки и модули, которые у вас есть в проекте. Это очень затратный процесс. Вы сможете отправить свой код без библиотек. В файле package.json будет вся информация по вашему проекту и зависимостях и любой разработчик сможет легко развернуть ваш проект на любой машине используя ту информацию, которая есть в файле package.json. Ему будет достаточно просто прописать в КС команду
npm install
И все библиотеки и зависимости будут автоматически установлены в проект.
Создание файла package.json
Для создания этого файла можно просто ввести в КС:
npm init
Далее можно заполнить предложенные строки, или просто нажимать Enter. В конце согласиться - нажать y и Enter.
После этого в папке проекта появится новый файл - package.json. Если его открыть, то вы увидите там все информацию по проекту.
Раздел
dependencies служит для сохранения всех зависимостей нашего проекта.
Экспресс
Библиотека Express хороша по многим причинам. Она позволяет значительно упростить написание кода. Например: отслеживание url-адресов здесь будет настроено намного проще, нежели в NodeJS. Кроме того здесь есть различные шаблонизаторы, которые позволяют легко выводить html вместе с данными полученными от NodeJS.Установка Express
Очень простая. Открываем папку нашего проекта в КС. Для этого достаточно просто перетащить туда папку, чтобы получить путь (фишка для windows).
npm install express -save
Флаг
-save позволит сразу прописать эту библиотеку в зависимостях dependencies файла package.json.
Работа
чтобы обратиться к библиотеке мы создадим переменную и пропишем:let express = require('express');
Теперь этот модуль вернет нам функцию, которую мы должны вызвать.
Создадим новую переменную app и обратившись к переменной express вызываем ее, как функцию.
let app = express();
Таким образом мы в переменной app получим доступ ко всем функциям, которые ест ьу нас в библиотеке Express - мы сможем подключиться к серверу, обрабатывать различные ссылки и пр.
Здесь мы точно так же настраиваем сервер и должны указать порт, который мы будем отслеживать.
app.listen(8080);
Маршрутизация в Express
Для отслеживания ссылок:app.get() - отслеживает get запросы.
app.post()-отслеживает post запросы.
Так, как мы собираемся отслеживать get-запрос на нашу главную страницу. то пишем так:
app.get('/', fn)
fn - вторым параметром - функция, которая похоже на функцию, которая была в NodeJS ранее. У этой функции в Express больше возможностей.
Для начала, просто выведем текст, когда будем попадать на главную страницу.
res.send('This is Home');
.send() - в Express почти тоже самое, что .end() NodeJS.
index.js
let express = require('express');
let app = express();
app.get('', function(req, res){
res.send('This is Home');
});
app.listen(8080);
В КС
node index.js
Вывели текст на страницу. Если попробовать перейти на др страницу, например http://localhost:8080/test,
то увидим:
Если бы мы прописали еще один обработчик:
let express = require('express');
let app = express();
app.get('/', function(req, res){
res.send('This is Home');
});
app.get('/news', function(req, res){
res.send('This is News');
});
app.listen(8080);
Выводить html текст здесь так же просто.
В данный момент мы умеем отслеживать только статические ссылки.
То есть эти ссылки никак не меняются.
А что если нам нужно отследить ссылку с каким то ID статьи? Например /news/23
Для этого нам нужно добавить еще один /: и абсолютно любое имя, которое мы захотим.
Например так:
app.get('/news/:id', function(req, res){
res.send('This is News');
});
И теперь по этому
id можно отслеживать ту часть, которая будет там записана. Мы можем даже вывести id на страницу.
req.params.id - здесь id - название отслеживаемого параметра. Оно будет любое, но точно такое как и
/news/:id
В данном случае, id может быть строкой, числом и вообще всем чем угодно :-) Это не привязывает нас к числам!
Можно поменять id на name или любое другое.
app.get('/news/:name', function(req, res){
res.send('ID is - ' + req.params.name);
});
По этому id мы можем брать информацию из базы данных и показывать (статью. фото и пр).
Отслеживать несколько параметров:
app.get('/news/:name/:id', function(req, res){
res.send('ID is - ' + req.params.name + req.params.id);
});
Использование шаблонизатора.
Отображаем html-файлы в браузере
До этого мы использовали методsend(), теперь нам нужно использовать метод - sendFile(), которому мы должны передать путь к файлу.
let express = require('express');
let app = express();
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
app.get('/about', function(req, res){
res.sendFile(__dirname + '/view/about.html');
});
app.get('/news/:name/:id', function(req, res){
res.send('ID is - ' + req.params.name + req.params.id);
});
app.listen(8080);
Файлы можно поместить в отдельную папку ( на примере about).
Файлы я взял из части второй этого курса. Если вы не знакомы с ней, то вот ссылка Основы NodeJS - Вторая часть.
Теперь с параметрами, которые постоянно будут меняться.
Если нам нужно создать ссылку на некое значение, после /mews/значение. Оно будет меняться. Например: 23, part или любое др значение.
app.get('/news/:id', function(req, res){
res.send('ID is - ' + req.params.id);
});
В зависимости от этого параметра мы можем брать данные из БД (базы данных) и выводить конкретную статью.
Нам нужен некий html файл куда мы будем передавать данные нашего id и в зависимости от этих данных выводить ту или иную информацию.
Нам нужен некий шаблонизатор.
Благодаря Express мы можем использовать несколько шаблонизаторов.
Один из них это EJS
Поскольку EJS является дополнительным пакетом, то нам нужно его установить.
npm install ejs
Нажать Enter
После этого он установится в наш проект.
Он позволяет передавать данные в различные шаблоны, причем эти шаблоны будут иметь расширение
.ejs.
В этих шаблонах мы сможем выводить наш html код вместе с вставленным в него js кодом (переменными, выводить циклы и многое другое).
Будет такой шаблон страницы, который будет изменяться в зависимости от переданных в него данных.
Первое, что нам нужно сделать это указать какой view engine мы будем использовать.
view engine - по сути шаблонизатор.
Поскольку их существует огромное количество, а мы выбрали именно EJS, то мы должны его указать в нашем index.js файле.
Сразу после инициализации переменной
app.
app.set('view-engine', 'ejs');
Все файлы, которые мы будем отображать, по умолчанию будут искаться в папке views.
На том же уровне, где index.js создадим папку views.
В ней создадим новый файл news.ejs. Это будет некий шаблон, который мы будем наполнять.
В эти шаблоны мы можем помещать самый обычный html-код.
Мы в него добавили обычный html-код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wight=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Новости</title>
<style>
body {background-color:#98bfd5;}
.block {text-align: center; width: 70%; margin-left: 15%}
h1 {color:#494949; font-size: 3.5em}
p {color:#494949; font-size: 1.2em;}
</style>
</head>
<body>
<div class="block">
<h1>Новостная страница.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque numquam libero, veniam ipsum similique odit molestiae esse quia blanditiis magni debitis aliquam, pariatur nam quaerat quas nemo, facilis temporibus laboriosam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores enim vitae dolore nemo quas aliquam quia corrupti rerum ipsam ad nesciunt, architecto, pariatur officiis. Maxime iste ullam quibusdam, nobis voluptas!</p>
</div>
</body>
</html>
Идем к файлу index.js. Здесь по ссылке
/news/:id я хочу выводить наш шаблон.
Для этого мне не нужно использовать метод
.send или .sendFile, а мне потребуется метод render().
Метод
render() берет нужный файл (шаблон) в папке views и может отобразить его в браузере. Плюс в этот шаблон он может передать некие параметры.
Расширение в методе
render() можно не указывать. Далее можно передать некие параметры в сам шаблон. Поэтому мы передаем вторым параметром - объект. В нем может быть большое количество свойств и значений.
Допустим, что мы решили передать некий параметр
newsId со значением req.params.id
- то есть значение будет как раз сам вызываемый id.
app.get('/news/:id', function(req, res){
render('news', {newsId: req.params.id});
});
Таким образом в шаблон news будет передано значение, которое будет называться newsId со значением id.
В файл news.ejs мы можем все это принять и отобразить.
Немного изменим наш файл news.ejs. В заголовок страницы будем выводить ID.
Все можно посмотреть в документации к шаблонизатору EJS (ссылка выше).
Ставим
<%= и далее имя свойства, значение которого мы хотим увидеть на странице. Закрыть тег - %>
<h1>Новостная страница c ID = <%= newsId %></h1>
Файл /views/news.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wight=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Новости</title>
<style>
body {background-color:#98bfd5;}
.block {text-align: center; width: 70%; margin-left: 15%}
h1 {color:#494949; font-size: 3.5em}
p {color:#494949; font-size: 1.2em;}
</style>
</head>
<body>
<div class="block">
<h1>Новостная страница c ID = <%= newsId %></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque numquam libero, veniam ipsum similique odit molestiae esse quia blanditiis magni debitis aliquam, pariatur nam quaerat quas nemo, facilis temporibus laboriosam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores enim vitae dolore nemo quas aliquam quia corrupti rerum ipsam ad nesciunt, architecto, pariatur officiis. Maxime iste ullam quibusdam, nobis voluptas!</p>
</div>
</body>
</html>
Файл index.js
let express = require('express');
let app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
app.get('/about', function(req, res){
res.sendFile(__dirname + '/about.html');
});
app.get('/news/:id', function(req, res){
res.render('news', {newsId: req.params.id});
});
app.listen(8080);
Мы можем передавать несколько параметров. Например:
app.get('/news/:id', function(req, res){
res.render('news', {newsId: req.params.id, newParam: 535});
});
, а в файле news.ejs выведем его на страницу, например так:
<p><%= newParam %></p>
Помимо этого мы можем передавать и собственные объекты. Например, создадим объект:
app.get('/news/:id', function(req, res){
let obj = { title:'Новость', id: 4};
res.render('news', {newsId: req.params.id, newParam: 535});
});
И этот объект мы тоже можем передавать. Вначале определяем название того, что будем передавать, а потом указываем что передаем.
Например:
app.get('/news/:id', function(req, res){
let obj = { title:'Новость', id: 4};
res.render('news', {newsId: req.params.id, newParam: 535, obj: obj});
});
<p><b>Title = </b><%= obj.title %></p> <p><b>ID = </b><%= obj.id %></p> <p><%= newParam %></p>
Передача в шаблон массива.
Создадим массив данных и выведем его с помощью цикла.
app.get('/news/:id', function(req, res){
let obj = { title:'Новость', id: 4, paragraphs:['Параграф', 'Обычный текст', 'Числа: 3, 7, 24', 476]};
res.render('news', {newsId: req.params.id, newParam: 535, obj: obj});
});
Все, что мы добавили будет передано в шаблон, так как объект obj уже будет передан в шаблон.
Теперь в самом шаблоне мы просто выведем этот массив циклом:
<ul> <% obj.paragraphs.forEach(function(item) { %> <li><%= item %></li> <% }); %> </ul>
Статические файлы и промежуточное ПО.
Файлы, которые можно включить в другие файлы.
Сейчас у нас есть один шаблон - news.ejs, а представьте. что их много. Десятки. И вам потребуется внести изменения в какую-то часть кода, который встречается во всех этих файлах. Придется вносить множество изменений.Чтобы этого избежать, можно использовать файлы, которые можно включать в другие файлы. Например. Есть файл с шапкой сайта. И если нужно что-то изменить, то достаточно внести изменения только в один файл, так как к другим он просто подключается.
В папке шаблонов views создадим папку blocks , а в ней файл hrader.ejs.
Файл hrader.ejs
<ul> <li><a href="/">На главную</a></li> <li><a href="/about">Про нас</a></li> <li><a href="/news/новости">Новости</a></li> </ul>
Теперь нам нужно этот файл подключить во всех шаблонах. Идем в файл news и сразу после открывающего тега
body записываем:
<% include blocks/header.ejs %>
Путь указывается от папки views, поскольку шаблонизатор всегда начинает искать там.
Статические файлы.
Создадим новую папку на уровне index.js с названием public. В ней будут находиться все статические файлы. Это css-файлы, картинки, документы и пр. Все те файлы. которые будут вызываться с различных страниц нашего сайта.В этой папке создадим еще одну папку - css и уже в ней создадим файл style.css.
В него перенесем весь код стилей из файла index.ejs
В файлах
.ejs подключаем стили:
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
Если теперь проверить, то ничего не произойдет. Стили не подключатся.
Для подключения статических файлов нам нужно использовать промежуточное программное обеспечение:
В файле index.js вверху, сразу за
app.set, мы должны написать:
app.use('/public', );
И теперь, если мы где то будем использовать ссылку начинающуюся с /public сам NodeJS и Express будет понимать, что мы используем статические файлы и будет подключать все верно.
вторым - где мы их ищем
express.static('public') т. есть в папке /public.
Если обобщить, то в коде
app.use('/public', express.static('public')); мы отслеживаем ту ссылку, которую прописываем в
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
Если бы у на было бы вот так:
<link rel="stylesheet" type="text/css" href="/assets/css/style.css">
то и в этом коде было бы:
app.use('/assets', express.static('public'));
В данном случае public указывает на папку!
Если так и оставить, то никаких изменений не произойдет. Файл подключится, потому что мы будем отслеживать ссылку assets .
Перед тем как использовать ссылки на статические файлы, мы должны указать какая папка у нас отвечает за статические файлы (выделил красным) и какая ссылка (желтым) ведет к этим статическим файлам.
app.use('/assets', express.static('public'));
Для того, чтобы не путаться, обычно, делают ссылку и папку одного имени. Чаще всего это именно public.
Промежуточное ПО - это то, что мы делаем до того пока отправим какие-то данные на страницу (сервер).
В данном случае это и есть наше промежуточное ПО.
Создание HTML-формы и получение данных
Первое, что мы сделаем это добавим саму форму на наш сайт.Открываем файл about.ejs и сюда мы будем добавлять форму используя технологию bootstrap.
Идем на сайт Bootstrap.
Нажимаем на Get Started, копируем css ссылку для подключения и вставляем ее в head файла about.ejs.
В окно поиска вводим Forms и на найденной странице копируем первую форму сверху.
Сохраним и запустим.
POST -запрос.
Так так мы будем выполнять POST -запрос, то нам необходимо добавить в форму несколько атрибутов.method="post" - т.к POST -запрос
И
action="" - это то куда нужно перенаправить пользователя после того,как он нажмет "Отправить". В нашем случае это:
<form method="post" action="/about">
Все остальное нам нужно сделать в файле index.js
Первым делом нам необходимо скачать пакет, который называется body-parser.
Он нам позволяет брать POST -запрос, который идет от формы и обрабатывать его. Проще говоря - получать все данные из формы.
Для установки, в папке проекта в КС пишем.
npm install body-parser
Нажимаем - Enter.
Пакет устанавливается.
После установки стоит следовать простой инструкции.
Перейдем на сайте в раздел Examples и найдем там раздел Express route-specific
- Подключаем нужные для нас модули.
- Далее, на основе документации, мы видим, что нам нужно отслеживать именно POST -запрос и передавать в него некое промежуточное ПО (
urlencodedParser). Ранее мы уже отслеживали GET- запросы.
var bodyParser = require('body-parser')
и
var urlencodedParser = bodyParser.urlencoded({ extended: false })
То есть тот парсер, который позволит нам брать данные из POST -запроса и работать с ними как нам будет нужно.
Данные полученные из формы мы выведем в консоль.
console.log(req.body);
Можно сразу добавить проверку. Если не передано никаких данных из формы, мы выдадим просто ошибку.
if (!req.body) return res.sendStatus(400)
В самой форму нужно указать для полей атрибут name. Это будут названия свойств, а значение - это то, что введет пользователь.
about.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>О нас.</title> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="/public/css/style.css"> </head> <body> <% include blocks/header.ejs %> <div class="container"> <h1>Hello, It is my first page on Node.js</h1> <h2>Заголовок второго уровня.</h2> <img src="http://www.chertpz.ru/assets/images/fotogallery_new/phormy_trub/Kvadrat.JPG" alt=""> <a href="index">На главную</a> <p>Равным образом укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным образом начало повседневной работы по формированию позиции требуют от нас анализа существенных финансовых и административных условий.</p> <h3>третьего уровня заглавие.</h3> <p>Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке систем массового участия. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p> <p>Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p> <form method="post" action="/about"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" name="pass" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" name="check" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Отправить</button> </form> </div> </body> </html>
index.js
let express = require('express');
var bodyParser = require('body-parser');
let app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.set('view engine', 'ejs');
app.use('/public', express.static('public'));
app.get('/', function(req, res){
res.render('index');
});
app.get('/about', function(req, res){
res.render('about');
});
app.post('/about', urlencodedParser, function(req, res){
if (!req.body) return res.sendStatus(400);
console.log(req.body);
res.render('about');
});
app.get('/news', function(req, res) {
res.render('news-common',{newParam1:'Param-1'});
});
app.get('/news/:id', function(req, res){
let obj = { title:'Новость', id: 4, paragraphs:['Параграф', 'Обычный текст', 'Числа: 3, 7, 24', 476]};
res.render('news', {newsId: req.params.id, newParam: 535, obj: obj});
});
app.listen(8080);
Введем данные и нажмем отправить. В консоли мы увидим вывод этих данных (свойство - значение).
Страница перезагрузится после отправки формы и в консоли мы увидим данные, которые отправили.
Теперь мы можем сделать так, чтобы после отправки мы показывали другие данные.
Изменим немного код в файле index.js
app.post('/about', urlencodedParser, function(req, res){
if (!req.body) return res.sendStatus(400);
console.log(req.body);
res.render('about-success', {data: req.body});
});
Таким образом мы будем выводить страницу about-success.ejs и мы ее сейчас создадим в папке views. Вторым параметром мы передадим данные формы в виде объекта. -
{data: req.body}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>О нас.</title>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
</head>
<body>
<% include blocks/header.ejs %>
<div class="container">
<h1>Hello, It is my first page on Node.js</h1>
<h2>Заголовок второго уровня.</h2>
<img src="http://www.chertpz.ru/assets/images/fotogallery_new/phormy_trub/Kvadrat.JPG" alt="">
<a href="index">На главную</a>
<p>Равным образом укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным образом начало повседневной работы по формированию позиции требуют от нас анализа существенных финансовых и административных условий.</p>
<p>Спасибо</p>
<p>
<b>Email:</b> <%= data.email %><br />
<b>Pass:</b> <%= data.pass %><br />
<b>isCheck:</b> <%= data.check %>
</p>
</div>
</body>
</html>
Таким образом вы можете отслеживать данные, которые поступают из форм, проверять их на соответствие и если пользователь что-то не заполнил, то выдавать ошибку и т.д.
Кроме этого было бы удобно отправлять эти данные на почту или сохранять в БД (базу данных).
Если вы хотите отправить их на почту. то в npm есть еще один пакет - Nodemailer. Этот пакет позволяет отправлять данные непосредственно на почту. Использовать его просто. И с помощью него вы можете получать по почте все данные формы, заполненной пользователем.
NodeJS предоставляет нам множество дополнительных пакетов. Например Express мы использовали для того, чтобы проще отслеживать ссылки и использовать шаблонизаторы. Body-parseer для того, чтобы принимать данные полученные из формы. Nodemailer - для отправки данных на почту.
Как получать данные из URL-строки.
Иногда нужно получить такой тип данных из адресной строки :http://localhost:8080/news/12?filter-id&city=london
Разберем, как получить эти данные на примере вот этого кода из файла index.js:
app.get('/news/:id', function(req, res){
let obj = { title:'Новость', id: 4, paragraphs:['Параграф', 'Обычный текст', 'Числа: 3, 7, 24', 476]};
res.render('news', {newsId: req.params.id, newParam: 535, obj: obj});
});
Просто выведем эти данные в консоль:
app.get('/news/:id', function(req, res){
let obj = { title:'Новость', id: 4, paragraphs:['Параграф', 'Обычный текст', 'Числа: 3, 7, 24', 476]};
console.log(req.query);
res.render('news', {newsId: req.params.id, newParam: 535, obj: obj});
});
В консоли мы увидим
{ filter: 'id', city: 'london' }
Это может быть иногда полезно.
