297 lines
5.0 KiB
Markdown
297 lines
5.0 KiB
Markdown
---
|
||
marp: true
|
||
theme: gaia
|
||
paginate: true
|
||
backgroundColor: #fff
|
||
header: "Web Engineering – DHBW Stuttgart"
|
||
footer: "Michael Czechowski – SoSe 2026"
|
||
---
|
||
|
||
<style>
|
||
:root {
|
||
--color-foreground: #1a1a2e;
|
||
--color-highlight: #d63384;
|
||
--color-dimmed: #4a4a6a;
|
||
}
|
||
section.invert {
|
||
--color-foreground: #fff;
|
||
}
|
||
section {
|
||
font-size: 1.4rem;
|
||
}
|
||
h1 {
|
||
color: #a02060;
|
||
}
|
||
section.invert h1 {
|
||
color: #fff;
|
||
}
|
||
h2 {
|
||
color: #1f2937;
|
||
}
|
||
section.invert h2 {
|
||
color: #f48fb1;
|
||
}
|
||
pre {
|
||
background: #0f0f23;
|
||
color: #f48fb1;
|
||
border-radius: 8px;
|
||
border-left: 3px solid #d63384;
|
||
}
|
||
pre code {
|
||
background: transparent;
|
||
color: inherit;
|
||
}
|
||
code {
|
||
background: #1a1a2e;
|
||
color: #f48fb1;
|
||
padding: 0.15em 0.4em;
|
||
border-radius: 4px;
|
||
}
|
||
a {
|
||
color: var(--color-highlight);
|
||
}
|
||
</style>
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _backgroundColor: #000 -->
|
||
|
||
# Web Engineering
|
||
|
||
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
|
||
|
||
**Sommersemester 2026** · Sitzung 5 — Express API, CRUD und Middlewares
|
||
|
||
---
|
||
|
||
# Ressourcen zum Selbstlernen
|
||
|
||
- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
|
||
- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
|
||
- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
|
||
- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
|
||
- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
|
||
|
||
---
|
||
|
||
# Inhalt
|
||
|
||
1. Node.js — Fun Facts & alternative Runtimes
|
||
2. `process` — Signal-Handling, Graceful Shutdown
|
||
3. Express — Setup, Routing
|
||
4. Middlewares (eigene + built-in)
|
||
5. CRUD-Endpunkte (Create, Read, Update, Delete)
|
||
6. Error Handling
|
||
7. WebSockets
|
||
|
||
---
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _backgroundColor: #000 -->
|
||
|
||
# Node.js – Advanced
|
||
|
||
---
|
||
|
||
# node.js – Fun Facts
|
||
|
||
- Entwickelt von Ryan Dahl in 2009
|
||
- Erste serverseitige Laufzeitumgebung in JavaScript (C++)
|
||
- Inspiriert von Nginx (Non-blocking I/O)
|
||
|
||
**Alternativen heute:**
|
||
- **Deno** (2020): Rust, Tokio
|
||
- **Bun** (2022): Zig
|
||
|
||
---
|
||
|
||
# process – Prozess-Steuerung
|
||
|
||
```javascript
|
||
process.on("SIGINT", () => {
|
||
console.log("Received SIGINT. Closing server...");
|
||
server.close(() => {
|
||
console.log("Server closed.");
|
||
process.exit(0);
|
||
});
|
||
});
|
||
|
||
// Signale
|
||
process.exit(0); // Erfolgreich
|
||
process.exit(1); // Fehler
|
||
```
|
||
|
||
---
|
||
|
||
# node.js Module System
|
||
|
||
```javascript
|
||
// ES Modules (modern, "type": "module")
|
||
import express from "express";
|
||
import { port } from "./src/config/constants.js";
|
||
import { readFileSync } from "node:fs";
|
||
```
|
||
|
||
```javascript
|
||
// CommonJS (legacy)
|
||
const express = require("express");
|
||
const fs = require("fs");
|
||
```
|
||
|
||
→ Neue Projekte: ESM. Built-ins immer mit `node:`-Präfix.
|
||
|
||
---
|
||
|
||
# HTTP Request mit node-fetch
|
||
|
||
```javascript
|
||
// Node.js 18+ hat fetch eingebaut
|
||
const res = await fetch('https://api.example.com/data');
|
||
const data = await res.json();
|
||
|
||
// Ältere Versionen: node-fetch
|
||
import fetch from 'node-fetch';
|
||
```
|
||
|
||
---
|
||
|
||
# Web Server, Builder, Bundler
|
||
|
||
```bash
|
||
# Boilerplates erstellen
|
||
npm create vite@latest my-app -- --template react
|
||
npm create svelte@latest
|
||
npm create astro@latest
|
||
|
||
# nuxt
|
||
npm install nuxt
|
||
npm run dev
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
# Express – Grundlagen
|
||
|
||
```javascript
|
||
import express from 'express';
|
||
const app = express();
|
||
|
||
app.listen(port, () => {
|
||
console.log(`Server läuft auf Port ${port}`);
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# Express – Middleware
|
||
|
||
```javascript
|
||
app.use(express.json());
|
||
|
||
app.use('/api', (req, res, next) => {
|
||
console.log('Time:', Date.now());
|
||
next();
|
||
});
|
||
|
||
app.use((req, res, next) => {
|
||
console.log('Middleware 2');
|
||
next();
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# Express – CRUD Routes
|
||
|
||
```javascript
|
||
app.get('/api/:key', async (req, res) => {
|
||
const context = cache.get(req.params.key);
|
||
res.json({ context });
|
||
});
|
||
|
||
app.post('/api/:key', async (req, res) => {
|
||
const payload = req.body;
|
||
res.json({ created: cache.set(req.params.key, payload) });
|
||
});
|
||
|
||
app.put('/api/:key', async (req, res) => {
|
||
const payload = req.body;
|
||
res.json({ updated: cache.update(req.params.key, payload) });
|
||
});
|
||
|
||
app.delete('/api/:key', async (req, res) => {
|
||
cache.remove(req.params.key);
|
||
res.json({ deleted: req.params.key });
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# Express – server.listen
|
||
|
||
```javascript
|
||
const server = app.listen(port, () => {
|
||
console.log(`Server läuft auf Port ${port}`);
|
||
});
|
||
|
||
server.on('error', (err) => {
|
||
console.error('Server error:', err);
|
||
});
|
||
|
||
server.close(() => {
|
||
console.log('Server geschlossen');
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# WebSockets
|
||
|
||
```javascript
|
||
import { WebSocketServer } from 'ws';
|
||
|
||
const wss = new WebSocketServer({ port: 8080 });
|
||
|
||
wss.on('connection', (ws) => {
|
||
console.log('Client verbunden');
|
||
|
||
ws.on('message', (data) => {
|
||
console.log('Empfangen:', data.toString());
|
||
ws.send('Pong');
|
||
});
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|