| | |
|---|
| | | <li>Die gefundenen Primzahlen können ausgegeben werden, müssen aber nicht. In erster Linie geht es darum, die Arbeit auf mehrere Threads aufzuteilen.</li> |
|---|
| | | </ul> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Multi Page Applications</h3> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <p>Im Gegensatz zu einer SPA ("Single Page Application") teilt sich eine Multi Page Application in mehrere Unterseiten auf, die sich per URL z.B. im Browser adressieren lassen.</p> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <p>In einem neuen Ordner / Projekt:</p> |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | npm init -y |
|---|
| | | |
|---|
| | | npm install express pug |
|---|
| | | |
|---|
| | | mkdir public |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | // index.js (s. examples 010-nodejs/mpa.js) |
|---|
| | | const express = require("express"); |
|---|
| | | const app = express(); |
|---|
| | | |
|---|
| | | app.use(express.static("public")); |
|---|
| | | |
|---|
| | | app.listen(3002); |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Aufgabe</h3> |
|---|
| | | <p>Fülle das Verzeichnis "public" mit jeweis einer HTML-Datei für eine "Home"- und eine "About Us"-Seite, die beide eine einfache Navigations-Leiste enthalten (simple <code>span</code> mit Link (href)), um zwischen diesen beiden Seiten navigieren zu können. |
|---|
| | | Unterscheiden sollen sich diese beiden Seiten durch ihren "Inhalt", indem dort einfach "Home" und "About Us" enthalten ist.</p> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Serverseitiges Rendern</h3> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <p>Template-Engine "pug"</p> |
|---|
| | | <pre> |
|---|
| | | <code class="css" data-trim data-line-numbers> |
|---|
| | | html |
|---|
| | | head |
|---|
| | | body |
|---|
| | | div This is a div with some text |
|---|
| | | #main.my-class This is also a div with short-hands for id and class |
|---|
| | | a(href="/") This is a link with href |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <p>Conditionals</p> |
|---|
| | | <pre> |
|---|
| | | <code class="css" data-trim data-line-numbers> |
|---|
| | | html |
|---|
| | | head |
|---|
| | | body |
|---|
| | | if name |
|---|
| | | div Hello #{name}! |
|---|
| | | else |
|---|
| | | div Hello Anonymous" |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <p>Extension / Inheritance</p> |
|---|
| | | <pre> |
|---|
| | | <code class="css" data-trim data-line-numbers> |
|---|
| | | // layout.pug |
|---|
| | | html |
|---|
| | | head |
|---|
| | | body |
|---|
| | | div Some static content |
|---|
| | | block content |
|---|
| | | |
|---|
| | | // page.pug |
|---|
| | | extends layout.pug |
|---|
| | | |
|---|
| | | block content |
|---|
| | | div This is my home content |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <p>Pug in Express</p> |
|---|
| | | <pre> |
|---|
| | | <code class="bash" data-trim data-line-numbers> |
|---|
| | | mkdir views |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | // ... |
|---|
| | | |
|---|
| | | app.set('view engine', 'pug'); |
|---|
| | | |
|---|
| | | app.get('/', (req, res) => { |
|---|
| | | // file name without .pug and some data passed to the template |
|---|
| | | res.render('index', { title: 'Hey', message: 'Hello there!' }) |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.listen(3002); |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="css" data-trim data-line-numbers> |
|---|
| | | // views/index.pug |
|---|
| | | html |
|---|
| | | head |
|---|
| | | title #{title} |
|---|
| | | body #{message} |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Aufgabe</h3> |
|---|
| | | <p>Implementiere die Seiten aus dem vorherigen Beispiel mit Pug (nutze Vererbung, um die Navigationsleiste nicht doppelt implementieren zu müssen) und |
|---|
| | | baue einen Gruß im Seitentext mit dynamischen Namen ein, den man z.B. in der URL als Query-Parameter "?name=Joe" angibt und der im Server ausgewertet wird.</p> |
|---|
| | | </section> |
|---|
| | | </section> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
