Blog / Programming / Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 2.

Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 2.

By Pavel Bragin 8,914 December 2, 2016

Category:

Favicon – это все connect Middleware, он смотрит, если url имеет вид favicon.ico, то он читает favicon и выдает, а иначе передает управления дальше. Логгер выводит запись о том, что у нас за запрос пришел. Например, если сейчас запустить приложение, то логгер что-то выведет, если мы зайдем на:

http://localhost:3000/

То есть, это обычный Http log запросов, dev – это формат логирования. Есть и другие форматы, например, default. (сделаем такую запись в app.js):

app.use(express.favicon()); // /favicon.ico
if (app.get('env') == 'development') {
  app.use(express.logger('dev'));
} else {
  app.use(express.logger('default'));
}

app.use(express.favicon()); // /favicon.ico

if (app.get('env') == 'development') {

app.use(express.logger('dev'));

} else {

app.use(express.logger('default'));

}

Различные форматы можно посмотреть в документации connect. Здесь есть различные варианты встроенных форматов. Есть еще одна забавная настройка, когда писать в log. Обычно он пишет в log по окончанию запроса. Но можно указать immediate: true, и он будет писать log в самом начале.

Какая разница, если говорить о нашем коде? Если будет установлена опция immediate, тогда логгер будет писать в log, а потом через next передавать управление следующим Middleware. Это самый очевидный поток управления. Но по умолчанию происходит несколько другая вещь – логгер перезаписывает res.end на свою функцию, которая при вызове пишет в log. Из-за этого выходит, что если мы логируем таким способом, без флага immediate, то если в log ничего нет – это совсем не значит, что запроса не было.

Стоит иметь это в виду. Возможно, запрос на самом деле был и подвис, потому что NODE его не обработала никак. Соответственно, в log все будет попадать только по окончанию запроса.

BodyParser занимается тем, что считывает формы, которые присланы методом post, считывает JSON-данные, которые присланы этим методом. То есть, разбирает тело запроса. Данные, переданные через post и аналогичные методы, считываются при помощи потоков. Это асинхронное действие. BodyParser все это берет на себя, полностью считывает post, если это JSON, тогда он его parse, и данные становятся доступны в req.body:

app.use(express.bodyParser());  // req.body....

1	app.use(express.bodyParser()); // req.body....

После того, как он полностью прочитал post, этот Middleware передает управление дальше через next.

CookieParser тоже парсит, но не тело, а cookies. То есть, есть такие заголовки: req.headers. Оно их разбирает и делает соответствующие свойства объекта cookies:

app.use(express.cookieParser('your secret here')); // req.cookies

1	app.use(express.cookieParser('your secret here')); // req.cookies

Здесь можно указать необязательный ключ, которым cookies будут подписываться. Сейчас нам эта подпись не нужна, мы поговорим о ней позже.

Router позволяет нам удобным образом говорить, какие запросы будут и как обработаны. Например добавим такой код:

app.use(app.router);

app.get('/', function(req, res, next) {
  res.end("Test")
});

app.use(app.router);

app.get('/', function(req, res, next) {

res.end("Test")

});

Соответственно, вместо get может быть post, put, del и т.д. Кроме того, в этом Middleware есть еще дополнительные возможности (можно передать параметры и т.д.).

Последний Middleware – это static. Обычно выдачей static занимаются другие сервера, не Node.js, но он тоже может это делать. То есть, если никакие Middleware отсюда запрос не обработали, тогда управление передается Middleware static.

app.use(express.static(path.join(__dirname, 'public')));

1	app.use(express.static(path.join(__dirname, 'public')));

Он смотрит, есть ли в директории public соответствующий файл. слегка переименуем директории в public (stylesheets-> css, javascript->js). Запускаем, работает!

App.js у нас теперь выглядит так, проверьте:

var express = require('express');
var http = require('http');
var path = require('path');
var config = require('config');
var log = require('libs/log')(module);


var app = express();
app.set('views', __dirname + '/templates');
app.set('view engine', 'ejs');

