środa, 3 maja 2017

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.

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 (reqres) {
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(porthostname, () => {
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>

Brak komentarzy:

Prześlij komentarz