98 lines
3.1 KiB
Markdown
98 lines
3.1 KiB
Markdown
# ToDo-App – Vue 3 + Vite
|
||
|
||
Unterrichtsbeispiel für **Web Development** an der FHGR.
|
||
Eine einfache ToDo-Anwendung mit Vue 3, Vite und einer REST-API.
|
||
|
||
## Projektstruktur
|
||
|
||
```
|
||
WebDev-VueJS-ToDo-Example/
|
||
├── index.html # HTML-Einstiegspunkt (enthält <div id="app">)
|
||
├── vite.config.js # Vite-Konfiguration (aktiviert Vue-Plugin)
|
||
├── package.json # Abhängigkeiten und npm-Skripte
|
||
└── src/
|
||
├── main.js # Vue-App erstellen und mounten
|
||
├── api.js # API-Schicht: alle HTTP-Aufrufe (fetch)
|
||
└── App.vue # Haupt-Komponente: State, Logik und Template
|
||
```
|
||
|
||
## Verwendete Technologien
|
||
|
||
| Technologie | Zweck |
|
||
|---|---|
|
||
| **Vue 3** | Reaktives UI-Framework |
|
||
| **Vite** | Build-Tool und Dev-Server |
|
||
| **Fetch API** | HTTP-Anfragen (nativ im Browser, kein axios nötig) |
|
||
| **CSS Custom Properties** | Design ohne externe Libraries |
|
||
|
||
## Starten
|
||
|
||
```bash
|
||
npm install # Abhängigkeiten installieren
|
||
npm run dev # Entwicklungsserver starten (http://localhost:5173)
|
||
npm run build # Produktionsbuild erstellen (→ dist/)
|
||
npm run preview # Produktionsbuild lokal testen
|
||
```
|
||
|
||
## Lernziele / Vue-Konzepte
|
||
|
||
### Reaktivität
|
||
- `ref()` – reaktiver Einzelwert
|
||
- `computed()` – abgeleiteter, gecachter Wert
|
||
- `watch()` – Reaktion auf Änderungen einer Variable
|
||
|
||
### Template-Syntax
|
||
- `{{ }}` – Textinterpolation
|
||
- `v-if` / `v-else` – bedingtes Rendern
|
||
- `v-for` + `:key` – Listen rendern
|
||
- `v-model` – Zwei-Wege-Datenbindung (Input ↔ Variable)
|
||
- `:class` – dynamische CSS-Klassen
|
||
- `@click`, `@submit.prevent` – Event-Handler
|
||
|
||
### Lifecycle
|
||
- `onMounted()` – Code nach dem ersten Rendern ausführen
|
||
- `onUnmounted()` – Aufräumen (z.B. `setInterval` stoppen)
|
||
|
||
### Architektur
|
||
- Trennung von **API-Schicht** (`api.js`) und **UI-Logik** (`App.vue`)
|
||
- Alle HTTP-Methoden: `GET`, `POST`, `PATCH`, `DELETE`
|
||
- Auto-Synchronisation im 5-Sekunden-Takt mit Datenvergleich
|
||
|
||
## Auto-Synchronisation (5 Sekunden)
|
||
|
||
Die App lädt alle 5 Sekunden die aktuell sichtbaren ToDos neu und vergleicht sie
|
||
mit der bereits gerenderten Liste.
|
||
|
||
Verglichen werden pro ToDo:
|
||
- `id` (neu/gelöscht)
|
||
- `title`, `completed`, `userId` (geändert)
|
||
|
||
Wenn Unterschiede erkannt werden, wird die Liste ersetzt und Vue aktualisiert
|
||
das DOM automatisch.
|
||
|
||
Wenn keine Unterschiede erkannt werden, bleibt der DOM unverändert.
|
||
|
||
Im UI zeigt eine Statuszeile den letzten Synchronisationszeitpunkt und das
|
||
Ergebnis des Vergleichs (neu/geändert/gelöscht oder keine Änderung).
|
||
|
||
## API
|
||
|
||
Basis-URL: `https://webdev.iten-web.ch/10003/api/`
|
||
|
||
Die API verwendet REST-Pfad-Routing (Best Practice):
|
||
|
||
```
|
||
GET /10003/api/todos → alle ToDos
|
||
GET /10003/api/todos/1 → einzelnes ToDo
|
||
POST /10003/api/todos → neues ToDo erstellen
|
||
PATCH /10003/api/todos/1 → Status aktualisieren
|
||
DELETE /10003/api/todos/1 → ToDo löschen
|
||
```
|
||
|
||
Verfügbare Filter-Parameter:
|
||
- `page`, `limit` – Pagination
|
||
- `search` – Suche im Titel
|
||
- `completed` – Filter: `true` / `false`
|
||
- `sortBy` – Sortierfeld: `id`, `title`, `completed`
|
||
- `sortDir` – Richtung: `ASC`, `DESC`
|