Einfacher express aufbau und pug-engine

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Einfacher express aufbau und pug-engine

    Hallo Leute,

    ich bin mal wieder mit express zugange und wollte mir einen Vokabel-Trainer bauen in dem ich Vokabeln eingeben und abfragen kann. Ich habe folgende Verzeichnis-Struktur für das Projekt, mit der ich starte:

    JavaScript-Quellcode: app.js

    1. var express = require('express')
    2. var path = require('path')
    3. var app = express()
    4. app.use(express.static('public'))
    5. app.set('view engine', 'pug')
    6. app.set('views', path.join(__dirname, 'views'))
    7. app.get('/', function (req, res) {
    8. res.render('startseite')
    9. })
    10. app.listen(4200)
    Alles anzeigen

    JavaScript-Quellcode: startseite.pug

    1. doctype html
    2. html
    3. head
    4. meta(charset="utf-8")
    5. meta(name="viewport" content="width=device-width, initial-scale=1")
    6. title!= 'Startseite'
    7. body
    8. h1!='Vokabel-Trainer'
    Vielleicht ertsmal bis dahin. Woher weiss eigentlich die pug engine das sie im Ordner views die views suchen soll? Ist der Ordner views vorgegeben? Was würdet ihr anders machen und warum?

    Grüße
  • vision27 schrieb:

    Woher weiss eigentlich die pug engine das sie im Ordner views die views suchen soll? Ist der Ordner views vorgegeben?
    Du hast es der App doch mit app.set('views', path.join(__dirname, 'views')) selbst vorgegeben. Den Ordnernamen kannst du frei wählen.

    vision27 schrieb:

    Was würdet ihr anders machen und warum?

    Sieht soweit alles erst mal gut aus, allerdings würde ich die Interpolationen durch einfachen Text ersetzen.
  • Lichtjaeger schrieb:

    Du hast es der App doch mit app.set('views', path.join(__dirname, 'views')) selbst vorgegeben. Den Ordnernamen kannst du frei wählen.
    Ja schon aber ich habe den nicht der pug-Engine bekannt gegeben sondern den Ordner express zur Verfügung gestellt oder? Oder schaut die Engine in allen bekannten Ordnern ob eine Datei namens startseite vorhanden ist?

    Lichtjaeger schrieb:

    Sieht soweit alles erst mal gut aus, allerdings würde ich die Interpolationen durch einfachen Text ersetzen
    Schau ich mir jetzt an.
  • vision27 schrieb:

    was sagst du allgemeine zu den Modulen? Brauch man sowas?
    Ist sehr anwendungsspezifisch, aber alle haben ihren Zweck.
    helmet ist zwar nicht gelistet, sollte aber in jede express App rein.

    Hier noch mal ein Verweis auf andere nützliche Module.

    vision27 schrieb:

    Habe mal geschaut wie andere Engines eingebunden werden...
    Alle Template Engines mit express kompatibler API werden gleich eingebunden. Mit ihrem Modulnamen.

    Welche man verwendet ist reine Geschmackssache. Ich mag aber pug. :D
  • Beim interpolieren wird aus einem Javascript Statement der Content des HTML-Tags generiert.
    z.B.:

    Quellcode

    1. h1= 'Das ist eine Überschrift' //--> <h1>Das ist eine Überschrift</h1>
    2. output= 1 + 3 //--> <output>4</output>
    3. p= `Hallo, ${name}` //oder klassisch "p= 'Hallo, ' + name" --> <p>Hallo, Felix</p>
    4. // (wenn es eine variable "name" mit dem String "Felix" gibt)
    5. p= { name: 'Felix' } //--> <p>[object Object]</p> (es wird [tt]Object.prototype.toString()[/tt] aufgerufen)
    Wenn der Text nicht generiert wird, ist es effektiver (weniger Rechenzeit) einfach nur den Text anzugeben:

    Quellcode

    1. h1 Das ist eine Überschrift //--> <h1>Das ist eine Überschrift</h1>
    2. output 1 + 3 //--> <output>1 + 3</output>


    In der aktuellen Version von Pug gibt es aber auch eine Mischversion, die JS Templatestrings ähnelt:

    Quellcode

    1. p Hallo, #{name} //--> <p>Hallo, Felix</p>