EJS - czyli szablony w akcji

EJS (Embedded JavaScript) - jest to fajny moduł do Node JS, który załatwia nam sprawę przekazywania z serwera danych lub treści wprost do kodu HTML. Wyobraźmy sobie sytuację w której chcemy aby  po stronie klienta przy otwarciu strony HTML wyświetlały nam się razem z kodem HTML dane(zmienne) pobrane z serwera. Na przykład stany wyjść mikrokontrolera, dane  z czujników  etc. W typowym układzie w miejsce do wyświetlania danych na stronie, umieszczamy skrypt PHP , który obsługuje nam pobieranie danych z serwera. Dzięki EJS nie trzeba pisać żadnych skryptów, zmienne przekazujemy w postaci jawnej np zmienna1, zmienna2 bezpośrednio w kodzie HTML . Jak dla mnie genialne i proste. Po stronie serwera obsługa EJS jest również bajecznie prosta.

Pozdrawiam
picmajster.blog@gmail.com

Instalacja :

$ npm install ejs

Przykład użycia EJS po stronie serwera.

const http = require('http');

var url = require('url');

var fs = require('fs');

var ejs = require('ejs');

const qs = require('querystring');

const hostname = '127.0.0.1';

const port = 3000;

var server = http.createServer(function (req, res) {

var requestData = '';

  if (req.method === "GET") {   

  res.writeHead(200) ;

  var filename = __dirname + req.url;  //dostęp do strony : http://127.0.0.1:3000/index.html (__dirname + req.url;)

  

  var STAN = {PK1:'On',

              PK2:'Off',

              PK3:'On',

              PK4:'Off'};

  

  ejs.renderFile(filename,{zmienna1:STAN.PK1,zmienna2:STAN.PK2,zmienna3:STAN.PK3,zmienna4:STAN.PK4},

  function(err,result){

   if(!err)  res.end(result)

   else res.end('Nieznany plik');

  });

  

  }  

if (req.method === "POST") { 

req.setEncoding('utf-8');

req.on('data', function(data) {

requestData += data;

});

req.on('end', function() {

var postData = qs.parse(requestData);

console.log(postData);

});

}

});

server.listen(port, hostname, () => {

console.log(`Server running at http://${hostname}:${port}/`);

});

Przykład użycia w kodzie HTML, pod zmienną 'zmienna1' EJS podstawi wartość zmiennej czyli 'On' (dla PK1)

<small id="zmiennaPK1" class="label label-pill label-default ; font-weight-normal"><%=zmienna1%></small>