Hur fungerar det?

Det här avsnittet handlar om hur Express fungerar. För att förstå det så kommer du att skriva om delar av startkoden som Express generator skapat. Du kommer att skapa en meny, redigera vyer och ändra routingen.

Viktigt! Eftersom vi kört NJK som templates för 11ty så fortsätter vi med NJK för Node och Express. Detta gör att PUG inte används. Jag har dock inte hunnit uppdatera färdigt texten just nu.

NJK

Installera Nunjucks.

npm install nunjucks

För att använda Nunjucks behöver det laddas i app.js och konfigureras.

app.js

const nunjucks = require('nunjucks')

nunjucks.configure('views', {
  autoescape: true,
  express: app
});

Nu kan vi skapa views för projektet. Skapa en mapp i roten /views. Denna template blir en bas för sidornas layout som vi kan använda med extends.

views/layout.njk

<!doctype html>
<html  lang="en">
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    {% block  content %}
    {% endblock %}
  </body>
</html>

Skapa sedan den specifika view filen för index sidan, index.njk.

views/index.njk

{% extends layout %}
{% block  content %}
  <h1>{{message}}</h1>
{% endblock %}

För nästa steg så behöver vi redigera routen som använder Nunjucks filerna. Redigera index routen.

routes/index.js

router.get('/', async  function(req, res, next) {
  let  data = {
    message: 'Hello world!',
    layout:  'layout.njk',
    title: 'Nunjucks example'
  }

  res.render('index.njk', data)
})

Testa nu att starta servern igen med dev scriptet. Nästa tsteg blir att uppdatera layout grunden till att vara en korrekt HTML5 mall och inkludera css.

Pug

Express stöder ett flertal olika templatmotorer (på engelska template engine), den som används här är Pug. Pug är snarlikt html och relativt enkelt att komma igång med.

Innehållet på en sida med Pug struktureras med indentering. Text i början av en rad representerar generellt en HTML tag. Taggarna behöver inte stängas (det sköter indenteringen). För att nästla element indenteras de under andra taggar. Läs mer om taggar och attribut i Pug.

Pug stöder variabler, iteration och mixins(funktioner) bland annat.

div#idname
  h1.classname Rubrik
  p.class1.class2 Brödtext
    | Fortsatt text i p elementet ovan.
  p Lorem...
    a(href='#') Länk i p texten

Läs mer om Pug i dokumentationen och använd den vid behov. Det finns även ett antal extensions för Visual Studio Code (förkortat till vscode) för att underlätta arbetet med Pug.

Det går utmärkt att konvertera färdiga HTML-sidor till Pug, det finns flera verktyg för detta, Google.

Layout

Det här projektets vy-struktur utgår från filen layout.pug. Underliggande sidor ärver layout-vyns struktur för att skapa en färdig HTML-sida. Nyckelordet (på engelska keyword) för detta är extends.

Filen index.pug ärver från layout.pug med

views/index.pug

extends layout

Layout-vyn är projektets HTML-bas så i den filen behövs en validerande HTML grund. Öppna filen och skriv följande kod.

views/layout.pug

doctype html
html(lang='sv')
  head
    meta(name='viewport' content='width=device-width,initial-scale=1.0')
    meta(charset='utf-8')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

Index

Index-vyn är webbsidans startpunkt. Index-routen anropar index-vyn och skapar den HTML-kod som webbläsaren visar. Route filen kallar res.render() funktionen för att visa den vy som anges, i det här fallet index.

routes/index.js

/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

I render funktionen kallas först den vy som ska användas, index, sedan bifogas ett objekt till vy-filen(till pug). Objeketet innehåller här egenskapen title med Express som värde.

views/index.pug

extends layout

block content
  main
    h1= title
    p Welcome to #{title}

I index-vyn kan sedan det bifogade objektet användas för att dynamiskt ändra vy-filen. Det kallas för template locals, läs mer om template locals här.

Byt ut title till något annat. Redigera sedan objektet och lägg till en annan egenskap. Visa sedan denna i index.pug.

Nav

