NodeJS с нуля - часть 4

В предыдущих частях мы обсуждали -

основы nodeJS
отладка
асинхронное программирование
стек вызовов и цикл событий
обещания

Часть 1 - https://medium.com/@anujbaranwal/nodejs-8-from-scratch-part-1-a3c1431f1e15

Часть 2 - https://medium.com/@anujbaranwal/nodejs-8-from-scratch-part-2-3035f8f46b09

Часть 3 - https://medium.com/@anujbaranwal/nodejs-from-scratch-part-3-20956ec252a3

Репо - https://github.com/anuj070894/nodejs_medium_1

В этой части мы обсудим:

выражать
шаблоны
промежуточное ПО
развертывание героку

Экспресс

Это минималистичный фреймворк веб-приложений nodeJS, который предоставляет богатый набор функций для мобильных и веб-приложений. Очень легко создать API-интерфейс и производительность. Http://expressjs.com/

В этой части мы создадим типичное приложение для веб-портфолио с простыми страницами, такими как Главная страница, О программе, Проекты, Справка и т. Д.

Для начала -

Беги npm init

npm install express --save

Express поможет нам создать сервер, который будет обслуживать страницы при отправке запросов к серверу. Для этого нам нужно потребовать экспресс в нашем файле. И создайте новое экспресс-приложение, создав его экземпляр.

in express-web-app/app.js

const express = require('express');
const app = express();

Давайте создадим домашний маршрут для нашего приложения. Для этого пишем -

app.get('/', (req, res) => {
    res.send('Hello World!');
});

Вместо Hello World! мы можем использовать <h1>Hello World!</h1> или json. Нам не нужно ничего делать. Express помогает нам справиться с этим сразу же, и нам не о чем беспокоиться. Соответственно, можно увидеть заголовок ответа content-type. text/html или application/json были бы установлены на основе ответа от обработчика запросов.

app.get('/', (req, res) => {
 res.send('Text'); // Text
 // res.send('<h1>Header</h1>'); // html
 /* res.send({
  text: 'text'
 }); */ // json data
}); // check content-type in response headers - application/json, text/html

Наконец, нам нужно, чтобы наш сервер работал. Следовательно, он должен постоянно прослушивать порт, пока он не будет явно закрыт.

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Филиал - 07_Init

Давайте добавим еще один маршрут /help для обслуживания help.html, когда будет сделан запрос к localhost:3000/help.html.

in express-web-app/public/help.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Help Page</title>
</head>
<body>
<h1>Help Page</h1>
<p>Some help is needed!!!</p>
</body>
</html>

Однако мы должны сказать, что такие общедоступные ресурсы ищите в каталоге /public. Когда нам нужно выполнить такую конфигурацию, мы используем так называемое промежуточное программное обеспечение. Промежуточное ПО используется для предоставления дополнительных функций путем прямой настройки в соответствии с нашими потребностями.

