ExpressJS, Serving static files, params, body-parser

Express.js


Tisztán NodeJs-t használva mindent magunknak kell megoldanunk. Ez nem csak hogy idegesítő, hanem potenciális hibaforrás, továbbá bizonyos szempontból biztonsági kockázatot is jelent. Az ismétlődő feladatok helyett inkább az üzleti logikára kellene fókuszálni amennyiben a hatékony munkavégzés a célunk. Ahogy a projektünk növekszik, egyre komplexebbé, nehezen kezelhetővé válik. Ebből az okból kifolyólag használunk olyan keretrendszereket, mint az `Express`. Az Express alapvetően NodeJs-re épül és számos eszközzel eszközzel lát el minket, melyek jelentősen lerövidíthetik a fejlesztési időt [12]. A példa itt próbálható ki. 
//  server.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => res.send('Ez az üzenet a szervertől érkezett!'));
app.listen(port, () => console.log(`A szerverünk a ${port} porton fut.`));
> npm install --save express




Serving static files


Ahhoz, hogy az Express keretrendszerrel közzé tehessünk bármilyen statikus tartalmat, mint képek, CSS stílusfájlok és JavaScript fájlok, az express.static beépített middleware függvény megoldást nyújthat a kérdésünkre. Az argumentumában két paramétert vár: express.static(root, [options]). Az első paraméterben definiálhatjuk relatív formában azon könyvtár útvonalát, melynek tartalmát közzé szeretnénk tenni. a weboldal címét kiegészítve ezen relatív útvonallal, hozzáférhetünk a közzé tett könyvtár tartalmát. Több mappa esetén annyiszor kell implementálni ezt a middleware függvényt, ahány mappáról van szó. A könyvtár elérési útvonala egzakt információt közöl a szerver könyvtár struktúrájáról, ami biztonsági kockázatot is jelenthet. Lehetőségünk van virtuális útvonalakat definiálni, így megkerülhetjük a problémát. A példa itt próbálható ki. 
//  server.js
const express = require('express');
const app = express();
const port = 3000;

//  egy példa a public mappa tartalmának közzé tételére
app.use(express.static('public'));

// egy példa több mappa tartalmának közzé tételére
app.use(express.static('files1'));
app.use(express.static('files2'));

//  egy példa virtuális útvonal implementálására, abszolút útvonallal
app.use('/static', express.static(path.join(__dirname, 'public')));

app.listen(port,(req,res)=>{
    console.log(`a szerverünk a  ${port} porton fut`);
});
> npm install --save express




Body-parser


A body-parsing alatt azt a műveletet értjük, amikor a szerver szemszögéből nézve egy bejövő adatot (ami egy felhasználó által kezdeményezett kérésből érkezett) feldaraboljuk és átalakítjuk JavaScript objektummá, hogy az alkalmazásunk fel tudja dolgozni az információt. Ezt bármikor kinyerhetjük a req.body-ból. Az átalakítás akkor sikeres, ha a formátum támogatott (application/JSON). Egyébként üres objektummal tér vissza, vagy valamilyen hibakóddal. Alapértelmezésképpen legfeljebb 100kB-nyi adatot lehet feldolgozni, viszont ezt testre szabhatjuk. A szoftverfejlesztés során gyakori műveletnek számít, így egy body-parser middleware függvény implementálása nélkülözhetetlen. A példa itt próbálható ki. 
//  server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
          
app.listen(port,(req,res)=>{
    console.log(`a szerverünk a ${port} porton fut`);
});
> npm install --save express




Irodalomjegyzék

[1]
 Vue.js core team. Vue.js: The Progressive JavaScript Framework. https://vuejs.org, Legutóbb megtekintve: 2019. április 22.
[2]
 Vue.js core team. API, Global Config, directive. https://vuex.vuejs.org/vuex.png, Legutóbb megtekintve: 2019. április 22.
[3]
 Vue.js core team. API, Global Config, computed. https://vuejs.org/v2/api/#computed, Legutóbb megtekintve: 2019. április 22.
[4]
 Vue.js core team. API, Global Config, components. https://vuejs.org/v2/api/#components, Legutóbb megtekintve: 2019. április 22.
[5]
 Vue.js core team. Vue-CLI. https://cli.vuejs.org/guide/creating-a-project.html#vue-create, Legutóbb megtekintve: 2019. április 22.
[6]
 Vue.js core team. Vue-router. https://router.vuejs.org/guide/#html, Legutóbb megtekintve: 2019. április 22.
[7]
 Vue.js core team. Render Functions and JSX. https://vuejs.org/v2/guide/render-function.html, Legutóbb megtekintve: 2019. április 22.
[8]
 w3schools core team. JavaScript RegExp Reference. https://www.w3schools.com/jsref/jsref_obj_regexp.asp, Legutóbb megtekintve: 2019. április 22.
[9]
 Google Chrome DevTools core team. Chrome DevTools. https://developers.google.com/web/tools/chrome-devtools, Legutóbb megtekintve: 2019. április 22.
[10]
 Node.js core team. Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. https://nodejs.org/en/, Legutóbb megtekintve: 2019. április 22.
[11]
 NPMJS core team. NPMJS. https://www.npmjs.com, Legutóbb megtekintve: 2019. április 22.
[12]
 ExpressJS core team. Express Fast, unopinionated, minimalist web framework for Node.js. https://expressjs.com, Legutóbb megtekintve: 2019. április 22.
[13]
 EJS core team. EJS: Embedded JavaScript templating. https://ejs.co, Legutóbb megtekintve: 2019. április 22.
[14]
 Olga Filipova. Learning Vue.js 2. Packt Publishing Ltd., Livery Place, 35 Livery Street, Birmingham, B3 2PB, UK, 3, 2016.
[15]
 E.F. Codd. A relational Model of Data for Large Shared Data Banks. Communications of the ACM, 13 (6) 1970.
[16]
 Papp Edit. Adatbáziskezelés. Booklands 2000 Könyvkiadó Kft., 5600 Békéscsaba, Dr. Becsey Oszkár u. 42., 1, 2004.
[17]
 Nemzeti Szakképzési és Felnőttképzési hivatal. Szoftverfejlesztő tanfolyam. https://www.nive.hu, Legutóbb megtekintve: 2019. április 22.
[18]
 JavaScript.info core team. JavaScript.info. https://javascript.info/promise-basics, Legutóbb megtekintve: 2019. április 22.
[19]
 Craig Buckler. Sitepoint (JavaScript) - Understanding ES6 Modules. https://www.sitepoint.com/understanding-es6-modules/, Legutóbb megtekintve: 2019. április 22.

← 14. Template engines, server-side rendering, EJS→