Med extends kan Pug återanvända kod. Det leder till enklare utveckling och mindre fel (don't repeat yourself, DRY). Ett bra användningsfall (engelska use case) för detta är navigation på en webbsida.

Du ska nu skapa en navigation. Redigera layout-vyn och skapa ett nav block efter body-taggen.

views/layout.pug

body
  block nav
    include nav.pug
  block content

Nav-blocket följs av nyckelordet include som används för att lägga till innehållet från en annan fil, nav.pug.

Läs mer om arv och att inkludera filer i Pug.

Skapa sedan nav-vyn och lägg till HTML-koden.

views/nav.pug

nav
  ul
    li
      a(href='/') Home
    li
      a(href='/users') Users

Spara de redigerade filerna och ladda om sidan i webbläsaren.

Users

Den users-route som Express generator skapat returnerar enbart en resurs. För att users-routen ska svara med en users-vy behöver res.render användas.

routes/users.js

router.get('/', function(req, res, next) {
  res.render('users', {});
});

Koden hänvisar nu till en users-vy som behöver skapas. Basera den på index-vyn.

views/users.pug

extends layout

block content
  main
    h1= title

Spara och ladda om, felsök vid behov.

För att visa Pugs och Express samspel mellan route och vy ska users-vyn uppdateras för att visa ett flertal användare. Skapa en array i det objekt som bifogas av users-routen.

routes/users.js

res.render('users', {'users': ['Hans', 'Moa', 'Bengt', 'Frans', 'Lisa'] });

Arrayen från users-routen kan nu användas som en template-local i users-vyn. För att visa innehållet i arrayen kommer en loop att användas. Formen för denna iteration är för varje user i users utför... Uppdatera users-vyn med följande kod.

views/users.pug

ul
  each user in users
    li= user

Läs mer om iteration i Pug.

Först skapas ett ul-element följt av koden för loopen. I loopen skapas sedan ett li-element för varje index i users-arrayen. Ladda om sidan och se resultatet.

Footer

Detta är en uppgift med eget arbete.

I den här uppgiften ska du skapa en footer-vy som ska inkluderas på varje sida, förfarandet är mer eller mindre detsamma som för navigationen. Skapa vy-filen views/footer.pug och inkludera den från views/layout.pug. I filen skapar du ett footer element.

Skapa footer.pug fil
Skapa element och HTML-innehåll
Inkludera footer-vyn i layout.pug

Sass

Sass är en språk-utökning för att skapa css. Sass förkompileras till färdig css.

Express generator installerar ett middleware för att kompilera Sass-filer till css-filer. Projektets css skrivs i .sass filen vilken kompileras till .css kod när sidan hämtas från webbservern.

Sass-kod kan delas upp i flera filer, det är mycket praktiskt. För att inkludera filer används @use regeln. Tyvärr har node-sass-middleware som experess använder ett äldre syntax. Därför används @import istället för @use.

style.sass

Sass syntax skiljer något från css, men grunderna är liknande. Precis som Pug förlitar sig Sass på korrekt indentering för att fungera och strukturera. Öppna filen och skriv in följande.

public/stylesheets/style.sass

html
  height: 100%

body
  height: 100%
  display: flex
  flex-direction: column

nav, main, footer
  width: 80%
  margin: 0 auto

footer
  margin-top: auto

nav > ul
  list-style: none
  display: flex
  padding: 0

  > li
    padding-right: 16px

De här stilarna ger en grundläggande formatering. Placeringen av elementen sker med flexbox. Prova att lägga till en font med Google fonts. Fonten behöver då länkas i layout-vyn, och Sass-stilen behöver uppdateras.

views/layout.pug

head
  link(href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet")

För egenskaper som upprepas i Sass-kod är det praktiskt att skapa variabler. Det gör att du slipper upprepa kod och enkelt kan ändra värden.

public/stylesheets/style.sass

$font: 'Roboto', sans-serif

h1
  font-family: $font

För att dela upp sass i flera filer se Git.

Arbeta med Sass

Detta är en uppgift med eget arbete.

Testa nu att skapa variabler för ett par färger på sidan. Passa även på att styla User-vyns lista också.

Sidan coolors.co har Sass export.

Välj 1-5 färger och skapa varaibler för dem
Styla Users-vyn

Läs mer om Sass.

PreviousIntroduktion NextDesign - inte så webbserver

Last updated 2 years ago