Giter Club home page Giter Club logo

wmc__aufgabe0302's Introduction

Aufgabe MiniFrontend mit API

Aufgabe by PUW.

Aufgabe

API

Implementiere folgende API mit express. Die Daten der API müssen nicht gespeichert werden (keine Persistierung) - nach jedem Neustart des Programms sind nur die Anfangsdaten vorhanden.

Die Grundstruktur des Programms ist schon in der Datei index.js vordefiniert.

  • GET /: lädt die Datei preview.html
  • GET /products
    • gibt alle Produkte als JSON zurück (array)
  • GET /products/<someid>
    • gibt ein Produkt als JSON zurück, wenn das Produkt gefunden wird
    • wird das Produkt nicht gefunden, so wird der Statuscode 404 mit der Nachricht 'not found' zurückgegeben
  • POST /products
    • erwartet ein POST-Request mit den Parametern: name, price
    • Fehlende oder leere Parameter sowie ein negativer Preis führen zu einem Fehler mit Statuscode 400 und der Nachricht 'parameter error'
    • passen alle Parameter, so wird das Produkt mit einer neuen ID in die Liste eingefügt und der Datensatz für das neue Produkt als JSON zurückgeliefert
  • DELETE /products/<someid>
    • wenn das Produkt gefunden wird, so wird es aus der Liste gelöscht und der Datensatz des gelöschten Produktes als JSON zurückgegeben
    • wird das Produkt nicht gefunden, so wird der Statuscode 404 mit der Nachricht 'not found' zurückgegeben

MiniFrontend

Bearbeite die Datei preview.html und ergänze folgende Funktionen.

  • Füge ein Formular hinzu, um neue Produkte anzulegen
    • Name, Preis, Absendebutton
    • Formularziel ist die Route POST /products
    • Nach dem Absenden wird wird man auf die Produkte-Seite geleitet und es wird das neue Produkt als JSON angezeigt
  • ergänze die Funktion loadData() ...
    • es werden die Produkte dynamisch von GET /products geladen
    • wenn Daten geladen wurden und Datensätze vorhanden sind, so wird die aktuelle Tabelle gelöscht und die neuen Datensätze hinzugefügt
      • siehe Tabellenstruktur im HTML-Code
      • der Preis wird in der Tabelle mit 2 Nachkommastellen und dem Eurozeichen angegeben (z.B. 10 wird zu "10.00 €")
    • sollte das Laden fehlschlagen, so wird über alert() die Fehlermeldung 'Keine Daten empfangen' ausgegeben

Setup

Abhängigkeiten installieren:

npm install

Das Programm selber kann mit folgendem Befehl gestartet werden:

# normal starten
npm run start

# mit nodemon starten
npm run dev

Zum Testen werden jest und supertest (API) sowie cypress (e2e) verwendet.

# für API-Test
npm run test:api

# für Frontend-Test (e2e mit cypress)
npm run test:e2e
npm run cypress:open # cypress öffnen (API muss gestartet sein)

# alle Tests durchlaufen
npm run test

wmc__aufgabe0302's People

Contributors

spg-puw avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.