app.use(express.static(__dirname + '/public'); // app.use - middleware. It's telling here that the static assets will be served from /public directory relative to the app
app.get('/help', (req, res) => {
res.render('help.html'); // to render html page, we use render method from res
});

Однако в большинстве случаев просто визуализировать статические страницы не так просто. Но потребуется динамически отображать страницы на основе пользовательской информации (или) повторно использовать html-шаблоны для нижнего и верхнего колонтитула.

Просмотр шаблона с данными

Чтобы добиться такого рендеринга шаблонов на основе данных, мы используем то, что мы называем механизмом создания шаблонов. В этой части мы будем использовать рули. Однако есть и другие, такие как jade, ejs и т. Д.

Для установки руля - npm install hbs --save

Папка по умолчанию для экспресс-просмотра таких шаблонов - просмотры. Тем не менее, мы должны сообщить Express, что мы будем использовать ручки в качестве нашего механизма просмотра.

Давайте посмотрим, как мы вводим данные на нашу страницу из ответа. Для этого мы создадим страницу О.

in express-web-app/views/about.hbs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{{titlePage}}</title>
</head>
<body>
<header>
<h1>{{contentHeader}}</h1>
</header>
<p>{{contentBody}}</p>
<footer>
<p>Copyright {{currentYear}}</p>
</footer>
</body>
</html>

in express-web-app/index.js

const hbs = require('hbs');
...
app.set('view engine', 'hbs'); // set express related configurations. key -> value pairs
...
app.get('/about', (req, res) => {
res.render('about.hbs', {
titlePage: 'About Page',
contentHeader: 'About Page',
contentBody: 'This is a Portfolio Website'
});
});
...

Давайте создадим домашнюю страницу, похожую на то, как мы создавали страницу с информацией о компании

in express-web-app/views/home.hbs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{{titlePage}}</title>
</head>
<body>
<header>
<h1>{{contentHeader}}</h1>
</header>
<p>{{contentBody}}</p>
<footer>
<p>Copyright {{currentYear}}</p>
</footer>
</body>
</html>

in express-web-app/index.js

...
app.get('/', (req, res) => {
res.render('home.hbs', {
titlePage: 'Home Page',
contentHeader: 'Home Page',
contentBody: 'Welcome to the Portfolio Website'
});
});
...

Филиал - 08_Init

Расширенное создание шаблонов представлений с данными

Как видно выше, home.hbs и about.hbs имеют компоненты нижнего и верхнего колонтитула, которые можно сделать общими. Для этого мы используем так называемые Частичные

Они называются частичными, потому что обычно представляют собой частичную часть вашего сайта, общую для разных веб-страниц.

Нам нужно зарегистрировать частичные данные с помощью hbs в нашем экспресс-приложении.

hbs.registerPartials(__dirname + '/views/partials');

in express-web-app/views/partials/footer.hbs

<footer>
<p>Copyright {{currentYear}}</p>
</footer>

in express-web-app/views/about.hbs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{{titlePage}}</title>
</head>
<body>
{{> header}}
<p>{{contentBody}}</p>
{{> footer}}
</body>
</html>

Итак, используя синтаксис {{> header}}, мы можем включать в страницу частичные данные.

Регистрация помощников внутри партиалов в hbs

Одна очень удобная функция заключается в том, что мы также можем регистрировать вспомогательные методы с помощью hbs, которые мы можем использовать на страницах .hbs.

hbs.registerHelper('getCurrentYear', () => {
 return new Date().getFullYear();
});
inside the .hbs pages
---------------------
{{getCurrentYear}}

Вместо обычных помощников, которые просто возвращают значения, мы также можем передавать параметры помощникам.

hbs.registerHelper('screamIt', (text) => {
  return text.toUpperCase();
});
inside the .hbs pages 
---------------------
{{screamIt welcomeMessage}}

in express-web-app/views/home.hbs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{{titlePage}}</title>
</head>
<body>
{{> header}}
<p>{{screamIt welcomeMessage}}</p>
<p>{{contentBody}}</p>
{{> footer}}
</body>
</html>

Промежуточное ПО

Промежуточное ПО должно прямо сказать, что мы хотим, чтобы вы немного настроили его так, как мы хотим, чтобы это работало.

Промежуточное ПО вызывается непосредственно перед фактическим выполнением любого запроса.

app.get('/', (req, res) => {
res.send('Hello World');
}); // a typical request handler to the root page

Если мы напишем промежуточное ПО вроде -

Он ожидает запроса, ответа и следующего в качестве параметров. Если мы не будем вызывать следующий внутри промежуточного программного обеспечения, он не выполнит обработчик запроса, например, res.send (‘Hello World’);

Это иногда бывает полезно, когда сайт находится на обслуживании.

app.use((req, res, next) => {
res.render('maintenance.hbs'); // we didn't call next
});

Однако основная цель такого промежуточного программного обеспечения - регистрировать детали запроса. Мы будем выполнять эту задачу в этой части.

app.use((req, res, next) => {
const currentTime = new Date().toString();
const log = `${currentTime}: ${req.method} - ${req.originalUrl}`;
fs.appendFile('server.log', log + "\n", (error) => {
if (error) {
console.log('Some error has happened while opening the file!!!');
}
});
next(); // we need to call next from the middleware to complete the request from happening
});

Порядок написания промежуточного программного обеспечения очень важен. Они выполняются в том же порядке, в котором написаны.

Филиал - 09_Init

Развертывание приложений

Мы будем развертывать наше приложение на heroku. Heroku позволяет нам развертывать, запускать и управлять приложениями, написанными на nodeJS и многих других языках программирования. Развертывание никогда не может быть проще, чем с heroku.

Обязательно зафиксируйте все изменения в репо.

Https://devcenter.heroku.com/articles/heroku-cli#download-and-install - Toolbelt для heroku можно скачать отсюда. Просто щелкни и установи

После этого нам нужно изменить наш package.json, чтобы указать heroku, как выбрать начальную точку для нашего приложения.

in express-web-app/package.json

{
"name": "express-web-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"hbs": "^4.0.1"
}
}

in express-web-app/index.js

Нам также необходимо динамически настроить параметры порта.

const port = process.env.PORT || 3000;
...
app.listen(port, ...)

Запустите heroku login, чтобы войти на свою платформу heroku.

heroku create для локального добавления удаленного репозитория heroku

git push heroku для отправки кода на серверы heroku

heroku open, чтобы открыть ссылку в браузере

Вот и все. Ваше приложение ЖИВУТ !!!

Филиал - 10_Init

Каждый раз, когда вы добавляете новую функцию, все, что вам нужно сделать, это -

git push heroku

Вот и все.

В этой части мы обсудили -

выражать
веб приложение
шаблоны
промежуточное ПО
героку

Увидимся в следующей части :)

Часть 5 - https://medium.com/@anujbaranwal/nodejs-8-from-scratch-part-5-3d3e3a84b64

Часть 6.1 - https://medium.com/@anujbaranwal/nodejs-8-from-scratch-part-6-1-api-development-5dee11785d62

Часть 6.2 - https://medium.com/@anujbaranwal/nodejs-8-from-scratch-part-6-2-api-development-f92f76eb3521

Часть 6.3 - https://medium.com/@anujbaranwal/nodejs-8-from-scratch-part-6-3-api-development-9b046fed7364

Часть 6.4 - https://medium.com/@anujbaranwal/nodejs-8-from-scratch-part-6-4-api-development-38d600a35ad9

NodeJS с нуля - часть 4

Вопросы по теме