Skip to content

Latest commit

 

History

History
359 lines (242 loc) · 9.05 KB

02.3.express.md

File metadata and controls

359 lines (242 loc) · 9.05 KB

Fyrirlestur 2.3 — Express

Vefforritun 2 — HBV403G

Ólafur Sverrir Kjartansson, osk@hi.is

Stærri bakendar

  • Gætum vel skrifað okkar eigin bakenda frá grunni
    • Aðeins notað einingar í node
    • Engin. Dependency. 😤
  • Værum að finna upp hjólið og eyða tíma

Express

  • Web app framework fyrir node
  • Smátt í sniðum en gefur mikla möguleika á að bæta við virkni til að gera hérumbil hvað sem er
  • npm install express --save

Hello world

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

const hostname = '127.0.0.1';
const port = 3000;

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

app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Application

  • Búum til Express forrit með því að kalla í express()
  • Sér m.a. um:
    • routing fyrir HTTP beiðnir
    • Middleware uppsetningar
    • Stillingar á birtingu (með HTML)

app.locals

  • app.locals er hlutur sem geymir gögn fyrir app
    • Aðgengileg á meðan app keyrir
    • Aðgengilegt frá request með req.app.locals

Settings

  • Getum stillt app með get() og set(), t.d.
    • env, segir til um hvort app keyri í production eða development
    • view engine, hvaða template vél við notum
    • views, í hvaða möppu eru template
    • o.fl.

HTTP aðgerðir og express

  • app hefur föll sem passa við HTTP aðgerðir
    • get(), post(), put(), delete() og fleiri
    • all() á við allar aðgerðir

Subapps

  • Getum unnið með mörg app í einu með use
  • Hópað saman virkni
  • use er líka notað til að skilgreina middleware
const express = require('express');
const app = express();
const subapp = express();

app.get('/', (req, res) => {
  res.send('hello world');
});

subapp.get('/', (req, res) => {
  res.send('hello from subapp');
});

app.use('/sub', subapp);

Request hluturinn

  • req stendur fyrir HTTP request sem kemur frá client
    • Getum skýrt annað (t.d. request eða foo) með því að skýra argument annað
  • Hefur bæði eigindi og föll

Request eigindi

  • req.url, erft frá http og gæti hafa verið átt við
  • req.originalUrl, url án allra afskipta
  • req.ip, IP tala þess sem gerði beiðni
  • req.query, hlutur með öllum querystring breytum
  • o.fl.

Request föll

  • req.accepts(types), athugar hvort client tekur við ákveðnu MIME type
    • MIME type segir til um á hvaða formi gögn eru, t.d. application/json
  • req.get(header), skilar request header, ekki hástafanæmt

Response hluturinn

  • res stendur fyrir HTTP response sem við erum að skila til client
  • Hefur bæði eigindi og föll

Response eigindi

  • res.headersSent, bool sem segir okkur hvort headers hafi verið sendir client eða ekki
  • res.locals, hlutur sem inniheldur gögn sem verða aðgengileg fyrir view/template, getum bætt við upplýsingum frá request

Response föll

  • res.write(content), erft frá http, skrifar í response straum
  • res.end(), erft frá http, endar response straum og sendir á client
  • res.send(content), skrifar í response straum, t.d. setur Content-Length header og endar hann
  • res.status(statusCode), setur HTTP status á response
  • res.set(field, value), setur response headers
  • res.json(data), einsog send() nema sendir JSON gögn
  • res.redirect(location), framkvæmir redirect á location
  • o.fl.

Routing

  • Höfum séð leiðir til þess að útbúa slóðir sem keyra ákveðin kóða
  • Ekki sérstaklega handhægt að gera í höndunum
  • Framework geta hjálpað okkur við að útbúa góðar og skýrar slóðir
  • „Friendly URL“ eru slóðir sem auðvelt er að lesa úr og nota, bæði af fólki og vélum
    • /programming/web ekki /?cat=programming&sub=web
  • Einnig stuðningur við gagnaflutning, t.d. senda streng gegnum URL /article/foo-bar skilar okkur færslu með eigindi foo-bar