app.use(express.favicon()); // /favicon.ico
if (app.get('env') == 'development') {
  app.use(express.logger('dev'));
} else {
  app.use(express.logger('default'));
}

app.use(express.bodyParser());
app.use(express.cookieParser());

app.use(app.router);

app.get('/', function(req, res, next) {
  res.end("Test")
});

app.use(express.static(path.join(__dirname, 'public')));

app.use(function(err, req, res, next) {
  // NODE_ENV = 'production'
  if (app.get('env') == 'development') {
    var errorHandler = express.errorHandler();
    errorHandler(err, req, res, next);
  } else {
    res.send(500);
  }
});

// var routes = require('./routes');
// var user = require('./routes/user');

// // all environments

// app.get('/', routes.index);
// app.get('/users', user.list);


http.createServer(app).listen(config.get('port'), function(){
  log.info('Express server listening on port ' + config.get('port'));
});

var express = require('express');

var http = require('http');

var path = require('path');

var config = require('config');

var log = require('libs/log')(module);

var app = express();

app.set('views', __dirname + '/templates');

app.set('view engine', 'ejs');

app.use(express.favicon()); // /favicon.ico

if (app.get('env') == 'development') {

app.use(express.logger('dev'));

} else {

app.use(express.logger('default'));

}

app.use(express.bodyParser());

app.use(express.cookieParser());

app.use(app.router);

app.get('/', function(req, res, next) {

res.end("Test")

});

app.use(express.static(path.join(__dirname, 'public')));

app.use(function(err, req, res, next) {

// NODE_ENV = 'production'

if (app.get('env') == 'development') {

var errorHandler = express.errorHandler();

errorHandler(err, req, res, next);

} else {

res.send(500);

}

});

// var routes = require('./routes');

// var user = require('./routes/user');

// // all environments

// app.get('/', routes.index);

// app.get('/users', user.list);

http.createServer(app).listen(config.get('port'), function(){

log.info('Express server listening on port ' + config.get('port'));

});

Напоследок, вместо такого простого сообщения выведем нормальную HTML страницу. Для этого я в директории template создам новый файл, назовем его index.ejs. Расширение файла ejs, потому что шаблон к ejs – так обычно делают. Сам шаблон представляет собой HTML, плюс дополнительно можно использовать такие специальные разделители, для того чтобы вставлять, например, код или переменные:

<!DOCTYPE html>
<html>
<head>
  <title>Hello, World!</title>
</head>
<body>
<section class="container">

  <h1>Hello, World!</h1>

  <%=body%>
  <%-body%>

</section>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello, World!</title>

</head>

<body>

<h1>Hello, World!</h1>

<%=body%>

<%-body%>

</section>

</body>

</html>

Более подробно можем посмотреть в документации. Например, если говорить предметно, то вот такой вот код:

<% if (user) { %> 
   <h2><%= user.name %></h2>   
<% } %>

<% if (user) { %>

<% } %>

<% if (user) { означает вставка просто JavaScript кода, то есть, выполнится оператор if, а %= означает вставку значения переменной. <%-body%> тоже вставка переменной, но здесь, если в body какой-то небезопасный текст (например <script>), то так <%-body%> он ставится как есть, а если <%=body%>, то он будет заменен на безопасные символы.

Давайте сделаем для примера так:

 <%=body%>
  <%-body%>

1 2	<%=body%> <%-body%>

Конечно, нужно передать переменную в шаблон. Как это сделать? Очень просто, пишем в app.js:

app.get('/', function(req, res, next) {
  res.render("index", {
    body: '<b>Hello</b>'
  });
});

app.get('/', function(req, res, next) {

res.render("index", {

body: '<b>Hello</b>'

});

Проверяем. Заходим на

http://localhost:3000/

Вот, первое body была вставлено со знаком =, а второе со знаком -

У нас есть простейший сайт на Express, вывод в шаблон переменных. В следующей статье мы еще немного поработаем с шаблонами, с front-end частью, а потом перейдем к работе с данными.

Код урока доступен по ссылке.