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

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