Route

  • Express hefur stuðning við routing
  • Route eru slóð (URI) sem forritið okkar svarar beiðnum frá client á
  • Samanstendur af URI, HTTP aðferð og einum eða fleirum föllum
    • app.METHOD(URI, callback)
    • Margar HTTP aðferðir til, en við notum að mestu get og post
    • all er hægt að nota til að svara fyrir allar aðferðir
  • URI getur notað regular expressions en ættum að forðast nema þurfum virkilega
    • app.get(/foo.*$/, callback) svarar fyrir allt sem byrjar á /foo
  • Query string er ekki partur af route path, nálgumst með req.query

Route callback

  • Callback sem skilgreint er fyrir route vísar í middleware
  • Geta verið mörg í röð app.get('/', cb1, cb2)
  • Í fylki app.get('/', [cb1, cb2])
  • Eða blanda

Route parameters

  • Ef við skilgreinum route með parameter getum við nálgast þau gögn í req
    • app.get('/users/:userId', cb)
    • req.params.userId

Express Router

  • Getum búið til route án þess að hafa app með því að nota const router = express.Router()
    • Exportum síðan router
  • Skiptum forriti upp í einingar þar sem hver sér um ákveðin hluta af routes

Middleware í Express

  • Hefur aðgang að request og response hlutum og næsta middleware
    • function middleware(req, res, next)
  • Getur
    • Keyrt kóða
    • Breytt req eða res
    • Endað request-response keyrslu
    • Kallað í næsta middleware
  • Middleware eru keyrð í FIFO röð
  • Verðum að keyra next() á einhverjum tímapunkti til þess að næsta middleware geti tekið við
    • Fyrir route sem skilar upplýsingum viljum við samt oftast ekki kalla í next() heldur req.send() til að enda reponse
  • Getum skilgreint fyrir
    • Allt forrit
    • Per route
    • Villumeðhöndlun

Middleware fyrir app

function helloWorld(req, res, next) {
  console.log('Hello world!');
  next();
}

app.use(helloWorld);

Middleware á route

function userHandler (req, res, next) {
  // ...
  next();
}

router.get('/user/:id', helloWorld, userHandler);

Villumeðhöndlun

  • Við skilgreinum villumeðhöndlunar middleware með auka argument
    • function (err, req, res, next)
  • Skilgreind seinast í app, á eftir öllum öðrum middleware
  • Sér um að taka til, logga villu, senda notanda villuskilaboð o.sfr.

404 villur

  • Getum nýtt okkur middleware til þess að grípa 404 villur
    • Verið að reyna að opna route sem við höfum ekki skilgreint
  • Setjum middleware á eftir öllum routes sem við vitum að muni aðeins keyra ef ekkert hefur sent reponse
    • En samt á undan villumeðhöndlun
app.use(function notfound(req, res, next) {
  res.status(404).send('404 Not Found');
});

app.use(function error(err, req, res, next) {
  console.error(err);
  res.status(500).send('Error occured');
});

Innbyggð middleware

  • Express hefur innbyggt middleware til að birta statískar skrár
    • t.d. CSS, myndir
    • app.use(express.static(path.join(__dirname, 'public')))
  • Serving static files in Express

Templating

  • Til að birta síðu þurfum við að hafa útlit fyrir hana – eitthvað ákveðið HTML
  • Ekki skilvirkt að útbúa sjálf HTML með því að setja saman strengi
  • Template leyfa okkur að útbúa útlit óháð virkni, við fáum gögn og við birtum þau á ákveðinn hátt
  • Mörg template mál til, t.d.
    • Pug, EJS, Handlebars, Mustache

Template í Express

  • Sækjum útfærslu á template máli fyrir Express
  • Skilgreinum á app hvaða template mál við notum og hvar template eru geymd
    • app.set('view engine', 'ejs');
    • app.set('views', path.join(__dirname, 'views'));
  • res.render(template, data) notar skilgreindar template vél til að birta template með data

EJS – Embedded JavaScript templates

Skrifum HTML en með EJS syntax til að nálgast gögn og setja saman síður

  • <% %> fyrir flæðistýringar
  • <%= %> til að birta gögn
  • <%- %> til að birta gögn unescaped
    • Birtir hrátt HTML í gögnum, hættulegt!

EJS

  • <% include header %> bætir template úr header.ejs inn á viðeigandi stað
  • Öll gögn skilgreind með app.locals eru aðgengileg í template
  • Nánari skjölun á EJS

Express generator

  • Tól sem býr til grunn fyrir okkur til að vinna útfrá
  • npm install -g express-generator
  • express <heiti-á-verkefni>
  • Er hálfpartinn úrelt, mæli ekki með notkun