From caf416ec32faa6961b2802193409c723d5e2b290 Mon Sep 17 00:00:00 2001 From: none Date: Fri, 12 Jun 2026 14:05:30 +0200 Subject: [PATCH] Views, api uind readme --- Dilomarkt/README.md | 71 ++++++++++++++++++++ Dilomarkt/src/App.vue | 71 ++++++++++++++++++++ Dilomarkt/src/api.js | 26 ++++++++ Dilomarkt/src/views/HomeView.vue | 94 ++++++++++++++++++++++++++ Dilomarkt/src/views/ProductView.vue | 70 ++++++++++++++++++++ Dilomarkt/src/views/ProviderView.vue | 71 ++++++++++++++++++++ Dilomarkt/src/views/SearchView.vue | 98 ++++++++++++++++++++++++++++ README.md | 71 ++++++++++++++++++++ 8 files changed, 572 insertions(+) create mode 100644 Dilomarkt/README.md create mode 100644 Dilomarkt/src/api.js create mode 100644 Dilomarkt/src/views/HomeView.vue create mode 100644 Dilomarkt/src/views/ProductView.vue create mode 100644 Dilomarkt/src/views/ProviderView.vue create mode 100644 Dilomarkt/src/views/SearchView.vue create mode 100644 README.md diff --git a/Dilomarkt/README.md b/Dilomarkt/README.md new file mode 100644 index 0000000..a2c33a2 --- /dev/null +++ b/Dilomarkt/README.md @@ -0,0 +1,71 @@ +# Dilomarkt – Digitaler Lokalmarkt + +Dilomarkt ist ein spezialisierter Marktplatz, der lokale Anbieter von Baumaterialien und Werkzeugen mit regionalen Nachfragern verbindet. Entwickelt von Studenten, adressiert die Plattform die Ineffizienzen großer, unspezialisierter Portale und stärkt lokale Wertschöpfungsketten. + +## Tech Stack + +- **Server:** PHP mit Laravel-Framework +- **Datenbank:** SQLite +- **Client:** Vue.js (HTML, CSS, JavaScript) +- **Client-Server-Kommunikation:** REST API +- **Weiteres:** Responsive Webdesign + +## Installation + +```bash +git clone https://github.com/serialexperiments0815/Dilomarkt---Digitaler-Lokalmarkt/ +``` + +### Backend (Laravel) + +```bash +cd Dilomarkt---Digitaler-Lokalmarkt/Dilomarkt/dilomarkt-api +composer install +cp .env.example .env +php artisan key:generate +php artisan migrate +php artisan db:seed +``` + +### Frontend (Vue) + +```bash +cd Dilomarkt---Digitaler-Lokalmarkt/Dilomarkt +npm install +``` + +## Verwendung + +**Terminal 1 – Backend starten:** +```bash +cd dilomarkt-api +php artisan serve +``` +API läuft auf `http://localhost:8000` + +**Terminal 2 – Frontend starten:** +```bash +cd Dilomarkt +npm run dev +``` +App läuft auf `http://localhost:5173` + +## API Endpunkte + +| Method | Endpunkt | Beschreibung | +|--------|----------|--------------| +| GET | `/api/products` | Produkte mit Geo-Filter (PLZ, Radius, Kategorie) | +| GET | `/api/products/{id}` | Einzelprodukt mit Preisvergleich | +| GET | `/api/providers` | Alle Anbieter | +| GET | `/api/providers/{id}` | Anbieterprofil mit Statistiken | + +### Query Parameter für `/api/products` + +| Parameter | Beispiel | Beschreibung | +|-----------|----------|--------------| +| `plz` | `42103` | Standort (NRW) | +| `radius` | `20` | Umkreis in km | +| `q` | `Klinker` | Suchbegriff | +| `category` | `Werkzeug` | Kategorie | +| `max_price` | `100` | Maximaler Preis | +| `type` | `Fachhandel` | Anbietertyp | diff --git a/Dilomarkt/src/App.vue b/Dilomarkt/src/App.vue index 5247343..4af688d 100644 --- a/Dilomarkt/src/App.vue +++ b/Dilomarkt/src/App.vue @@ -7,3 +7,74 @@ + + + + diff --git a/Dilomarkt/src/api.js b/Dilomarkt/src/api.js new file mode 100644 index 0000000..eade735 --- /dev/null +++ b/Dilomarkt/src/api.js @@ -0,0 +1,26 @@ +const BASE = 'http://localhost:8000/api' + +export async function fetchProducts(params = {}) { + const q = new URLSearchParams(params).toString() + const res = await fetch(`${BASE}/products?${q}`) + if (!res.ok) throw new Error('Fehler beim Laden der Produkte') + return res.json() +} + +export async function fetchProduct(id) { + const res = await fetch(`${BASE}/products/${id}`) + if (!res.ok) throw new Error('Produkt nicht gefunden') + return res.json() +} + +export async function fetchProviders() { + const res = await fetch(`${BASE}/providers`) + if (!res.ok) throw new Error('Fehler beim Laden der Anbieter') + return res.json() +} + +export async function fetchProvider(id) { + const res = await fetch(`${BASE}/providers/${id}`) + if (!res.ok) throw new Error('Anbieter nicht gefunden') + return res.json() +} diff --git a/Dilomarkt/src/views/HomeView.vue b/Dilomarkt/src/views/HomeView.vue new file mode 100644 index 0000000..b7b330a --- /dev/null +++ b/Dilomarkt/src/views/HomeView.vue @@ -0,0 +1,94 @@ + + + diff --git a/Dilomarkt/src/views/ProductView.vue b/Dilomarkt/src/views/ProductView.vue new file mode 100644 index 0000000..6ad2382 --- /dev/null +++ b/Dilomarkt/src/views/ProductView.vue @@ -0,0 +1,70 @@ + + + diff --git a/Dilomarkt/src/views/ProviderView.vue b/Dilomarkt/src/views/ProviderView.vue new file mode 100644 index 0000000..9e2c543 --- /dev/null +++ b/Dilomarkt/src/views/ProviderView.vue @@ -0,0 +1,71 @@ + + + diff --git a/Dilomarkt/src/views/SearchView.vue b/Dilomarkt/src/views/SearchView.vue new file mode 100644 index 0000000..7c86dd2 --- /dev/null +++ b/Dilomarkt/src/views/SearchView.vue @@ -0,0 +1,98 @@ + + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..a2c33a2 --- /dev/null +++ b/README.md @@ -0,0 +1,71 @@ +# Dilomarkt – Digitaler Lokalmarkt + +Dilomarkt ist ein spezialisierter Marktplatz, der lokale Anbieter von Baumaterialien und Werkzeugen mit regionalen Nachfragern verbindet. Entwickelt von Studenten, adressiert die Plattform die Ineffizienzen großer, unspezialisierter Portale und stärkt lokale Wertschöpfungsketten. + +## Tech Stack + +- **Server:** PHP mit Laravel-Framework +- **Datenbank:** SQLite +- **Client:** Vue.js (HTML, CSS, JavaScript) +- **Client-Server-Kommunikation:** REST API +- **Weiteres:** Responsive Webdesign + +## Installation + +```bash +git clone https://github.com/serialexperiments0815/Dilomarkt---Digitaler-Lokalmarkt/ +``` + +### Backend (Laravel) + +```bash +cd Dilomarkt---Digitaler-Lokalmarkt/Dilomarkt/dilomarkt-api +composer install +cp .env.example .env +php artisan key:generate +php artisan migrate +php artisan db:seed +``` + +### Frontend (Vue) + +```bash +cd Dilomarkt---Digitaler-Lokalmarkt/Dilomarkt +npm install +``` + +## Verwendung + +**Terminal 1 – Backend starten:** +```bash +cd dilomarkt-api +php artisan serve +``` +API läuft auf `http://localhost:8000` + +**Terminal 2 – Frontend starten:** +```bash +cd Dilomarkt +npm run dev +``` +App läuft auf `http://localhost:5173` + +## API Endpunkte + +| Method | Endpunkt | Beschreibung | +|--------|----------|--------------| +| GET | `/api/products` | Produkte mit Geo-Filter (PLZ, Radius, Kategorie) | +| GET | `/api/products/{id}` | Einzelprodukt mit Preisvergleich | +| GET | `/api/providers` | Alle Anbieter | +| GET | `/api/providers/{id}` | Anbieterprofil mit Statistiken | + +### Query Parameter für `/api/products` + +| Parameter | Beispiel | Beschreibung | +|-----------|----------|--------------| +| `plz` | `42103` | Standort (NRW) | +| `radius` | `20` | Umkreis in km | +| `q` | `Klinker` | Suchbegriff | +| `category` | `Werkzeug` | Kategorie | +| `max_price` | `100` | Maximaler Preis | +| `type` | `Fachhandel` | Anbietertyp |